@react-three/fiber 8.0.5 → 8.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @react-three/fiber
2
2
 
3
+ ## 8.0.6
4
+
5
+ ### Patch Changes
6
+
7
+ - d4bafb9: fix re-parenting, useframe not working properly in portals, attach crash
8
+
3
9
  ## 8.0.5
4
10
 
5
11
  ### Patch Changes
@@ -9,6 +9,7 @@ export interface Intersection extends THREE.Intersection {
9
9
  export declare type Subscription = {
10
10
  ref: React.MutableRefObject<RenderCallback>;
11
11
  priority: number;
12
+ store: UseBoundStore<RootState, StoreApi<RootState>>;
12
13
  };
13
14
  export declare type Dpr = number | [min: number, max: number];
14
15
  export declare type Size = {
@@ -47,7 +48,7 @@ export declare type InternalState = {
47
48
  capturedMap: Map<number, Map<THREE.Object3D, PointerCaptureTarget>>;
48
49
  initialClick: [x: number, y: number];
49
50
  initialHits: THREE.Object3D[];
50
- subscribe: (callback: React.MutableRefObject<RenderCallback>, priority?: number) => () => void;
51
+ subscribe: (callback: React.MutableRefObject<RenderCallback>, priority: number, store: UseBoundStore<RootState, StoreApi<RootState>>) => () => void;
51
52
  };
52
53
  export declare type RootState = {
53
54
  set: SetState<RootState>;
@@ -860,8 +860,10 @@ function createRenderer(roots, getEventPriority) {
860
860
  let added = false;
861
861
 
862
862
  if (child) {
863
+ var _child$__r3f, _parentInstance$__r3f;
864
+
863
865
  // The attach attribute implies that the object attaches itself on the parent
864
- if (child.__r3f.attach) {
866
+ if ((_child$__r3f = child.__r3f) != null && _child$__r3f.attach) {
865
867
  attach(parentInstance, child, child.__r3f.attach);
866
868
  } else if (child.isObject3D && parentInstance.isObject3D) {
867
869
  // add in the usual parent-child way
@@ -871,7 +873,7 @@ function createRenderer(roots, getEventPriority) {
871
873
  // that is, anything that's a child in React but not a child in the scenegraph.
872
874
 
873
875
 
874
- if (!added) parentInstance.__r3f.objects.push(child);
876
+ if (!added) (_parentInstance$__r3f = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f.objects.push(child);
875
877
  if (!child.__r3f) prepare(child, {});
876
878
  child.__r3f.parent = parentInstance;
877
879
  updateInstance(child);
@@ -883,7 +885,9 @@ function createRenderer(roots, getEventPriority) {
883
885
  let added = false;
884
886
 
885
887
  if (child) {
886
- if (child.__r3f.attach) {
888
+ var _child$__r3f2, _parentInstance$__r3f2;
889
+
890
+ if ((_child$__r3f2 = child.__r3f) != null && _child$__r3f2.attach) {
887
891
  attach(parentInstance, child, child.__r3f.attach);
888
892
  } else if (child.isObject3D && parentInstance.isObject3D) {
889
893
  child.parent = parentInstance;
@@ -896,7 +900,7 @@ function createRenderer(roots, getEventPriority) {
896
900
  added = true;
897
901
  }
898
902
 
899
- if (!added) parentInstance.__r3f.objects.push(child);
903
+ if (!added) (_parentInstance$__r3f2 = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f2.objects.push(child);
900
904
  if (!child.__r3f) prepare(child, {});
901
905
  child.__r3f.parent = parentInstance;
902
906
  updateInstance(child);
@@ -910,21 +914,21 @@ function createRenderer(roots, getEventPriority) {
910
914
 
911
915
  function removeChild(parentInstance, child, dispose) {
912
916
  if (child) {
913
- var _parentInstance$__r3f, _child$__r3f2;
917
+ var _parentInstance$__r3f3, _child$__r3f3, _child$__r3f5;
914
918
 
915
919
  // Clear the parent reference
916
920
  if (child.__r3f) child.__r3f.parent = null; // Remove child from the parents objects
917
921
 
918
- if ((_parentInstance$__r3f = parentInstance.__r3f) != null && _parentInstance$__r3f.objects) parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child); // Remove attachment
922
+ if ((_parentInstance$__r3f3 = parentInstance.__r3f) != null && _parentInstance$__r3f3.objects) parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child); // Remove attachment
919
923
 
920
- if (child.__r3f.attach) {
924
+ if ((_child$__r3f3 = child.__r3f) != null && _child$__r3f3.attach) {
921
925
  detach(parentInstance, child, child.__r3f.attach);
922
926
  } else if (child.isObject3D && parentInstance.isObject3D) {
923
- var _child$__r3f;
927
+ var _child$__r3f4;
924
928
 
925
929
  parentInstance.remove(child); // Remove interactivity
926
930
 
927
- if ((_child$__r3f = child.__r3f) != null && _child$__r3f.root) {
931
+ if ((_child$__r3f4 = child.__r3f) != null && _child$__r3f4.root) {
928
932
  removeInteractivity(child.__r3f.root, child);
929
933
  }
930
934
  } // Allow objects to bail out of recursive dispose alltogether by passing dispose={null}
@@ -938,14 +942,14 @@ function createRenderer(roots, getEventPriority) {
938
942
  // when the reconciler calls it, but then carry our own check recursively
939
943
 
940
944
 
941
- const isPrimitive = (_child$__r3f2 = child.__r3f) == null ? void 0 : _child$__r3f2.primitive;
945
+ const isPrimitive = (_child$__r3f5 = child.__r3f) == null ? void 0 : _child$__r3f5.primitive;
942
946
  const shouldDispose = dispose === undefined ? child.dispose !== null && !isPrimitive : dispose; // Remove nested child objects. Primitives should not have objects and children that are
943
947
  // attached to them declaratively ...
944
948
 
945
949
  if (!isPrimitive) {
946
- var _child$__r3f3;
950
+ var _child$__r3f6;
947
951
 
948
- removeRecursive((_child$__r3f3 = child.__r3f) == null ? void 0 : _child$__r3f3.objects, child, shouldDispose);
952
+ removeRecursive((_child$__r3f6 = child.__r3f) == null ? void 0 : _child$__r3f6.objects, child, shouldDispose);
949
953
  removeRecursive(child.children, child, shouldDispose);
950
954
  } // Remove references
951
955
 
@@ -1303,7 +1307,7 @@ const createStore = (invalidate, advance) => {
1303
1307
  initialClick: [0, 0],
1304
1308
  initialHits: [],
1305
1309
  capturedMap: new Map(),
1306
- subscribe: (ref, priority = 0) => {
1310
+ subscribe: (ref, priority, store) => {
1307
1311
  set(({
1308
1312
  internal
1309
1313
  }) => ({
@@ -1317,7 +1321,8 @@ const createStore = (invalidate, advance) => {
1317
1321
  // highest priority renders last (on top of the other frames)
1318
1322
  subscribers: [...internal.subscribers, {
1319
1323
  ref,
1320
- priority
1324
+ priority,
1325
+ store
1321
1326
  }].sort((a, b) => a.priority - b.priority)
1322
1327
  }
1323
1328
  }));
@@ -1400,6 +1405,7 @@ function run(effects, timestamp) {
1400
1405
  }
1401
1406
 
1402
1407
  let subscribers;
1408
+ let subscription;
1403
1409
 
1404
1410
  function render$1(timestamp, state, frame) {
1405
1411
  // Run local effects
@@ -1414,7 +1420,10 @@ function render$1(timestamp, state, frame) {
1414
1420
 
1415
1421
  subscribers = state.internal.subscribers;
1416
1422
 
1417
- for (i = 0; i < subscribers.length; i++) subscribers[i].ref.current(state, delta, frame); // Render content
1423
+ for (i = 0; i < subscribers.length; i++) {
1424
+ subscription = subscribers[i];
1425
+ subscription.ref.current(subscription.store.getState(), delta, frame);
1426
+ } // Render content
1418
1427
 
1419
1428
 
1420
1429
  if (!state.internal.priority && state.gl.render) state.gl.render(state.scene, state.camera); // Decrease frame count
@@ -1493,12 +1502,13 @@ function useThree(selector = state => state, equalityFn) {
1493
1502
  return useStore()(selector, equalityFn);
1494
1503
  }
1495
1504
  function useFrame(callback, renderPriority = 0) {
1496
- const subscribe = useStore().getState().internal.subscribe; // Update ref
1505
+ const store = useStore();
1506
+ const subscribe = store.getState().internal.subscribe; // Update ref
1497
1507
 
1498
1508
  const ref = React__namespace.useRef(callback);
1499
1509
  React__namespace.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe on mount, unsubscribe on unmount
1500
1510
 
1501
- React__namespace.useLayoutEffect(() => subscribe(ref, renderPriority), [renderPriority, subscribe]);
1511
+ React__namespace.useLayoutEffect(() => subscribe(ref, renderPriority, store), [renderPriority, subscribe, store]);
1502
1512
  return null;
1503
1513
  }
1504
1514
  function useGraph(object) {
@@ -1833,6 +1843,7 @@ function unmountComponentAtNode(canvas, callback) {
1833
1843
 
1834
1844
  function createPortal(children, container, state) {
1835
1845
  return /*#__PURE__*/React__namespace.createElement(Portal, {
1846
+ key: container.uuid,
1836
1847
  children: children,
1837
1848
  container: container,
1838
1849
  state: state
@@ -860,8 +860,10 @@ function createRenderer(roots, getEventPriority) {
860
860
  let added = false;
861
861
 
862
862
  if (child) {
863
+ var _child$__r3f, _parentInstance$__r3f;
864
+
863
865
  // The attach attribute implies that the object attaches itself on the parent
864
- if (child.__r3f.attach) {
866
+ if ((_child$__r3f = child.__r3f) != null && _child$__r3f.attach) {
865
867
  attach(parentInstance, child, child.__r3f.attach);
866
868
  } else if (child.isObject3D && parentInstance.isObject3D) {
867
869
  // add in the usual parent-child way
@@ -871,7 +873,7 @@ function createRenderer(roots, getEventPriority) {
871
873
  // that is, anything that's a child in React but not a child in the scenegraph.
872
874
 
873
875
 
874
- if (!added) parentInstance.__r3f.objects.push(child);
876
+ if (!added) (_parentInstance$__r3f = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f.objects.push(child);
875
877
  if (!child.__r3f) prepare(child, {});
876
878
  child.__r3f.parent = parentInstance;
877
879
  updateInstance(child);
@@ -883,7 +885,9 @@ function createRenderer(roots, getEventPriority) {
883
885
  let added = false;
884
886
 
885
887
  if (child) {
886
- if (child.__r3f.attach) {
888
+ var _child$__r3f2, _parentInstance$__r3f2;
889
+
890
+ if ((_child$__r3f2 = child.__r3f) != null && _child$__r3f2.attach) {
887
891
  attach(parentInstance, child, child.__r3f.attach);
888
892
  } else if (child.isObject3D && parentInstance.isObject3D) {
889
893
  child.parent = parentInstance;
@@ -896,7 +900,7 @@ function createRenderer(roots, getEventPriority) {
896
900
  added = true;
897
901
  }
898
902
 
899
- if (!added) parentInstance.__r3f.objects.push(child);
903
+ if (!added) (_parentInstance$__r3f2 = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f2.objects.push(child);
900
904
  if (!child.__r3f) prepare(child, {});
901
905
  child.__r3f.parent = parentInstance;
902
906
  updateInstance(child);
@@ -910,21 +914,21 @@ function createRenderer(roots, getEventPriority) {
910
914
 
911
915
  function removeChild(parentInstance, child, dispose) {
912
916
  if (child) {
913
- var _parentInstance$__r3f, _child$__r3f2;
917
+ var _parentInstance$__r3f3, _child$__r3f3, _child$__r3f5;
914
918
 
915
919
  // Clear the parent reference
916
920
  if (child.__r3f) child.__r3f.parent = null; // Remove child from the parents objects
917
921
 
918
- if ((_parentInstance$__r3f = parentInstance.__r3f) != null && _parentInstance$__r3f.objects) parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child); // Remove attachment
922
+ if ((_parentInstance$__r3f3 = parentInstance.__r3f) != null && _parentInstance$__r3f3.objects) parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child); // Remove attachment
919
923
 
920
- if (child.__r3f.attach) {
924
+ if ((_child$__r3f3 = child.__r3f) != null && _child$__r3f3.attach) {
921
925
  detach(parentInstance, child, child.__r3f.attach);
922
926
  } else if (child.isObject3D && parentInstance.isObject3D) {
923
- var _child$__r3f;
927
+ var _child$__r3f4;
924
928
 
925
929
  parentInstance.remove(child); // Remove interactivity
926
930
 
927
- if ((_child$__r3f = child.__r3f) != null && _child$__r3f.root) {
931
+ if ((_child$__r3f4 = child.__r3f) != null && _child$__r3f4.root) {
928
932
  removeInteractivity(child.__r3f.root, child);
929
933
  }
930
934
  } // Allow objects to bail out of recursive dispose alltogether by passing dispose={null}
@@ -938,14 +942,14 @@ function createRenderer(roots, getEventPriority) {
938
942
  // when the reconciler calls it, but then carry our own check recursively
939
943
 
940
944
 
941
- const isPrimitive = (_child$__r3f2 = child.__r3f) == null ? void 0 : _child$__r3f2.primitive;
945
+ const isPrimitive = (_child$__r3f5 = child.__r3f) == null ? void 0 : _child$__r3f5.primitive;
942
946
  const shouldDispose = dispose === undefined ? child.dispose !== null && !isPrimitive : dispose; // Remove nested child objects. Primitives should not have objects and children that are
943
947
  // attached to them declaratively ...
944
948
 
945
949
  if (!isPrimitive) {
946
- var _child$__r3f3;
950
+ var _child$__r3f6;
947
951
 
948
- removeRecursive((_child$__r3f3 = child.__r3f) == null ? void 0 : _child$__r3f3.objects, child, shouldDispose);
952
+ removeRecursive((_child$__r3f6 = child.__r3f) == null ? void 0 : _child$__r3f6.objects, child, shouldDispose);
949
953
  removeRecursive(child.children, child, shouldDispose);
950
954
  } // Remove references
951
955
 
@@ -1303,7 +1307,7 @@ const createStore = (invalidate, advance) => {
1303
1307
  initialClick: [0, 0],
1304
1308
  initialHits: [],
1305
1309
  capturedMap: new Map(),
1306
- subscribe: (ref, priority = 0) => {
1310
+ subscribe: (ref, priority, store) => {
1307
1311
  set(({
1308
1312
  internal
1309
1313
  }) => ({
@@ -1317,7 +1321,8 @@ const createStore = (invalidate, advance) => {
1317
1321
  // highest priority renders last (on top of the other frames)
1318
1322
  subscribers: [...internal.subscribers, {
1319
1323
  ref,
1320
- priority
1324
+ priority,
1325
+ store
1321
1326
  }].sort((a, b) => a.priority - b.priority)
1322
1327
  }
1323
1328
  }));
@@ -1400,6 +1405,7 @@ function run(effects, timestamp) {
1400
1405
  }
1401
1406
 
1402
1407
  let subscribers;
1408
+ let subscription;
1403
1409
 
1404
1410
  function render$1(timestamp, state, frame) {
1405
1411
  // Run local effects
@@ -1414,7 +1420,10 @@ function render$1(timestamp, state, frame) {
1414
1420
 
1415
1421
  subscribers = state.internal.subscribers;
1416
1422
 
1417
- for (i = 0; i < subscribers.length; i++) subscribers[i].ref.current(state, delta, frame); // Render content
1423
+ for (i = 0; i < subscribers.length; i++) {
1424
+ subscription = subscribers[i];
1425
+ subscription.ref.current(subscription.store.getState(), delta, frame);
1426
+ } // Render content
1418
1427
 
1419
1428
 
1420
1429
  if (!state.internal.priority && state.gl.render) state.gl.render(state.scene, state.camera); // Decrease frame count
@@ -1493,12 +1502,13 @@ function useThree(selector = state => state, equalityFn) {
1493
1502
  return useStore()(selector, equalityFn);
1494
1503
  }
1495
1504
  function useFrame(callback, renderPriority = 0) {
1496
- const subscribe = useStore().getState().internal.subscribe; // Update ref
1505
+ const store = useStore();
1506
+ const subscribe = store.getState().internal.subscribe; // Update ref
1497
1507
 
1498
1508
  const ref = React__namespace.useRef(callback);
1499
1509
  React__namespace.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe on mount, unsubscribe on unmount
1500
1510
 
1501
- React__namespace.useLayoutEffect(() => subscribe(ref, renderPriority), [renderPriority, subscribe]);
1511
+ React__namespace.useLayoutEffect(() => subscribe(ref, renderPriority, store), [renderPriority, subscribe, store]);
1502
1512
  return null;
1503
1513
  }
1504
1514
  function useGraph(object) {
@@ -1833,6 +1843,7 @@ function unmountComponentAtNode(canvas, callback) {
1833
1843
 
1834
1844
  function createPortal(children, container, state) {
1835
1845
  return /*#__PURE__*/React__namespace.createElement(Portal, {
1846
+ key: container.uuid,
1836
1847
  children: children,
1837
1848
  container: container,
1838
1849
  state: state
@@ -831,8 +831,10 @@ function createRenderer(roots, getEventPriority) {
831
831
  let added = false;
832
832
 
833
833
  if (child) {
834
+ var _child$__r3f, _parentInstance$__r3f;
835
+
834
836
  // The attach attribute implies that the object attaches itself on the parent
835
- if (child.__r3f.attach) {
837
+ if ((_child$__r3f = child.__r3f) != null && _child$__r3f.attach) {
836
838
  attach(parentInstance, child, child.__r3f.attach);
837
839
  } else if (child.isObject3D && parentInstance.isObject3D) {
838
840
  // add in the usual parent-child way
@@ -842,7 +844,7 @@ function createRenderer(roots, getEventPriority) {
842
844
  // that is, anything that's a child in React but not a child in the scenegraph.
843
845
 
844
846
 
845
- if (!added) parentInstance.__r3f.objects.push(child);
847
+ if (!added) (_parentInstance$__r3f = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f.objects.push(child);
846
848
  if (!child.__r3f) prepare(child, {});
847
849
  child.__r3f.parent = parentInstance;
848
850
  updateInstance(child);
@@ -854,7 +856,9 @@ function createRenderer(roots, getEventPriority) {
854
856
  let added = false;
855
857
 
856
858
  if (child) {
857
- if (child.__r3f.attach) {
859
+ var _child$__r3f2, _parentInstance$__r3f2;
860
+
861
+ if ((_child$__r3f2 = child.__r3f) != null && _child$__r3f2.attach) {
858
862
  attach(parentInstance, child, child.__r3f.attach);
859
863
  } else if (child.isObject3D && parentInstance.isObject3D) {
860
864
  child.parent = parentInstance;
@@ -867,7 +871,7 @@ function createRenderer(roots, getEventPriority) {
867
871
  added = true;
868
872
  }
869
873
 
870
- if (!added) parentInstance.__r3f.objects.push(child);
874
+ if (!added) (_parentInstance$__r3f2 = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f2.objects.push(child);
871
875
  if (!child.__r3f) prepare(child, {});
872
876
  child.__r3f.parent = parentInstance;
873
877
  updateInstance(child);
@@ -881,21 +885,21 @@ function createRenderer(roots, getEventPriority) {
881
885
 
882
886
  function removeChild(parentInstance, child, dispose) {
883
887
  if (child) {
884
- var _parentInstance$__r3f, _child$__r3f2;
888
+ var _parentInstance$__r3f3, _child$__r3f3, _child$__r3f5;
885
889
 
886
890
  // Clear the parent reference
887
891
  if (child.__r3f) child.__r3f.parent = null; // Remove child from the parents objects
888
892
 
889
- if ((_parentInstance$__r3f = parentInstance.__r3f) != null && _parentInstance$__r3f.objects) parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child); // Remove attachment
893
+ if ((_parentInstance$__r3f3 = parentInstance.__r3f) != null && _parentInstance$__r3f3.objects) parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child); // Remove attachment
890
894
 
891
- if (child.__r3f.attach) {
895
+ if ((_child$__r3f3 = child.__r3f) != null && _child$__r3f3.attach) {
892
896
  detach(parentInstance, child, child.__r3f.attach);
893
897
  } else if (child.isObject3D && parentInstance.isObject3D) {
894
- var _child$__r3f;
898
+ var _child$__r3f4;
895
899
 
896
900
  parentInstance.remove(child); // Remove interactivity
897
901
 
898
- if ((_child$__r3f = child.__r3f) != null && _child$__r3f.root) {
902
+ if ((_child$__r3f4 = child.__r3f) != null && _child$__r3f4.root) {
899
903
  removeInteractivity(child.__r3f.root, child);
900
904
  }
901
905
  } // Allow objects to bail out of recursive dispose alltogether by passing dispose={null}
@@ -909,14 +913,14 @@ function createRenderer(roots, getEventPriority) {
909
913
  // when the reconciler calls it, but then carry our own check recursively
910
914
 
911
915
 
912
- const isPrimitive = (_child$__r3f2 = child.__r3f) == null ? void 0 : _child$__r3f2.primitive;
916
+ const isPrimitive = (_child$__r3f5 = child.__r3f) == null ? void 0 : _child$__r3f5.primitive;
913
917
  const shouldDispose = dispose === undefined ? child.dispose !== null && !isPrimitive : dispose; // Remove nested child objects. Primitives should not have objects and children that are
914
918
  // attached to them declaratively ...
915
919
 
916
920
  if (!isPrimitive) {
917
- var _child$__r3f3;
921
+ var _child$__r3f6;
918
922
 
919
- removeRecursive((_child$__r3f3 = child.__r3f) == null ? void 0 : _child$__r3f3.objects, child, shouldDispose);
923
+ removeRecursive((_child$__r3f6 = child.__r3f) == null ? void 0 : _child$__r3f6.objects, child, shouldDispose);
920
924
  removeRecursive(child.children, child, shouldDispose);
921
925
  } // Remove references
922
926
 
@@ -1274,7 +1278,7 @@ const createStore = (invalidate, advance) => {
1274
1278
  initialClick: [0, 0],
1275
1279
  initialHits: [],
1276
1280
  capturedMap: new Map(),
1277
- subscribe: (ref, priority = 0) => {
1281
+ subscribe: (ref, priority, store) => {
1278
1282
  set(({
1279
1283
  internal
1280
1284
  }) => ({
@@ -1288,7 +1292,8 @@ const createStore = (invalidate, advance) => {
1288
1292
  // highest priority renders last (on top of the other frames)
1289
1293
  subscribers: [...internal.subscribers, {
1290
1294
  ref,
1291
- priority
1295
+ priority,
1296
+ store
1292
1297
  }].sort((a, b) => a.priority - b.priority)
1293
1298
  }
1294
1299
  }));
@@ -1371,6 +1376,7 @@ function run(effects, timestamp) {
1371
1376
  }
1372
1377
 
1373
1378
  let subscribers;
1379
+ let subscription;
1374
1380
 
1375
1381
  function render$1(timestamp, state, frame) {
1376
1382
  // Run local effects
@@ -1385,7 +1391,10 @@ function render$1(timestamp, state, frame) {
1385
1391
 
1386
1392
  subscribers = state.internal.subscribers;
1387
1393
 
1388
- for (i = 0; i < subscribers.length; i++) subscribers[i].ref.current(state, delta, frame); // Render content
1394
+ for (i = 0; i < subscribers.length; i++) {
1395
+ subscription = subscribers[i];
1396
+ subscription.ref.current(subscription.store.getState(), delta, frame);
1397
+ } // Render content
1389
1398
 
1390
1399
 
1391
1400
  if (!state.internal.priority && state.gl.render) state.gl.render(state.scene, state.camera); // Decrease frame count
@@ -1464,12 +1473,13 @@ function useThree(selector = state => state, equalityFn) {
1464
1473
  return useStore()(selector, equalityFn);
1465
1474
  }
1466
1475
  function useFrame(callback, renderPriority = 0) {
1467
- const subscribe = useStore().getState().internal.subscribe; // Update ref
1476
+ const store = useStore();
1477
+ const subscribe = store.getState().internal.subscribe; // Update ref
1468
1478
 
1469
1479
  const ref = React.useRef(callback);
1470
1480
  React.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe on mount, unsubscribe on unmount
1471
1481
 
1472
- React.useLayoutEffect(() => subscribe(ref, renderPriority), [renderPriority, subscribe]);
1482
+ React.useLayoutEffect(() => subscribe(ref, renderPriority, store), [renderPriority, subscribe, store]);
1473
1483
  return null;
1474
1484
  }
1475
1485
  function useGraph(object) {
@@ -1804,6 +1814,7 @@ function unmountComponentAtNode(canvas, callback) {
1804
1814
 
1805
1815
  function createPortal(children, container, state) {
1806
1816
  return /*#__PURE__*/React.createElement(Portal, {
1817
+ key: container.uuid,
1807
1818
  children: children,
1808
1819
  container: container,
1809
1820
  state: state
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var index = require('./index-28a77253.cjs.dev.js');
5
+ var index = require('./index-0076cbd6.cjs.dev.js');
6
6
  var _extends = require('@babel/runtime/helpers/extends');
7
7
  var React = require('react');
8
8
  var THREE = require('three');
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var index = require('./index-1ff856c3.cjs.prod.js');
5
+ var index = require('./index-0e758026.cjs.prod.js');
6
6
  var _extends = require('@babel/runtime/helpers/extends');
7
7
  var React = require('react');
8
8
  var THREE = require('three');
@@ -1,5 +1,5 @@
1
- import { c as createEvents, e as extend, u as useMemoizedFn, p as pick, o as omit, a as createRoot, b as unmountComponentAtNode } from './index-635ddfb2.esm.js';
2
- export { t as ReactThreeFiber, v as _roots, s as act, m as addAfterEffect, l as addEffect, n as addTail, k as advance, h as applyProps, d as context, f as createPortal, a as createRoot, i as dispose, e as extend, q as getRootState, j as invalidate, g as reconciler, r as render, b as unmountComponentAtNode, y as useFrame, z as useGraph, A as useLoader, u as useMemoizedFn, w as useStore, x as useThree } from './index-635ddfb2.esm.js';
1
+ import { c as createEvents, e as extend, u as useMemoizedFn, p as pick, o as omit, a as createRoot, b as unmountComponentAtNode } from './index-91900b41.esm.js';
2
+ export { t as ReactThreeFiber, v as _roots, s as act, m as addAfterEffect, l as addEffect, n as addTail, k as advance, h as applyProps, d as context, f as createPortal, a as createRoot, i as dispose, e as extend, q as getRootState, j as invalidate, g as reconciler, r as render, b as unmountComponentAtNode, y as useFrame, z as useGraph, A as useLoader, u as useMemoizedFn, w as useStore, x as useThree } from './index-91900b41.esm.js';
3
3
  import _extends from '@babel/runtime/helpers/esm/extends';
4
4
  import * as React from 'react';
5
5
  import * as THREE from 'three';
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var THREE = require('three');
6
6
  var expoAsset = require('expo-asset');
7
- var index = require('../../dist/index-28a77253.cjs.dev.js');
7
+ var index = require('../../dist/index-0076cbd6.cjs.dev.js');
8
8
  var _extends = require('@babel/runtime/helpers/extends');
9
9
  var React = require('react');
10
10
  var mergeRefs = require('react-merge-refs');
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var THREE = require('three');
6
6
  var expoAsset = require('expo-asset');
7
- var index = require('../../dist/index-1ff856c3.cjs.prod.js');
7
+ var index = require('../../dist/index-0e758026.cjs.prod.js');
8
8
  var _extends = require('@babel/runtime/helpers/extends');
9
9
  var React = require('react');
10
10
  var mergeRefs = require('react-merge-refs');
@@ -1,7 +1,7 @@
1
1
  import * as THREE from 'three';
2
2
  import { Asset } from 'expo-asset';
3
- import { c as createEvents, e as extend, u as useMemoizedFn, p as pick, o as omit, a as createRoot, b as unmountComponentAtNode } from '../../dist/index-635ddfb2.esm.js';
4
- export { t as ReactThreeFiber, v as _roots, s as act, m as addAfterEffect, l as addEffect, n as addTail, k as advance, h as applyProps, d as context, f as createPortal, a as createRoot, i as dispose, e as extend, q as getRootState, j as invalidate, g as reconciler, r as render, b as unmountComponentAtNode, y as useFrame, z as useGraph, A as useLoader, u as useMemoizedFn, w as useStore, x as useThree } from '../../dist/index-635ddfb2.esm.js';
3
+ import { c as createEvents, e as extend, u as useMemoizedFn, p as pick, o as omit, a as createRoot, b as unmountComponentAtNode } from '../../dist/index-91900b41.esm.js';
4
+ export { t as ReactThreeFiber, v as _roots, s as act, m as addAfterEffect, l as addEffect, n as addTail, k as advance, h as applyProps, d as context, f as createPortal, a as createRoot, i as dispose, e as extend, q as getRootState, j as invalidate, g as reconciler, r as render, b as unmountComponentAtNode, y as useFrame, z as useGraph, A as useLoader, u as useMemoizedFn, w as useStore, x as useThree } from '../../dist/index-91900b41.esm.js';
5
5
  import _extends from '@babel/runtime/helpers/esm/extends';
6
6
  import * as React from 'react';
7
7
  import mergeRefs from 'react-merge-refs';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-three/fiber",
3
- "version": "8.0.5",
3
+ "version": "8.0.6",
4
4
  "description": "A React renderer for Threejs",
5
5
  "keywords": [
6
6
  "react",