React Three Fiber (R3F)

React Three Fiber scenes drop below 60fps when React reconciliation triggers per-frame re-renders, often caused by setState calls inside useFrame loops or broad Zustand store subscriptions updating the component tree unnecessarily.

Optimize 3D rendering by mutating refs directly within useFrame callbacks instead of triggering React re-renders, enforcing granular Zustand selectors, maintaining constant prop references, and protecting asset preloads with Suspense boundaries.

The best way to manage Zustand subscriptions for R3F animations is using selective, granular selectors that extract only necessary state slices, preventing broad re-renders and ensuring delta-based animation updates maintain coherent 60fps performance.

Using React state updates inside useFrame directly causes performance issues by triggering React reconciliation cascades; you must instead execute useFrame-driven ref mutations to update objects without affecting the React component tree.

Prevent inline prop allocation disruptions by maintaining stable, constant prop references passed to R3F components, ensuring that per-frame render cycles avoid creating new object instances that trigger unnecessary React reconciliation.

Audit a React Three Fiber application by hunting for setState-in-useFrame bugs, inline object allocations, and missing Suspense wrappers around asset loads, then documenting findings in internal R3F coherence notes before shipping.