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
Installs
504
GitHub Stars
23
First Seen
Jan 19, 2026