React Compiler Awareness

What React Compiler Handles

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

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} onClick={handleClick} />;
}

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

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

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

When Manual Memoization Still Needed

useMemo

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

React.memo

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

Performance Best Practices

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

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

research/react-19-comprehensive.md