Made by AI, Directed by David Stein

Search
Creative Coding

React Three Fiber 9.8 Finally Stops Fighting React 19.3 — and v10 Is Quietly Becoming a WebGPU Renderer

Today's 9.8.0 fixes Strict Mode and async renderer desync; the parallel v10 alpha line has been adding TSL hooks, compute buffers and GPU storage on the way to first-class WebGPU support.

3 min read

react-three-fiber v9.8.0 landed today, September 22, 2026. It is a maintenance release, and the maintenance it does is the kind that quietly removes an hour of confusion from a lot of people’s week.

Running alongside it, on a separate branch of releases, the v10 alpha line has been doing something considerably more ambitious.

What 9.8.0 fixes

The headline is compatibility with React 19.3.0. Not full support for every new React API, but — in the maintainers’ words — it will “no longer conflict to run the latest and greatest React.”

The two bug fixes underneath are the useful part:

  • React roots are now configured synchronously and then gated on the renderer when the renderer needs async, as WebGPURenderer does. The symptom this kills is the “awkward out of sync issues” you’d hit where the React tree and the GL state disagreed about what existed.
  • Strict Mode no longer breaks the canvas. Strict Mode double-invokes effects deliberately, to surface impure setup; R3F’s async support had been interacting badly with that. Anyone who turned Strict Mode off in a three.js React project because the canvas misbehaved can turn it back on.

This follows 9.7.0’s reconciler hardening in July, which fixed children being reordered incorrectly (an internal map drifting out of sync with React’s order) and pierced props resetting to the wrong object.

What v10 is actually doing

The v10 alphas are not an incremental update. The through-line, running since alpha.1 in January, is first-class WebGPU and TSL support.

Two structural changes signal the scope. state.gl is now state.renderer — R3F supports both WebGLRenderer and WebGPURenderer, so the property could no longer be named after one of them. And there is a new scheduler, giving useFrame advanced scheduling.

On top of that, a growing set of hooks for TSL — three.js’s node-based shading language, which compiles to both WGSL and GLSL:

  • useUniform / useUniforms — reactive uniforms. As of alpha.5 (September 8) these carry three’s exact UniformNode<TNodeType, TValue> generics, so a number uniform types as Node<'float'> and TSL operations like mix() and bloom() accept it without a cast. Unknown keys are errors.
  • useNodes / useLocalNodes — node graph management.
  • useBuffers / useGPUStorage (experimental) — compute buffers and storage textures. This is the line where R3F stops being only a renderer binding and starts being a way to drive GPU compute from React.
  • useTextures — a reactive, ref-counted texture registry, so you stop threading refs through the component tree.

And a detail that matters more in practice than it sounds: TSL nodes, uniforms, buffers and storage rebuild atomically during fast refresh rather than requiring a full reload. For shader work, where the loop is edit-look-edit, losing hot reload is losing the whole workflow.

Why this is worth your attention

WebGPU is where browser graphics is going, and TSL is three.js’s answer to writing shaders once for two backends. But the React ecosystem around three.js has been, until now, a WebGL ecosystem — which meant creative coders working in R3F were structurally a generation behind people writing three.js directly.

v10 closes that. Compute shaders driven from component state, with typed uniforms and working hot reload, is a genuinely different tool from what R3F was.

It is an alpha, with the API still moving between releases. Install it to try, not to ship:

npm install @react-three/fiber@alpha

Stable work should stay on the 9.x line, which is where 9.8.0 just made things nicer.

Related Reading