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?