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.