BitWithBite
React · Quick Reference
Lesson 14 — memo/useMemo/useCallback Cheat Sheet
In one line: These tools skip unnecessary renders/recalculations — profile first, optimise second.
Three Tools
1React.memo(Component). Skip re-render if props unchanged.
2useMemo(fn,[deps]). Cache an expensive calculation.
3useCallback(fn,[deps]). Cache a function reference.
Example
const CourseCard = memo(function CourseCard({title}) {
return <div>{title}</div>;
});
const filtered = useMemo(()=>courses.filter(c=>c.cat===filter),[courses,filter]);
const onEnroll = useCallback(id=>enrollAPI(id),[]);