The Need
In case of using props in a hierarchy of components, we need to move the data throughout the hierarchy from the leaf node to the root node in order to communicate the data / handlers to the siblings
This leaves us with the following
1. The parent components, does not need to know the child component's data but it still gets them inorder to uplift the state
2. Components gets polluted with the props of unused data / handlers
3. Chances are high that after development, in the maintenance phase, these methods might be overwritten or consumed in the wrong component if the maintainer does not have a good understanding and is on a hurry to resolve an issue
4. Data communication is highly linked between unrelated components
Illustration
The below diagram will illustrate the problem where each components uplifts the state in order to the siblings to get the update or data from their siblings. This causes the root component (<App />) to be fully aware of what is going on in the entire application which is not what the root component should be aware of.
The components cannot be replaced or updated which might result in the loss of the connectivity in the chain
Context API to the rescue
The context API is a built-in component-wide "behind the scene" state storage that helps in handling the communication between sibling components without bothering the parent components.
How many context can I use?
It is good to have chunks of multiple context than having a very large context that acts like a huge property bag and passes on the full data to all the components (ones that are interested and to the ones that are no interest)
How to use?
Now that, there is a context, how can use one?.
Creating a context
The first step is to create a context, which is an object. The context object will have attributes that will allow the states / data to be represented to the components of interest
Provider
The provider wraps all the components that are interested in this particular context. The provider returns a component through which only we are able to wrap the child components.
Consumer
The consumer wraps the component / fragments that need to consume the data from the context. This is an alternative one to the hooks given below.
Hooks
The useContext hook can be used to access a given context.
Limitations
It is important to note that, context cannot be used for high frequency updates like the state, because it is not optimized for these kind of operations.
Hence, we need to use the context only for the scenarios that involve infrequent updates (or) updates that are occurring of-late.
Example:
We can use the context API for the authentication, to cascade the authentication information across all the components.
If an application has a context like theme, colors, font sizes, user preferred language, currency (USD, Euro etc..) etc, we can capture and pass these information to all the components
I will plan to add code snippets for the above shortly.
If you get to my wordpress blog (https://wp.me/pNLv8-b6), here is where you get back with more details
ReplyDelete