Let’s break React’s rules
summary
Demonstrates why calling hooks out of order breaks React by building a recipe app in React and React Native, using useState, the fiber tree, and a React Native FlatList renderItem example. Shows a conditional useState inside a render function that stores hooks as a linked list in the fiber, then adding a third ingredient causes the missing-hook crash (three calls is the surprising failure point). Rewrites the app to put state inside an Ingredient component and the bug disappears, proving the rule matters.
AI-written summary · about
chapters (9)
- 0:00Introduction
- 0:25Breaking first hook rule
- 3:33Fiber tree and rendering
- 5:17Why conditional hooks break apps
- 6:43Rules of React explained
- 7:46Breaking second hook rule
- 11:45Correct hook usage in components
- 13:08Why rules prevent crashes
- 14:12Understanding React's rules
related talks
27mHooked on React Hooks
30mJavaScript prerequisites for React (hooks)
36mReusing Stateful Logic in React: HOC vs Render Props vs Hooks
45mWhy I am hooked on the future of React
40mKeynote: Hook up your ReactNative app
22mI Am Hooked on React
35mA Guided Tour of React Hooks
59mDeveloping React Applications with Functional Components