First thing we will do is create a context. To create a context we will use the createContext method from React, which takes our initialState object and returns a provider and consumer component. For this application we will just return the Provider.
The Provider component is what makes the state available to all children components no matter how deeply nested they are.
Now we will create a StateProvider component with the useReducer hook, this takes two values as arguments, a reducer function and an initial state and then returns a new state. Then we pass the Provider component the value dispatch and state as a prop.
Our completed store component will look like this.
Now we wrap the app.js with the StateProvider and we have access to that context with the useContext React method anywhere in the app. If we pass useContext the store we exported it returns state and dispatch. Dispatch allows you to call an action in the reducer and update the state. State is the context you created.
To update the state with the SET_USER action from our useReducer function, we will pass dispatch the type SET_USER and the user will be updated with the payload you passed to the useReducer function.
Context is a lean way to manage state globally without having too much extra setup or dependencies. However, I can see where it has its pitfalls and could lead to performance issues from too many rerenders. If your state is frequently updated, React Context may not be as effective as Redux. If you have data that undergoes lower frequency updates such as authentication or preferred language, React Context may be the best option for you.