How to Roll Your React Components Like a Good Inside-Out Sushi
summary
Shows how a complex table with internal filtering and sorting stays encapsulated while exposing imperative commands via useImperativeHandle, using a ref API for actions like reset filters so parents or distant widgets call methods without prop drilling. Combines that with a Context provider to avoid passing refs through many components, reduces unnecessary renders, and keeps state local. Warns against huge public APIs, leaking internal state, forgetting hook dependency arrays, and recommends wrapping exposed methods with validation, side effects, and logging.
AI-written summary · about
chapters (9)
- 0:00Introduction and speaker background
- 4:05About the speaker and his work
- 5:55The table component problem
- 8:26Inside-out sushi analogy
- 12:45Introducing useImperativeHandler
- 15:16Solving prop drilling with context
- 18:12Common mistakes to avoid
- 21:27Summary and key takeaways
- 22:56Closing thoughts and Q&A
related talks
35mAdvanced patterns in building React Components
45mReact refactoring, off the hook(s)!
35mHandling Large-Scale State Management with Context and Hooks
25mSimply React
23mBest Practices for reusable UI components
50mWriting React Components: The Functional Way
38mWriting highly reusable React components
24mCode crimes for good component APIs