Managing Complex Local State Without Redux.
js using (useReducer + useContext) React HooksJabir HussainBlockedUnblockFollowFollowingMay 11React v16.
8 introduced Hooks in stable form to the world to empower the functional components with local state and other react features (i.
g effects).
React added some very useful built in Hooks, so userReducer and useContext are very interesting hooks React provides.
So let me explain both one by one.
For the React developers one thing is always very difficult to choose between whether to use a local state or global state using Redux.
js, Mobx.
js etc.
This is a big debate to talk about but it is beyond the scope this discussion.
Let’s suppose to be the case one developer agreed with teammate to use local state for a very complex component having multiple parts in the form of child components, so the parent component takes the responsibility to manage the local state and passes the data to child components using Props Drilling.
Do you know!.what happens, when you want to scale this component up or refactor.
It will put you in difficulties because props drilling is a bad design pattern.
Is there other way to avoid the props drilling?.yes!.as React v16.
6 added a very powerful design pattern with name ContextAPI which provides a way to pass the data through the component tree without having to pass down the props manually at every level.
You can compare both in picture below.
This is awesome!.as you witness the props drilling is cumbersome to pass the props manually at every level.
Let’s assume we provide a state to the components tree using contextApi, for example one of your component in complex component tree needs data from more than one context provided states.
Let’s suppose!.we have current user card in application header view to show the current user name alongside unread notifications with some specific styling provided by application’s level theme.
So the case is very interesting which is that this component needs three types of data from three different contextAPI providers.
You can see in the screenshot.
Here in above example you can see three different contextAPI providers with names (ThemeContext, CurrentUserContext and NotificationContext), so what happens when a component consume all of them.
Here is a lookAs you see in the screenshot above which is very difficult to read.
Do not worry we have a better design pattern in market which is useContext React Hook.
when you are going to use useContext instead of consumer tag the code become much simpler and cleaner.
Have a look at the screenshot below.
Incredible looks awesome!.so this is the power of useContext with contextApi.
Until now we covered the one part of our discussion which is useContext React Hook, so the other part is useReducer which is the alternative of useState and more cleaner way of managing local state.
Let’s assume you manage the local state very elegantly by using useReducer but pass the data down manually through the components tree at every level using props drilling which is a bad design, so that is still not a good solution.
What can we do?.As we discussed in part one of this discussion which is contextAPI with useContext, that’s awesome!.we can use useReducer with useContext to manage a local state as easy as like global state with Redux.
js, it sounds good.
We have another simple example to demo the local state management using useReducer and useContext like Redux.
js, which is todo list with filters.
Have look at Gif demoAs I mentioned that we can manage the local state without Redux.
js just like Redux.
js.
What does mean by just like Redux.
js?.because the useReducer manage the state exactly same as Redux.
js manage, using which you can define the reducer and action functions as you do for the Redux.
js, it sounds good.
Let’s have quick look at some parts like reducer, actions, store, contextApi provider and useContext to consume the state.
reducer.
jsAs in above screenshot you can see the reducer as similar as Redux.
js reducer, so let’s have look at actions.
jsYeah!.its quite similar with Redux actions syntax.
Until now we saw all thing are smooth because we already did in Redux.
js.
so how provide a store to the component tree.
Let’s have a look.
In screenshot as you see first we create a state by using useReducer Hook and then provide that state to tree by using contextApi providerTo provide the state to component tree is looking familiar stuff, yeah!.its just like Redux.
js store provider.
To access the state in component tree you can use useContext Hook very easily as we see in early examples.
Check it out below screenshot.
So clean!. More details