@react-three/fiber 9.8.0 → 9.8.1

package/dist/react-three-fiber.cjs.dev.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('./events-ce5e34e8.cjs.dev.js');
+var events = require('./events-21d8cd92.cjs.dev.js');
 var React = require('react');
 var THREE = require('three');
 var useMeasure = require('react-use-measure');
@@ -78,6 +78,7 @@ function CanvasImpl({
   const divRef = React__namespace.useRef(null);
   React__namespace.useImperativeHandle(ref, () => canvasRef.current);
   const handlePointerMissed = events.useMutableCallback(onPointerMissed);
+  const pointerMissed = React__namespace.useCallback(event => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(event), [handlePointerMissed]);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(false);
 
@@ -91,6 +92,16 @@ function CanvasImpl({
   const [gate, waitFor] = events.useGate();
   const rootState = React__namespace.useRef(null);
   const eventTarget = () => eventSource ? events.isRef(eventSource) ? eventSource.current : eventSource : divRef.current;
+
+  // Insertion effects survive Activity hiding and StrictMode effect replay. Only
+  // final removal releases the root, including removal while hidden from React 19.2
+  React__namespace.useInsertionEffect(() => {
+    return () => {
+      const current = root.current;
+      root.current = null;
+      current == null ? void 0 : current.unmount();
+    };
+  }, []);
   events.useIsomorphicLayoutEffect(() => {
     const canvas = canvasRef.current;
     if (containerRect.width > 0 && containerRect.height > 0 && canvas) {
@@ -110,8 +121,8 @@ function CanvasImpl({
         raycaster,
         camera,
         size: containerRect,
-        // Pass mutable reference to onPointerMissed so it's free to update
-        onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
+        // Forwards to the latest onPointerMissed, so a new callback does not update the store
+        onPointerMissed: pointerMissed,
         onCreated: state => {
           var _eventTarget;
           rootState.current = state;
@@ -159,9 +170,15 @@ function CanvasImpl({
     const target = eventTarget();
     if (state && target && state.events.connected !== target) state.events.connect == null ? void 0 : state.events.connect(target);
   });
+
+  // Before 19.2, React skips insertion cleanups in a subtree Suspense has hidden but keeps its
+  // passive effects connected. A canvas that left the document was removed rather than hidden
   React__namespace.useEffect(() => {
     const canvas = canvasRef.current;
-    if (canvas) return () => events.unmountComponentAtNode(canvas);
+    return () => {
+      var _root$current;
+      if (!canvas.isConnected) (_root$current = root.current) == null ? void 0 : _root$current.unmount();
+    };
   }, []);
 
   // When the event source is not this div, we need to set pointer-events to none

package/dist/react-three-fiber.cjs.prod.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('./events-a79ef12b.cjs.prod.js');
+var events = require('./events-a816cbab.cjs.prod.js');
 var React = require('react');
 var THREE = require('three');
 var useMeasure = require('react-use-measure');
@@ -78,6 +78,7 @@ function CanvasImpl({
   const divRef = React__namespace.useRef(null);
   React__namespace.useImperativeHandle(ref, () => canvasRef.current);
   const handlePointerMissed = events.useMutableCallback(onPointerMissed);
+  const pointerMissed = React__namespace.useCallback(event => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(event), [handlePointerMissed]);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(false);
 
@@ -91,6 +92,16 @@ function CanvasImpl({
   const [gate, waitFor] = events.useGate();
   const rootState = React__namespace.useRef(null);
   const eventTarget = () => eventSource ? events.isRef(eventSource) ? eventSource.current : eventSource : divRef.current;
+
+  // Insertion effects survive Activity hiding and StrictMode effect replay. Only
+  // final removal releases the root, including removal while hidden from React 19.2
+  React__namespace.useInsertionEffect(() => {
+    return () => {
+      const current = root.current;
+      root.current = null;
+      current == null ? void 0 : current.unmount();
+    };
+  }, []);
   events.useIsomorphicLayoutEffect(() => {
     const canvas = canvasRef.current;
     if (containerRect.width > 0 && containerRect.height > 0 && canvas) {
@@ -110,8 +121,8 @@ function CanvasImpl({
         raycaster,
         camera,
         size: containerRect,
-        // Pass mutable reference to onPointerMissed so it's free to update
-        onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
+        // Forwards to the latest onPointerMissed, so a new callback does not update the store
+        onPointerMissed: pointerMissed,
         onCreated: state => {
           var _eventTarget;
           rootState.current = state;
@@ -159,9 +170,15 @@ function CanvasImpl({
     const target = eventTarget();
     if (state && target && state.events.connected !== target) state.events.connect == null ? void 0 : state.events.connect(target);
   });
+
+  // Before 19.2, React skips insertion cleanups in a subtree Suspense has hidden but keeps its
+  // passive effects connected. A canvas that left the document was removed rather than hidden
   React__namespace.useEffect(() => {
     const canvas = canvasRef.current;
-    if (canvas) return () => events.unmountComponentAtNode(canvas);
+    return () => {
+      var _root$current;
+      if (!canvas.isConnected) (_root$current = root.current) == null ? void 0 : _root$current.unmount();
+    };
   }, []);
 
   // When the event source is not this div, we need to set pointer-events to none

package/dist/react-three-fiber.esm.js

@@ -1,5 +1,5 @@
-import { e as extend, u as useBridge, a as useMutableCallback, b as useGate, c as useIsomorphicLayoutEffect, d as createRoot, E as ErrorBoundary, B as Block, f as unmountComponentAtNode, g as createPointerEvents, i as isRef } from './events-803f4abc.esm.js';
-export { t as ReactThreeFiber, _ as _roots, y as act, l as addAfterEffect, k as addEffect, m as addTail, o as advance, v as applyProps, z as buildGraph, s as context, h as createEvents, p as createPortal, d as createRoot, x as dispose, g as events, e as extend, j as flushGlobalEffects, q as flushSync, w as getRootState, n as invalidate, r as reconciler, f as unmountComponentAtNode, F as useFrame, G as useGraph, A as useInstanceHandle, H as useLoader, C as useStore, D as useThree } from './events-803f4abc.esm.js';
+import { e as extend, u as useBridge, a as useMutableCallback, b as useGate, c as useIsomorphicLayoutEffect, d as createRoot, E as ErrorBoundary, B as Block, f as createPointerEvents, i as isRef } from './events-9ce18a08.esm.js';
+export { t as ReactThreeFiber, _ as _roots, y as act, k as addAfterEffect, j as addEffect, l as addTail, n as advance, v as applyProps, z as buildGraph, s as context, g as createEvents, q as createPortal, d as createRoot, x as dispose, f as events, e as extend, h as flushGlobalEffects, o as flushSync, w as getRootState, m as invalidate, r as reconciler, p as unmountComponentAtNode, F as useFrame, G as useGraph, A as useInstanceHandle, H as useLoader, C as useStore, D as useThree } from './events-9ce18a08.esm.js';
 import * as React from 'react';
 import * as THREE from 'three';
 import useMeasure from 'react-use-measure';
@@ -51,6 +51,7 @@ function CanvasImpl({
   const divRef = React.useRef(null);
   React.useImperativeHandle(ref, () => canvasRef.current);
   const handlePointerMissed = useMutableCallback(onPointerMissed);
+  const pointerMissed = React.useCallback(event => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(event), [handlePointerMissed]);
   const [block, setBlock] = React.useState(false);
   const [error, setError] = React.useState(false);
 
@@ -64,6 +65,16 @@ function CanvasImpl({
   const [gate, waitFor] = useGate();
   const rootState = React.useRef(null);
   const eventTarget = () => eventSource ? isRef(eventSource) ? eventSource.current : eventSource : divRef.current;
+
+  // Insertion effects survive Activity hiding and StrictMode effect replay. Only
+  // final removal releases the root, including removal while hidden from React 19.2
+  React.useInsertionEffect(() => {
+    return () => {
+      const current = root.current;
+      root.current = null;
+      current == null ? void 0 : current.unmount();
+    };
+  }, []);
   useIsomorphicLayoutEffect(() => {
     const canvas = canvasRef.current;
     if (containerRect.width > 0 && containerRect.height > 0 && canvas) {
@@ -83,8 +94,8 @@ function CanvasImpl({
         raycaster,
         camera,
         size: containerRect,
-        // Pass mutable reference to onPointerMissed so it's free to update
-        onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
+        // Forwards to the latest onPointerMissed, so a new callback does not update the store
+        onPointerMissed: pointerMissed,
         onCreated: state => {
           var _eventTarget;
           rootState.current = state;
@@ -132,9 +143,15 @@ function CanvasImpl({
     const target = eventTarget();
     if (state && target && state.events.connected !== target) state.events.connect == null ? void 0 : state.events.connect(target);
   });
+
+  // Before 19.2, React skips insertion cleanups in a subtree Suspense has hidden but keeps its
+  // passive effects connected. A canvas that left the document was removed rather than hidden
   React.useEffect(() => {
     const canvas = canvasRef.current;
-    if (canvas) return () => unmountComponentAtNode(canvas);
+    return () => {
+      var _root$current;
+      if (!canvas.isConnected) (_root$current = root.current) == null ? void 0 : _root$current.unmount();
+    };
   }, []);
 
   // When the event source is not this div, we need to set pointer-events to none

package/native/dist/react-three-fiber-native.cjs.dev.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('../../dist/events-ce5e34e8.cjs.dev.js');
+var events = require('../../dist/events-21d8cd92.cjs.dev.js');
 var React = require('react');
 var THREE = require('three');
 var reactNative = require('react-native');
@@ -80,6 +80,7 @@ function CanvasImpl({
   const [bind, setBind] = React__namespace.useState();
   React__namespace.useImperativeHandle(ref, () => viewRef.current);
   const handlePointerMissed = events.useMutableCallback(onPointerMissed);
+  const pointerMissed = React__namespace.useCallback(event => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(event), [handlePointerMissed]);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(undefined);
 
@@ -217,8 +218,8 @@ function CanvasImpl({
           top,
           left
         },
-        // Pass mutable reference to onPointerMissed so it's free to update
-        onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
+        // Forwards to the latest onPointerMissed, so a new callback does not update the store
+        onPointerMissed: pointerMissed,
         // Overwrite onCreated to apply RN bindings
         onCreated: state => {
           // Bind render to RN bridge

package/native/dist/react-three-fiber-native.cjs.prod.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('../../dist/events-a79ef12b.cjs.prod.js');
+var events = require('../../dist/events-a816cbab.cjs.prod.js');
 var React = require('react');
 var THREE = require('three');
 var reactNative = require('react-native');
@@ -80,6 +80,7 @@ function CanvasImpl({
   const [bind, setBind] = React__namespace.useState();
   React__namespace.useImperativeHandle(ref, () => viewRef.current);
   const handlePointerMissed = events.useMutableCallback(onPointerMissed);
+  const pointerMissed = React__namespace.useCallback(event => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(event), [handlePointerMissed]);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(undefined);
 
@@ -217,8 +218,8 @@ function CanvasImpl({
           top,
           left
         },
-        // Pass mutable reference to onPointerMissed so it's free to update
-        onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
+        // Forwards to the latest onPointerMissed, so a new callback does not update the store
+        onPointerMissed: pointerMissed,
         // Overwrite onCreated to apply RN bindings
         onCreated: state => {
           // Bind render to RN bridge

package/native/dist/react-three-fiber-native.esm.js

@@ -1,5 +1,5 @@
-import { e as extend, u as useBridge, a as useMutableCallback, d as createRoot, b as useGate, c as useIsomorphicLayoutEffect, E as ErrorBoundary, B as Block, f as unmountComponentAtNode, g as createPointerEvents, h as createEvents } from '../../dist/events-803f4abc.esm.js';
-export { t as ReactThreeFiber, _ as _roots, y as act, l as addAfterEffect, k as addEffect, m as addTail, o as advance, v as applyProps, z as buildGraph, s as context, h as createEvents, p as createPortal, d as createRoot, x as dispose, e as extend, j as flushGlobalEffects, q as flushSync, w as getRootState, n as invalidate, r as reconciler, f as unmountComponentAtNode, F as useFrame, G as useGraph, A as useInstanceHandle, H as useLoader, C as useStore, D as useThree } from '../../dist/events-803f4abc.esm.js';
+import { e as extend, u as useBridge, a as useMutableCallback, d as createRoot, b as useGate, c as useIsomorphicLayoutEffect, E as ErrorBoundary, B as Block, p as unmountComponentAtNode, f as createPointerEvents, g as createEvents } from '../../dist/events-9ce18a08.esm.js';
+export { t as ReactThreeFiber, _ as _roots, y as act, k as addAfterEffect, j as addEffect, l as addTail, n as advance, v as applyProps, z as buildGraph, s as context, g as createEvents, q as createPortal, d as createRoot, x as dispose, e as extend, h as flushGlobalEffects, o as flushSync, w as getRootState, m as invalidate, r as reconciler, p as unmountComponentAtNode, F as useFrame, G as useGraph, A as useInstanceHandle, H as useLoader, C as useStore, D as useThree } from '../../dist/events-9ce18a08.esm.js';
 import * as React from 'react';
 import * as THREE from 'three';
 import { PanResponder, PixelRatio, StyleSheet, View, Platform, Image, NativeModules } from 'react-native';
@@ -56,6 +56,7 @@ function CanvasImpl({
   const [bind, setBind] = React.useState();
   React.useImperativeHandle(ref, () => viewRef.current);
   const handlePointerMissed = useMutableCallback(onPointerMissed);
+  const pointerMissed = React.useCallback(event => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(event), [handlePointerMissed]);
   const [block, setBlock] = React.useState(false);
   const [error, setError] = React.useState(undefined);
 
@@ -193,8 +194,8 @@ function CanvasImpl({
           top,
           left
         },
-        // Pass mutable reference to onPointerMissed so it's free to update
-        onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
+        // Forwards to the latest onPointerMissed, so a new callback does not update the store
+        onPointerMissed: pointerMissed,
         // Overwrite onCreated to apply RN bindings
         onCreated: state => {
           // Bind render to RN bridge

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "9.8.0",
+  "version": "9.8.1",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",
@@ -51,7 +51,7 @@
     "@types/webxr": "*",
     "base64-js": "^1.5.1",
     "buffer": "^6.0.3",
-    "its-fine": "^2.0.0",
+    "its-fine": "^2.1.1",
     "react-use-measure": "^2.1.7",
     "scheduler": "^0.28.0",
     "suspend-react": "^0.1.3",