r3f-performance

React Three Fiber Performance

When to Use

Use this skill when:

• Optimizing R3F applications for mobile
• Dealing with performance bottlenecks
• Rendering many objects (100+)
• Implementing adaptive quality
• Reducing frame drops and stuttering

Core Principles

1. Measure First: Profile before optimizing
2. React Optimization: Prevent unnecessary re-renders
3. Three.js Optimization: Reduce draw calls, vertices
4. Adaptive Quality: Scale down on low-end devices
5. Lazy Loading: Load assets progressively
6. Frame Budget: Stay under 16ms (60fps) or 33ms (30fps)

Implementation

1. React Memoization

// components/OptimizedComponents.tsx
import { memo, useMemo, useCallback } from 'react';
import * as THREE from 'three';

// Memoize expensive components
export const MemoizedBox = memo(function Box({
  position,
  color,
}: {
  position: [number, number, number];
  color: string;
}) {
  // Memoize geometry (created once)
  const geometry = useMemo(() => new THREE.BoxGeometry(1, 1, 1), []);

  // Memoize material (recreated only when color changes)
  const material = useMemo(
    () => new THREE.MeshStandardMaterial({ color }),
    [color]
  );

  return <mesh position={position} geometry={geometry} material={material} />;
});

// Custom comparison function
export const SmartMemoBox = memo(
  function Box(props: { position: [number, number, number]; color: string }) {
    const geometry = useMemo(() => new THREE.BoxGeometry(1, 1, 1), []);
    const material = useMemo(
      () => new THREE.MeshStandardMaterial({ color: props.color }),
      [props.color]
    );

    return <mesh position={props.position} geometry={geometry} material={material} />;
  },
  (prev, next) => {
    // Only re-render if color changes (ignore position changes)
    return prev.color === next.color;
  }
);

2. Instancing for Many Objects

// components/InstancedObjects.tsx
import { useRef, useMemo } from 'react';
import { useFrame } from '@react-three/fiber';
import { InstancedMesh, Object3D, Matrix4 } from 'three';

interface InstancedObjectsProps {
  count: number;
  spread: number;
}

export function InstancedObjects({ count, spread }: InstancedObjectsProps) {
  const meshRef = useRef<InstancedMesh>(null);

  // Initialize instances
  const { positions, rotations, matrices } = useMemo(() => {
    const positions = new Float32Array(count * 3);
    const rotations = new Float32Array(count * 3);
    const matrices: Matrix4[] = [];

    const dummy = new Object3D();

    for (let i = 0; i < count; i++) {
      // Random positions
      positions[i * 3] = (Math.random() - 0.5) * spread;
      positions[i * 3 + 1] = (Math.random() - 0.5) * spread;
      positions[i * 3 + 2] = (Math.random() - 0.5) * spread;

      // Random rotations
      rotations[i * 3] = Math.random() * Math.PI;
      rotations[i * 3 + 1] = Math.random() * Math.PI;
      rotations[i * 3 + 2] = Math.random() * Math.PI;

      // Set matrix
      dummy.position.set(
        positions[i * 3],
        positions[i * 3 + 1],
        positions[i * 3 + 2]
      );
      dummy.rotation.set(
        rotations[i * 3],
        rotations[i * 3 + 1],
        rotations[i * 3 + 2]
      );
      dummy.updateMatrix();

      matrices.push(dummy.matrix.clone());
    }

    return { positions, rotations, matrices };
  }, [count, spread]);

  // Apply matrices on mount
  useMemo(() => {
    if (!meshRef.current) return;

    matrices.forEach((matrix, i) => {
      meshRef.current!.setMatrixAt(i, matrix);
    });
    meshRef.current.instanceMatrix.needsUpdate = true;
  }, [matrices]);

  // Animate (optional - remove if static)
  useFrame((state, delta) => {
    if (!meshRef.current) return;

    const dummy = new Object3D();

    for (let i = 0; i < count; i++) {
      meshRef.current.getMatrixAt(i, dummy.matrix);
      dummy.matrix.decompose(dummy.position, dummy.quaternion, dummy.scale);

      // Rotate
      rotations[i * 3 + 1] += delta * 0.5;
      dummy.rotation.y = rotations[i * 3 + 1];

      dummy.updateMatrix();
      meshRef.current.setMatrixAt(i, dummy.matrix);
    }

    meshRef.current.instanceMatrix.needsUpdate = true;
  });

  return (
    <instancedMesh ref={meshRef} args={[undefined, undefined, count]}>
      <boxGeometry />
      <meshStandardMaterial />
    </instancedMesh>
  );
}