What Refs Can Do for You
summary
Profiling with React DevTools and Chrome shows a concrete win: replacing state-driven style updates that cause 254 renders during column resize with manual DOM updates via a ref callback or a synchronized effect removes those renders and fixes janky resizing. The team prototypes using useLayoutEffect vs ref callback to set left styles, measures render stacks, and verifies smooth behavior in AG grid. React 19 changes ref callback cleanup semantics and strict‑mode timing so adjust the cleanup and callback memoization accordingly.
AI-written summary · about
chapters (6)
- 0:00Introduction to Refs and Profiling Agigrid
- 2:46Optimizing Custom Cell Components and Performance
- 5:28Improving Performance with Manual Style Updates
- 8:34Refactoring the Use of useEffect
- 10:24Improving Performance with Ref Callback
- 13:49React 19 and Using Ref Callbacks
related talks
38mLive Coding - Optimizing a React application
23mPerfecting Your Profiling
41mReact - Rethinking Best Practices (updated)
28mDemystifying React Performance
17mReact Responsively, Render Responsibly
51mReact & Redux: Optimizing performance
16mDeep dive into react profiles and performance optimisation
32mRefactoring React