r3f-best-practices

To optimize React Three Fiber performance, audit your components for excessive re-renders, improper Zustand subscriptions, and setState calls inside useFrame loops to identify and correct inefficient render-loop logic.

Best practices for using Zustand with WebGL components involve avoiding improper store subscriptions that trigger excessive React re-renders, ensuring your 3D scene maintains a stable frame rate without unnecessary CPU overhead.

Your React Three Fiber animation loop causes high CPU usage due to inefficient frame-rate independence handling and setState calls inside useFrame, which can be corrected by applying proper render-loop patterns and GPU memory management.

Yes, the r3f-best-practices skill provides architectural guidance for physics integration with Rapier, alongside best practices for asset loading with Suspense and visibility toggling to maintain optimal 3D web rendering performance.

The best way to handle async asset loading in React Three Fiber is by using Suspense boundaries, which ensures assets load efficiently without blocking the main thread or causing performance bottlenecks during scene rendering.