Can't give you any articles or codebases for now but here I my preferences. - Everything api (server state) related = react-query (api fetches, caching, invalidation lives here) - The local state to build a page lives in the url query as params - UI state (state which is only needed for a specific ui component) lives in useState or if too complex in a useReducer - Global (app wide) state, like for example which theme a user has selected lives in useContext (Provider), I rarely had the need to use zustand or something for this Hope I could help you a little bit. A little advice I can also give is, put the state as nearly as possible to the corresponding component, where it is used. So a bad example would be to use zustand or a global (app wide) provider (useContext) to store state, which you use only for a specific component or page. Take your time and go through the docs of react-query and try to fully understand its purpose, I think it will help you a lot. Feel free to ask, I try to help If I can. More on reddit.com

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