Your Re-render Problem Is Probably a Structure Problem

Re-render problems in React usually come from one of two places: state that lives too high in the tree, or components rendered inside a parent that doesn't need to own them. Fix the structure first. Memoize what's left.

This article covers the structural fix, how reorganizing component dependencies reduces unnecessary re-renders before you touch a single memo or useCallback.

Isolating components from parent state

The first question to ask is: which components in this tree actually need the parent's state?

Any component that doesn't depend on the parent's state is a candidate for isolation. Once isolated, it becomes its own unit, with its own logic, its own internal state if needed, and no reason to re-render when the parent updates.