gh-djankies-claude-configs-react-19/skills/optimizing-with-react-compiler/SKILL.md

name, description, allowed-tools, version

name	description	allowed-tools	version
optimizing-with-react-compiler	Teaches what React Compiler handles automatically in React 19, reducing need for manual memoization. Use when optimizing performance or deciding when to use useMemo/useCallback.	Read, Write, Edit	1.0.0

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

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

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.