Choosing the State Structure

Five principles guide state structure, all aimed at making state easy to update without introducing mistakes. Group related state: if two or more state variables always update at the same time, consider merging them into one — remembering that updating a single field of a state object requires explicitly copying the other fields, for example setPosition({ ...position, x: 100 }). Avoid contradictions: when several pieces of state can disagree with each other, such as isSending and isSent both being true, you leave room for mistakes. Avoid redundant state: if you can calculate information from props or existing state during rendering, such as fullName from firstName and lastName, do not put it in state. Avoid duplication: when the same data lives in multiple state variables or nested objects, keep only an ID in state — for example selectedId instead of a duplicated selectedItem object — and look the item up during rendering. Avoid deeply nested state: deeply hierarchical state is inconvenient to update because every change requires copying objects all the way up the chain, so prefer a flat structure. Scope: React function components. Reviewed October 4, 2026.