State Managers Are Making Your Code Worse In React

Key Takeaways

one of the most common things to joke about in JavaScript is that a new framework comes out every single day or every single week but we don't really talk about the fact that there's a new react Library nearly every single day that deals with State Management if you just go on npm and search for react State Management libraries you can see you get a massive list of almost 2,000 results with libraries like zotan Joy Thai Redux and so on that you've probably heard of and maybe even used before now in this video I want to talk about why you probably don't even need a react State Management Library the different tools tools that have come out that make State Management so much easier that are built into the tools we already use and a little bit of the history about why these react State Management libraries came about and why we no longer need them so if you've used a react State Management library before you're thinking about adding one to your project you need to watch this video to see what you can do instead and why you probably don't need them welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner and to really understand how how State Management has changed and why some of the libraries you don't need anymore we really need to talk about the history going all the way back to when react started to figure out why a lot of these State Management libraries were created so in the very early days when react was first created you essentially have a component and inside this component is where all of your state lives for that individual component so you have a component with State inside of it and you also have some props that you can pass down into that component as well and this is how everything works so you would manage your state locally so if you have like a counter you would manage your count directly inside that component and that works really great for small things but as soon as your application gets more complex you probably have other components inside this component so now you have multiple components inside this component and you even have components inside those components and each one of these components now needs access to this exact same state variable so now you have to pass this down as a prop to each individual component that you're using and the problem is is that now those child components need to pass down that state to even further child components and this is the idea of prop drilling where essentially you have state stored in one one component that's app parent to a bunch of other components and you're constantly passing that state down through each individual component until you get all the way down to the child component that needs it and this means that you're possibly passing State through like seven different components that have no need for that state just because one of their children needs access to that state variable so and for example you can have a component tree that looks like this where you have like four or five different levels of nesting and you have state right here in the parent component and the state that is in this parent component is only needed in one place in the furthest child component but you have to pass it through every single child to get all the way down to that individual smallest child component this is a big problem that a lot of people were running into and the problem was named prop drilling so to get around this problem a lot of people started adapting libraries that were essentially giving you access to global State inside of react that you could access directly where it's needed so now instead of storing your state in a particular component like this and passing it down through all the child components instead you get something that looks like this where you have one single Global store a lot of times if you use like Redux for example you may have heard this called a store and this store contains all of your different state information so let's come in here get our state inside of there and now we can pass that state and use that state directly where we need it so this store is somewhere in our application and then we have a bunch of different components it doesn't matter where these components are or anything to do with these components we'll just draw out a bunch of them here there we go doesn't matter if they're nested or you know Mega nested anything like that we just have a bunch of components inside of our application that looks like this and now anywhere in our application where we want to access this state that's in a store we can just access it directly there so for example inside of this one component right here I can just access the state right there inside this one component or I could access it directly inside of this next component right here it doesn't matter I don't have to worry about passing it down through all the parents and children to get to the right component I can just access it and modify it directly in the one place and that was another huge problem with react is if I wanted to modify the state that was in this parent well I would need to pass down the function to modify it all the way into the child component and then that modification would be passed all the way back up through that function so you had this really weird data flow where you had to pass down Setter functions and pass down the function through all the different components and with Redux and other State Management libraries you now have this like Global store that takes care of that prop join problem for you which was one of the biggest problems in the early days of react with dealing with state it was just a huge pain to work with this was actually such a huge problem that react implemented their own system called context that solved quite a few of those problems the earlier implementations of context were a little bit buggy and difficult to work with but as soon as hooks got introduced and the used context Hook was introduced it made working with context much easier and it became the go-to way to avoid prop trilling inside of react now I'm not going to go through in depth exactly what context does but essentially it works very similar to this store for example what you can do is you can create your context and your context is just its own custom component and this custom component has some form of State inside of it then you can have your children you know inside this context so let's say that we have an application that looks like this where we have a few children inside of other children and so on what we can do is just like with our store we can access the state directly where we need it so for example if we need the state right here inside of this H component we can just directly access it right there by using the Ed context hook and again avoid all of the problems of prop drilling same thing here if we want to modify it we can have a function inside of our context that updates that state and access that directly inside the component that actually needs it now this solves that prop drilling problem that we talked about but it doesn't solve all the the same problems that something like Redux were originally solving and that's because as your react application becomes more and more complex and you have state in more and more places in your application you start to realize a lot of your state depends on other state you have state that's constantly more and more Global and eventually you realize that to make your application work you have like 12 different contexts wrapp in your entire application full of global State that's all interconnected and it become a huge mess to deal with and maintain that's why Redux and other State Management libraries became so popular because they allowed you to actually create these global State and make it a lot easier to maintain the global State across your application now one of the big problems with Redux especially in the early days is that it was hugely full of boiler plate code that essentially meant to get this store up and running you had to write a bunch of different things inside of here to get all your different actions and everything together to work properly and it became really difficult to actually write all that out I mean it wasn't like it was hard to do it was just timec consuming and annoying and it really troubled people that were especially getting started with Redux cuz there's so much boiler place going into it now once you had all that boiler plate set up actually working with Redux is relatively nice and one of the great things about Redux is the idea of reducers which allowed you to actually manage your state a little bit better because instead of just having individual pieces of state that were all intertwined you could have this one reducer function that could reduce down to the correct piece of state so it manage all of your different state Logic for you well react thought that was a really great idea so they added that into the actual react spec in the hook use reducer and this use reducer hook essentially implemented some of the better features of Redux by adding in an ability to do a reducer and this isn't unique to Redux this is something that's just a state management Library thing in general this used reducer hook allowed you to write more complex state in a one single reducer function which made managing intertwined complex State a little bit easier than just using used state or normal state in class components and now even just at this point in react's history where we had the context and use reducer you were able to replace a lot of your need for State Management library with these two tools because context gave you the ability to remove prop Drilling and loop together your context and state in one place and use reducer gave you ways to deal with more complex intertwined state but the way react Works especially at this time was that everything was really running on the client you had one single application and all your state was being stored in there and you had to reconcile things like database queries fetches user interactions optimistic updates all these different things had to be reconciled on one single place so you had to deal with all this state coming in and reconcile is it loading is it error is it is it true is this optimistic is this the correct thing it became really complicated because there was lots of state from different places coming into your application and react essentially had to do the job of saying okay let's make sure all of this works correctly because everything was running on the client this is one of the huge reasons that State Management libraries were so popular because they made it a little bit easier to do with that reconciliation of all of your different data across all of your different applications now if we fast forward a little bit more though to more modern day react and nextjs especially we now have the idea of these meta frame works with nextjs being one of the most popular and the idea behind these meta Frameworks is they have both a backend and a front end that you can deal with and the really nice thing about that is now you have two different places you can deal with state for example you have your server to deal with State and you have your client to deal with State and in the past you had to try to reconcile all of that in your react application because you're pulling in things from like an API or something like that but now the fact that you have nextjs with like server components you can make sure that the data is being pulled directly from your database on your server and rendered into your app application without having to deal with any state at all there's no use effects there's no use State there's no hooks at all to do this workflow of the new way of doing things with nextjs and server components this fact alone automatically reduces the amount of State complexity in our application because now fetching data from an API just to display on a page no longer interacts with your state at all and instead your state is now purely for interactions that are on the client side so if you have a form for example that has State inside of it or if you have other things that have state for example a counter or anything in your application that deals with modifying data that's where your State's going to be happening but for most applications the amount of state that you store on the client in this workflow is actually pretty minimal it's most likely going to be dealing with forms maybe some drag and drop stuff and a few other things like toggles and so on but it's relatively simple logic that is going to be only on a couple different pages like you have logic on one page but it's not shared across to another page it's all kind of individualized so pretty much just the fact that we moved more things to the server meant that the client became simpler so the actual need for complex State Management was reduced on top of that a lot of people including myself are pushing for the idea of storing more of your state in the URL and less of it in your local memory of JavaScript and essentially all that means is if you have like a filtering form on your page and you want to filter based on some filtering box like a name for example and you type in the name and hit enter instead of just doing all of that locally in the JavaScript instead push that name to the actual career parameters inside your url not only is that a better user experience because now they can share that URL with other people and has all the filtering information saved but on top of that it also is easier for you because now instead of managing that state yourself you're letting the URL manage the state of that name filter and you can just pull it directly from the URL so again you've removed the need for State Management for that filtering because the URL is taking care of it for you and if you're doing things with like nextjs for example it can become really easy to deal with that because now you can do all your fetching on the server so you no longer have to worry about use effects loading States and so on to be honest for about 90% % of applications that have a relatively simple data flow where you have some forms you have some data you display and maybe you have some user interaction you're not going to need any type of fancy State Management at all just the idea of use State use context use reducer that's going to be more than enough for pretty much all of your data management needs now if you have a really complex application you're working on Instagram or Facebook or something that has an immense amount of user interaction that's being shared across tons of different pages things that are more classified as a web app versus a web page then it may make sense to actually deal with a state management library but I would recommend in almost any project you're working on try to use the stuff that's built in use use reducer use context use nextjs or whatever other you know meta framework you're using to do that kind of State Management use your URL for State Management and even use libraries like react hook form that deal with all your form State Management for you so instead of reaching for something like Redux to deal with all of your form State use a actual Library that's specifically dealing with just that one portion of your application by making your state a little bit more comp compartmentalized it's a little bit easier for you to reason with because now you have a bunch of smaller chunks instead of one massive thing that every part of your application is touching and eventually you may realize you know what I've tried using reducer I've tried using context and my state is just too complex for those particular Tools in those cases then 100% I would recommend reaching out for a state management library but I guarantee you if you build out a new project and the first thing you do is you download Redux or joai or whatever State Management Library you want is you're probably actually hurting yourself because nine times out of 10 you don't need the advanced super cool functionality that these have and you can get by with just use reducer you know context or maybe even everything is going to be in the URL for you and if you believe it's not possible to do a relatively complex application for example here I have a fully functional e-commerce website we can apply different coupons and so on to everything there's a full admin panel literally everything you can ask for creating new products have drop down menus like this all of this was built by using less than five use State and use effect Hooks and the use effect and use State hooks I used were so minimal that there were a couple couple lines of code in my entire application so all of this can be done with almost no State Management at all and that's just because of the power of using the URL for State Management as you can see here I'm using the URL for my coupon code as well as using nextjs and server components to render everything for you and if you want to see what an application likees this looks like I actually have a full tutorial coming on this entire project it's going to be out hopefully in just a couple weeks so I'm going to link it on the screen for when it's actually available but just keep an eye out on my channel because it's going to be coming very soon and it's by far the longest video I've ever created so with that said thank you very much for watching and have a good day