Keep state close to the interaction

Local state avoids unnecessary parent renders and keeps component intent obvious.

Code example

Copy, adapt, and ship.

Read the numbered lines, copy the complete snippet, then adjust the values for your project.

React snippet

01function FilterPanel() {02  const [open, setOpen] = useState(false);03 04  return (05    <section>06      <button type="button" onClick={() => setOpen((value) => !value)}>07        Filters08      </button>09      {open ? <FilterOptions /> : null}10    </section>11  );12}

Production-ready starting point12 lines · copy with one click

Why this matters

The production reason.

01
State that lives too high in the tree forces unrelated UI to rerender and makes components harder to reason about.
02
Place state beside the button, input, modal, or tab that actually changes it. Lift it only when another component truly needs the value.
03
This makes refactors easier because the behavior travels with the component.

Platform notes03

How it holds up outside a demo.

ReactStart local, then lift state when a sibling needs it.
Next.jsKeep this inside small client components instead of making the whole page client-side.
FormsUse native form state or server actions when the state is only needed on submit.