Validates that existing manual memoization is preserved by the compiler. React Compiler will only compile components and hooks if its inferencematches or exceeds the existing manual memoization.
Rule Details
React Compiler preserves your existinguseMemo,useCallback, andReact.memo calls. If you’ve manually memoized something, the compiler assumes you had a good reason and won’t remove it. However, incomplete dependencies prevent the compiler from understanding your code’s data flow and applying further optimizations.
Invalid
Examples of incorrect code for this rule:
// ❌ Missing dependencies in useMemo
functionComponent({data,filter}){
constfiltered =useMemo(
()=>data.filter(filter),
[data]// Missing 'filter' dependency
);
return<Listitems={filtered}/>;
}
// ❌ Missing dependencies in useCallback
functionComponent({onUpdate,value}){
consthandleClick =useCallback(()=>{
onUpdate(value);
},[onUpdate]);// Missing 'value'
return<buttononClick={handleClick}>Update</button>;
}Valid
Examples of correct code for this rule:
// ✅ Complete dependencies
functionComponent({data,filter}){
constfiltered =useMemo(
()=>data.filter(filter),
[data,filter]// All dependencies included
);
return<Listitems={filtered}/>;
}
// ✅ Or let the compiler handle it
functionComponent({data,filter}){
// No manual memoization needed
constfiltered =data.filter(filter);
return<Listitems={filtered}/>;
}Troubleshooting
Should I remove my manual memoization?
You might wonder if React Compiler makes manual memoization unnecessary:
// Do I still need this?
functionComponent({items,sortBy}){
constsorted =useMemo(()=>{
return[...items].sort((a,b)=>{
returna[sortBy] -b[sortBy];
});
},[items,sortBy]);
return<Listitems={sorted}/>;
}You can safely remove it if using React Compiler:
// ✅ Better: Let the compiler optimize
functionComponent({items,sortBy}){
constsorted =[...items].sort((a,b)=>{
returna[sortBy] -b[sortBy];
});
return<Listitems={sorted}/>;
}