Introduction to the React Context API

hey everyone Jon Bella here hope you're having a wonderful day today I wanted to take a look at the new context API in react the context API landed in react in 16 3 context is a way of creating a global application State which allows you to avoid having to pass props to different levels of the component tree if you've been doing react for a while you're familiar with this pattern of what's known as prop drilling I think Kent C Dodds coined that term prop drilling is the act of having to pass props to individual levels of the componentry through other components that don't necessarily need that state I always like to show examples of what I'm talking about so let's start by creating a couple of components and then drilling some props down so the first thing we'll do is we'll create a header a footer we'll create a dashboard component and then inside that will render a component called profile and then we'll create a profile component and then in there we'll say hello user dot user name all right let's say first name now in order to get this to render properly the first thing we'll do is we'll set up a constructor so we can set some default State and we'll say user is an empty object and then component didn't mount fetch from localhost 3000 user and I'll show you real quick I have an Express server set up that is just returning some static JSON so we'll say then response parse that JSON then user des set state user now when we get into our render method what we'll do as well take this out will say header dashboard footer in order to get hello user name we'll save that and we should get an error lots of errors users not defined in order to get that user into our profile component we first need to say user equals this state user and then inside dashboard we need to accept props and then we should say user equals props dot user and then finally in our profile component we need to say props and then props dot user dot first-name and now we have hello John so as you can see we've passed the user through a component that doesn't need it in order to receive it in a component that does this is known as prop drilling and has a component as a application grows larger prop drilling becomes more and more cumbersome so the react context API is a way of providing global State for your application so that you don't have to do prop drilling for things like authentication and themes and languages and locales context is not for everything in an application it can be burdensome but let's take a look and refactor this application to use context so we're going to export or import create context from react then we'll create a context will say well export the consumer and provider will d-structure create context then we'll say user and we'll actually have a logout method because we may want to logout from different components so now in here we'll say logout is a function called this logout and it's just it doesn't accept any parameters or arguments so we'll say logout then we'll just console.log logout called so we have this dashboard component here which is taking props from here so let's actually remove our props and the first thing we want to do is create a provider component so at the top level will say provider value equals this dot state what that means is we're setting our current state in our context provider now the provider will provide any values that we set here to any components underneath it in the component tree when we set these default values if we use a consumer that is not a under our provider in the component tree it will default to these values however since profile is under dashboard and dashboard is under our provider our profile component will have access as a consumer to the data that it needs so let's back this out and now we can stop taking props and we'll separate this just for a little bit of visual now we'll say consumer and then from our state we want to pull user and logout and then render that into a component now again you can see that these are totally decoupled from props there's no props going through here but so we don't need props here since we're pulling user out now if we save that we again get hello John awesome so let's create a button for logout and we'll say button on click equals logout and then save that now we have a button logout called so from our profile component which is not receiving any props we're able to pass our logout function through context and then log log out called the context API can be extremely powerful in larger applications for things like again authentication locale if you want to change languages for people that is something that typically most components will need to know about but would be rather cumbersome to pass down to each individual component so again be a little bit judicious with your use of the context API but go forth and conquer there's been a lot of talk now about is context a Redux killer and I wanted to address that really quickly by saying No so when is it useful when it's context useful in smaller applications where Redux may not make a lot of sense having a small stateful component at the top level of your application providing some context around users authentication etc can be truly powerful but there are things that come along with Redux that are very helpful in larger applications such as the time-travelling debugger such as the dev tools that surround redux the community of tools and plugins and things that come along with redux so again it's not a redux killer but it can be both used alongside redux and to augment your applications when redux doesn't make sense if you have any questions please feel free to drop into the comments below if you enjoyed this video please hit the subscribe button thank you so much and have a great day

Channel: Jon Bellah

Views: 13,260

Keywords: react, javascript, react context, react context api, react js, context api vs redux

Id: DjasGquy64o

Length: 8min 55sec (535 seconds)

Published: Mon Jun 25 2018