@react-three/fiber 8.0.8 → 8.0.9

package/dist/declarations/src/web/Canvas.d.ts

@@ -1,9 +1,9 @@
-import * as React from 'react';
-import type { Options as ResizeOptions } from 'react-use-measure';
-import { RenderProps } from '../core';
-export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size'>, React.HTMLAttributes<HTMLDivElement> {
-    children: React.ReactNode;
-    fallback?: React.ReactNode;
-    resize?: ResizeOptions;
-}
-export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLCanvasElement>>;
+import * as React from 'react';
+import type { Options as ResizeOptions } from 'react-use-measure';
+import { RenderProps } from '../core';
+export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size'>, React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    fallback?: React.ReactNode;
+    resize?: ResizeOptions;
+}
+export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLCanvasElement>>;

package/dist/declarations/src/web/events.d.ts

@@ -1,4 +1,4 @@
-import { UseBoundStore } from 'zustand';
-import { RootState } from '../core/store';
-import { EventManager } from '../core/events';
-export declare function createPointerEvents(store: UseBoundStore<RootState>): EventManager<HTMLElement>;
+import { UseBoundStore } from 'zustand';
+import { RootState } from '../core/store';
+import { EventManager } from '../core/events';
+export declare function createPointerEvents(store: UseBoundStore<RootState>): EventManager<HTMLElement>;

package/dist/{index-b8ee55f0.cjs.dev.js → index-49237346.cjs.dev.js}

@@ -44,6 +44,11 @@ var threeTypes = /*#__PURE__*/Object.freeze({
 // useLayoutEffect on the client.
 const isSSR = typeof window === 'undefined' || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent);
 const useIsomorphicLayoutEffect = isSSR ? React__namespace.useEffect : React__namespace.useLayoutEffect;
+function useMutableCallback(fn) {
+  const ref = React__namespace.useRef(fn);
+  useIsomorphicLayoutEffect(() => void (ref.current = fn), [fn]);
+  return ref;
+}
 function Block({
   set
 }) {
@@ -75,11 +80,6 @@ ErrorBoundary.getDerivedStateFromError = () => ({
   error: true
 });
 
-function useMemoizedFn(fn) {
-  const fnRef = React__namespace.useRef(fn);
-  useIsomorphicLayoutEffect(() => void (fnRef.current = fn), [fn]);
-  return (...args) => fnRef.current == null ? void 0 : fnRef.current(...args);
-}
 const DEFAULT = '__default';
 const isDiffSet = def => def && !!def.memoized && !!def.changes;
 function calculateDpr(dpr) {
@@ -1580,12 +1580,11 @@ function useThree(selector = state => state, equalityFn) {
 
 function useFrame(callback, renderPriority = 0) {
   const store = useStore();
-  const subscribe = store.getState().internal.subscribe; // Update ref
+  const subscribe = store.getState().internal.subscribe; // Memoize ref
 
-  const ref = React__namespace.useRef(callback);
-  React__namespace.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe on mount, unsubscribe on unmount
+  const ref = useMutableCallback(callback); // Subscribe on mount, unsubscribe on unmount
 
-  React__namespace.useLayoutEffect(() => subscribe(ref, renderPriority, store), [renderPriority, subscribe, store]);
+  useIsomorphicLayoutEffect(() => subscribe(ref, renderPriority, store), [renderPriority, subscribe, store]);
   return null;
 }
 /**
@@ -2039,6 +2038,6 @@ exports.useFrame = useFrame;
 exports.useGraph = useGraph;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.useLoader = useLoader;
-exports.useMemoizedFn = useMemoizedFn;
+exports.useMutableCallback = useMutableCallback;
 exports.useStore = useStore;
 exports.useThree = useThree;

package/dist/{index-c4e0ac66.cjs.prod.js → index-4dae9cc6.cjs.prod.js}

@@ -44,6 +44,11 @@ var threeTypes = /*#__PURE__*/Object.freeze({
 // useLayoutEffect on the client.
 const isSSR = typeof window === 'undefined' || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent);
 const useIsomorphicLayoutEffect = isSSR ? React__namespace.useEffect : React__namespace.useLayoutEffect;
+function useMutableCallback(fn) {
+  const ref = React__namespace.useRef(fn);
+  useIsomorphicLayoutEffect(() => void (ref.current = fn), [fn]);
+  return ref;
+}
 function Block({
   set
 }) {
@@ -75,11 +80,6 @@ ErrorBoundary.getDerivedStateFromError = () => ({
   error: true
 });
 
-function useMemoizedFn(fn) {
-  const fnRef = React__namespace.useRef(fn);
-  useIsomorphicLayoutEffect(() => void (fnRef.current = fn), [fn]);
-  return (...args) => fnRef.current == null ? void 0 : fnRef.current(...args);
-}
 const DEFAULT = '__default';
 const isDiffSet = def => def && !!def.memoized && !!def.changes;
 function calculateDpr(dpr) {
@@ -1580,12 +1580,11 @@ function useThree(selector = state => state, equalityFn) {
 
 function useFrame(callback, renderPriority = 0) {
   const store = useStore();
-  const subscribe = store.getState().internal.subscribe; // Update ref
+  const subscribe = store.getState().internal.subscribe; // Memoize ref
 
-  const ref = React__namespace.useRef(callback);
-  React__namespace.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe on mount, unsubscribe on unmount
+  const ref = useMutableCallback(callback); // Subscribe on mount, unsubscribe on unmount
 
-  React__namespace.useLayoutEffect(() => subscribe(ref, renderPriority, store), [renderPriority, subscribe, store]);
+  useIsomorphicLayoutEffect(() => subscribe(ref, renderPriority, store), [renderPriority, subscribe, store]);
   return null;
 }
 /**
@@ -2039,6 +2038,6 @@ exports.useFrame = useFrame;
 exports.useGraph = useGraph;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.useLoader = useLoader;
-exports.useMemoizedFn = useMemoizedFn;
+exports.useMutableCallback = useMutableCallback;
 exports.useStore = useStore;
 exports.useThree = useThree;

package/dist/{index-548cf96a.esm.js → index-4e14a95b.esm.js}

@@ -15,6 +15,11 @@ var threeTypes = /*#__PURE__*/Object.freeze({
 // useLayoutEffect on the client.
 const isSSR = typeof window === 'undefined' || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent);
 const useIsomorphicLayoutEffect = isSSR ? React.useEffect : React.useLayoutEffect;
+function useMutableCallback(fn) {
+  const ref = React.useRef(fn);
+  useIsomorphicLayoutEffect(() => void (ref.current = fn), [fn]);
+  return ref;
+}
 function Block({
   set
 }) {
@@ -46,11 +51,6 @@ ErrorBoundary.getDerivedStateFromError = () => ({
   error: true
 });
 
-function useMemoizedFn(fn) {
-  const fnRef = React.useRef(fn);
-  useIsomorphicLayoutEffect(() => void (fnRef.current = fn), [fn]);
-  return (...args) => fnRef.current == null ? void 0 : fnRef.current(...args);
-}
 const DEFAULT = '__default';
 const isDiffSet = def => def && !!def.memoized && !!def.changes;
 function calculateDpr(dpr) {
@@ -1551,12 +1551,11 @@ function useThree(selector = state => state, equalityFn) {
 
 function useFrame(callback, renderPriority = 0) {
   const store = useStore();
-  const subscribe = store.getState().internal.subscribe; // Update ref
+  const subscribe = store.getState().internal.subscribe; // Memoize ref
 
-  const ref = React.useRef(callback);
-  React.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe on mount, unsubscribe on unmount
+  const ref = useMutableCallback(callback); // Subscribe on mount, unsubscribe on unmount
 
-  React.useLayoutEffect(() => subscribe(ref, renderPriority, store), [renderPriority, subscribe, store]);
+  useIsomorphicLayoutEffect(() => subscribe(ref, renderPriority, store), [renderPriority, subscribe, store]);
   return null;
 }
 /**
@@ -1983,4 +1982,4 @@ reconciler.injectIntoDevTools({
 });
 const act = React.unstable_act;
 
-export { useGraph as A, Block as B, useLoader as C, ErrorBoundary as E, createRoot as a, useIsomorphicLayoutEffect as b, createEvents as c, unmountComponentAtNode as d, extend as e, context as f, createPortal as g, reconciler as h, applyProps as i, dispose as j, invalidate as k, advance as l, addEffect as m, addAfterEffect as n, omit as o, pick as p, addTail as q, render as r, getRootState as s, threeTypes as t, useMemoizedFn as u, act as v, roots as w, useStore as x, useThree as y, useFrame as z };
+export { useGraph as A, Block as B, useLoader as C, ErrorBoundary as E, createRoot as a, useIsomorphicLayoutEffect as b, createEvents as c, unmountComponentAtNode as d, extend as e, context as f, createPortal as g, reconciler as h, applyProps as i, dispose as j, invalidate as k, advance as l, addEffect as m, addAfterEffect as n, omit as o, pick as p, addTail as q, render as r, getRootState as s, threeTypes as t, useMutableCallback as u, act as v, roots as w, useStore as x, useThree as y, useFrame as z };

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-b8ee55f0.cjs.dev.js');
+var index = require('./index-49237346.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -130,6 +130,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   fallback,
   resize,
   style,
+  onPointerMissed,
   events = createPointerEvents,
   ...props
 }, forwardedRef) {
@@ -137,7 +138,6 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
   React__namespace.useMemo(() => index.extend(THREE__namespace), []);
-  const onPointerMissed = index.useMemoizedFn(props.onPointerMissed);
   const [containerRef, {
     width,
     height
@@ -152,12 +152,9 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   const meshRef = React__namespace.useRef(null);
   const canvasRef = React__namespace.useRef(null);
   const [canvas, setCanvas] = React__namespace.useState(null);
-  const canvasProps = index.pick({ ...props,
-    onPointerMissed
-  }, CANVAS_PROPS);
-  const divProps = index.omit({ ...props,
-    onPointerMissed
-  }, CANVAS_PROPS);
+  const handlePointerMissed = index.useMutableCallback(onPointerMissed);
+  const canvasProps = index.pick(props, CANVAS_PROPS);
+  const divProps = index.omit(props, CANVAS_PROPS);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
 
@@ -169,6 +166,8 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   if (width > 0 && height > 0 && canvas) {
     if (!root.current) root.current = index.createRoot(canvas);
     root.current.configure({ ...canvasProps,
+      // Pass mutable reference to onPointerMissed so it's free to update
+      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       onCreated: state => {
         state.events.connect == null ? void 0 : state.events.connect(meshRef.current);
         canvasProps.onCreated == null ? void 0 : canvasProps.onCreated(state);
@@ -189,8 +188,9 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   }
 
   index.useIsomorphicLayoutEffect(() => {
-    const canvas = canvasRef.current;
-    setCanvas(canvas);
+    setCanvas(canvasRef.current);
+  }, []);
+  React__namespace.useEffect(() => {
     return () => index.unmountComponentAtNode(canvas);
   }, []);
   return /*#__PURE__*/React__namespace.createElement("div", _extends({

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-c4e0ac66.cjs.prod.js');
+var index = require('./index-4dae9cc6.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -130,6 +130,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   fallback,
   resize,
   style,
+  onPointerMissed,
   events = createPointerEvents,
   ...props
 }, forwardedRef) {
@@ -137,7 +138,6 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
   React__namespace.useMemo(() => index.extend(THREE__namespace), []);
-  const onPointerMissed = index.useMemoizedFn(props.onPointerMissed);
   const [containerRef, {
     width,
     height
@@ -152,12 +152,9 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   const meshRef = React__namespace.useRef(null);
   const canvasRef = React__namespace.useRef(null);
   const [canvas, setCanvas] = React__namespace.useState(null);
-  const canvasProps = index.pick({ ...props,
-    onPointerMissed
-  }, CANVAS_PROPS);
-  const divProps = index.omit({ ...props,
-    onPointerMissed
-  }, CANVAS_PROPS);
+  const handlePointerMissed = index.useMutableCallback(onPointerMissed);
+  const canvasProps = index.pick(props, CANVAS_PROPS);
+  const divProps = index.omit(props, CANVAS_PROPS);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
 
@@ -169,6 +166,8 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   if (width > 0 && height > 0 && canvas) {
     if (!root.current) root.current = index.createRoot(canvas);
     root.current.configure({ ...canvasProps,
+      // Pass mutable reference to onPointerMissed so it's free to update
+      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       onCreated: state => {
         state.events.connect == null ? void 0 : state.events.connect(meshRef.current);
         canvasProps.onCreated == null ? void 0 : canvasProps.onCreated(state);
@@ -189,8 +188,9 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   }
 
   index.useIsomorphicLayoutEffect(() => {
-    const canvas = canvasRef.current;
-    setCanvas(canvas);
+    setCanvas(canvasRef.current);
+  }, []);
+  React__namespace.useEffect(() => {
     return () => index.unmountComponentAtNode(canvas);
   }, []);
   return /*#__PURE__*/React__namespace.createElement("div", _extends({

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

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useMemoizedFn, p as pick, o as omit, a as createRoot, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-548cf96a.esm.js';
-export { t as ReactThreeFiber, w as _roots, v as act, n as addAfterEffect, m as addEffect, q as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, s as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, z as useFrame, A as useGraph, C as useLoader, x as useStore, y as useThree } from './index-548cf96a.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, p as pick, o as omit, a as createRoot, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-4e14a95b.esm.js';
+export { t as ReactThreeFiber, w as _roots, v as act, n as addAfterEffect, m as addEffect, q as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, s as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, z as useFrame, A as useGraph, C as useLoader, x as useStore, y as useThree } from './index-4e14a95b.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
@@ -100,6 +100,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   fallback,
   resize,
   style,
+  onPointerMissed,
   events = createPointerEvents,
   ...props
 }, forwardedRef) {
@@ -107,7 +108,6 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
   React.useMemo(() => extend(THREE), []);
-  const onPointerMissed = useMemoizedFn(props.onPointerMissed);
   const [containerRef, {
     width,
     height
@@ -122,12 +122,9 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   const meshRef = React.useRef(null);
   const canvasRef = React.useRef(null);
   const [canvas, setCanvas] = React.useState(null);
-  const canvasProps = pick({ ...props,
-    onPointerMissed
-  }, CANVAS_PROPS);
-  const divProps = omit({ ...props,
-    onPointerMissed
-  }, CANVAS_PROPS);
+  const handlePointerMissed = useMutableCallback(onPointerMissed);
+  const canvasProps = pick(props, CANVAS_PROPS);
+  const divProps = omit(props, CANVAS_PROPS);
   const [block, setBlock] = React.useState(false);
   const [error, setError] = React.useState(false); // Suspend this component if block is a promise (2nd run)
 
@@ -139,6 +136,8 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   if (width > 0 && height > 0 && canvas) {
     if (!root.current) root.current = createRoot(canvas);
     root.current.configure({ ...canvasProps,
+      // Pass mutable reference to onPointerMissed so it's free to update
+      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       onCreated: state => {
         state.events.connect == null ? void 0 : state.events.connect(meshRef.current);
         canvasProps.onCreated == null ? void 0 : canvasProps.onCreated(state);
@@ -159,8 +158,9 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   }
 
   useIsomorphicLayoutEffect(() => {
-    const canvas = canvasRef.current;
-    setCanvas(canvas);
+    setCanvas(canvasRef.current);
+  }, []);
+  React.useEffect(() => {
     return () => unmountComponentAtNode(canvas);
   }, []);
   return /*#__PURE__*/React.createElement("div", _extends({

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var THREE = require('three');
 var expoAsset = require('expo-asset');
-var index = require('../../dist/index-b8ee55f0.cjs.dev.js');
+var index = require('../../dist/index-49237346.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var mergeRefs = require('react-merge-refs');
@@ -137,13 +137,13 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   children,
   style,
   events,
+  onPointerMissed,
   ...props
 }, forwardedRef) => {
   // Create a known catalogue of Threejs-native elements
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
   React__namespace.useMemo(() => index.extend(THREE__namespace), []);
-  const onPointerMissed = index.useMemoizedFn(props.onPointerMissed);
   const [{
     width,
     height
@@ -153,12 +153,9 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   });
   const [canvas, setCanvas] = React__namespace.useState(null);
   const [bind, setBind] = React__namespace.useState();
-  const canvasProps = index.pick({ ...props,
-    onPointerMissed
-  }, CANVAS_PROPS);
-  const viewProps = index.omit({ ...props,
-    onPointerMissed
-  }, CANVAS_PROPS);
+  const handlePointerMissed = index.useMutableCallback(onPointerMissed);
+  const canvasProps = index.pick(props, CANVAS_PROPS);
+  const viewProps = index.omit(props, CANVAS_PROPS);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
 
@@ -210,6 +207,8 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
     };
 
     root.current.configure({ ...canvasProps,
+      // Pass mutable reference to onPointerMissed so it's free to update
+      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       // expo-gl can only render at native dpr/resolution
       // https://github.com/expo/expo-three/issues/39
       dpr: reactNative.PixelRatio.get(),
@@ -231,7 +230,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
 
   React__namespace.useEffect(() => {
     return () => index.unmountComponentAtNode(canvas);
-  }, [canvas]);
+  }, []);
   return /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, viewProps, {
     ref: mergeRefs__default['default']([viewRef, forwardedRef]),
     onLayout: onLayout,

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var THREE = require('three');
 var expoAsset = require('expo-asset');
-var index = require('../../dist/index-c4e0ac66.cjs.prod.js');
+var index = require('../../dist/index-4dae9cc6.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var mergeRefs = require('react-merge-refs');
@@ -137,13 +137,13 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   children,
   style,
   events,
+  onPointerMissed,
   ...props
 }, forwardedRef) => {
   // Create a known catalogue of Threejs-native elements
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
   React__namespace.useMemo(() => index.extend(THREE__namespace), []);
-  const onPointerMissed = index.useMemoizedFn(props.onPointerMissed);
   const [{
     width,
     height
@@ -153,12 +153,9 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   });
   const [canvas, setCanvas] = React__namespace.useState(null);
   const [bind, setBind] = React__namespace.useState();
-  const canvasProps = index.pick({ ...props,
-    onPointerMissed
-  }, CANVAS_PROPS);
-  const viewProps = index.omit({ ...props,
-    onPointerMissed
-  }, CANVAS_PROPS);
+  const handlePointerMissed = index.useMutableCallback(onPointerMissed);
+  const canvasProps = index.pick(props, CANVAS_PROPS);
+  const viewProps = index.omit(props, CANVAS_PROPS);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
 
@@ -210,6 +207,8 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
     };
 
     root.current.configure({ ...canvasProps,
+      // Pass mutable reference to onPointerMissed so it's free to update
+      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       // expo-gl can only render at native dpr/resolution
       // https://github.com/expo/expo-three/issues/39
       dpr: reactNative.PixelRatio.get(),
@@ -231,7 +230,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
 
   React__namespace.useEffect(() => {
     return () => index.unmountComponentAtNode(canvas);
-  }, [canvas]);
+  }, []);
   return /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, viewProps, {
     ref: mergeRefs__default['default']([viewRef, forwardedRef]),
     onLayout: onLayout,

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

@@ -1,7 +1,7 @@
 import * as THREE from 'three';
 import { Asset } from 'expo-asset';
-import { c as createEvents, e as extend, u as useMemoizedFn, p as pick, o as omit, a as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-548cf96a.esm.js';
-export { t as ReactThreeFiber, w as _roots, v as act, n as addAfterEffect, m as addEffect, q as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, s as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, z as useFrame, A as useGraph, C as useLoader, x as useStore, y as useThree } from '../../dist/index-548cf96a.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, p as pick, o as omit, a as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-4e14a95b.esm.js';
+export { t as ReactThreeFiber, w as _roots, v as act, n as addAfterEffect, m as addEffect, q as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, s as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, z as useFrame, A as useGraph, C as useLoader, x as useStore, y as useThree } from '../../dist/index-4e14a95b.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import mergeRefs from 'react-merge-refs';
@@ -107,13 +107,13 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
   children,
   style,
   events,
+  onPointerMissed,
   ...props
 }, forwardedRef) => {
   // Create a known catalogue of Threejs-native elements
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
   React.useMemo(() => extend(THREE), []);
-  const onPointerMissed = useMemoizedFn(props.onPointerMissed);
   const [{
     width,
     height
@@ -123,12 +123,9 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
   });
   const [canvas, setCanvas] = React.useState(null);
   const [bind, setBind] = React.useState();
-  const canvasProps = pick({ ...props,
-    onPointerMissed
-  }, CANVAS_PROPS);
-  const viewProps = omit({ ...props,
-    onPointerMissed
-  }, CANVAS_PROPS);
+  const handlePointerMissed = useMutableCallback(onPointerMissed);
+  const canvasProps = pick(props, CANVAS_PROPS);
+  const viewProps = omit(props, CANVAS_PROPS);
   const [block, setBlock] = React.useState(false);
   const [error, setError] = React.useState(false); // Suspend this component if block is a promise (2nd run)
 
@@ -180,6 +177,8 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
     };
 
     root.current.configure({ ...canvasProps,
+      // Pass mutable reference to onPointerMissed so it's free to update
+      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       // expo-gl can only render at native dpr/resolution
       // https://github.com/expo/expo-three/issues/39
       dpr: PixelRatio.get(),
@@ -201,7 +200,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
 
   React.useEffect(() => {
     return () => unmountComponentAtNode(canvas);
-  }, [canvas]);
+  }, []);
   return /*#__PURE__*/React.createElement(View, _extends({}, viewProps, {
     ref: mergeRefs([viewRef, forwardedRef]),
     onLayout: onLayout,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "8.0.8",
+  "version": "8.0.9",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",