Dangal is a movie about an ex-wrestler who trains his two daughters so that they fulfill his dream of winning a gold medal in wrestling in the international games.
These two girls’ journeys will help us choose a state management strategy based on the problem. Let’s start the girls’ journey and also find ways to handle the state.
The chronology order of the journey and order of strategies are really important, you will know why at the end of this post.
Local State
The father never thought that his daughters can become a wrestler until one day when he finds out that both the daughters beat the shit out of two boys who were teasing them.
At first even we never think that local states (the states which are only used in that component) can be enough to store data used in that component. Most of the time we over-engineer this step and badly design the components with global states instead of local states. But the local state in many cases can alone solve the data storage problems.
Parent-Child State
The father visits many wrestling training clubs in his village so that his daughter could be trained there. But none of them allowed his daughters as his village was dominated by male wrestlers. That’s when he decides, he’ll train them all by himself. The children get what the father knows.
Sometimes local state alone cannot solve problems. There are some cases where a few related components need the same data. This is when we need to lift the state to the parent component so that all the child components under it can have access to the lifted state.
Route URL
After training them, father takes them to nearby villages where local wrestling competitions are held between unrelated strangers. This helps the daughter understand match rules and her strengths. After losing a few games, she starts winning.
There are cases where non-critical and simple data needs to be persisted across components that are not related. That’s when we store the data in the route URLs as params. These are also useful in cases where users can bookmark a certain page. Examples of data that can be stored in URLs are user names, product ids, app locations, types, etc.
Web Storage
Father makes the list of some national champion players. These opponents were temporary as his father knew that if his daughter beats them once, she will become the national champion.
Sometimes you need to store data which gets expired after some time or should get deleted when the browser is closed. Also, this data should be available to all the components in the application. That’s when we use web storage like session storage or cookies. Examples of data that can be stored in web storage are tokens, user id, language preferences, etc.
Composition/Context
After becoming the national champion, the elder daughter gets a chance to train at the national academy and play international matches. Now she is being trained by a new national trainer whose methods are opposite of what his father has taught. She forgets what her father taught. Because of this, she starts losing international matches.
Composition Pattern or Context API is a way of storing data between sets of unrelated components or between the whole application as well. If this strategy is not done in the right way then this can cause bugs and performance issues, similar to what the wrestler is going through.
The wrestler forgets her father’s training and I know you might’ve forgotten my earlier post related to this strategy. Therefore if you haven’t read it yet or have forgotten it, this is the link to React’s Composition Pattern Post.
3rd party library
Seeing the daughter losing games, the father decides to help his daughter with the training again. The father studies his daughter’s older lost games. Makes a list of strengths and weaknesses. He trains her to play situations, to play on her strength and her opponent’s weaknesses. She finally starts winning games and at the end also wins the gold medal.
There are many 3rd party libraries that help in state management. Every one of them has different strengths and weaknesses. Now based on the project nature and our problem, we should pick the one which suits us the most.
Example libraries are Redux, MobX, RxJS, etc.
Conclusion
The reason why chronology order is important is that if the daughter started fighting international games before playing local competitions in her or nearby villages, she wouldn’t succeed the way she did.
A lot of us decide on 3rd party library or state management strategy before the project start itself. This is similar to playing international before even playing local matches. Try not doing this. Start with the first strategy, if it doesn't solve it, go to the second one and go on until the last step. And if nothing helps, only then pick well suited third-party library.
I gave you steps to win the gold medal and in return, I am just asking you to share this with your friends, and colleagues or shout out the link on any social platform.
took me to a self realisation point :)
Keep writting..!