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

My default now

If only one component cares, I keep the state there.

• React