What is React Context API?
Taking a deeper dive into React Context API and how it differs from redux
This past week, I wanted to dive into newer technologies in React, study them and practice using them. After redux, I read about React Context API and how it helps with state management. Of course, when I first studied it, it seemed almost exactly like redux. However, after practicing and playing around with store setup and state retrieval there are some key differences that may make React Context API a bit more easy for beginners (if I may say so) by not being as context heavy to set up as redux. Let’s take a look at why.
First, What is React Context API?
Let’s start with Redux. In summary — redux is a tool used to manage state in React applications in a more concise manner to avoid something called ‘prop drilling’. Very often, if we aren’t using redux or something similar, in order to retrieve the correct props from a parent component, we need to pass them down the component chain in order for the props to reach the designated component. Not only does this consume time, a lot of times the ‘passing’ props have no use for these props (thus unused) and many times because there is so much passing it is not uncommon to misspell or get lost in your component hierarchy.
To avoid this and help make your code more efficient — welcome redux and React Context API. The setup for both of these tools can be intimidating at first, but once you get the hang of it, you’ll realize how efficient data retrieval becomes in your React application. Yes, if I missed it, ‘state’ simply refers to data that is needed to render specific UI correctly.
Redux consists of four main building blocks:
- One single, main centralized state.
- Reducer functions — these contain the logic needed to alter state (similar to the functionality of {…this.setState}.
- Actions — these are dispatched to trigger a specific reducer function to run, depending on specific switch cases.
- Subscription — in order to actually use this state in the react component.
React has amazing documentation that goes deeper into these four levels to explain what exactly is happening with state management and data passing.
React’s Context API is quite similar as to what it delivers to the developer — easier and more efficient state management- but with three main setup blocks:
- Context Object — defined in a seperate file or next to the component in a component js file. Any data can be stored in this object, and there can be several in one react application.
- Context Provider- provides the context object to all of your components that may need it.
- Context Consumer- a wrapper component that can be used to ‘inject’ the Context provided in some parent component.
In summary — providing Context in something like your App.js file (or any component that wraps all of your components in the application) and consuming context in the components that actually need the Context data.
React Context API or Redux?
Although React Context API is a bit cleaner and let setup heavy, it is not built for high frequency updates. This was seen when people began to switch to react context API from redux. However, for the moment and if you are just newly diving into redux/react context API for state management, using React Context for low frequency updates such as user authentication may be a good start.
Personally, while building a e-commerce application similar to Amazon, React Context AP — both setup and usage — seemed a-breeze after using redux. It’s built into react so there is no need to update and install new dependencies. The API is also pretty straightforward to use, especially if you’ve used Hooks before. Lastly, async functions will not require an extra package (such as redux-thunk) to be implemented.
All in all, both are optimized systems and work to make applications’ stronger and efficient. Using any will only benefit your app; React Context is jsut an easier start ;)
Happy coding!
References:
