react-performance-guidelines

Read for update flow rather than changed lines: identify new state, context, derived values, and prop shapes, then trace which interaction triggers each update and how far it propagates. Flag state lifted too high, hot-path computation, and memoization that hides architectural issues.

Use useMemo for expensive derived values or stable identities that materially affect renders and effects. Use useCallback when callback identity matters to memoized children, effects, or subscriptions. Avoid adding them ritually without an identifiable calculation, identity, or child-render reason.

This usually happens when input state is owned by a broad page or layout component, so every keystroke updates the entire subtree. Colocate the state in the input component and publish only debounced or submitted changes to heavier siblings like tables.

Yes, when a provider mixes hot-changing UI state with stable services or config, every value change invalidates all consumers. Split providers by update frequency and consumer group, and memoize provider values only when consumer identity stability matters.

Memoization is wrong when it only masks state placed too high or props that are too broad. If a small interaction still propagates through a large subtree, fix ownership, component boundaries, or context fanout first instead of wrapping everything in memo.