DesignDevelopDeploy

The new React Compiler is a game changer. It uses an intermediate representation to analyze data flow and automatically inserts memoization.

This means useMemo and useCallback are largely obsolete. I tested it on a heavy visualization component and saw a 30% reduction in re-renders without manual optimization.

Key Changes

• Automatic Memoization: No more dependency array hell.
• Granular Updates: Only the changed parts of the DOM update.

// Before
const heavy = useMemo(() => compute(data), [data]);

// After (Compiler)
const heavy = compute(data); // Auto-memoized

Learned about optimizing fragment shaders for 60fps on low-end devices. Fragment shaders run for every pixel, so they are the bottleneck.

Optimization Strategy

The key optimization was moving vector calculations from the fragment shader to the vertex shader. This interpolation happens in hardware and is much faster.

// Fragment Shader (Bad)
void main() {
  vec3 light = normalize(uLightPos - vPos);
  // ...
}

// Vertex Shader (Good)
vLightDir = normalize(uLightPos - pos);