Learning on Web Dev Open is free for all.

Immersive Web > Three.js, R3F, and when to use neitherReact Three Fiber is a reconciler, not a wrapper
Phase 07Three.js, R3F, and when to use neither340 of 434

React Three Fiber is a reconciler, not a wrapper

JSX that creates three.js objects instead of DOM nodes, with all the consequences that implies.

Concept14 minAI pair

R3F is a React renderer whose host elements are three.js classes rather than DOM tags. A mesh element constructs a Mesh, args is the constructor arguments, and attach says which property of the parent this child should be assigned to rather than added as a child. Nothing is React-specific about the resulting scene. You can grab a ref and it is an ordinary three.js object you could have written by hand.

The important consequence is that React re-rendering and frame rendering are different things happening at different rates. React reconciles when props change, which should be rare; the render loop runs sixty times a second regardless. If those two get confused, state updated every frame to drive an animation, you get React doing reconciliation work sixty times a second to change one number that a ref could have changed for free.

You should now be able to

  • Explain what args and attach do
  • Say what React re-render means inside a canvas
Ask the community

Loading…