Why React Hooks and How Did We Even Get Here?
summary
Builds an Intercom-like widget that fetches past messages, subscribes to new ones, and updates the document title, then reimplements it with useState/useEffect and three composable custom hooks (useNewMessages, useMessages, useTemporaryDocumentTitle) to show behavior colocation and cleaner code. Explains concrete replacements for mixins, HOCs and render props, and shows when to use useRef, useReducer, useContext, useMemo and useCallback. Covers experimental concurrent-mode helpers like useTransition and useDeferredValue, and demonstrates they work to defer heavy renders and reduce UI jank.
AI-written summary · about
chapters (12)
- 0:00Introduction and speaker intro
- 1:02Building the Intercom component
- 2:26Class-based component challenges
- 4:12Mix-ins and higher-order components
- 6:59Render props and their issues
- 8:42Why React Hooks were introduced
- 9:04useState: Simplifying component state
- 9:24useEffect: Managing side effects
- 11:50Custom hooks and encapsulation
- 13:15Other essential hooks overview
- 18:33Future: Concurrent mode and hooks
- 23:28Q&A: Hooks timeline and adoption
