BREAKING CHANGE: change accessing children from useInstanceHandle()'s…

package.json

@@ -54,16 +54,16 @@
   },
   "devDependencies": {
     "@react-three/drei": "^9.68.2",
-    "@react-three/fiber": "^8.13.0",
+    "@react-three/fiber": "9.0.0-rc.2",
     "@storybook/addon-essentials": "^7.0.10",
     "@storybook/addon-interactions": "^7.0.10",
     "@storybook/addon-links": "^7.0.10",
     "@storybook/blocks": "^7.0.10",
     "@storybook/react": "^7.0.10",
     "@storybook/react-vite": "^7.0.11",
     "@storybook/testing-library": "^0.0.14-next.2",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.1",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
     "@types/three": "^0.150.2",
     "@typescript-eslint/eslint-plugin": "^5.59.1",
     "@typescript-eslint/parser": "^5.59.1",
@@ -78,8 +78,8 @@
     "husky": "^8.0.3",
     "lint-staged": "^13.2.2",
     "prettier": "^2.8.8",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "rimraf": "^5.0.0",
     "semantic-release": "^21.0.2",
     "storybook": "^7.0.10",
@@ -90,7 +90,7 @@
   },
   "peerDependencies": {
     "@react-three/fiber": ">=8.0",
-    "react": ">=18.0",
+    "react": ">=19.0",
     "three": ">= 0.138.0"
   }
 }

src/EffectComposer.test.tsx

@@ -15,7 +15,7 @@ global.IS_REACT_ACT_ENVIRONMENT = true
 vi.mock('scheduler', () => require('scheduler/unstable_mock'))
 
 // Create virtual R3F root for testing
-extend(THREE)
+extend(THREE as any)
 const root = createRoot({
   style: {} as CSSStyleDeclaration,
   addEventListener: (() => {}) as any,

src/EffectComposer.tsx

@@ -1,6 +1,8 @@
-import type { TextureDataType } from 'three'
+import type { TextureDataType, Group } from 'three'
 import { HalfFloatType, NoToneMapping } from 'three'
-import React, {
+import {
+  type JSX,
+  memo,
   forwardRef,
   useMemo,
   useEffect,
@@ -9,7 +11,7 @@ import React, {
   useRef,
   useImperativeHandle,
 } from 'react'
-import { useThree, useFrame } from '@react-three/fiber'
+import { useThree, useFrame, type Instance } from '@react-three/fiber'
 import {
   EffectComposer as EffectComposerImpl,
   RenderPass,
@@ -51,7 +53,7 @@ export type EffectComposerProps = {
 const isConvolution = (effect: Effect): boolean =>
   (effect.getAttributes() & EffectAttribute.CONVOLUTION) === EffectAttribute.CONVOLUTION
 
-export const EffectComposer = React.memo(
+export const EffectComposer = memo(
   forwardRef<EffectComposerImpl, EffectComposerProps>(
     (
       {
@@ -128,25 +130,25 @@ export const EffectComposer = React.memo(
         enabled ? renderPriority : 0
       )
 
-      const group = useRef(null)
+      const group = useRef<Group>(null!)
       useLayoutEffect(() => {
         const passes: Pass[] = []
 
         // TODO: rewrite all of this with R3F v9
-        const groupInstance = (group.current as any)?.__r3f as { objects: unknown[] }
+        const groupInstance = (group.current as Group & { __r3f: Instance<Group> }).__r3f
 
         if (groupInstance && composer) {
-          const children = groupInstance.objects
+          const children = groupInstance.children
 
           for (let i = 0; i < children.length; i++) {
-            const child = children[i]
+            const child = children[i].object
 
             if (child instanceof Effect) {
               const effects: Effect[] = [child]
 
               if (!isConvolution(child)) {
                 let next: unknown = null
-                while ((next = children[i + 1]) instanceof Effect) {
+                while ((next = children[i + 1]?.object) instanceof Effect) {
                   if (isConvolution(next)) break
                   effects.push(next)
                   i++

src/Selection.tsx

@@ -1,12 +1,13 @@
 import * as THREE from 'three'
 import React, { createContext, useState, useContext, useEffect, useRef, useMemo } from 'react'
+import { type ThreeElements } from '@react-three/fiber'
 
 export type Api = {
   selected: THREE.Object3D[]
   select: React.Dispatch<React.SetStateAction<THREE.Object3D[]>>
   enabled: boolean
 }
-export type SelectApi = JSX.IntrinsicElements['group'] & {
+export type SelectApi = Omit<ThreeElements['group'], 'ref'> & {
   enabled?: boolean
 }
 

src/effects/Autofocus.tsx

@@ -30,7 +30,7 @@ export type AutofocusProps = React.ComponentProps<typeof DepthOfField> & {
 }
 
 export type AutofocusApi = {
-  dofRef: RefObject<DepthOfFieldEffect>
+  dofRef: RefObject<DepthOfFieldEffect | null>
   hitpoint: THREE.Vector3
   update: (delta: number, updateTarget: boolean) => void
 }

src/effects/Bloom.tsx

@@ -3,4 +3,5 @@ import { wrapEffect } from '../util'
 
 export const Bloom = wrapEffect(BloomEffect, {
   blendFunction: BlendFunction.ADD,
+  args: [],
 })

src/effects/GodRays.tsx

@@ -5,7 +5,7 @@ import { EffectComposerContext } from '../EffectComposer'
 import { resolveRef } from '../util'
 
 type GodRaysProps = ConstructorParameters<typeof GodRaysEffect>[2] & {
-  sun: Mesh | Points | React.MutableRefObject<Mesh | Points>
+  sun: Mesh | Points | React.RefObject<Mesh | Points>
 }
 
 export const GodRays = forwardRef(function GodRays(props: GodRaysProps, ref: Ref<GodRaysEffect>) {

src/effects/Noise.tsx

@@ -1,4 +1,4 @@
 import { NoiseEffect, BlendFunction } from 'postprocessing'
 import { wrapEffect } from '../util'
 
-export const Noise = wrapEffect(NoiseEffect, { blendFunction: BlendFunction.COLOR_DODGE })
+export const Noise = wrapEffect(NoiseEffect, { blendFunction: BlendFunction.COLOR_DODGE, args: [] })

src/effects/Outline.tsx

@@ -1,12 +1,12 @@
 import { OutlineEffect } from 'postprocessing'
-import { Ref, MutableRefObject, forwardRef, useMemo, useEffect, useContext, useRef } from 'react'
+import { Ref, RefObject, forwardRef, useMemo, useEffect, useContext, useRef } from 'react'
 import { Object3D } from 'three'
 import { useThree } from '@react-three/fiber'
 import { EffectComposerContext } from '../EffectComposer'
 import { selectionContext } from '../Selection'
 import { resolveRef } from '../util'
 
-type ObjectRef = MutableRefObject<Object3D>
+type ObjectRef = RefObject<Object3D>
 
 export type OutlineProps = ConstructorParameters<typeof OutlineEffect>[2] &
   Partial<{
@@ -93,7 +93,7 @@ export const Outline = forwardRef(function Outline(
     invalidate()
   }, [effect, invalidate, selectionLayer])
 
-  const ref = useRef<OutlineEffect>()
+  const ref = useRef<OutlineEffect>(undefined)
   useEffect(() => {
     if (api && api.enabled) {
       if (api.selected?.length) {

src/effects/ScanlineEffect.tsx

@@ -1,4 +1,4 @@
 import { ScanlineEffect, BlendFunction } from 'postprocessing'
 import { wrapEffect } from '../util'
 
-export const Scanline = wrapEffect(ScanlineEffect, { blendFunction: BlendFunction.OVERLAY, density: 1.25 })
+export const Scanline = wrapEffect(ScanlineEffect, { blendFunction: BlendFunction.OVERLAY, density: 1.25, args: [] })

src/effects/SelectiveBloom.tsx

@@ -1,13 +1,13 @@
 import { SelectiveBloomEffect, BlendFunction } from 'postprocessing'
 import type { BloomEffectOptions } from 'postprocessing'
-import React, { Ref, MutableRefObject, forwardRef, useMemo, useEffect, useContext, useRef } from 'react'
+import React, { Ref, RefObject, forwardRef, useMemo, useEffect, useContext, useRef } from 'react'
 import { Object3D } from 'three'
 import { useThree } from '@react-three/fiber'
 import { EffectComposerContext } from '../EffectComposer'
 import { selectionContext } from '../Selection'
 import { resolveRef } from '../util'
 
-type ObjectRef = MutableRefObject<Object3D>
+type ObjectRef = RefObject<Object3D>
 
 export type SelectiveBloomProps = BloomEffectOptions &
   Partial<{

src/effects/TiltShift.tsx

@@ -1,4 +1,4 @@
 import { TiltShiftEffect, BlendFunction } from 'postprocessing'
 import { wrapEffect } from '../util'
 
-export const TiltShift = wrapEffect(TiltShiftEffect, { blendFunction: BlendFunction.ADD })
+export const TiltShift = wrapEffect(TiltShiftEffect, { blendFunction: BlendFunction.ADD, args: [] })

src/effects/TiltShift2.tsx

@@ -87,4 +87,4 @@ export class TiltShiftEffect extends Effect {
   }
 }
 
-export const TiltShift2 = wrapEffect(TiltShiftEffect, { blendFunction: BlendFunction.NORMAL })
+export const TiltShift2 = wrapEffect(TiltShiftEffect, { blendFunction: BlendFunction.NORMAL, args: [] })

src/effects/Water.tsx

@@ -30,4 +30,4 @@ export class WaterEffectImpl extends Effect {
   }
 }
 
-export const WaterEffect = wrapEffect(WaterEffectImpl, { blendFunction: BlendFunction.NORMAL })
+export const WaterEffect = wrapEffect(WaterEffectImpl, { blendFunction: BlendFunction.NORMAL, args: [] })

src/util.tsx

@@ -1,17 +1,16 @@
-import React, { MutableRefObject } from 'react'
+import React, { RefObject } from 'react'
 import { Vector2 } from 'three'
 import * as THREE from 'three'
-import { type ReactThreeFiber, extend, useThree } from '@react-three/fiber'
+import { type ReactThreeFiber, type ThreeElement, extend, useThree } from '@react-three/fiber'
 import type { Effect, BlendFunction } from 'postprocessing'
 
-export const resolveRef = <T,>(ref: T | React.MutableRefObject<T>) =>
+export const resolveRef = <T,>(ref: T | React.RefObject<T>) =>
   typeof ref === 'object' && ref != null && 'current' in ref ? ref.current : ref
 
 export type EffectConstructor = new (...args: any[]) => Effect
 
-export type EffectProps<T extends EffectConstructor> = ReactThreeFiber.Node<
-  T extends Function ? T['prototype'] : InstanceType<T>,
-  T
+export type EffectProps<T extends EffectConstructor> = ThreeElement<
+  T extends Function ? T['prototype'] : InstanceType<T>
 > &
   ConstructorParameters<T>[0] & {
     blendFunction?: BlendFunction