useCallback & useMemo Misuse

Think they boost performance? Overusing them can actually slow you down.

Why It Happens

• useMemo and useCallback only help when calculations or functions are expensive.
• Wrapping everything “just in case” adds overhead and complexity.
• Without real performance issues, you’re wasting CPU cycles and confusing your team.

Don't

const doubled = useMemo(() => value * 2, [value]);
const handleClick = useCallback(() => {
  console.log("clicked");
}, []);

// ❌ Wasteful: simple math + simple function don’t need memoization

Do

Copy code
// ✅ Keep it simple
const doubled = value * 2;
const handleClick = () => console.log("clicked");

// ✅ Memoize only expensive work
const sortedList = useMemo(
  () => heavySort(list),
  [list]
);

Explanation

Don’t memoize cheap stuff — React is already fast.

Do memoize heavy calculations or stable references passed to deep child components.

Think of useMemo/useCallback as a scalpel 🔪, not duct tape.

Using useMemo everywhere is like bubble-wrapping your remote control 📺. Sure, it’s “protected” — but now it’s annoying as hell to use. 😅