Curious how people handle this in practice. Take something like a form field whose value is technically "derived" from a couple of other pieces of state (say, a computed total, or a filtered list) but where computing it is expensive enough or async enough that it doesn't feel right to just recompute it inline during render.

The "official" answer is usually "compute it during render, memoize with useMemo if needed," and I get why - it avoids the classic bug where a useEffect writes to state and triggers an extra re-render, plus it keeps the value always in sync by construction. But in practice I keep running into cases where the derivation genuinely can't happen synchronously during render (it depends on a ref, a DOM measurement, or an actual async call), and at that point it stops feeling like "derived state" and starts feeling like its own piece of state that just happens to be initialized from other state.

Where do you personally draw that line? Is there a rule of thumb beyond "sync and cheap = compute in render, anything else = its own state + effect"? And for the async case specifically, do you reach for a library (React Query, SWR, etc.) even for small in-component derivations, or is that overkill below a certain complexity threshold?

I feel like this decision gets made almost by accident on a lot of teams — either everything ends up in Redux/Zustand/Context out of habit, or nothing does and you end up prop-drilling through five components to pass a single boolean. The rule of thumb I've seen most often is "if more than 2-3 components that aren't directly related need it, lift it to global," but that always feels a bit fuzzy in practice. Do you have an actual heuristic you use, or is it more of a gut call that gets refactored later once the pain shows up? Also curious how people handle the in-between case — state that's shared by a meaningful chunk of the tree but is really more "feature-local" than "app-global," where a full global store feels like overkill but prop drilling is annoying.