React Hooks You're Probably Using Wrong

The Problem With Premature Optimization

I see this pattern constantly in code reviews:

// Don't do this blindly
const handleClick = useCallback(() => {
  doSomething(value);
}, [value]);

const computed = useMemo(() => {
  return items.map(i => i.name);
}, [items]);

Both of these might actually be slowing your app down.

When useCallback Actually Hurts

useCallback has a cost — it stores the function in memory and runs a dependency comparison on every render.

If the component re-renders anyway, you've paid the cost of useCallback for zero benefit.

useEffect — The Most Misused Hook

The most common mistake:

// ❌ Wrong — creates an infinite loop
useEffect(() => {
  fetchUser().then(setUser);
}, [fetchUser]); // fetchUser recreated every render

// ✅ Right — fetch on mount only
useEffect(() => {
  fetchUser().then(setUser);
}, []); // eslint-disable-line react-hooks/exhaustive-deps

Try It Yourself

The Decision Framework

Use useMemo when:

• The computation takes > 1ms (measure with console.time)
• The result is used in multiple places
• The component renders frequently

Skip useMemo when:

• It's a simple transformation like .filter() on a small array
• The component rarely re-renders