Advanced

Fresh

Advanced patterns, performance optimization, and architectural guidance for production R3F applications.

In This Section

• Pitfalls - Common mistakes and how to avoid them. The most important gotchas when building with R3F and three.js.
• Scaling Performance - On-demand rendering, instancing, LOD, performance monitoring, and concurrency.

Key Principles

• Mutate in useFrame, not setState - Direct mutation of three.js objects in the render loop is always faster than routing through React state
• Re-use geometries and materials - Creating new objects is expensive; share them when possible
• Use useLoader - Assets loaded via useLoader are automatically cached and shared across the component tree
• Instancing - For many similar objects, use instancedMesh to reduce draw calls dramatically