Sharing State

When two components must stay synchronized, move their shared state to the closest common parent and pass values and handlers down.

Lift state up

01function Accordion() {
02  const [openId, setOpenId] = useState<string | null>(null);
03  return sections.map((section) => (
04    <Panel key={section.id} open={openId === section.id} onOpen={() => setOpenId(section.id)} />
05  ));
06}

Panel is controlled because the parent owns its important state. This makes coordination explicit and prevents two panels from disagreeing.

Choose ownership carefully

Keep state local when no sibling or parent needs it. Lift only the state that must coordinate; moving everything to the top creates excessive wiring and broad rerenders.

Keep this

Give each piece of state one owner, lift it to the nearest shared parent, and design controlled component APIs around values and callbacks.