Scaling React to Accelerate Life Science Research
summary
Benchling builds an electronic lab notebook and a DNA editor in React and confronts concrete perf problems: slow typing and massive unnecessary re-renders. The team uses Chrome profiler plus React add-ons perf (calling perf.start/perf.stop and reading perf.printWasted) and the why-did-you-update helper to find that passing bound functions causes wasted renders; adding pure render mixin or moving state local fixes hotspots. Tests assert stable DOM-op counts via printOperations/printWasted and runtime metrics log ops and ms to detect regressions.
AI-written summary · about
chapters (10)
- 0:00Start
- 2:00Electronic Lab Notebook
- 6:40Perf Overview: Rendering
- 8:55Perf Overview: Fundamental Issue
- 10:08Perf Overview: Fundamental Fix
- 14:23Perf Tools: react-addons-perf
- 17:32Strategy: What to optimize? Bottlenecks.
- 33:37Prevent regressions w/: Better Abstractions!
- 35:06Detect regressions via: Monitoring
- 37:31Conclusion
related talks
38mLive Coding - Optimizing a React application
27mBuilding High Performance React Applications
34mOptimizing Performance in Large-Scale React & Node.js Applications
20mPerformance Anxiety with React: Track and increase speed of your apps
26mLightning Fast React Apps
24mExploring Performance
28mDemystifying React Performance
21mMaking Your React Apps Perform At Scale