Learning on Web Dev Open is free for all.

Immersive Web > Three.js, R3F, and when to use neitheruseFrame, refs, and never calling setState at 60Hz
Phase 07Three.js, R3F, and when to use neither341 of 434

useFrame, refs, and never calling setState at 60Hz

Animate through mutable refs, keep React out of the hot path, and prove the difference with a profiler.

Build40 minAI adversary

Build this in your own editor

This one runs on your machine rather than in the browser workbench. Work to the outcomes below, then come back and mark it complete.

You should now be able to

  • Animate an object without triggering a React render
  • Measure renders per second and defend the number
  • Decide what genuinely belongs in state
Ask the community

Loading…

← PreviousReact Three Fiber is a reconciler, not a wrapperThree.js, R3F, and when to use neitherNext →Drei, and the cost of a nice abstractionThree.js, R3F, and when to use neither