r3f-best-practices

SKILL.md

Comprehensive guide for optimizing React Three Fiber and Poimandres ecosystem code across 70+ rules.

Covers 12 priority-ranked categories from performance and re-renders (critical) through physics and debug tools, with rule prefixes for quick reference

Emphasizes avoiding setState in useFrame, isolating React state, using Zustand selectors, and memoizing expensive components to prevent excessive re-renders

Includes patterns for useFrame animation with delta time, Drei helpers (useGLTF, useTexture, Environment), Suspense loading, and post-processing effects

Provides code examples for common pitfalls: direct ref mutation instead of state updates, visibility toggling instead of remounting, and transient subscriptions for continuous values

React Three Fiber Best Practices

Comprehensive guide for React Three Fiber and the Poimandres ecosystem. Contains 70+ rules across 12 categories, prioritized by impact.

Sources & Credits

Additional tips from 100 Three.js Tips by Utsubo

When to Apply

Reference these guidelines when:

Writing new R3F components

Optimizing R3F performance (re-renders are the #1 issue)

Using Drei helpers correctly

Managing state with Zustand

Implementing post-processing or physics

Ecosystem Coverage