Code snippets, tutorials and software engineering.

Overview

React is a popular front-end library used in web development. It is a component-based system which means each component manages its own logic called state. State is basically data stored in each component, and you can manipulate the state in the component. You can also pass the state as props to different components. However, a child component can only receive props from a parent component. React is set up in a way in which data can only be passed down from top to bottom. Due to this, you can probably foresee the problems that might occur with being locked into this unilateral movement.

Depending on certain projects, you might have a component that has many child components nested. It can be cumbersome to continually pass down props and mistakes might occur. That is why we have extra tools to help us manage our state in React. You might have heard of Redux and Context, and I’ll be giving a brief high-level overview of the two.


Redux

Redux is a library used for managing complex states. Rather than passing down props and keeping each state localized to each component, Redux handles this by centralizing all the states to a store. You can access the store from any component. This is important because being able to access the store allows for flexibility within the whole app than being restricted to just a parent or child component. Additionally, the store contains actions and reducers with the whole state tree. To manage your state, you need to dispatch actions. An action is just a plain object which tells the store you want to change the state. After an action has been dispatched, a reducer is executed. A reducer is simply a function that manipulates the data in the store. The state in the store will be mutated by the reducer, and you can access your new state for your component. The high-level overview of Redux can be viewed below.

Redux Visualization

Context

Context is Facebook’s light version of Redux. According to React documentation, Context provides a way to pass data through the component tree without having to pass props down manually at every level. The difference between Context and Redux is that Context is used to access props without passing them down, and not used to manage your state. It’s a way to reference props across your application. It is important to note that Context will prompt a re-render every time a state is updated and re-renders all the components. Redux will only re-render the updated components which allows for more customizability in specific components. As you can see, Context is not as complex as Redux and its capabilities are more “limited.” This does not mean Context is inferior by any means. It is to highlight that Context and Redux are not 1 to 1 comparison when choosing either of the two. Redux actually uses Context API under the hood.

Context Visualization

Differences

Redux and Context are brought up for state management frequently because people assume you can choose either one and achieve the same results. Technically, you probably can; however, they are different tools. To reiterate, Context is mainly used to bypass the process of passing down data. Redux handles complex states better and can give you more control of rendering your components.


Conclusion

At the end of the day, it all comes down to what your application needs and what tools fit best to support it. Neither is the wrong choice, but I would say that Redux provides more as a whole. Additionally, developer tools are available for Redux to trace your state changes. If the initial boilerplate setup is too much, you can check out Redux Toolkit, an opinionated version of Redux which is a popular alternative to regular Redux. If you want to stick with Context, setting it up is easy because it is built-in with React. It might even yield faster performance depending on your use case and application. The point is to recognize Redux and Context both have their pros and cons with their different nuances. What you choose is ultimately up to you, the team, and the project!

You’ve successfully subscribed to Into Code
Welcome back! You’ve successfully signed in.
Great! You’ve successfully signed up.
Your link has expired
Success! Check your email for magic link to sign-in.