Front-End Lead | Helping front-end engineers level up their skills and land jobs | JavaScript, React, Vue, TailwindCSS
There's many different ways to manage state in React, so pick the one that makes sense for your usecase: 1. Have a piece of local state that's only relevant in one component? A simple useState will do just fine. 2. Need to persist some state across refreshes or be able to link to it (like a filtered view or search query)? Keep it in the URL as query parameters. 3. Have a simple global object you just want to reference from anywhere in the component tree? React Context is probably suitable. 4. Need more control or simply have a lot of global state to manage? Consider reaching for a library like Zustand, Redux or React Query. That's also one of the coolest things about React: Because you can do stuff in so many different ways, there's likely one solution that's optimal for your given problem. The important part is to identify your needs and picking that solution, rather than overcomplicating things right away. 🔥
I would like to add: Reducers can be written in plain JS / TS and React and are a really powerful concept on its own to code split and improve predictability testibility and maintainability on its own. Redux or RTK should be "Redux with RTK" since I see 0 sense of not hawing the awesomeness of RTK to remove all the boiler and possibly prevent bad decisions (you can still not use RTK functionality it in a specific use case) and can not imagine using RTK without Redux. React query is now named TanStack query and is currently the only option I know of (this might be changing soon) that works out of the box with Suspense. Someone please feel free to change the last statement for me, I am eagerly awaiting more options.
Can also utilize local/session storage or cookies to store data needed after refresh or on other pages/components of the app.
All good, but React Query is not an state manager but a data fetching manager, that’s a different thing. 🤓
I learned recoil for state management It's syntax is so easy to understand Should I continue to build apps using recoil or should I learn redux or zustand?
When managing state, try using custom hooks to encapsulate logic and reuse it across components. This will help you keep your codebase clean and maintainable.
Depends on the scalability of application. I don’t understand why some developers always drag redux and over complicate every project. If your application is small-medium sized and not big enough to manage multiple nested states, context api works great!
Mads I would also add cookies and local storage for state shared across many sessions. Do you agree?
Hey Mads, have you considered the possible delay in load time while managing large global states with React Context? Makes a difference when site speed is a priority.
The 2nd point is good in terms of user experience but it comes with a pitfall and that too depends on browser to browser. The max safe length for characters in URL is around 2k - 2.1k . And if we stick to chrome then it goes to 32k. Then one need to think very wisely what to store and what not.
18, Full Stack Engineer @ArtiFusion | React | Next.js | TypeScript | Node | GraphQL | Postgres | I build things with the latest technologies
5dThis is so helpful! I personally think redux is overkill for most projects unless you have some really complex state going on. For a really complex state, I've managed to handle the state well using useReducer + context. What are your thoughts? Mads Brodt