RFC: v9 goals

[krispya]

Let's discuss some v9 goals here. These are all tentative right now.

Completed

• Add stage-based lifecycle, deprecate useFrame for useUpdate [v9] feat: implement update lifecycle with useUpdate #2279
• Remove onUpdate prop [v9] refactor!: remove onUpdate prop #2480
• Remove updateStyle from Size [v9] refactor!: remove updateStyle from Size #2489
• act types for testing [v9] fix(types): don't declare unstable_act #2492
• Instance descriptors, refactor JSX types & extend [v9] refactor!: instance descriptors, dynamically map ThreeElements #2465
• prefer named functions, for loops in hot paths [v9] fix: prefer named functions, for loops in hot paths #2540 (backported in v8.8.7)
• upgrade Zustand to v4 [v9] refactor(types)!: upgrade Zustand to v4 #2558
• export all public types [v9] refactor(types): export public types #2559, [v9] refactor: streamline core, harden exports #2583
• respect React.StrictMode across renderers [v9] fix: forward StrictMode #2547
• anonymous extend overload for libraries [v9] experiment: extend factory overload #2785
• Suspense causes attach to be called multiple times #2250

TODO

• New caching model, update useLoader for React.use: [v9] feat(cache): promise based caching with workers #3245
• Primitive with children mounting / unmounting + documentation #3204
• scene from useThree is not always a THREE.Scene within portal #2725
• Breaking changes in React experimental branch #3222
• RFC: workflow canvas prop  #2299

Pending

• New scheduler
• Refactor internal state

[krispya]

I'd also like to discuss making renderer.physicallyCorrectLights = true by default. See: #2127

[CodyJasonBennett]

I don't think we can change defaults for lighting OOTB, problems are detailed in the linked issue. That might be a consideration for #2299 but the issue of decay not respecting physicallyCorrectLights remains. I think this is something to be considered in threejs itself.

[krispya]

I don't think we can change defaults for lighting OOTB, problems are detailed in the linked issue. That might be a consideration for #2299 but the issue of decay not respecting physicallyCorrectLights remains. I think this is something to be considered in threejs itself.

Agreed.

After a conversation with Paul, I'm making sure a pass on the frameloop modes is also on the to-do list. In particular demand needs to be updated so that it skips the render loop but still tracks delta so starting and stopping render doesn't destroy delta based animations.

[saitonakamura]

What are your thoughts on updating to zustand v4?

[krispya]

I'm in favor, the typing is hugely improved and so is compatibility with context. But it isn't a trivial update. Is it something you would be interested in spearheading? I can contribute.

[saitonakamura]

Yeah, I think so. When upgrading to r3f v8 I erroneously update zustand to v4. I had to revert back of course but not until I had some fair share of migration experience (we use it too)

[krispya]

That would be great. If you start a branch, I can do review and assist.

[CodyJasonBennett]

Just did this with react-ogl in pmndrs/react-ogl#75, giving it a try here in #2558.

[krispya]

Thanks so much for all your hard work Cody. I wanted to add here some type exports for the different r3f props which were previously exported as Vector3, Color, etc.

[aspheris]

Hello! Whats the status of V9? I'm looking to use the lifecycle stages in useUpdate but it looks like its not officially ready yet.

[krispya]

Hello! Whats the status of V9? I'm looking to use the lifecycle stages in useUpdate but it looks like its not officially ready yet.

Hey! So we have been working on projects in parallel to this one and trying out some of the v9 updates internally as we go along. For example, I am exploring alternatives to useUpdate that are more robust for video game style apps right now. It may be a little bit longer before there is a stable version available.

[chrisweb]

In the 9.0.0-beta.1 the declarations are missing, same as in #3331

Could we please get a new beta that includes the missing types declarations?

[chrisweb]

I tested a bunch of stuff using the v9 and found that a lot of examples worked well, so thank you for your hard work on preparing for the release of react 19

I found two errors likely caused by changes in the react three fiber v9 beta 1 or react 19, I created a repository with a reproduction for two cases and added some explanations to the README

I used Next.js 15 canary, because Next.js 15 comes with React 19 and because there is a Next.js Conf on Oct 24, 2023 during which they will likely announce the release of the first stable version of Next.js 15, so I assume that soon the amount of bug reports related to React 19 will surge

I have a question though, the second error related to leva seems to be related to a change in React 19 so I assume I post a ticket about it in the leva repository, but for the first error related to the effectcomposer, I'm not sure is this belongs in this repository as it is likely connected to changes in the R3F v9 or should I open a ticket in the react three postprocessing repo?

[maggo]

next.js 15 has just been released an hour ago https://github.com/vercel/next.js/releases/tag/v15.0.0 and with it comes the react 19 dependency.

I've been trying to do the "happy path" upgrade via their supplied codemods but hitting a couple compile errors after updating r3f to v9 beta:

error TS2305: Module '"@react-three/fiber"' has no exported member 'Canvas'.

error TS2305: Module '"@react-three/fiber"' has no exported member 'GroupProps'.

error TS2339: Property 'group' does not exist on type 'JSX.IntrinsicElements'.

[krispya]

I tested a bunch of stuff using the v9 and found that a lot of examples worked well, so thank you for your hard work on preparing for the release of react 19

I found two errors likely caused by changes in the react three fiber v9 beta 1 or react 19, I created a repository with a reproduction for two cases and added some explanations to the README

I used Next.js 15 canary, because Next.js 15 comes with React 19 and because there is a Next.js Conf on Oct 24, 2023 during which they will likely announce the release of the first stable version of Next.js 15, so I assume that soon the amount of bug reports related to React 19 will surge

I have a question though, the second error related to leva seems to be related to a change in React 19 so I assume I post a ticket about it in the leva repository, but for the first error related to the effectcomposer, I'm not sure is this belongs in this repository as it is likely connected to changes in the R3F v9 or should I open a ticket in the react three postprocessing repo?

Thanks for doing the testing! We haven't touched v9 in a while waiting for React to get a new RC. Well that time has come. The best place to report issues is with the libraries they affect directly. Then the maintainers there can identify if the issues is their code or R3F's.

[chrisweb]

error TS2305: Module '"@react-three/fiber"' has no exported member 'Canvas'.

@maggo this is because in the r3f beta 1 package (in /node_modules) there is a missing types directory, to fix this you need to install another version of r3f (for example 9.0.0-beta.0) in a seperate directory somewhere and then copy over the /node_modules/@react-three/fiber/dist/declarations to the r3f v9 beta 1 directory, if you need more have a look at the README of my r3f v9 tests repository, the basic page in /app has a working demo of nextjs 15 / react 19 and r3f v9, this is of course just a temporary fix, I'm sure the next release of r3f v9 will have fixed types

[iduuck]

I have fixed the issue with the typescript errors by just rolling back to alpha.8 instead of beta.1.

[CodyJasonBennett]

I just released 9.0.0-rc.0 against React's 19.0.0-rc.0 with republished types and improvements from v8. React 19 is back to nightly builds for the meantime, and we'll resume releases once they go back to a scheme which leverages pinning.

[sshmaxime]

So we can expect 9.x.x to support React 19 ? @CodyJasonBennett
If so do you have an approximative ETA of this new version of ReactThreeFiber ?

Thanks for your work on this amazing library 🙏

[krispya]

It does support React 19 and you can find an RC right here: https://www.npmjs.com/package/@react-three/fiber/v/9.0.0-rc.1

We will keep as close to React's own release schedule as we can.

[sshmaxime]

Amazing, i wasn't 100% sure ! Thanks 🫡 @krispya

[mlenser]

FYI for others: React 19 officially released on Dec 5th: https://github.com/facebook/react/releases/tag/v19.0.0

I've tried many different variants from 9.0.0-rc.1, 9.0.0-rc.0, 9.0.0-beta.1, and 9.0.0-alpha.8. All fail with NextJs 15 with:

Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at EffectComposer.useLayoutEffect (EffectComposer.tsx:139:40)
    at react-stack-bottom-frame (react-reconciler.development.js:14573:20)

For context we're using

import { useGLTF, Environment, Merged } from '@react-three/drei'
import { Canvas, useFrame } from '@react-three/fiber'
import { ToneMapping, Bloom, EffectComposer } from '@react-three/postprocessing'

The error is happening in Canvas so it's in @react-three/fiber. I don't see anything about Canvas in https://github.com/pmndrs/react-three-fiber/blob/v9/docs/tutorials/v9-migration-guide.mdx

[krispya]

To be clear, 9.0.0-rc.1 works with React 19. You appear to be getting an error with ecosystem libraries, likely @react-three/postprocessing. Can you isolate the problem and report it to that library's repo? There are different maintainers for each library.

[krispya]

Closing this as it is out of date. v9 has become a compatibility update for React 19 with no breaking changes. Breaking changes are now moved to a future v10.

[mlenser]

It is indeed an issue with postprocessing or @react-three/postprocessing. Without those it works.

pmndrs/react-postprocessing#301 covers it. Thank you!