Let's be honest, react's state management is a nightmare for everyone working on large and small projects alike. The tree like structure that react brings to the table is sure worth it but the state management causes more pain than pleasure.
How? let me explain it
The story of a smart developer
Arther and Susan are the frontend developers at HavenLabs. A state-of-the-art research and product development lab. Arther and Susan want to make it big in this company and therefore put in the work to prove themselves. However, due to the recent market crunch, the company can only afford one frontend developer. So, in order to decide who is better, the company decides to give them a task and see who deserves to be kept.
Now, this is where things get interesting.
Arther decides to use react's state management and Susan decides to use Redux. They are given 1 week time to finish the project and both finish it on time.
Hmm, the manager is confused now. They both have completed the project on time and both applications are working fine. To further assess both to them the manager changes the requirements of the application. These new requirements need some modification to certain parts of the application and the deadline is tomorrow.
No problem both of them get to work right away.
The morning of judgement is here and they have to present their applications. Susan presents what she has built and also explains the structure of the project to the manager. The application is working exactly as expected. She is confident that she will be the one who won't lose the job. On the other hand, Arther looks tired and dull (because he was developing the application all night). Nevertheless, he presents his project and just to impress his manager he decides to show off a working demo but as soon as he clicks on a button an error pops up
props.getInputValue("order") is not a function
OOPS!
Looks like Arther forgot to pass the props down to the child component.
The manager is not impressed and Arther loses his job.
Moral of the story: Don't use react's state management
Why?
Why learn Redux in 2020
There are several reasons to consider redux but I'm going to list the most intuitive ones and provided links for people who want to learn it.
- Redux brings the concept of sing source of truth to the table. Instead of passing props from the parent component to children or lifting the state up, redux stores all the states at one place called the store. This store is accessible from all the components in the application and a component can receive and modify props from this store directly without expecting the parent to explicitly assign the props. React states messy no more.
- Redux brings structure to the project and overall the code-base becomes much more readable and clean.
That's all folks for today! I hope you enjoyed reading this post. If you did please click on the ❤️ button.
See you in the next one
Cheers,
Jha
A great post to learn more about redux:
Additionally,
Redux for beginners
Some of my previous posts:
Top comments (2)
The redux/flux pattern is great for managing complex state. In fact the creators of redux are part of the react team. They brought the pattern into react itself with a hook called useReducer. If you have not checked it out you should.
Ah! I'm definitely going to check it out. I've been a bit unsure about using hooks with redux because of the stale props warning mentioned on the react-redux page but I hope useReducer does not have that issue.