fix: dispose and lazy setters

src/Autofocus.tsx → src/effects/Autofocus.tsx

@@ -8,10 +8,11 @@ import React, {
   forwardRef,
   useImperativeHandle,
   RefObject,
+  useMemo,
 } from 'react'
 import { useThree, useFrame, createPortal } from '@react-three/fiber'
 import { CopyPass, DepthPickingPass, DepthOfFieldEffect } from 'postprocessing'
-import { DepthOfField, EffectComposerContext } from './index'
+import { DepthOfField, EffectComposerContext } from '..'
 import { easing } from 'maath'
 
 export type AutofocusProps = typeof DepthOfField & {
@@ -42,8 +43,8 @@ export const Autofocus = forwardRef<AutofocusApi, AutofocusProps>(
     const { composer, camera } = useContext(EffectComposerContext)
 
     // see: https://codesandbox.io/s/depthpickingpass-x130hg
-    const [depthPickingPass] = useState(new DepthPickingPass())
-    const [copyPass] = useState(new CopyPass())
+    const [depthPickingPass] = useState(() => new DepthPickingPass())
+    const [copyPass] = useState(() => new CopyPass())
     useEffect(() => {
       composer.addPass(depthPickingPass)
       composer.addPass(copyPass)
@@ -53,9 +54,16 @@ export const Autofocus = forwardRef<AutofocusApi, AutofocusProps>(
       }
     }, [composer, depthPickingPass, copyPass])
 
-    const [hitpoint] = useState(new THREE.Vector3(0, 0, 0))
+    useEffect(() => {
+      return () => {
+        depthPickingPass.dispose()
+        copyPass.dispose()
+      }
+    }, [depthPickingPass, copyPass])
+
+    const [hitpoint] = useState(() => new THREE.Vector3(0, 0, 0))
 
-    const [ndc] = useState(new THREE.Vector3(0, 0, 0))
+    const [ndc] = useState(() => new THREE.Vector3(0, 0, 0))
     const getHit = useCallback(
       async (x: number, y: number) => {
         ndc.x = x
@@ -104,15 +112,15 @@ export const Autofocus = forwardRef<AutofocusApi, AutofocusProps>(
     })
 
     // Ref API
-    useImperativeHandle(
-      fref,
+    const api = useMemo<AutofocusApi>(
       () => ({
         dofRef,
         hitpoint,
         update,
       }),
       [hitpoint, update]
     )
+    useImperativeHandle(fref, () => api, [api])
 
     return (
       <>

src/index.tsx

@@ -1,3 +1,4 @@
+export * from './effects/Autofocus'
 export * from './effects/Bloom'
 export * from './effects/BrightnessContrast'
 export * from './effects/ChromaticAberration'
@@ -30,6 +31,5 @@ export * from './effects/TiltShift2'
 export * from './effects/SSR'
 
 export * from './Selection'
-export * from './Autofocus'
 export * from './EffectComposer'
 export * from './util'