prep for concurrent mode

src/DeviceOrientationControls.tsx

@@ -1,6 +1,7 @@
-import React, { forwardRef, useMemo, useEffect } from 'react'
+import React, { forwardRef, useEffect } from 'react'
 import { ReactThreeFiber, useThree, useFrame, Overwrite } from 'react-three-fiber'
 import { DeviceOrientationControls as DeviceOrientationControlsImp } from 'three/examples/jsm/controls/DeviceOrientationControls'
+import useEffectfulState from './helpers/useEffectfulState'
 
 export type DeviceOrientationControls = Overwrite<
   ReactThreeFiber.Object3DNode<DeviceOrientationControlsImp, typeof DeviceOrientationControlsImp>,
@@ -9,20 +10,20 @@ export type DeviceOrientationControls = Overwrite<
 
 export const DeviceOrientationControls = forwardRef((props: DeviceOrientationControls, ref) => {
   const { camera, invalidate } = useThree()
-  const controls = useMemo(() => new DeviceOrientationControlsImp(camera), [camera])
+  const controls = useEffectfulState(() => new DeviceOrientationControlsImp(camera), [camera], ref as any)
 
   useEffect(() => {
     controls?.addEventListener?.('change', invalidate)
     return () => controls?.removeEventListener?.('change', invalidate)
   }, [controls, invalidate])
 
-  useFrame(() => controls.update())
+  useFrame(() => controls?.update())
 
   useEffect(() => {
     const current = controls
-    current.connect()
-    return () => current.dispose()
+    current?.connect()
+    return () => current?.dispose()
   }, [controls])
 
-  return <primitive dispose={null} object={controls} ref={ref} {...props} />
+  return controls ? <primitive dispose={undefined} object={controls} {...props} /> : null
 })

src/FlyControls.tsx

@@ -1,6 +1,7 @@
-import React, { forwardRef, useMemo, useEffect } from 'react'
+import React, { forwardRef, useEffect } from 'react'
 import { ReactThreeFiber, useThree, useFrame, Overwrite } from 'react-three-fiber'
 import { FlyControls as FlyControlsImpl } from 'three/examples/jsm/controls/FlyControls'
+import useEffectfulState from './helpers/useEffectfulState'
 
 export type FlyControls = Overwrite<
   ReactThreeFiber.Object3DNode<FlyControlsImpl, typeof FlyControlsImpl>,
@@ -9,14 +10,18 @@ export type FlyControls = Overwrite<
 
 export const FlyControls = forwardRef((props: FlyControls, ref) => {
   const { camera, gl, invalidate } = useThree()
-  const controls = useMemo(() => new FlyControlsImpl(camera, gl.domElement), [camera, gl.domElement])
+  const controls = useEffectfulState<FlyControlsImpl>(
+    () => new FlyControlsImpl(camera, gl.domElement),
+    [camera, gl.domElement],
+    ref as any
+  )
 
   useEffect(() => {
     controls?.addEventListener?.('change', invalidate)
     return () => controls?.removeEventListener?.('change', invalidate)
   }, [controls, invalidate])
 
-  useFrame((_, delta) => controls.update(delta))
+  useFrame((_, delta) => controls?.update(delta))
 
-  return <primitive dispose={null} object={controls} ref={ref} {...props} />
+  return controls ? <primitive dispose={undefined} object={controls} {...props} /> : null
 })

src/Line.tsx

@@ -23,7 +23,7 @@ export const Line = React.forwardRef<Line2, Props>(function Line(
   const [line2] = useState(() => new Line2())
   const [lineGeometry] = useState(() => new LineGeometry())
   const [lineMaterial] = useState(() => new LineMaterial())
-  const resolution = useMemo(() => new THREE.Vector2(512, 512), [])
+  const [resolution] = useState(() => new THREE.Vector2(512, 512))
   useEffect(() => {
     lineGeometry.setPositions(points.flat())
     if (vertexColors) lineGeometry.setColors(vertexColors.flat())
@@ -39,10 +39,10 @@ export const Line = React.forwardRef<Line2, Props>(function Line(
     lineMaterial.needsUpdate = true
   }, [dashed, lineMaterial])
   return (
-    <primitive dispose={null} object={line2} ref={ref} {...rest}>
-      <primitive dispose={null} object={lineGeometry} attach="geometry" />
+    <primitive dispose={undefined} object={line2} ref={ref} {...rest}>
+      <primitive dispose={undefined} object={lineGeometry} attach="geometry" />
       <primitive
-        dispose={null}
+        dispose={undefined}
         object={lineMaterial}
         attach="material"
         color={color}

src/MapControls.tsx

@@ -1,6 +1,7 @@
-import React, { forwardRef, useMemo, useEffect } from 'react'
+import React, { forwardRef, useEffect } from 'react'
 import { ReactThreeFiber, useThree, useFrame, Overwrite } from 'react-three-fiber'
 import { MapControls as MapControlsImpl } from 'three/examples/jsm/controls/OrbitControls'
+import useEffectfulState from './helpers/useEffectfulState'
 
 export type MapControls = Overwrite<
   ReactThreeFiber.Object3DNode<MapControlsImpl, typeof MapControlsImpl>,
@@ -17,13 +18,13 @@ declare global {
 
 export const MapControls = forwardRef((props: MapControls = { enableDamping: true }, ref) => {
   const { camera, gl, invalidate } = useThree()
-  const controls = useMemo(() => new MapControlsImpl(camera, gl.domElement), [camera, gl])
+  const controls = useEffectfulState(() => new MapControlsImpl(camera, gl.domElement), [camera, gl], ref as any)
 
-  useFrame(() => controls.update())
+  useFrame(() => controls?.update())
   useEffect(() => {
     controls?.addEventListener?.('change', invalidate)
     return () => controls?.removeEventListener?.('change', invalidate)
   }, [controls, invalidate])
 
-  return <primitive dispose={null} object={controls} ref={ref} enableDamping {...props} />
+  return controls ? <primitive dispose={undefined} object={controls} enableDamping {...props} /> : null
 })

src/MeshDistortMaterial.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import React, { useState } from 'react'
 import { MeshPhysicalMaterial, MeshPhysicalMaterialParameters, Shader } from 'three'
 import { useFrame } from 'react-three-fiber'
 // eslint-disable-next-line
@@ -89,8 +89,7 @@ class DistortMaterialImpl extends MeshPhysicalMaterial {
 }
 
 export const MeshDistortMaterial = React.forwardRef(({ speed = 1, ...props }: Props, ref) => {
-  const material = useMemo(() => new DistortMaterialImpl(), [])
+  const [material] = useState(() => new DistortMaterialImpl())
   useFrame((state) => material && (material.time = state.clock.getElapsedTime() * speed))
-
-  return <primitive dispose={null} object={material} ref={ref} attach="material" {...props} />
+  return <primitive dispose={undefined} object={material} ref={ref} attach="material" {...props} />
 })

src/MeshWobbleMaterial.tsx

@@ -1,5 +1,5 @@
 import { MeshStandardMaterial, MeshStandardMaterialParameters, Shader } from 'three'
-import React, { useMemo } from 'react'
+import React, { useState } from 'react'
 import { useFrame } from 'react-three-fiber'
 
 type WobbleMaterialType = JSX.IntrinsicElements['meshStandardMaterial'] & {
@@ -73,7 +73,7 @@ class WobbleMaterialImpl extends MeshStandardMaterial {
 }
 
 export const MeshWobbleMaterial = React.forwardRef(({ speed = 1, ...props }: Props, ref) => {
-  const material = useMemo(() => new WobbleMaterialImpl(), [])
+  const [material] = useState(() => new WobbleMaterialImpl())
   useFrame((state) => material && (material.time = state.clock.getElapsedTime() * speed))
-  return <primitive dispose={null} object={material} ref={ref} attach="material" {...props} />
+  return <primitive dispose={undefined} object={material} ref={ref} attach="material" {...props} />
 })

src/OrbitControls.tsx

@@ -1,6 +1,7 @@
-import React, { forwardRef, useEffect, useMemo } from 'react'
+import React, { forwardRef, useEffect } from 'react'
 import { ReactThreeFiber, useThree, useFrame, Overwrite } from 'react-three-fiber'
 import { OrbitControls as OrbitControlsImpl } from 'three/examples/jsm/controls/OrbitControls'
+import useEffectfulState from './helpers/useEffectfulState'
 
 export type OrbitControls = Overwrite<
   ReactThreeFiber.Object3DNode<OrbitControlsImpl, typeof OrbitControlsImpl>,
@@ -17,16 +18,18 @@ declare global {
 
 export const OrbitControls = forwardRef((props: OrbitControls = { enableDamping: true }, ref) => {
   const { camera, gl, invalidate } = useThree()
-  const controls = useMemo(() => new OrbitControlsImpl(camera, gl.domElement), [camera, gl])
+  const controls = useEffectfulState<OrbitControlsImpl>(
+    () => new OrbitControlsImpl(camera, gl.domElement),
+    [camera, gl],
+    ref as any
+  )
 
-  useFrame(() => {
-    controls.update()
-  })
+  useFrame(() => controls?.update())
 
   useEffect(() => {
     controls?.addEventListener?.('change', invalidate)
     return () => controls?.removeEventListener?.('change', invalidate)
   }, [controls, invalidate])
 
-  return <primitive dispose={null} object={controls} ref={ref} enableDamping {...props} />
+  return controls ? <primitive dispose={undefined} object={controls} enableDamping {...props} /> : null
 })

src/PointerLockControls.tsx

@@ -1,6 +1,7 @@
-import React, { forwardRef, useMemo, useEffect } from 'react'
+import React, { forwardRef, useEffect } from 'react'
 import { ReactThreeFiber, useThree, Overwrite } from 'react-three-fiber'
 import { PointerLockControls as PointerLockControlsImpl } from 'three/examples/jsm/controls/PointerLockControls'
+import useEffectfulState from './helpers/useEffectfulState'
 
 export type PointerLockControls = Overwrite<
   ReactThreeFiber.Object3DNode<PointerLockControlsImpl, typeof PointerLockControlsImpl>,
@@ -9,18 +10,22 @@ export type PointerLockControls = Overwrite<
 
 export const PointerLockControls = forwardRef((props: PointerLockControls, ref) => {
   const { camera, gl, invalidate } = useThree()
-  const controls = useMemo(() => new PointerLockControlsImpl(camera, gl.domElement), [camera, gl.domElement])
+  const controls = useEffectfulState(
+    () => new PointerLockControlsImpl(camera, gl.domElement),
+    [camera, gl.domElement],
+    ref as any
+  )
 
   useEffect(() => {
     controls?.addEventListener?.('change', invalidate)
     return () => controls?.removeEventListener?.('change', invalidate)
   }, [controls, invalidate])
 
   useEffect(() => {
-    const handler = () => controls.lock()
+    const handler = () => controls?.lock()
     document.addEventListener('click', handler)
     return () => document.removeEventListener('click', handler)
   }, [controls])
 
-  return <primitive dispose={null} object={controls} ref={ref} {...props} />
+  return controls ? <primitive dispose={undefined} object={controls} {...props} /> : null
 })

src/Reflector.tsx

@@ -34,7 +34,7 @@ export const Reflector = forwardRef(
     )
 
     return (
-      <primitive dispose={null} object={reflector} ref={ref as React.MutableRefObject<Mesh>} {...props}>
+      <primitive dispose={undefined} object={reflector} ref={ref as React.MutableRefObject<Mesh>} {...props}>
         {React.Children.only(children)}
       </primitive>
     )

src/Sky.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useMemo } from 'react'
+import React, { forwardRef, useMemo, useState } from 'react'
 import { ReactThreeFiber } from 'react-three-fiber'
 import { Sky as SkyImpl } from 'three/examples/jsm/objects/Sky'
 import { Vector3 } from 'three'
@@ -41,10 +41,11 @@ export const Sky = forwardRef(
     ref
   ) => {
     const scale = useMemo(() => new Vector3().setScalar(distance), [distance])
-    const sky = useMemo(() => new SkyImpl(), [])
+    const [sky] = useState(() => new SkyImpl())
 
     return (
       <primitive
+        dispose={undefined}
         object={sky}
         ref={ref}
         material-uniforms-mieCoefficient-value={mieCoefficient}

src/Stars.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef, useMemo, useRef } from 'react'
-import { useFrame, ReactThreeFiber } from 'react-three-fiber'
+import React, { forwardRef, useMemo, useState, useRef } from 'react'
+import { useFrame } from 'react-three-fiber'
 import { Points, Vector3, Spherical, Color, AdditiveBlending, ShaderMaterial } from 'three'
 
 type Props = {
@@ -71,7 +71,7 @@ export const Stars = forwardRef(
     }, [count, depth, factor, radius, saturation])
     useFrame((state) => material.current && (material.current.uniforms.time.value = state.clock.getElapsedTime()))
 
-    const starfieldMaterial = useMemo(() => new StarfieldMaterial(), [])
+    const [starfieldMaterial] = useState(() => new StarfieldMaterial())
 
     return (
       <points ref={ref as React.MutableRefObject<Points>}>
@@ -81,6 +81,7 @@ export const Stars = forwardRef(
           <bufferAttribute attachObject={['attributes', 'size']} args={[size, 1]} />
         </bufferGeometry>
         <primitive
+          dispose={undefined}
           ref={material}
           object={starfieldMaterial}
           attach="material"

src/Stats.tsx

@@ -1,6 +1,7 @@
-import { useState, useEffect, RefObject } from 'react'
+import { useEffect, RefObject } from 'react'
 import { addEffect, addAfterEffect } from 'react-three-fiber'
-import * as StatsImpl from 'three/examples/js/libs/stats.min'
+import StatsImpl from 'three/examples/js/libs/stats.min'
+import useEffectfulState from './helpers/useEffectfulState'
 
 type Props = {
   showPanel?: number
@@ -9,19 +10,21 @@ type Props = {
 }
 
 export function Stats({ showPanel = 0, className, parent }: Props): null {
-  const [stats] = useState(() => new (StatsImpl as any)())
+  const stats = useEffectfulState(() => new StatsImpl(), [])
   useEffect(() => {
-    const node = (parent && parent.current) || document.body
-    stats.showPanel(showPanel)
-    node?.appendChild(stats.dom)
-    if (className) stats.dom.classList.add(className)
-    const begin = addEffect(() => stats.begin())
-    const end = addAfterEffect(() => stats.end())
-    return () => {
-      node?.removeChild(stats.dom)
-      begin()
-      end()
+    if (stats) {
+      const node = (parent && parent.current) || document.body
+      stats.showPanel(showPanel)
+      node?.appendChild(stats.dom)
+      if (className) stats.dom.classList.add(className)
+      const begin = addEffect(() => stats.begin())
+      const end = addAfterEffect(() => stats.end())
+      return () => {
+        node?.removeChild(stats.dom)
+        begin()
+        end()
+      }
     }
-  }, [parent])
+  }, [parent, stats, className, showPanel])
   return null
 }

src/Text.tsx

@@ -46,7 +46,15 @@ export const Text = forwardRef(({ anchorX = 'center', anchorY = 'middle', childr
       })
   )
   return (
-    <primitive dispose={null} object={troikaMesh} ref={ref} text={text} anchorX={anchorX} anchorY={anchorY} {...props}>
+    <primitive
+      dispose={undefined}
+      object={troikaMesh}
+      ref={ref}
+      text={text}
+      anchorX={anchorX}
+      anchorY={anchorY}
+      {...props}
+    >
       {nodes}
     </primitive>
   )

src/TrackballControls.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef, useMemo, useEffect } from 'react'
 import { ReactThreeFiber, useThree, useFrame, Overwrite } from 'react-three-fiber'
 import { TrackballControls as TrackballControlsImpl } from 'three/examples/jsm/controls/TrackballControls'
+import useEffectfulState from './helpers/useEffectfulState'
 
 export type TrackballControls = Overwrite<
   ReactThreeFiber.Object3DNode<TrackballControlsImpl, typeof TrackballControlsImpl>,
@@ -17,13 +18,13 @@ declare global {
 
 export const TrackballControls = forwardRef((props: TrackballControls, ref) => {
   const { camera, gl, invalidate } = useThree()
-  const controls = useMemo(() => new TrackballControlsImpl(camera, gl.domElement), [camera, gl])
+  const controls = useEffectfulState(() => new TrackballControlsImpl(camera, gl.domElement), [camera, gl], ref as any)
 
-  useFrame(() => controls.update())
+  useFrame(() => controls?.update())
   useEffect(() => {
     controls?.addEventListener?.('change', invalidate)
     return () => controls?.removeEventListener?.('change', invalidate)
   }, [controls, invalidate])
 
-  return <primitive dispose={null} object={controls} ref={ref} {...props} />
+  return controls ? <primitive dispose={undefined} object={controls} {...props} /> : null
 })

src/TransformControls.tsx

@@ -1,7 +1,8 @@
 import { Object3D, Group } from 'three'
-import React, { forwardRef, useRef, useLayoutEffect, useEffect, useMemo } from 'react'
+import React, { forwardRef, useRef, useLayoutEffect, useEffect } from 'react'
 import { ReactThreeFiber, useThree, Overwrite } from 'react-three-fiber'
 import { TransformControls as TransformControlsImpl } from 'three/examples/jsm/controls/TransformControls'
+import useEffectfulState from './helpers/useEffectfulState'
 import pick from 'lodash.pick'
 import omit from 'lodash.omit'
 
@@ -53,23 +54,27 @@ export const TransformControls = forwardRef(
     const objectProps = omit(props, transformOnlyPropNames)
 
     const { camera, gl, invalidate } = useThree()
-    const controls = useMemo(() => new TransformControlsImpl(camera, gl.domElement), [camera, gl.domElement])
+    const controls = useEffectfulState(
+      () => new TransformControlsImpl(camera, gl.domElement),
+      [camera, gl.domElement],
+      ref as any
+    )
 
     const group = useRef<Group>()
-    useLayoutEffect(() => void controls.attach(group.current as Object3D), [children, controls])
+    useLayoutEffect(() => void controls?.attach(group.current as Object3D), [children, controls])
 
     useEffect(() => {
       controls?.addEventListener?.('change', invalidate)
       return () => controls?.removeEventListener?.('change', invalidate)
     }, [controls, invalidate])
 
-    return (
+    return controls ? (
       <>
-        <primitive dispose={null} object={controls} ref={ref} {...transformProps} />
+        <primitive dispose={undefined} object={controls} {...transformProps} />
         <group ref={group} {...objectProps}>
           {children}
         </group>
       </>
-    )
+    ) : null
   }
 )