Hook ↔ Specialized Function Functionally extends FC with Lifecycle Method & persistent state

aka Hooks

Specialized Function to "hook" into core React functionality

State Scope

declare [<span data-tooltip-id="preview__9Le7zdA2R4LzoE852">FC</span>](fc) with hooks

_why are hooks useful?_

Calling Order

React 18 comes with 15 built-in hooks consisting of Stateful Hook, Effect Hook, Memoizing Hook & Library Hook

References

1. FC ↔ function to return UI via JSX. Pass propsfor dynamic input. add state via Hook

2. Purity ↔ Hooks allow easier debug Side Effect

3. Testability ↔ Hooks split off functionality to Unit Test easier

4. useEffect() ↔ Hook to run Effect in FC at specific stage of Component Lifecycle, set by Deps Array

5. useLayoutEffect() ↔ Hook variant of useEffect(), to call Effect as soon as DOM API generated BEFORE UI repaints to DOM API

6. Stateful Hook ↔ (typeof) Hook to add state to FC

7. Effect Hook ↔ (typeof) Hook to run Effect inside Component at different stages of Component Lifecycle

8. Memoizing Hook ↔ (typeof) Hook to Memoize for better perf by avoid repeat calculations

9. Library Hook ↔ (typeof) advanced Hook for use in larger component libraries & modules

10. Deps Array ↔ Deps[] to pass as last arg to Trigger Hook

11. Dependency ↔ any Variable local to FC Scope to control Hook Trigger

12. Custom Hook ↔ user defined Hook to consume Library Hook & reuse stateful logic