React Performance Benchmarks

I kept seeing people throw memo, useMemo, and useCallback everywhere without actually measuring if it helped. So I built this to show when these optimizations matter and when they're just extra code for no reason.

At work I spent way too much time debugging performance issues that came from both over-optimization and under-optimization. These are the tests I wish I had when I started. Real measurements with actual data, not some contrived example with 5 items.

React.memo

Does wrapping components in memo actually help? Spoiler: depends on the component. See when it prevents wasted renders and when it just adds overhead.

useMemo

Test different algorithms from O(n) to O(n²) and see when caching helps versus when you're just making the code harder to read for nothing.

useCallback

Function references breaking your memo? This shows when useCallback actually fixes that and when you're wasting your time.

Virtualization

Rendering 1000 table rows is brutal. This is the one optimization that consistently made a difference in every admin panel I built.

Everything uses React's Profiler API for real measurements. Pokemon data from PokeAPI because I needed something with enough rows to actually matter.

Mess with the sliders, type in the search boxes, watch the numbers. Then decide for yourself when optimization is worth it.