Transcript

Kent C. Dodds: 0:00 We've been able to move a ton of our application state into our server cache with react-query. There's not a whole lot of global state leftover for the UI state of our application. All that we really have left is the user authentication state.

0:14 You might be familiar with this because we're accepting the user and passing that user all over the place. We've got the user right down here, and we're passing that user along. User is everywhere. It would be nice if we could just avoid passing the user as props to so many components.

0:33 This pain is what's called prop drilling. I've got a blog post here for you to read more about that. Here's a refresher for the APIs that we'll be using with React useContext.

0:44 For this exercise, we're going to put the user login register and logout functions into Context and then pull those things out of context. In all of these files, we'll no longer need to pass the user prop or the login/logout props. Instead, we'll be able to pull those out of our AuthContext.

1:02 Then we've got some extra credit to enhance this a little bit with a useAuth hook and AuthProvider component, and collocating our global providers in a single provider component and then creating a useClient hook as an abstraction for a specific use case that we find throughout our app.

1:20 Have a good time with this and we'll see you on the other side of the exercise.