This article is about theory. Please read it before seeing the application in the next article.
How React update information on the screen?
Before teaching about how to update information on the screen, we need to explain what React does behind the scenes to keep a balance between:
- Showing information on the screen as fast as possible.
- Making your code easier to maintain.
Each time you want to update information on the screen, React destroys and recreates a component to show the updated changes.
This means any variable inside the component will be recreated using its initial value instead of the value you tried to update.
How React make information survive on the screen?
To have variables that survive this destruction and recreation, we need to have a way to create those variables outside the component.
This is what state variables do. Each time you create a state variable, it will be created outside the component so it can survive each time the component is destroyed and recreated.
How React uses Hooks to manage the state?
React Hooks are functional programming methods to create a state variable. In addition, it gives you a getter and a setter method to call this variable when you need to show its current value or modify it.
Interactive example
React Hooks interactive example
Click this link and follow its instructions to see how components with traditional variables and state variables behave.
Conclusion
In Ancient Chinese philosophy, yin and yang ("bright-black", "positive-negative") is a concept of dualism, describing how seemingly opposite or contrary forces may actually be complementary, interconnected, and interdependent in the natural world. - https://en.wikipedia.org/wiki/Yin_and_yang
I hope that by seeing this cover picture and then reading the article for a second time, this concept of destruction and recreation is not only understood, but you accept it as a necessary evil to have projects that have high performance and are easier to maintain.
With this theory and philosophy out of the way, we can move to React Hooks' application in the next article: Manage local state with useState hook.
Credits
Cover: The Yin-Yang Master: Dream Of Eternity by Netflix
- Unmovable rock: Photo by Zoltan Tasi on Unsplash
- Yin-Yang: Photo by Дмитрий Хрусталев-Григорьев on Unsplash
Top comments (0)