Performance Showcase
Most of the time, we only look at performance after the problem has already happened. That's extremely common in software development, but a lot of it can be avoided by practicing it daily and doing it the best way possible. In this demo we'll put numbers in front of every optimization: a hundred thousand rows rendering without choking through virtualization, code splitting shrinking the initial bundle, useMemo/useCallback used to avoid re-rendering content, and a heavy task running on a Web Worker without blocking the main thread. FPS, screen load time, render count, and bundle size stay visible the whole time.
Technologies
- TanStack Virtual
- next/dynamic
- useMemo/useCallback
- Web Workers
- React DevTools Profiler API
Architecture
- Virtualization of large lists (windowing)
- Route-based code splitting
- Web Workers for heavy tasks off the main thread
- FPS/render/bundle metrics exposed in the UI
Concepts
- List virtualization (windowing)
- Route-based bundle splitting
- Main thread offloading
- Core Web Vitals (LCP | FID | CLS)
Demo area
The interactive demo for this feature will be available soon.
Coming Soon
The interactive demo for Performance Showcase is currently under development. The architecture and technical details are documented above.