Learning the React Framework - 005 Function Hooks and State Driving
Why Did React Implement Hooks?
React Hooks were introduced in version 16.8.0. They are completely different from class component lifecycle events. Simply put, with increasingly complex development requirements being proposed, we need to observe changes in certain dependency values and display these changes in the browser at different time points - driving side effects, managing side effects, optimizing side effects, etc.
Hooks are the implementation of these methods.
Depending on the different functions of Hooks, the tasks they can accomplish vary greatly. Next, I'll share and discuss basic and advanced Hooks~
Basic Hooks
useState
State allows components to remember information like user input. Components can use state to store input values, or any variables you want to save and change according to your set logic.
useEffect
Hook triggered during rendering and re-rendering
- Lazy initialization lazy state initial first frame evoked => computed extra expensive
- Only when necessary (triggered when observed values change) shallow comparison attention with what you consent
- Can be extracted into a custom function
hooks
This flowchart briefly describes the process of Hooks during mount, update, and unmount.
codepen
Simulating hooks mounting order
Following the flowchart above, we can clearly distinguish
When a component is mounted
render start ⇒ lazy initiallizers ⇒ render end ⇒ LayoutEffects ⇒ dom update(Painting/User see change) ⇒ some state change ⇒ render start⇒ render end⇒ layoutEffects run again ⇒ cleanLayout ⇒ dom update ⇒ cleanEffect⇒Run Effect
When a component is unmounted
render start ⇒ render end ⇒ child component cleanup ⇒ parent component cleanup ⇒ parent component run effect
- When child components trigger updates, only the child component's flow is triggered
Note that for child components, you might think child components render first when parent components finish rendering, but this isn't the case. Because the underlying system directly calls react.createElement, React will only sequentially render and execute child component effects after the parent component mounting is complete.
Empty array ⇒ observes everything ⇒ which tells React it doesn't currently depend on application state ⇒ only triggers once during render
Pay attention to lifting state
Lift component state to the top level, and pass down update functions from the top level to each component for management
React state should be encapsulated where it's truly needed - co-locate the state to where it needs to be.
Pokemon
Attempting to use React basic hooks to implement an infinitely scrollable and responsive Pokémon card list (turns out there are so many Pokémon 🫠)