Designing React state that stays readable
Simple rules for separating server state, local UI state, derived values, and form state in growing interfaces.
Readable React state starts with naming what kind of state you are handling.
Server state, form state, local UI state, and derived values have different lifetimes. Mixing them together makes components feel heavy.
I prefer computing derived values during render when possible, storing only the pieces the user can actually change.
When a component starts explaining too many responsibilities, split the responsibility before adding another state variable.