When should you use Redux, and when Context will be the best option? Find out in the podcast by Piotr Czubak. Check the contents. We can help your company with development issues: contact us via the form on frontendhouse.com.
In the "Context vs Redux: What to Choose?" episode you will find:
- 00:00 - Intro
- 00:34 - Agenda
- 00:50 - What is the application state?
- 01:05 - Passing props through components
- 01:50 - Tools to manage application state: Context API and Redux
- 05:18 - Advantages of Context
- 05:47 - Advantages of Redux
- 06:13 - Which one should you choose?
Have a nice watch! Don’t forget to like the video and leave comments to share your impressions!
Transcription
Hello, my name is Piotr, and today we will talk about Context API vs Redux, and when to choose what?
Agenda
Let's start with the agenda. First, we will talk about what is the state of an application, how props passing works, and essential tools to provide state of the application throughout components. In this case we will talk about Redux and Context API, and how to decide which tools should we use.
What is the application state?
So the first question, what is the state of application? This simple sentence should explain that perfectly: the state of application is the global data accessible throughout the whole application. Whenever the user updates this state any components that use it, will rerender.
Passing props through components
How exactly can we get access to an application state? Let's take this as an example - component tree. Also, let's say our main component is component A. Now, component D and the G want to access a state which component A holds. To do so, component D has to ask component C, which asks component B, which asks component A about the state. The same goes from G to F, to E, to A. Every component that this state goes through has to rerender on every state change. How can we prevent that then?
Tools to manage application state: Context API and Redux
I've already prepared two applications to solve this problem. Let's talk about Context API first. In this case, we have one place where we hold our state, called Context, and components that have access to Context via provider. Let's take a look at a code example.
To use Context we have to import createContext from React library. Then all we have to do is to create an account with createContext with an empty object. In our main component, we have our Context that wraps components with a provider with a value which is our application state. In this case, it has pros and cons equals zero. We also have two buttons, one that increases pros and one that increases cons. In our components, we have imported our Context, and by using useContext hook from React library we can extract any state property from Context. Here we can see it works fine, but also we can see that components, we don't change the value, also rerender. Why is that? Because Context makes every component in the provider to rerender whenever data is changed.
Here the Redux comes in handy. We have an exact same-looking application that does the same thing: pros and cons and two buttons to increase them. But the difference is that whenever we update one of the values, only a specific component is rerendered.
Redux application works in a different way. We have our component that dispatches an action to a reducer, which goes to our store and updates necessary values. Let's take a look at the code and how we can start working with Redux. First of all, we have to create our initial values. In our case it will be pros and cons equals zero. Then we have to create our actions. One is to increase_pros value, and one is to increase_cons value. Action is just a function that returns a type of action, which is simply a string. After that, we have to create a reducer. Reducer is also a function that takes state, in our case, it will be the initial state, and also an action. Based on action type we return a newly updated state. And last, but not least, we have to create our store, with createStore, which is imported from Redux library that takes reducer as an argument.
Already, you can see how complicated it is, compared to Context, and we haven't really achieved anything yet. So how can we use it? First of all, let's drop our app component in index.js in a provider from React Redux library. Then, we pass our store to this component store prop. In our base component, let's import two main hooks from the React Redux library: useDispatch and useSelector. useDispatch will let us use an action, and useSelector will let us specify which state property we want to update.
Let's also import our actions. Here we can create a dispatch const which is a reference to the used dispatch hook, and also data const that is our state, provided by useSelector hook. Our buttons use dispatch with a specific action. In a single component we can see that it is wrapped in a React memo. It prevents unnecessary rerender when values don't change. So here our value is a specific value from the state, and that's how Redux works.
So what are the advantages of each of these tools? Let's take a look at Context.
Advantages of Context
First of all, it is a built-in package, which means we can use it without extending the size of our project. As shown, it is much easier to understand than Redux. It is great for static or very rarely changing data. For example, you don't have to search far, the theme of our page. It requires a lot less boilerplate than Redux, and of course, the documentation is great. Test it by yourself.
Advantages of Redux
What are Redux's advantages? It is commonly used, which means a lot of the problems are already solved by the community. It is great for often refreshed data because we can prevent a lot of unnecessary rerenders. As shown before, it is easily integrated with React, thanks to the React Redux library. Redux also allows us to use it on server-side rendering applications. And last, but not least, most of the Redux applications have a similar code structure.
Which one should you choose? Examples
When to choose what? So the question is often asked, what to choose, and the answer is - it depends.
In other words, it's related to the project. In the case of small applications where data isn’t changed often Context seems to be a better choice, but when the application is big and complex, and the application state changes frequently, Redux seems to be a winner.
So that's basically it. Thanks for watching and see you again soon in the next episode of Expert Zone. Follow us on the YouTube channel, push the bottom with our favourite word from the dictionary - subscribe - and stay up to date with the frontend world insights.
