React + Three.js: Performance Gotchas

## Overview

React Three Fiber is an amazing library for integrating Three.js with React, but it comes with some unique performance challenges. In this post, I'll share common gotchas and how to avoid them.

Key Performance Issues

#1. Unnecessary Re-renders

React's component model can cause unnecessary re-renders in your 3D scene. Use `memo` and `useMemo` to prevent this.

#2. Large Geometries

Complex geometries can slow down your scene. Use level-of-detail (LOD) techniques and geometry simplification.

#3. Memory Leaks

Always clean up resources in `useEffect` cleanup functions. Failing to do so will cause memory leaks.

Best Practices

- Profile your scene with Chrome DevTools - Use `useFrame` sparingly - Implement frustum culling - Use texture atlasing to reduce draw calls

Conclusion

With proper optimization techniques, you can build smooth 60fps 3D experiences in React.