State Managers Are Making Your Code Worse In React 

I'm a junior developer and have been following your channel for a while now because your courses are so easy to understand. However, I was wondering if you could make videos about how to maintain and update a project when there are new packages and/or frameworks versions, and how to configure things like imports, Prettier, etc. We always see videos about coding, but I think configuration, infrastructure, and maintaining projects are also very important.

This was an amazing video! Specifically, I liked you going through a short summary of the history where you explained problem -> solution, problem -> solution. I think it is infinitely more useful to understand why things are used/developed as opposed to the common 'this is industry standard, use this for x'

Thank you for not saying there is "state" in server components. It tripped up a lot of people.

React Context is a robust and easy-to-use solution for state management. In my experience, it has proven to be highly effective and free of issues. There is considerable debate regarding the use of URLs to store state. It's important to note that search parameters should be used specifically for conducting searches, not for general state storage. While storing state in a database might make sense in some scenarios, it can be impractical for managing UI-related, client-side state. Frequent re-fetching of data from the server can introduce unnecessary complexity and friction. Instead, maintaining state on the client side often leads to a more seamless and efficient user experience.

PLS use more drawings like in this video. It makes it much easier to understand. Awesome channel

React Query (Tanstack Query) is also a good way to store requested data with the build in cache

I have literally spent the last month removing impossibly intertwined and implicit state and putting it in the URL. This has allowed for deeplinks, bookmarking and easier to read code, test and re-use code. I am of the opinion you most likely don't need state management in almost all work you do. Thanks for the vid!

I avoid using state management libraries until I have an exact use case for one in the project. It's surprising how far you can get without having any need for one

As an anarchist, I'm happy our developer comrades are resisting the state managers even in code ✊

Zustand is so good that you should not bother with reducer and context hooks other than to feel how painful it is to use them, so that you would be able to appreciate zustand even more.

No, please don't use Context with Reducer for state management. It is not optimal (re-rendering due to the lack of selectors), much boilerplait needed especially in TS. Jotai is much better option if you need to manage global client state.

I basically use only RTK for the login reducer with persist to keep the user logged, and RTK query (so same package) for api fetch because it manages the cache and allows me to avoid too many requests to the backend. That's it.

For super complex web Apps I have been leaning for Redux for global state and localized hooks for fetching and very localized contexts for purely sharing props to avoid excessive prop drilling. This way you can avoid context hell and make it a rule to not make contexts dependent on each-other.

Reasons why I like Vue Vuex/Pina: One state management library that gets the job done Less time worrying about state management and more time building

react hook form, context and TanStack Query is all you need for your app

here's my opinion on state management. you need 3 types of states. global client state, server state or async state, and scoped state (client state under a single branch of the app tree, basically only considered global for the children of the component where they are defined). I prefer Zustand, reaact query and context for them in order.

I've been a huge fan of what Preact Signals has done for React. I've been using that for state management on the client side. (And it's also really smooth for passing state around in Svelte).

I'm using Nextjs and i already figure it out that state was no longer needed in my application because i prefer using SSR and page be generated server side to gain performance which is a great thing but when you have client interaction to filters blog for example , i thought there were no other way to deal with states so thank you so much for the URL parameters tips , didn't think about that and i'm gonna apply this idea right away :)

I think passing state down the tree is not the main problem a state management library solves. The really nasty side of react is dealing with a state that's an object, containing arrays of objects, etc. It becomes very difficult to correctly merge updates to this state to avoid unnecessary re-rendering, or to force re-rendering when needed. This is the most nasty and difficult part or react, which they didn't really solve to this day, and that's why all those libraries were invented and continue being invented - to deal with state updates. State passing can be solved with the context, but state merging is still a big pain and Achilles' heel of the whole react universe. I was spending endless hours trying to figure out unexpected rendering issues every time (which you don't have direct control over as it's all react magic which is the worst part) until tried MobX and it finally all started working together just like I always expected without any weird unexpected side effects.

I learn state management this week and then this video pops up 😆

Only read the title, not yet seen the video itself, but thought : "Thats why we're mainly using selfcoded stores written in plain Java/TypeScript living in the module scope of the application, keep it simple, keep it small".

What app is being used to draw/illustrate?

Kyle, thank you for the right info. I love your explanations. I just about to brush up state management in React. You gave the view of all the state panorama. I have still many things to learn. Really waiting for your next video with the project you mentioned.

Finally someoone who understands what I have always said. Nice video and great explanation. 90% of the time you do not need state management! keep your code clean and if you don't need some fancy library then don't use it. You are only "prop drilling'" if your only going way too deep into your components. Love you Web Dev. GREAT VIDEO!

I somewhat disagree. Though your project may begin as a simple app not needing global state management, it may grow in complexity and features pretty quickly, and useContext, useReducer will not scale. Why not start with a global state manager, though there may be a bit more setup and boilerplate code, it will scale and is pretty simple to implement.. Don't really understand the dis on redux. That lib with redux-saga allows to build large projects that once setup will just work. Lower maintenance, ease of testing need to be considered.

Redux + saga is still for me the best combination. You've got clear components without any async requests. You send only events, so much clear.

mobx does the job for our project ideally

Well the biggest reason to use state management libraries is one - they store the states separately from the app wrapper, so components are rerendered only when THEIR state changes. Problem with useContext etc is that it is a wrapper around and if one single state changes, everything related to that wrapper will rerender too. Which is a huge deal when ie. you have some table with plenty of inner components and data. That means every single cell of that table, every single component (ie button in a row) will rerender just ie. because one state of one button in that table has changed…

I love how Svelte solves - very simple and intuitive and it's baked in the language.

Thank you! This is true. I started with React and chose not to add Redux until I was familair with what React offered first. That way If I decided to upgrade to Redux later I would know why and have a clear understanding of the differences. 3 years later and I have not had a clear case to add Redux yet. I have a middle tier Web API, and a back-end, so the frront-end is not handling everything. Thank you for the explanation.

I used only contexts/reducers in my last few projects and it was a best decision I made. For more complex state I use two combined contexts - one for state, one for actions and it works perfect

So if a webapp has not to many states we can use nextjs but if it has to deal with to many states and state changing (interactions) we should use react?

Managing state client side is usually a bad idea. Great video I like this approach

Server components, Transtack query, queryParams, atoms, and zustand. Is pretty much the order of what I reach for. I don't use react context anymore because it isn't atomic and causes unnecessary re-renders unless handled carefully with useMemo & memo. There is also a lot less boiler plate code with atoms and zustand. So benefits are atomic and more readable. Zustand: Wins when I have multiple states that are manage with functions that share those states. Feels like a Machine Beats Redux Atoms: Feels better for when you need to share a simple state globally. Works like useState Beats context

i have watched this video 3 times now. you're a good d00d k!!! thank you!

hello, won t that be a security bridge to have your states in your url regarding injections ?

Prop drilling is one problem. The other one is they should rename the "react developer" job position to a more appropriate one - "machine for spread operators". xD And since some state management libraries allow me to actually think of the solution and work properly with the data instead of using spread syntax all over the place I am very happy with them. Redux is not the chosen one ofc.

What is the name of the app you are using for drawing concepts?

Why are people disagreeing? I had used a state manager library and I also tried the way he described with the build in context + reducer hook which I still prefer

I agree. I was on a project in 2020 as a contractor that REQUIRED all state to be maintained through Redux. The amount of worthless code I had to write and test was beyond belief. The project was a nightmare to work in. And the worst part about redux is that the state never goes away unless you clean it up. I can see using Context for supply a tree of sub-scomponents within a UI stack a shared state. I can see using TanStack Query for API data since it will destroy itself and can be managed like a little database. But beyond that, I try to avoid state management as much as possible. NextJS makes things a lot easier, of course, but getting large companies with hard policies to allow nextJS can be difficult because they want all their apps to use the same framework.

Id love to see you teach that url trick for state!

10:57 If the things qualified as a webpage, not as a webapp, you dont need even react or nextjs, that's it. But I agree that a lot of usecases implemented as a specialized hooks/libs, you don't need to implement it from scratch on your favorite state manager.

What website are you using for the diagrams and stuff?

This follows what I believe as well, though I happen to be in that 1% that’s working on a complex state heavy web application. I will say tools like Tanstack query and redux toolkit (in particular rtkquery) go a long way in reducing the need to worry about state (these libraries let you treat data from endpoints as external state so to speak). Not usually used with nextjs but we aren’t using next

Many websites need maintainers. As a good developer, it's important to understand state management. If you're a beginner, I highly recommend learning state management before you get lost in complex projects.

What's that whiteboard you're using?

Context causes rerenders of all wrapped children. It's recommended to use it only for things like user or theme that don't change frequently.

I haven't even watched your video yet and I 100% agree, react standard library for state is brilliant, I'll watch the rest of the video to be even more convinced tomorrow.

not true. state managers are life savers. zustand made our project possible

8:36 "and the nice thing about that is that now you have two different places you can deal with state" 😆😂

Absolutely true. I used almost all state managers zustand, redux, recoil, etc. None of them were joy to worl with. Sooner or later i had hit roadblocks and had to do workarounds. Then i started using normal react context with immer. Lot of benefits no boilerplate, directly edit deep states, type safety, potentially even create multiple instances of similar state machines. You really have to try it to understand its benefits. Feels really natural and works like a charm

what is the drawing program hes using in the beginning?

Hey Kyle, what tool are you using to draw all those diagrams you're using to explain?

In fact it’s the opposite. It is easer to start without a state manager, with just react context. But it easier to work with a state manager (I use redux toolkit) later. So much easier, that I’m thinking of replacing existing parts of my app with react context to unify with other parts, and use only redux now.

The only things I use state managers for nowadays is auth (if I'm doing it myself, it's much easier to just stick tokens in zustand) and sometimes specific interactions for deeply nested components. Everything else I either do server components for low-interactivity apps, or hook-form + react query + plain old useState for high interactivity. State libraries have their place, but that place is actual global data and not form input or data from an api. I'm very glad we're moving away from redux in the industry.

To be honest I feel like we are moving back to PHP world 😢

Almost two year ago we completely left out from all state managers like redux mobx so on and now just react context and react-query, it's enough to build any apps you would needed

I mean I don’t need redux for a small app, but at work we have a gigantic 50+ module app that would be absolute hell to work on without redux or something for state management.

Remember, State management is an art. You'll learn by making mistakes! State updates cause re-renders, and therefore poor state management leads to several unnecessary re-renders which causes performance overheads. Zustand, Jotai, etc make state management and state updates much smarter - they only update those components which use the state that has changed. State management doesn't always mean bringing out the big guns in the form of Zustand, etc. Sometimes, a local state variable or a ref variable should be enough. It all boils down to YOUR understanding of the type of state management solution that is required for a given problem...

Running in production on NextJS app router since February and now the only thing I use global state management for anymore is turning modals that are shared across components (a navbar and the page) on and off.

It depends on how complex your business logic and application is. I wouldn't dream of not having a store for what I work on. Legend-state is my recommendation as signals make computed/derived data trivial.

As soon as I have a form I usually want mobx state management that 1. binds form elements to properties of objects and 2.updates the UI when the properties change from a load operation (for example). I wouldn't know how to do this differently without increasing the boilerplate.

"Thanks for watching" No man, Thank you for sharing. ❤

This video is summary of actually my 1 year of experience and in that I learnt all this while working on company projects.

Tanstack Query and Zustand are all anyone needs if building a SPA. But always, the project requirements will dictate your decision on tools / technologies you need.

If the problem is prop drilling then we'd have to blame Reacts, very limiting, hierarchical architecture. Real DOM components are not restricted to only interacting with parent or sibling components. Additionally, I don't feel incurring the additional SSR cost of splitting UI onto another server is acceptable. Even my "simple" sites consist of a client site, a back-office site, and scheduled tasks all of which use a common HTTP API. Do I want to incur the extra effort and dollars of more servers, and UI code tied to a specific framework AND project? No chance!

One thing you're wrong: you can use some Hooks with React Server Component, like useId, use.

What kind of software does he use to visualize the state management

Some state management libraries are harder to implement then the project itself. If you have ever tried the earlier versions of redux , it was harder to learn then React itself. But I still find it suitable to do state management with much better tools like Recoil.

i really cant wait to watch your upcoming video on this topic )) cuz its the exact thing that Im struggling with while working on my project

I'm so annoyed with all of these state managers. We always need to keep things native to the frameworks we are working in.

I'm still yet to figure out why the native Context can't do most of it. With the benefit of being able to tailor it to the patterns and structure of your app. If i need to automate huge areas of an app or project, i'd build my own schema system to generate objects, so why not have my own custom state manager to go along with it? Context is really not complicated. It's just one single step/layer beyond setting up regular component states. I feel sometimes we're so obsessed with standardizing and making things "efficient", then it bloats, backfires and gets less efficient. Even if it it helps a little bit... I still have to consider that having extra knowledge needed in my brain and extra packages still "costs" in other ways. Depending on the project, there can be a long term efficiency when working with vanilla stacks. I'm not a denialist though as I'm so happy with some basic packages. Have to pick your battles!

I feel like WDS is delivering quality content but the captions get too clickbait-y.

I agree that you shouldn't use a state manager until you need it, (same with every library, pattern, and so on). But they are still needed in the real world, code youtubers always make these absolute statements and all they do is very contrived examples.

That's why Vue did it right, their own state manager that just works, is fast, native.

Odd, but it would seem that for anyone to realize that URL can help with state management should be much earlier, and should have happen right after "Global state"(or Lifting State). You don't need your thinking/evolution to go through context stage, reducer stage, reconcilliation stage, meta framework etc. In other words, you don't need next.js to take advantage of URL query parameter.

In my company's legacy app we would make queries with Apollo and then stick the entire response in zustand. It was only later we realized that Apollo has it's own cache that behaves like the store. In our rewrite it was our policy to not stick everything in the store

Hot take... Avoiding prop drilling comes down to component composition.... That's literally it. If you need to pass state down two components, just lift the part of your component that needs the state to the parent and there is no longer a problem. Then render the children using {children} in your child component. (or by passing multiple props) You just have to think a bit about your data flow and refactor on the fly if you need more deeply nested components. I've been using react for a long time and I've never had an issue with prop drilling even with very complex state.

I was thinking the same and it's good that somebody with your experience say that.

Please make video on redux complete i have lots of confusion

but what about rerenders... i am having this problem when i update state in any way, everything rerenders and probably in the end will slowdown my app. i have no idea how to do this and where to look for it

Be careful when using useContext with useReducer! If you use only one context for the entire app all components using the context will rerender if any part of the data changes. That's a big performance issue. Either split up your context to multiple contexts or use a state management lib.

What is the name of this flow draw app ?? Name ??

Jotai is extremely helpful especially when you start making derived states based on other observables.

What tool are you using to draw these diagrams? It looks like something I need in my dev life STAT. 3:03

All we need for our enterprise app is jotai. Screw redux type libraries. Screw nesting context providers. Derivative atoms are so clutch

Waiting for Ecommerce Project Video

Context API re-renders components more than necessary. Zustand is much better!

Cool! So React has finally figured out what PHP has been doing since the '90s. Great!

This also helps for deep links and smart links that are url based. If you want to pass a user from a web app to a mobile app you have to do via url.

Thanks for your share, what’s the app you are drawing?

I think it depends on the project requirements, so some times we need client state more, some times we need server state more.

I wouldn't touch React without MobX.

We must deprecate Redux and use Tanstack query instead. Use Jotai's atoms if required. And it is not advisable to maintain our business logics in the Redux reducers Or in any feature that Redux holds. Instead we can move business logics in separate hooks. Data logics and business logics should not be mixed according to the functional programming. Peace out ❤

React feels obsolete when it comes to state management .

THIS is the video I've been looking for! Thank you so much for sharing the latest features in React that remove the need for state management libraries. I'm building a social media website (similar to twitter), based on your video this would be a good use case for state management libraries like Redux? Appreciate any feedback (btw just subscribed)🙏

At 2:00 you're explaining why inheritance isn't always a good thing.

hey man what software are u using for drawing this diagrams ?

Sounds like we are making out way back to 2008 PHP

What whiteboard tool are you using?