This comes up a lot, and it’s easy to get wrong. It’s really easy to default to “lift state up” in React. I’m guilty. But that’s not always the right move.

Quick rule of thumb

Lift it when:

• Multiple components need it
• You need to coordinate behavior between components

Too much

function App() {
  const [open, setOpen] = useState(false);
  return <Modal open={open} setOpen={setOpen} />;
}

Just enough

function Modal() {
  const [open, setOpen] = useState(false);
  return <button onClick={() => setOpen(true)}>Open</button>;
}

(when it doesn’t need to be controlled externally)

Why this helps (most of the time)

• Less prop drilling
• Way easier to follow what’s going on
• Fewer accidental re-renders

If you remember one thing

If only one component cares, keep the state there.

• React