Optimizing With React Compiler

React Compiler Awareness

React Compiler (available separately) automatically memoizes code, reducing need for manual optimization. (verify use in project before using this skill)

What React Compiler Handles

Automatically memoizes:

• Component re-renders
• Expensive calculations
• Function references
• Object/array creation

Before (Manual Memoization):

function Component({ items }) {
  const sortedItems = useMemo(() => {
    return [...items].sort((a, b) => a.name.localeCompare(b.name));
  }, [items]);

  const handleClick = useCallback(() => {
    console.log('Clicked');
  }, []);

  return <List items={sortedItems} />;
}

After (React Compiler):

function Component({ items }) {
  const sortedItems = [...items].sort((a, b) => a.name.localeCompare(b.name));

  const handleClick = () => {
    console.log('Clicked');
  };

  return <List items={sortedItems} />;
}

When Manual Memoization Still Needed

Keep useMemo when:

• Extremely expensive calculations (> 100ms)
• Third-party libraries require stable references
• React Profiler shows specific performance issues

Keep React.memo when:

• Component re-renders are very expensive
• Props rarely change but parent re-renders often
• Verified performance improvement with Profiler

Performance Best Practices

Do:

• Trust React Compiler for most optimizations
• Keep components small and focused
• Keep state local
• Use children prop pattern

Don't:

• Add premature memoization
• Over-engineer performance
• Skip measuring actual impact

For comprehensive React Compiler information, see: research/react-19-comprehensive.md lines 1179-1223.

Converted and distributed by TomeVault — claim your Tome and manage your conversions.