r3f-best-practices
Installation
Summary
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
SKILL.md
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
Related skills