Post

My Replay time-travel-based React+Redux perf reports experiments are coming together! Just nailed sourcemapped component + selector identities, and I've got accurate timing details on dispatches + renders from a Replay DevTools E2E recording! Early perf report example attached.

Mark Erikson@acemarke.dev

A week-ish later - it's working! Rebuilt my React+Redux dispatch+render perf POC on top of Replay's current infra. Currently extracting dispatch+render timings and selector calls . Just raw data atm, but now I can build meaningful visualizations / perf analysis with this! time travel's awesome!

19/3/26, 6:47 pm3 reposts10 likes

Mark Erikson

@acemarke.dev

19 Mar

Recapping context: There's no comprehensive React + Redux perf insight tool out there. React DevTools gives you component render timings... but mostly in dev, so can only use for relative values ("CompB is 3x slower than CompA") and can't get realistic timings from prod behavior.

Mark Erikson

@acemarke.dev

19 Mar

Meanwhile, there's no way to know what's taking Redux update times (other than JS CPU profiles). Was it the reducer? UI update notifications? Selectors? How expensive was Redux vs React re-rendering? How many of the updates were "wasted" renders? And nothing that combines React + Redux perf info.

Mark Erikson

@acemarke.dev

19 Mar

I'm using @replayio.bsky.social time travel to dig inside of React and Redux themselves, _even in prod_. I know every time React rendered, every Redux dispatch, every selector call. I'm correlating all that data and building perf insight reports to tell you where your app is slow.

Mark Erikson

@acemarke.dev

19 Mar

This is the promise of time travel :) With @replayio.bsky.social , I have an entire time machine at my fingertips. And we've built a sophisticated analysis layer that _deeply_ understands React and Redux internals. No other tech can go this deep :) And there's so much more we can build with this!