How do you decide where a given piece of state should live?

Start as local as possible, inside the component that uses it, and lift it only to the closest common ancestor when siblings genuinely need to share it. If it is server data, it belongs in a caching data layer, not component state. If a user should be able to link to it, such as filters or the current tab, put it in the URL. A global store is the last resort.

My first move is to work out what kind of state it is, because most things people call state are not really local state. If it came from the server, it goes in a query cache, so I get deduplication, revalidation and staleness handling instead of hand rolling it into useState and an effect. If it should survive a refresh or be shareable as a link, like the active filters or which tab is open, it goes in the URL. Whatever is left is genuine UI state, and that starts in the component that uses it. I only lift when a second component actually needs it, and then only to the nearest common parent. Global stores I keep for things that are genuinely app wide, like the current user or a websocket connection. The failure I have cleaned up most often is state that got lifted to a top level provider because two components needed it once, and two years later everything re-renders on every keystroke and nobody dares move it back down.