Understanding Local and Global State in Software Development

[00:00 - 00:38] Welcome back. In this video, we're going to be talking about the nuances and the differences between local and global state. Probably picking the right type of state for your component is the best way to keep your code easy to maintain and efficient. So let's go. The main difference between local and global state is that local state is self-contained and affects only the component it belongs to. In contrast, global state is accessible by multiple components and is crucial for sharing data between components like user settings, the user authentication status or even like a like current theme that your app is using. To better understand the difference between these two types.

[00:39 - 01:33] Let's imagine a very simple example. Think about forms input values. If you want to have your inputs like control, which means you're tracking the value every time they change, then you'll likely be needing a state variable. That is local state. Only the component that holds the form is interested in those values and no one else outside of that component will really need them directly or will make use of them. So that is local state. However, and now if you think of like I said before, the login status of your user. In this case, the entire application should know about it because every component will need to react to it. They should know whether to redirect the user to a login page or to show private information. In that case, we're talking about global state. You want your entire application to know about it and to react to it. So that's the main difference between both of them.

[01:34 - 01:41] So now let me ask you a question. How can you tell which type is the right for your component? Think of the elements of your app. Think of the components that you're building.

[01:42 - 02:54] Which of them are only influenced by internal state variables and nothing else? Which of them need to share data across multiple components? Answering those questions will help you shape how you manage state efficiently. So always try to ask those questions whenever you're, especially whenever you're starting to build a new application and you're creating new components. Think about how they get influenced by state, whether they're just influenced by the local state or they need to share information across multiple ones. Here's a very simple example of what local state looks like essentially. We kinda hinted at it before and if you come from other versions of React or Next, you've already been probably familiar with the useState hook. This is your classic function component and this is a component that is keeping track of a form input locally. That's it. The useState hook is used to manage the input on the component without impacting any other parts of the application. That is crucial. The last part is crucial because that means this doesn't really have to be global state.

[02:55 - 03:16] Now on the other hand, for example, here we have a theme provider. Any child component that is wrapped by the theme context provider will have access to the context API. Essentially, and here we're using the context API as if we already knew what it is and if you don't, don't worry about it. We will go into more details with further examples in other videos.

[03:17 - 04:24] But just know that this react's way of providing a global state which allows you to share it across all wrapped components. You don't really have to perform prop drilling which would be like sharing state through props until the component that needs the value receives it. This is a way to jump all of that and simply access it directly by reading it or modify the state. You can do both through context API. The key to understand in this case is that something as global as the theme of your application should be accessible by all components and that makes it global. The "all" part is not mandatory. You could have a little state between two or three components within an app that has tens or hundreds of them. The fact that all of them needs them is not necessarily what makes this global but rather the fact that you're sharing it across at least two components and you want to simplify the way that you access that state.

[04:25 - 05:50] Also keep in mind that many third party libraries like Redux, Recall and others, they will provide similar solutions to this problem. In this course I'm not going to go deep into any of them because they are meant for client side state and we want to reach the point where we eventually talk about server side versus client side state. But know that these two methods of dealing with state, local versus global, it's all the core concept that you need to understand state management whether you're using the context API or Redux or Redux toolkit or whatever other options are there. The only thing that changes is the API essentially that you're using but the overall concept of how to manage state and what happens with that state is already covered here. Quick recap before we end the video. In this lesson we learned what local state looks like versus how global state looks like and what's the main difference between each other. We also learned to identify the type of state that you want to use for your components based on whether these components need information from outside or if they're only interested in their local state. Remember recognizing the type of state to use and when to using, will ensure a more organized and performant application. So remember that and keep coding. I'll see you in the next one.