Context provides a way to pass data through the component tree without having to pass props down manually at every level. In React, data is often passed from a parent to its child component as a prop. This method has worked well in the past, but is not suitable for every kind of data. It will make things difficult later when moving components around. The truth is that Context has been a part of React for a really long time. Remember the tag that we used earlier in the Redux app. React used to discourage developers from directly using it in their apps and it was only included on an experimental basis. Now, with official support + the ability to render props, Context brings us a delightful new experience. How to use this new version of Context. It returns an object with a Provider and a Consumer. This value can be anything. You can also remove the redux and react-redux dependencies. This context will replace the Redux Store. I will also have to create a Context. Provider component, which will act just like a normal React component. This React component will have a state and props and a component lifecycle. Inside, store the default values in the state and pass them down in the render, through the value prop. Use the same code snippet as the one I had showed above. We want our action handlers to be able to modify our state, and propagate its value down. So we will create component methods that will call this. Furthermore, if we want to make those action handlers available later down the tree, we will need to also make them accessible in the value prop. To consume these values later in the component tree, we will need to create a ThemeContext. This component will need a render prop that will receive the above value prop as an argument. Create another file called Consumer. We only have one thing left to do. Redux or Context — When To Use What. Others might even need something like Mobx or Mobx-State-Tree, and some may not need anything to handle their state at all. So, how do you decide. The answer comes with experience. But you will probably have very less amount of state that will be global. Which brings us to an important take away: React context vs redux both local and global state in your apps. Managing everything in Redux is overkill. It may have negative performance implications and will increase the complexity of your app, making it hard to refactor, and likely reduce the reusability of many of your components. But I am going off on a tangent here. Getting react context vs redux to the topic, when do I use Redux. Say you are building a food-ordering website. react context vs redux We have a checkout page that shows the food items a user has ordered with their respective prices and the total checkout price. We manage all of this state with a local component state in the Checkout component. But we already have this data managed and rendered in the Checkout component. Also, you want both the Checkoutcomponent and NavBar component to stay in sync as the contents of the cart change. In other words, we have two disparate components that need to read and possibly update the same state. So you need to pull the checkout cart state of our Checkout component up into Redux. Once this data is in Redux, the Checkout and NavBar components can individually connect to Redux with the state and dispatch functions they need. It can also be used in apps where you want to pass some props deeply without the overkill that comes with React context vs redux or MobX. For example, it encourages the use of immutable or persistent data structures or strict comparison of context values which might prove difficult because many common data sources rely on mutation.
