React Developer tooling
summary
A concrete inventory of changes and results: Fast Refresh computes a component signature (including custom hook names and variable names) so function components keep state across edits, recovers from syntax/runtime errors, and jumps Facebook usage from ~15% to almost 100% after rollout; React Native ships it in v0.61 and webpack/parcel integrations are in progress. The rebuilt React DevTools adds editable hooks/props, a reload‑and‑profile recording with export/import and changed‑prop diffs, rendered‑by lists and filters. Curated codemods automated 3,500 prop‑types, ~8,500 lifecycle renames and 20,005 createClass conversions.
AI-written summary · about
chapters (23)
- 0:00Intro
- 1:38What is Fast Refresh ?
- 3:53How is Fast Refresh different?
- 4:20How does Fast Refresh work?
- 7:39Does Fast Refresh have limitations?
- 8:28Fast Refresh usage at Facebook
- 10:39Exploring unfamiliar projects
- 11:30Tracing the flow of props
- 12:48Component filters for large trees
- 13:27Inspecting components in the console
- 14:14Improved props/state/hooks editor
- 15:03Suspense toggles
- 15:33Component stacks for all warnings
- 16:59Export and import profiling data
- 17:19Why did this render?
- 17:58Component render list
- 18:21Remember selection after reload
- 18:58Higher order component badges
- 19:21"Smart" indentation
- 21:00How do codemods work?
- 21:57What are codemods good for?
- 22:16What are codemods not good for?
- 25:37React Developer Tooling
related talks
27mChrome DevTools: State of the Union 2024 - Debugging React & Beyond
08mReact Without DevTools
16mDeep dive into react profiles and performance optimisation
41mReact - Rethinking Best Practices (updated)
25mReact developer? How are your production skills?
33mState-of-the-art React Server Components Developer Tooling
21mThe Evolution of React UI Development
26mLightning Fast React Apps