Kent C. Dodds: 0:00 Let's talk about context module functions. Now, this isn't really the name of a pattern. I don't really think that this pattern actually has a name, but it's something that I've observed that happens in my own code bases, as well as something that I've seen in other code bases like the React DevTools.

0:16 Dan Abramoff told me that this is something that they do at Facebook a lot. I've enjoyed using this pattern myself. We've got an example here of a context provider and counter example here where we're going to use this in other areas of our code base. We are calling dispatch directly and all of this.

0:35 There are some drawbacks to this approach that I described here in the background. You can take a read at. We have some different approaches that we can do to improve this, but it doesn't super work, super well. This context module functions concept will help address some of those problems.

0:53 That is what you're going to be doing and implementing in this exercise. It is overkill, for sure, but it can help us with some performance problems and general maintainability as well.

1:06 Read over this background, get an idea of what this thing is, and then you can continue to the exercise. We've got a user settings page that we're rendering some user information. That user information is managed by this userReducer, which is used by this user provider that's inserting this state and dispatch into context as a context value.

1:28 Then we consume it with the use userCustom hook that's consuming our context. The user settings page consumes that here, and then makes calls into userDispatch as it's making this update to the user's information. If we take a look at this, we can say, "Biography is I am awesome." We'll submit that.

1:48 You'll notice that the state gets updated immediately and we get three dots right here indicating that. While we may be looking at something that is what the state is going to be, we're still in the process of updating that. If there's a failure, then we fall back.

2:02 If we type in fail, for example, and then submit that, we will see fail shows up there. Then something went wrong and fail is no longer in here, so we do this rollback functionality here as well. Your job is to take this logic and move it into one of these context of module functions so you can simplify the code for the user of our context.

2:22 Enjoy that, and I'll see you on the other side of the exercise.