useMemo and useCallback

These hooks remember a value or a function between renders.

Use them when a calculation is heavy, or when a child depends on a stable identity.

Do not sprinkle them on every line. Measure first.

useMemo

React recomputes the filter only when foxes or query change.

useCallback

useCallback is useMemo for functions.

The function identity stays the same unless deps change.

That matters if you pass it to a memoized child that skips render when props are equal.

When to skip them

Filtering ten foxes is cheap. A new function each render is usually fine.

If you wrap everything, the wrapper cost can exceed the work you saved.

Tip: If React DevTools shows a slow component, then memoize. Not before.