90% Cleaner React
summary
Claims code becomes 90% cleaner by replacing render props with hooks and demonstrates concrete tools: useState/useEffect/useReducer plus custom hooks like useMedia and useProgress. Implements an accessible carousel with autoplay, pause, progress bar animation, keyboard focus management and state reducer, shows race conditions and timeout bugs, then fixes them by scoping effects and cleanup. The demo runs successfully and the refactor reduces nested boilerplate while preserving functionality.
AI-written summary · about
chapters (17)
- 0:00Cleaner React with hooks
- 1:03Render props problems
- 3:41Creating useMedia hook
- 9:24Demo: useMedia hook
- 10:27Accessible carousel
- 14:02Slide transitions with useEffect
- 16:13Play/pause functionality
- 18:10Fixing timing bugs
- 20:01Progress bar with useProgress
- 21:53Workshop feedback
- 23:43Stop auto-play on interaction
- 24:47State with useReducer
- 28:27Final carousel
- 28:55Context vs Redux with hooks
- 29:58Managing focus for accessibility
- 32:30Focus control with refs
- 33:15Summary
related talks
45mReact refactoring, off the hook(s)!
12mReducing bugs in a React codebase
27mEric Bishard - State Management with React Hooks
39mRefactoring off the hook(s)
34mAre You Smarter Than a React Component?
32mRefactoring React
42mClean Code vs. Dirty Code: React Best Practices
27museEncapsulation: Using React Hooks Sensibly