What State Management Library Should I Use with React?

what state management library should i use with react this is a question i've heard hundreds of times over my career as a react developer this video will help you answer questions like should i use redux should i use react context and what are all these new state management libraries that keep appearing so first we got to do a little bit of history react was introduced in may 2013. its paradigm shift was that your ui was a function of your state so given some component state react is able to determine what that component will look like from the beginning react was built upon the concept of state but state management and react has long been one of the most difficult parts to understand it's also worth mentioning that over the past eight years we've learned a lot about building web applications and single page applications and the different types of state that exist so react was introduced in 2013 and then we first saw the flux architecture in 2014. this pattern was first suggested by facebook and then popularized by a library called redux during this time period there was a bunch of different flux-like libraries and really redux was the one that won if we look at this graph of the npm install trends we can see that redux is still extremely popular and widely used now this graph doesn't cover everything obviously but at least gives you a ballpark to understand that redux is definitely still used today you might have also noticed that i was comparing a bunch of libraries in that last graph some which you may or may not think are related and this is because when redux came out it really encapsulated a lot of different types of state so to help explain this let's define two terms right now ui state and server caching state ui state is used for controlling interactive parts of our application like modals or even light mode or dark mode server caching state is where we call some api we return a response and then we cache that result for use on the client side so in this example with swr which is a library for doing that you see that we call this api user we fetch some data and then this response is cached for use in multiple places across our client side in the early days of react a lot of the state management was just fetching some api storing the result and then using it somewhere in your application so mostly that server cache state and because of this the community really leaned heavily on redux because there wasn't a library just for that server cache state but that all changed with react hooks so having an easy way to encapsulate logic and share it across your application new libraries like swr and react query emerged that allowed you to just manage that server caching state really what it boils down to is server caching state is a completely different problem than ui state and when you conflate that inside of one library things start to get a little messy there's lots of complexities with resiliency around network requests and it's best to defer to the experts and use a library focused specifically on that okay another big shift in the react state management history was react context with react 16.3 we had a first class solution to share logic across multiple different components this prevents passing values down from component to component to component which some people refer to as prop drilling now i just want to pause right here because react context in and of itself is not a state management solution when you pair it with hooks like use state and use reducer then it becomes a full state management solution really react context is just the means to transport your data between lots of different components okay so hopefully that history gives you a better understanding of how we've got to today in 2021 and the current state of state management in react now that we've grown to understand the different types of state we have more granular libraries for specific use cases the first one of these is state machines now state machines finite state machines state charts these are just computer science topics so they're not anything react specific but they do help us solve modern state management problems with react really a state machine is just an explicit model of your state over time so in the real world a good example of this is the stop light it goes from green to yellow to red but it never goes from green to red i think the reason that state machines have got popular is because having to explicitly write out all of your state helps you think through edge cases and probably uncover some bugs that you missed one of the most popular libraries for using state machines is called xstate and they have this fancy visualizer online that allows you to view the entirety of your state chart so let's say we have this fetch request we see it transition to loading and then we can resolve it as well and if we reset we could do the same thing but instead reject that and we could even retry that multiple times so you could dump in your state machine here visualize it and try it out online which is pretty cool next i want to talk about why so many state management libraries have been created in the react ecosystem let's take a look at figma which is a design tool in the browser and it's a great example of a good use case for complex state so if i click on one of these elements in the middle of my screen you'll notice that the concept of local state doesn't really make sense here i have toolbars on the right and toolbars on the left and when i change anything in these toolbars it's going to have to update the middle as well too and while doing that it needs to be also very very performant creating web applications like figma that have complex state management needs required developers to think outside the box for how they handle state management this is what's led to a bunch of different libraries and experiments to try to figure out the best way to handle that state management now having complex state doesn't necessarily mean that you have to use a third party library you can always start with just react or just javascript see how far that takes you and if you start to notice performance issues then maybe pull for one of these solutions to optimize basically don't choose one of these libraries unless you have an explicit need for it another really interesting debate in the state management world is the concept of immutable state on one side you have the immutable camp who says that if you directly mutate that state you're going to end up with more bugs and on the other side you have the mutable camp that says now there's a whole bunch of boilerplate just to do that in reality both sides are somewhat right direct manipulation will always be less safe than indirect but it's a trade-off between convenience and risk so it's really up to your team what's really interesting though is solutions like emmer which allow you to write mutable code but then execute it immutably the basic idea of immer is that you have a current state and you want to make some changes so it produces this temporary draft state which is a proxy of what your current state is so then it understands the changes that you want to make and it produces that next state based on what those mutations are so in reality this means that you get a right code in a mutable fashion that produces an immutable result one more type of state to quickly touch on is url state let's say i'm on amazon and i'm searching for a react book and i want to filter by four stars and up and you'll notice that when i do this that state is preserved in the url so if i refresh this page and let's say i share it with somebody they're always going to see the same state as me looking at react books filtered by four stars and up another interesting example of this is nomad lists so you'll see that i'm searching for cities and i filter by which ones are mild right now and that state is persisted into the url so if i refresh this page i'm going to see that same filter but it actually gets its own unique landing page which is pretty cool you might have heard people talk about performance issues with react context as a state management solution and what they're talking about is that if you have a really large application and the entire thing is surrounded by a context provider any time you make a change to that state it's going to re-render everything that's nested under that provider this can make interactions feel slow which is why you often see people do performance optimizations by adding something like use memo which says hey if these values don't change just don't re-render this component looking towards the future of react state management the react-core team has proposed a new hook called use selected context which will basically handle this performance optimization for you i'm really excited about this because i think that having good defaults in the react standard library will go a long ways for people who are just learning how to use react okay so what you've all been waiting for which state management solution should i use drumroll please it depends i know that's kind of a cop-out but it's seriously complex and it requires a lot of thought to help you decide i put together a resource on my blog that has a few different tables so for form state depending on your experience how much you want to learn how big your project is there's a few different suggestions and same for ui state depending on where you're at in that spectrum i give a few different recommendations and then finally for server cache state i mean either swr or react query are both really good solutions that blog post is open source so if you see something that you disagree with feel free to open up a pr and i'll add it in there as well okay so that's it i know this has been a long video but state management has evolved a lot over the past eight years and it's probably one of the most difficult nuanced questions and decisions that you have to make as a react developer hopefully this video has helped you make a more informed decision leave a thumbs up down below if you want to see more videos on react thanks

Channel: Lee Robinson

Views: 23,077

Keywords:

Id: u_o09PD_qAs

Length: 9min 26sec (566 seconds)

Published: Mon Feb 08 2021

Reddit Comments

[u/Pantchox]

I really likes Lee Robinson posts, they are short and concise with full of great info straight to the point.

Here is a blog post on the topic as well

https://leerob.io/blog/react-state-management

[u/dacandyman0]

great video. also appreciate the excellent bookmarking 👍