State stored in React components belongs at the highest point in the component tree shared by all descending components which make use of it. This can easily result in state being elevated to the very top-most component, and that component growing into a massive combination of unrelated concerns (like a 5000 line file). When that happens, the state must be passed down to every single component that needs it through every single intermediary component that doesn't need it. App.tsx -> Child1 -> Child2 -> Child3 -> ... -> Child35 -> ChildThatNeedsState This can cause a host of problems: components that don't need the state still have to receive and pass it through this can greatly expand the number of props that a component receives (I've seen components with 80+ props because of this) changes in the prop-drilled value can cause a component to re-render, even if that component doesn't use the prop-drilled value if you discover that the state isn't stored at the right level in the component tree, you have to relocate it, which can easily lead to you needing to relocate other values as well. if you add a component that needs a high level state value and none of the intermediary components are already passing it through, you have to prop drill the entire way through if that component it itself called by multiple other components, the prop drilling rapidly increases in scope, and you better hope you're using TypeScript or there's a high likelihood of missing something The ideal situation is a component only receives props that it needs to perform its specific purpose accessing a state value requires changing the fewest components possible a state value which is shared by two different branches on a tree does not need to be elevated to a shared point in the tree if that shared point doesn't also need the value React is supposed to be a view library which reacts to changes in state. It isn't supposed to be the whole app. React component state should be focused on how to display the app state data, rather than being a catch-all for data fetching, processing, and display. When you start using a global state store, you're able to narrow down the specific purpose of each component, the state values that it uses, and the prop values that it receives. You're able to have app state which persists even if the components which display it aren't currently being rendered. You're able to access that state without having to prop drill. And you're able to separate out a considerable amount of data fetching, state management, and business logic from the React View layer, which greatly simplifies your React components. More on reddit.com

React Query + Zustand is a great combo More on reddit.com

Definitely spend time with Context. It’s really important for lifting up state without introducing dependencies. Look into Jotai. Not on your list, but I’d recommend starting with that after context More on reddit.com

it all starts from your requirement, If what you wanna do is sharing the data that you grab from the server across components learn some basic react query. If what you wanna do is share some value among two distant components in the component tree then you need to use context api to do dependancy injection. If what you wanna do is synchronize multiple state values among a bunch of components then you need a global state manager. shoot me a dm if you want to get more advice on this. More on reddit.com