Context API - Redux
Suppose we are building an application with React and, as usually expected, passing data via props from the parent component to the child component. As soon as the app grows and becomes a bit more complex, passing props through multiple components becomes unwieldy. So we may have difficulties managing and sharing the state (for example selected language or logged-in user details) that are required by many components within our application.
To avoid this, at some point, we will need to extract the shared data and put it into a centralized location outside the component tree (to make it easy to pass through all components). Hence we need to use one of the state management solutions.
Let’s answer these questions:
What is the state of React?
“Components often need to change what’s on the screen as a result of an interaction. In React, this kind of component-specific memory is called state.”
~ reactjs.org
What is state management?
“State management is how state changes over time.”
~ David Khourshid (author of the XState library)
Context API
“Context provides a way to pass data through the component tree without having to pass props down manually at every level.
In a typical React application, data is passed top-down (parent to child) via props, but such usage can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.”
~ reactjs.org
Thus, the Context API allows us to share the state across multiple components at different nesting levels without the need for props drilling. By creating a context and providing it to the components, we can minimize the number of props that need to be passed through the component tree.
Context API is a built-in feature of React. It can be used in combination with other state management tools such as Redux. It uses the “Provider and Consumer” pattern to make data available to components that need it. Context API is simpler and easier to understand.
Thus, React Context API is not a state manager (there is nothing written anywhere in the documentation that Context API manages the state). It is a form of dependency injection and helps to pass and share data.
“Context is how state (that exists somewhere already) is shared with other components.
Context has little to do with state management.”
~ David Khourshid
Redux
“Redux is a predictable state container for JavaScript apps.
Redux is a pattern and library for managing and updating application state, using events called ‘actions’.
The patterns and tools provided by Redux make it easier to understand when, where, why, and how the state in your application is being updated, and how your application logic will behave when those changes occur.”
~ redux.js.org
Redux is a third-party library that provides a centralized store for the application state. It also enforces a strict unidirectional data flow, meaning that the state can only be updated in a specific way (it uses actions and reducers to manage state updates). Unlike the Context API, this can make the code harder to understand for beginners.
If the project is large and complex with many components, has a lot of complex state with business logic to manage, and also the development team is large, Redux may be a better choice.
领英推荐
Difference between Redux and Context
We will explore the differences between these two tools, and discuss when and why we might choose one over the other.
Redux is a library to manage and update the application state. We can use Redux with React, or with any other view library.
Context API is not a state management tool, it’s a built-in feature of React, and cannot be used outside of React library.
If the project is relatively small and simple, the Context API may be sufficient. However, if the project is large and complex, with many components and a lot of state to manage, Redux may be a better choice.
The Context API doesn’t provide a clear way to debug and track the state changes. Unlike Redux, it doesn’t have a time-travel debugging feature. And for debugging the issue, developers would have to look at the context provider and trace the flow of data through the component tree, this can be time-consuming and challenging, especially in a large and complex application.
Redux has more advanced debugging capabilities that show the history of all dispatched actions and state changes over time, and also allow us to view and manipulate the history of these dispatched actions. This helps developers to iterate faster and understand what’s happening in the project.
If the application state is simple and easy to manage, the Context API may be a better choice. However, if the state is complex, with many different branches and a lot of business logic, using the Context API can make it difficult to understand how the state is being passed between components and can lead to bugs and other issues. So, Redux may be a better fit in this case.
The Context API uses a “Provider and Consumer” pattern, which can cause re-renders of all components that use the context. This can lead to poor performance, especially if the application has a large number of components that use the context or we trying to pass large amounts of data through context.
Redux, on the other hand, has a centralized store and strict unidirectional data flow, which can help prevent unnecessary re-renders and improve performance.
The Context API doesn’t have middleware support, so it’s harder to handle complex cases such as async actions and side effects.
On the other hand, we can use Redux middleware to add additional logic and side effects when actions are dispatched.
Redux uses actions and reducers to manage state updates, it also adds extra boilerplate code that must be written to connect the store to the components, which makes the code more verbose and harder to understand for developers new to the library.
By using Redux the complexity of the project increases, as the application state is managed in a centralized store and actions must be dispatched in order to update the state. This can make a steep learning curve for beginners.
Context API, on the other hand, is simpler to understand than Redux, because it uses the “Provider and Consumer” patter to make data available to components.
Finally, both tools have their own set of advantages and disadvantages, and the best choice will depend on the specific requirements of the application. It’s worth noting that if you have a experienced development team, good architecture and good practices, many drawbacks and issues can be avoided.
Happy Coding!