Render Props, PureComponent and Reactivity
summary
A real bug appears when render props close over changing props but a middle layer uses PureComponent so shallow equality hides updates the concrete example at asana is a timeline layout where projectName changes but the render callback was created at construction time the fix is to make the callback a class method and create the arrow function during render so a new function identity triggers updates this restores correct rendering and preserves the earlier performance win
AI-written summary · about
chapters (9)
- 0:00Intro
- 0:20Motivation
- 0:50Task Timeline
- 1:16Shared Components
- 2:28PureComponent
- 2:40TimelineCell
- 2:55Props
- 4:38Why does this work
- 5:22Outro
related talks
32mRender Props are Not Dead
51mReact & Redux: Optimizing performance
35mAdvanced patterns in building React Components
19mThe Mystery of React Renders
27mThe weird things about React
04mShallow Rendering All The Way Down
13mEnhancing React Performance: Mastering Re-render Optimization
49mSupporting accessibility in React: the difficulties and niceties