diff --git a/src/data/bucket.js b/src/data/bucket.js
index 33fb1bb1b65..986a025d5db 100644
--- a/src/data/bucket.js
+++ b/src/data/bucket.js
@@ -70,7 +70,7 @@ export interface Bucket {
     hasPattern: boolean;
     +layers: Array<any>;
     +stateDependentLayers: Array<any>;
-
+    +stateDependentLayerIds: Array<string>;
     populate(features: Array<IndexedFeature>, options: PopulateParameters): void;
     update(states: FeatureStates, vtLayer: VectorTileLayer, imagePositions: {[string]: ImagePosition}): void;
     isEmpty(): boolean;
@@ -107,7 +107,9 @@ export function deserialize(input: Array<Bucket>, style: Style): {[string]: Buck
         // look up StyleLayer objects from layer ids (since we don't
         // want to waste time serializing/copying them from the worker)
         (bucket: any).layers = layers;
-        (bucket: any).stateDependentLayers = layers.filter((l) => l.isStateDependent());
+        if ((bucket: any).stateDependentLayerIds) {
+            (bucket: any).stateDependentLayers = (bucket: any).stateDependentLayerIds.map((lId) => layers.find((l) => l.id === lId));
+        }
         for (const layer of layers) {
             output[layer.id] = bucket;
         }
diff --git a/src/data/bucket/circle_bucket.js b/src/data/bucket/circle_bucket.js
index 107d8161539..8dd3f5e2109 100644
--- a/src/data/bucket/circle_bucket.js
+++ b/src/data/bucket/circle_bucket.js
@@ -48,6 +48,7 @@ class CircleBucket<Layer: CircleStyleLayer | HeatmapStyleLayer> implements Bucke
     layerIds: Array<string>;
     layers: Array<Layer>;
     stateDependentLayers: Array<Layer>;
+    stateDependentLayerIds: Array<string>;
 
     layoutVertexArray: CircleLayoutArray;
     layoutVertexBuffer: VertexBuffer;
@@ -72,6 +73,8 @@ class CircleBucket<Layer: CircleStyleLayer | HeatmapStyleLayer> implements Bucke
         this.indexArray = new TriangleIndexArray();
         this.segments = new SegmentVector();
         this.programConfigurations = new ProgramConfigurationSet(layoutAttributes, options.layers, options.zoom);
+        this.stateDependentLayerIds = this.layers.filter((l) => l.isStateDependent()).map((l) => l.id);
+
     }
 
     populate(features: Array<IndexedFeature>, options: PopulateParameters) {
diff --git a/src/data/bucket/fill_bucket.js b/src/data/bucket/fill_bucket.js
index fa194648863..417e382105c 100644
--- a/src/data/bucket/fill_bucket.js
+++ b/src/data/bucket/fill_bucket.js
@@ -37,6 +37,7 @@ class FillBucket implements Bucket {
     layers: Array<FillStyleLayer>;
     layerIds: Array<string>;
     stateDependentLayers: Array<FillStyleLayer>;
+    stateDependentLayerIds: Array<string>;
 
     layoutVertexArray: FillLayoutArray;
     layoutVertexBuffer: VertexBuffer;
@@ -68,6 +69,8 @@ class FillBucket implements Bucket {
         this.programConfigurations = new ProgramConfigurationSet(layoutAttributes, options.layers, options.zoom);
         this.segments = new SegmentVector();
         this.segments2 = new SegmentVector();
+        this.stateDependentLayerIds = this.layers.filter((l) => l.isStateDependent()).map((l) => l.id);
+
     }
 
     populate(features: Array<IndexedFeature>, options: PopulateParameters) {
diff --git a/src/data/bucket/fill_extrusion_bucket.js b/src/data/bucket/fill_extrusion_bucket.js
index 37c71761571..9299e3428c8 100644
--- a/src/data/bucket/fill_extrusion_bucket.js
+++ b/src/data/bucket/fill_extrusion_bucket.js
@@ -57,6 +57,7 @@ class FillExtrusionBucket implements Bucket {
     layers: Array<FillExtrusionStyleLayer>;
     layerIds: Array<string>;
     stateDependentLayers: Array<FillExtrusionStyleLayer>;
+    stateDependentLayerIds: Array<string>;
 
     layoutVertexArray: FillExtrusionLayoutArray;
     layoutVertexBuffer: VertexBuffer;
@@ -82,6 +83,8 @@ class FillExtrusionBucket implements Bucket {
         this.indexArray = new TriangleIndexArray();
         this.programConfigurations = new ProgramConfigurationSet(layoutAttributes, options.layers, options.zoom);
         this.segments = new SegmentVector();
+        this.stateDependentLayerIds = this.layers.filter((l) => l.isStateDependent()).map((l) => l.id);
+
     }
 
     populate(features: Array<IndexedFeature>, options: PopulateParameters) {
diff --git a/src/data/bucket/line_bucket.js b/src/data/bucket/line_bucket.js
index 6b4e93b7947..fc5bede7782 100644
--- a/src/data/bucket/line_bucket.js
+++ b/src/data/bucket/line_bucket.js
@@ -99,6 +99,7 @@ class LineBucket implements Bucket {
     layers: Array<LineStyleLayer>;
     layerIds: Array<string>;
     stateDependentLayers: Array<any>;
+    stateDependentLayerIds: Array<string>;
     features: Array<BucketFeature>;
 
     layoutVertexArray: LineLayoutArray;
@@ -125,6 +126,8 @@ class LineBucket implements Bucket {
         this.indexArray = new TriangleIndexArray();
         this.programConfigurations = new ProgramConfigurationSet(layoutAttributes, options.layers, options.zoom);
         this.segments = new SegmentVector();
+
+        this.stateDependentLayerIds = this.layers.filter((l) => l.isStateDependent()).map((l) => l.id);
     }
 
     populate(features: Array<IndexedFeature>, options: PopulateParameters) {
diff --git a/src/data/bucket/symbol_bucket.js b/src/data/bucket/symbol_bucket.js
index 420703acf9c..311123af722 100644
--- a/src/data/bucket/symbol_bucket.js
+++ b/src/data/bucket/symbol_bucket.js
@@ -243,6 +243,8 @@ class SymbolBucket implements Bucket {
     layers: Array<SymbolStyleLayer>;
     layerIds: Array<string>;
     stateDependentLayers: Array<SymbolStyleLayer>;
+    stateDependentLayerIds: Array<string>;
+
     index: number;
     sdfIcons: boolean;
     iconsNeedLinear: boolean;
@@ -300,6 +302,8 @@ class SymbolBucket implements Bucket {
         this.sortFeaturesByY = zOrderByViewportY && (layout.get('text-allow-overlap') || layout.get('icon-allow-overlap') ||
             layout.get('text-ignore-placement') || layout.get('icon-ignore-placement'));
 
+        this.stateDependentLayerIds = this.layers.filter((l) => l.isStateDependent()).map((l) => l.id);
+
         this.sourceID = options.sourceID;
     }