The State of State Management in React

my hair currently looks like the average code base that uses redux and if i had a dollar for every time someone asked me if they should learn redux then i'd actually have enough money to hire a decent developer to fix it this is a cause that's very near and dear to my heart so i decided to make my dreams a reality and code it up should i learn redux dot netlify.app how it works is you can pay one dollar to unlock the answer of whether you should be learning redux underneath the hood when you click the button it will run a series of deep neural nets that pipe into a machine learning model which will then cross-reference against some if statements to analyze your browser history and determine whether you should be learning redux this takes a little while to run for the first time you click on the button but it will catch the results after that for subsequent presses so i already paid myself a dollar and i can show you guys the cash results for myself i got a big fat no and that's pretty much the main reason why i don't use redux now the thing about machine learning is it's not always right so what i want to do in this video is discuss how i would use redux recoil context and just how i view state management and react in general in the average react app there's usually three types of state and the most common one has to do with just fetching data and storing it from an api and commonly redux is used for that redux is just a general state management library so everyone implements this differently but here's an example that is simple to just give you an idea so we have a use effect hook which will run after the first render and just dispatch an action to load some data from the api and then once that is loaded in it'll be stored in redux and just passed to this component using redux for this type of state reminds me a lot of making your own marinara sauce from scratch if you're willing to put in the time and the effort and you're actually good at cooking then the end results can actually be pretty good but if you're just okay at cooking or maybe you're just surrounded with a bunch of crappy sous chefs that have terrible taste buds and make it too salty then you're just going to be kind of left with a bowl of spaghetti code and some nasty marinara sauce on top now don't worry i'm not about to suggest you go out and get yourself a jar of marinara sauce i would never do that that stuff is crap but i am going to recommend you head over to your grandma's house who's got a giant pot of marinara sauce that she made all from scratch that is just sitting there waiting for you she goes by a lot of names depending on the type of api you have if you like graphql some call her apollo or relay if you like rest she's known as react query or swr but no matter what you call her at the end of the day you're going to get a great tasting marinara sauce that is specifically designed for fetching and caching data from an api and your grandma made the entire thing with fresh ingredients i'm sure there's some applications that need like a custom setup but just for the average react app using a data fetching library that is specifically designed for this type of state compared to a general state management library is going to save you a lot of time and effort and is what i would recommend using the second type of state is what i call local state and it's pretty much any client-side state that just one component or a few nearby components need access to for example you could have a check box that you can take on and off to hide and show something in your ui and for this i like to handle it with just the built-in used state hook and then of course if things get more complex or you have some more complex state there's also the use reducer hook and of course as the component evolves and just your requirements change more components might need access to that state and so you just lift it up to the highest level and if the components that need the state are just nearby you just pass it down as props otherwise it's not really local state anymore and it goes into like the next category which i can consider global state i put global in parentheses because it's not necessarily that this state is used across like your entire application it just can be any state that you don't feel like passing props all the way down to or it just gets annoying to do that for example you might have a sidebar that sometimes you want to hide but sometimes you want to show and maybe the way that happens is there's like a button in the header and you press that and so you want to be able to control the sidebar from the header over here but then they're way far apart and they're very far in the component tree for situations like this i either like to use react context or just whatever state management library i'm liking best at the moment currently that happens to be the stand because i don't have to wrap my entire react app and providers which is kind of nice but honestly there's a lot of good options and just really comes down to whichever state management library you like better and with this approach you're not going to be handling a lot of state at all with a state management library or react context it's just going to be like a little sprinkle on top and then the majority of your state is going to be handled by you state in a data fetching library now some of you may have noticed i have yet to mention recoil and that is for very good reason i don't think recoil is very necessary in the average react application i watched the video introducing recoil and i thought to myself hmm that is a really cool library but that is also a library specifically designed for a facebook problem if i end up having a problem like that then yeah i'll give it a try but until then i just kind of put it on the back burner to circle back to the earlier question of whether you should learn redux i think if you can control the technologies you are using on a project then there are better options and i wouldn't learn redux but you just don't always have that luxury even though redux has kind of fallen out of favor on social media there's still a lot of companies that use it and if you are a current react developer or you're planning on becoming one you are probably going to encounter redux somewhere in your career and so you are probably going to be required to learn at some point although i would recommend to procrastinate it as long as you can anyway for those of you that end up using redux anyway i wish you the best of luck give redux toolkit and maybe redux query a try hopefully you don't get rsi from this and remember be very careful with redux you do not want your code base looking like this you

Channel: Ben Awad

Views: 81,918

Rating: 4.8780417 out of 5

Keywords:

Id: BhQYZmaxTCM

Length: 6min 25sec (385 seconds)

Published: Fri Jul 31 2020