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.