Monk’s Web React Series #4: When useMemo and useCallback Actually Matter

I noticed something strange while working on our testing dashboard. The application felt sluggish while browsing through the test results list. While investigating, I came across this pattern throughout the codebase.

Every function and calculated value had been wrapped with useMemo or useCallback

— — — — — — — — — — — — — — — — — — —

What was happening? The assumption was that memoizing everything would make the app faster. So the code looked like this:

const statusLabel = useMemo(() => {
  return "Status: " + testResult.status;
}, [testResult.status]);

And this:

const handleRunTest = useCallback(() => {
  setPhase("running");
}, []);

Is formatting a status string expensive? Is a one-line state update slowing down the test runner? Probably not. These hooks were being added without understanding whether they solved a real problem. All we did was add complexity without gaining any real benefit.

— — — — — — — — — — — — — — — — — — —

The fix I started asking one question before reaching for either hook: What problem am I trying to solve?

useMemo for expensive calculations:

// Test dashboard processing hundreds of test cases
const failedTests = useMemo(() => {
  return testCases
    .filter(test => test.status === "failed")
    .map(test => ({
      ...test,
      duration: test.endTime - test.startTime,
    }));
}, [testCases]);

useCallback when passing functions to memoized child components:

// Test suite list rendering hundreds of test cases
const handleRetry = useCallback((testId) => {
  dispatch({ type: "RETRY_TEST", payload: testId });
}, [dispatch]); 

return <TestCaseList onRetry={handleRetry} />;

Without a stable function reference, every parent re-render triggers the entire test case list to re-render. useCallback prevents that.

— — — — — — — — — — — — — — — — — — —

How does it help? Using these hooks in the right places reduces expensive recalculations, prevents unnecessary child re-renders, and improves performance for large datasets. Using them everywhere increases code complexity, adds memory overhead, and creates a false sense of optimization.

— — — — — — — — — — — — — — — — — — —

One rule to remember Before adding useMemo or useCallback, ask yourself : can I measure this performance problem? If the answer is no, skip the hook usage.

Most performance problems come from poor architecture, unnecessary API calls, or excessive state updates — not from missing memoization.

“Don’t optimize because React gives you the tool. Optimize because your application needs it.”