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.
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
Loading…