r3f-best-practices

Comprehensive guide for React Three Fiber and the Poimandres ecosystem. Contains 70+ rules across 12 categories, prioritized by impact. Additional tips from 100 Three.js Tips by Utsubo Reference these guidelines when: Read individual rule files for detailed explanations and code examples: For the complete guide with all rules expanded: ../R3F_BEST_PRACTICES.md - 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 - @react-three/fiber - React renderer for Three.js - @react-three/drei - Useful helpers and abstractions - @react-three/postprocessing - Post-processing effects - @react-three/rapier - Physics engine - zustand - State management - leva - Debug GUI - perf-never-set-state-in-useframe - NEVER call setState in useFrame - perf-isolate-state - Isolate components that need React state - perf-zustand-selectors - Use Zustand selectors, not entire store - perf-transient-subscriptions - Use transient subscriptions for continuous values - perf-memo-components - Memoize expensive components - perf-keys-for-lists - Use stable keys for dynamic lists - perf-avoid-inline-objects - Avoid creating objects/arrays in JSX - perf-dispose-auto - Understand R3F auto-dispose behavior - perf-visibility-toggle - Toggle visibility instead of remounting -...