← React.js learning pathReact.js · Module 8 of 10
Hooks deep dive
Use useRef, useMemo, useCallback, useContext and custom hooks.
📖 Key ideas
- useRef holds a mutable value or DOM element without re-rendering.
- useContext reads shared values like theme or user without prop drilling.
- useMemo caches an expensive calculation; useCallback caches a function.
- Custom hooks (useSomething) package reusable stateful logic.
- Rules: call hooks at the top level, only in components or custom hooks.
💡 Real-life example: Context is a WiFi network: any device (component) in the house can connect without running a cable (props) to it.
useRefMutable value or DOM handle
useContextReads shared context value
useMemoCaches a computed value
Custom hookReusable logic starting with use