This rule is like a compass–it guarantees you will take the first step in the right direction right away!
The Funnel Analogy:
The React component function is like a funnel–the state is returned by useState and travels downward to the template. This means we can intercept the state halfway and further process it, creating new values that better meet our demands. Then we can send the new values to the template, presenting them to users. The new values can be memorized by useMemo. This way, we can reuse them in the render, which helps make the program more efficient.
The event handler is where we call the state setter to set a new state. You can think of the event handler as a faucet–it ours new water into the new funnel, the new water being the new state and the new funnel being the re-execution of the component function.
Reducer & Custom Hook: A Better Place to Store Code
To avoid overcrowding the component function, we can migrate code to the custom hook. Meanwhile, hooks migrated to the custom hook can be easily reused. Following the same logic, React also provides the reducer. The same state can be reset in multiple ways; as a result, the same state is often paired with multiple event handlers. This means the update logic of the same state is scattered across multiple event handlers. And this can make our program very difficult to maintain. The reducer allows us to consolidate the update logic of the same state in the same place. As a result, our program will be much easier to maintain.
Closure & Effect: Save Data for Future Use
Closure helps us preserve data for future use. The React effect is built on closure. Therefore, we now have an opportunity to understand closure for good!
Finally:
This course shows you what happens under the hood so that you don’t have to rely on memorizing conclusions. Meanwhile, this course also does the extra–it uses animations to make things clearer and easier to understand. The examples used in this lesson are carefully designed to bring you the best results.
