‫So now that we know how the Context API works,
‫it's time to get back
‫to talking about state management in general
‫and how the Context API fits into the state management tools
‫that we already had before.
‫Now we already talked about state management
‫earlier in the course
‫but it was more of an introduction.
‫So back then, I told you that state management
‫is basically just like giving each piece of state
‫the right home, right?
‫So in that lecture, we talked about when to use state,
‫local versus global state
‫and I also gave you this handy flowchart
‫to decide when and where to create state
‫which of course you can keep using.
‫Now in this lecture, we will talk about UI
‫versus remote state.
‫I will show you all the options for where to place state
‫and also all the state management tools
‫that are available to us
‫to manage all these different types of state.
‫And let's actually start with these different types of state
‫that can exist in all web applications.
‫So, we can classify state in terms of state accessibility
‫and in terms of state domain.
‫Now when it comes to state accessibility,
‫state can be either a local state or global state.
‫And we already talked about this
‫but I just want to quickly review
‫these super important concepts.
‫So local state is only needed by one or a few components
‫while global state might be needed by many components
‫in different positions of the tree.
‫That's why local state is only accessible
‫inside the component that it was defined in
‫plus maybe its child components
‫while global state can actually be made accessible
‫to every single component in the application.
‫So it's the accessibility of a state variable
‫that changes between local and global state.
‫Now if you need to create a new state variable
‫in a component
‫but are not sure whether it should be local or global state,
‫there is a very nice trick that can help.
‫So all you need to do is to ask yourself
‫if this component was rendered twice,
‫should a state update in one of the components
‫reflect in the other one?
‫And if the answer is no, then it means
‫that it's local state.
‫But if the answer is yes, you have found yourself
‫a global state variable.
‫So just keep this trick in mind for the future
‫as it can be quite helpful.
‫Okay and now moving on to the state domain,
‫we can classify each piece of state as either remote state
‫or UI state.
‫So remote state is basically all application data
‫that is loaded from a remote server.
‫So usually using an API.
‫So it's basically state that lives on a server
‫but that can be loaded into our application.
‫UI state on the other hand is basically everything else.
‫So things like the currently selected theme,
‫applied list filters, form inputs, open panels
‫and many, many more.
‫So again, all state that is not the core application data
‫that we usually fetch from an API is UI state.
‫So whenever you have some state,
‫it's extremely important to always know
‫whether you're dealing with remote state or with UI state
‫because they need to be managed
‫in a completely different way.
‫So remote state is fundamentally different from UI state
‫because we usually get it in an asynchronous way
‫and because the data might need to be re-fetched
‫and updated frequently.
‫Therefore, in a large scale application,
‫remote state should be cached, revalidated and so on.
‫And so for that, we need some specialized tools.
‫UI state on the other hand
‫is usually synchronous and stored right in the application
‫and does not interact with any server at all.
‫And so this means that UI State is very easy to handle
‫with the tools that we already know of.
‫So things like useState or useReducer.
‫And we will take a closer look
‫at these tools later in this lecture.
‫But for now, let's focus on where we can actually
‫physically place each state variable in our code base.
‫So, whenever we need a new piece of state,
‫we have about six different options
‫on where we can place it.
‫If all we need is local state, then we simply place it
‫in a local component using useState, useReducer
‫or even useRef.
‫So a ref can also be considered state
‫even though it won't re-render the component.
‫Now many times, we actually need a piece of state
‫in multiple related components.
‫And so then, it's time to lift the state up
‫by placing it in a parent component of all the components
‫that need it.
‫So a parent component is another state placement option.
‫However, even that sometimes is not enough.
‫So sometimes we have actual global state
‫and then one good solution is to place the state
‫into a context.
‫So this is where the Context API
‫that we have been learning about comes into play
‫as we can use it together with useState or useReducer
‫to manage global state.
‫Just note that context on its own
‫is actually not who is managing the state.
‫State still needs to be managed
‫so to be created and updated by useState or by useReducer.
‫But we then use the Context API
‫to give all components in the tree access to that state.
‫But anyway, the Context API is actually best suited
‫to manage UI state
‫and not necessarily remote state
‫especially when you are building a bigger application
‫but more about that in the next slide.
‫So if you need to manage remote state
‫in a complex application
‫or just need a more efficient way of managing global state
‫in general,
‫you can opt for one of the many
‫third-party state management libraries that exist
‫in the React ecosystem.
‫So you can place your global state into Redux,
‫into React Query or SWR or Zustand or one of the many other
‫external state management solutions.
‫And some of these solutions are suited
‫for global remote state
‫and some for global UI state or both.
‫Okay, next up as we learned in the previous section
‫is the URL.
‫So the URL is yet another excellent place
‫where we can store global state that we want to make
‫easily shareable and bookmarkable
‫or that we just want to pass between pages.
‫And finally, sometimes we need to store some data
‫inside the user's browser.
‫And in that case, we can use local storage,
‫session storage or something like that.
‫Now just like refs,
‫this is state that won't actually re-render any components
‫but it's still technically application state
‫which is why I included this in this list
‫as yet another possible state location.
‫All right, so hopefully this is a helpful overview for you
‫that you can keep handy once you start building
‫your own applications.
‫And now to finish, let's try to answer the question of
‫how to manage the different types of state in practice?
‫Or in other words, what tools should be used
‫for each kind of state?
‫So if we combine all classifications of state
‫according to accessibility and domain,
‫we end up with these four combinations.
‫So local UI state, global UI state, local remote state
‫and finally, global remote state.
‫And so let's now look at the tools that we can use
‫to manage each of these state types.
‫And starting with the easiest,
‫we simply manage local UI state
‫with the tools that we already know about.
‫Now when it comes to local remote state,
‫we can use a simple fetch inside a useEffect
‫in order to load data from a remote API
‫and then store that data as state
‫with useState or useReducer.
‫So this is exactly what we've been doing all the time
‫up until this point, right?
‫However, this is usually only a good idea
‫in small applications.
‫In bigger applications,
‫we usually just treat all remote state as global state
‫which brings us to the next type of state.
‫So when we need to manage global remote state,
‫we have to choose if we want to use a general solution
‫like the Context API or a library like Redux
‫or if we want to use a tool that is highly specialized
‫in managing remote state.
‫So those are tools like React Query, SWR or RTK Query
‫which have built-in mechanisms like caching
‫and automatic re-fetching
‫in order to deal with the asynchronous nature
‫of remote state.
‫In fact, these tools are so helpful
‫that we will study React Query in depth in the next project.
‫So I definitely recommend going with a solution like this.
‫But anyway to finish now, let's move up to global UI state.
‫And here, the Context API
‫coupled with useState or useReducer is a great tool.
‫Now if you need something a bit more performant,
‫you can look into one of the third-party libraries
‫that we already discussed.
‫So something like Redux which we will actually learn
‫later in this section.
‫And so by then, we will talk more about the differences
‫between Redux and the Context API and also when to use each.
‫All right, so the idea of this diagram
‫is more to give you an overview and a reference
‫that you can keep in the future
‫which should be really helpful.
‫So I really wish that I had something like this
‫when I first started learning React development
‫and especially learning about state management.
‫But anyway, let's now quickly go back
‫to the worldwise project that we have started working on
‫in the previous section.