This article is a "wrapper" around that assignment. I'll actually discuss all 10 prebuilt hooks albeit at a shallow level. Please let me know if I got anything wrong.
Track state and signal DOM renders.
📝 useState() signals a render whenever its state changes. Use this be default.
📝 useReducer() provides an API for arbitrary state-render interactions, e.g. update both state
y when state
z changes. Use this for "complicated" state-render interactions and when scaling your app is a primary concern.
Track depencies and signal "side-effects" that don't necessarily affect the DOM.
📝 useEffect() activates after virtual DOM updates and DOM renders. Use this by default.
📝 useLayoutEffect() activates after virtual DOM updates but before DOM renders. Use this when you want to "measure" DOM properties before render.
📝 useContext() provides API for passing props down the component tree.
📝 useRef() tracks real DOM elements. Use this to focus on input fields.
📝 useImperativeHandle() provides an API for exporting the
useRef() reference to other components. Use this when your input is spread across multiple components.
📝 useDebugValue() provides an API for labeling custom hooks in the console output. Use this when creating a complicated custom hook.
React hooks are probably difficult to "learn" in isolation because they likely make more sense in a concrete React app. Moreover, it seems like its more important to learn an efficient and effective workflow using many different hooks to accomplish a particular task rather than just "learning" an individual React hook.
📑 Evan You's talk at dotJS 2019 provides great context for why we even have hooks in React as well as similar ideas in other libraries/frameworks like Vue and Svelte.
Banner source: 🎥 いしわたり淳治 ＆ 砂原良徳 ＋ やくしまるえつこ「神様のいうとおり」（2010）
Article source: 🐙🐱 Ai-Yukino/dev.to