Turbocharging React Grid Performance

on YouTube ↗10m

" summary

An in-house React data grid handles updates as fast as every 100 ms by moving state generation into Web Workers + WebAssembly, using Rust for WASM to avoid manual memory bugs. State generation time drops from about 20ms → 6ms for simple updates and keeps up when sorting is applied, preventing accumulation and browser crashes. The design uses transferable WASM linear memory and fast copy-on-transfer so worker and main threads each hold usable state and the UI stays smooth.

AI-written summary · about

" chapters (6)

1. 0:00Introduction
2. 1:05Traditional design issues
3. 4:17Web Workers solution
4. 6:03WebAssembly integration
5. 8:28Performance comparison demo
6. 9:54Summary and thanks

" related talks

• 06mAG Grid's New React Rendering EngineNiall Crosby · React Summit 2022
• 30mImproving web app with Rust and WASMIlya Baryshnikov · RustCon Asia 2019
• 38mLive Coding - Optimizing a React applicationJuho Vepsäläinen, Andrey Goncharov · React Finland 2020
• 20mReconciliation: The Root of Performant ApplicationsJesse Kipp · ReactNext 2019
• 55mUnderstanding Performance of React ApplicationsVenkat Subramaniam · Great International Developer Summit 2023
• 29mParallel computing in ReactJS: Provide a pleasant user experienceMajid Hajian · React Day Berlin 2019
• 34mParallel computing in ReactMajid Hajian · reactjsday 2019
• 31mRunning in Parallel: NgRx with WebAssembly, Web Workers and WorkletsVitalii Bobrov · ngVikings 2019