React Context & Hooks Tutorial #2 - What is the Context API?

Key Takeaways

okay then going so the first thing I'd like to talk about is the context API so the context API gives us a way to share state up and down a component tree quite easily now you can do that without the context API and know that you can do that with props but sometimes that can get a little bit messy especially as your component trees an application as a whole becomes bigger so the context API aims to solve this issue and it's going to do that by giving us a central place to store data or State and then share it between components without having to pass it down as props so it's going to clean things up for us a little and it's gonna make working with shared data much much easier now if you're familiar with redox this concept might seem a little familiar having this central place where data is stored and it can be accessed without the need to continually pass down props several components deep sometimes so the context API is now a different approach to this it's an alternative to redux if you like and when we use it alongside hooks it can behave very very similar to the way Redux behaves so imagine this scenario imagine we have an application with this component tree right here so we have app sitting at the root and page view and navbar then in the navbar we have a status bar then a book list component then book details add book quite simplistic and I'll but just bear with me now imagine we also have some state defined in the root component right here and that state is the UI theme so is this gonna be a dark theme or a light theme or it could be fine colors or something like that either way it's a bit of data that we maybe want to share with some of our components in this tree so say for example we want these four components book list details add book and status bar to use this data then in order for that to happen normally what we do is we pass that down as props right through every single component until it reaches every component that uses it these four at the bottom so this is fine we can't still do this but what we're doing here is passing props everywhere even through components that don't necessarily use the prop so use the state directly these are acting as carrier components for props if you like they're just carrying the props from one component down to another so again this is okay you can still do this perfectly fine but this approach can sometimes get a bit messy especially when there's a lot of components in the chain and the application gets bigger so the context API tries to solve this problem of having to pass props down at every level even through components which don't use them directly so what we could do now instead of this approach is to create a new context in a new file somewhere which is basically us making a place where a shared state could be initially defined and set up now when we create a context we then have to provide it to our component tree so that the components in that tree can actually access it and get the data now we do this via the context provider which is just a react tag and it wraps whichever components need access to it so now every component inside this tree right here could if it wanted to have access to the shared State or data but we don't have to use that data in each of these components and now no longer are we passing props down through the components we're just directly accessing the data from the context in the components which need it so this is the basic premise of the context API and it can make working with shared data much easier in a lot of cases so then if we have a quick look at the context page here on the react website we can see when it advises to use context in an application because it might not always be the best solution so it says right here that it's designed to share data that can be considered global for a tree of react components such as the current authenticated user a UI theme or preferred language or maybe some other kind of data which is considered global from that particular tree of components right so if you're ever in a situation where you're unsure as to whether you should use context or something else actually self this question is the data that I want to share global and is it going to be used in several of the child components if so then context probably is a good shouts if not then there might be other options which are better suited for example component composition which you can read more about on this page down here so just bear in mind that context is not a catch-all for every different situation it's just for global States that's shared between many different components in a tree okay so one more thing before we start coding in this course I am going to be using the reactive developer tools for Chrome it's just gonna help us out when we're inspecting States and stuff like that inside the application so if you want to download this go to the Chrome Web Store and just search for react developer tools and install it into Chrome and then you're going to be able to do that as well so anyway now we know a little bit more about the context API and why we use it let's go ahead in the next tutorial and actually create our first context and provider