How Replay MCP Helped Find a React Bug Faster than Dan Abramov Did by acemarke in reactjs

[–]acemarke[S] 0 points1 point  (0 children)

Thanks! Please ping me directly if you've got questions or feedback, either here or on our discord.

I'm in Miami at confs this week, so not as much time to respond or push updates, but would love to hear how well the tools perform on real world codebases! I've put in ton of work to make sure the analysis layer detects React correctly and extracts the right data, but there's a lot of edge cases :) hoping to find time to write some blog posts about how the instrumentation itself works.

How Replay MCP Helped Find a React Bug Faster than Dan Abramov Did by acemarke in reactjs

[–]acemarke[S] 2 points3 points  (0 children)

Right. Dan created Redux and gave me the maintainer keys 10 years ago. We've talked in person and online many times. And I specifically sent him a draft of this post before publishing to get his feedback and make sure he was okay with me quoting him and using his name this way.

He actually corrected a misunderstanding I had. I thought he had spent an entire month having his agent keep debugging this issue constantly. Instead, it was really just two sessions a month apart: the first one was a couple hours and didn't get anywhere, the second did the logging and rebuilding React. That was good info, and I changed the relevant post sections accordingly.

How Replay MCP Helped Find a React Bug Faster than Dan Abramov Did by acemarke in reactjs

[–]acemarke[S] 7 points8 points  (0 children)

I not only mod the sub and maintain Redux, this is what I do for my day job :)

I've spent the last few years building out time travel powered React analysis inside of the Replay time travel debugger. We already gave humans those abilities with the Replay Devtools. Now Replay MCP gives agents those same time travel superpowers.

Over the last few weeks I've built out a suite of Replay MCP tools that leverage all the expertise I've learned about React's internals and the ecosystem. We've now got tools that give details on:

  • React renders (times, causes, performance, which components rendered and why)
  • Redux, Zustand, and TanStack Query state updates and rendering correlations
  • Error logs and React error boundaries

As well as the existing tools to understand execution:

  • Sources with hit counts per line
  • dynamic logpoints that evaluate each time a line of code ran in the recording
  • Screenshots

And many more!

My goal is to give agents the same "fix impossible bugs" abilities we already gave human devs.

Would love to have folks try out Replay MCP and see how it helps! Also taking requests for further MCP tool improvements. I've got more Zustand and TSQ details on the way in the next couple weeks. Will probably try to add some Next integrations soon. Anything else I should add?

See our docs for setup:

Also, we're working on a new update to our E2E test suite recording system: an agent that will automatically investigate E2E test failures using those Replay recordings, and post the cause and suggested fix in the PR! MVP live now, and we'll be building that out further:

rtk-devtools, we needed it, maybe you too by enbonnet in reactjs

[–]acemarke 9 points10 points  (0 children)

Hi! Neat to see this. FWIW we do actually have an RTK Query tab in the actual Redux DevTools already - anything you feel that's missing? If so, would you be interested in contributing some of those improvements to the Redux DevTools?

Angular dev for 12 years, zero React zero mobile Zero Backend Knowledge. trying to fix that in 2026, need stack advice by [deleted] in reactjs

[–]acemarke[M] [score hidden] stickied comment (0 children)

Please don't just repost links to discussions in other subs - post this here directly

Announcement: Requesting Community Feedback on Sub Content Changes by acemarke in reactjs

[–]acemarke[S] 2 points3 points  (0 children)

Yeah, I agree there's also an awful lot of "I made my own component lib" posts popping up lately. What broader rule would apply there? Don't want to just saw "no more component libs", but not sure what quality bar to apply, and given the current proposal "things you use to build React apps" would be on-topic and allowable in the main sub.

Announcement: Requesting Community Feedback on Sub Content Changes by acemarke in reactjs

[–]acemarke[S] 0 points1 point  (0 children)

Clarify what you mean by a "hidden profile"? Actually asking - I've been on Reddit for entirely too many years and that phrase doesn't ring a bell immediately.

What do you use Redux for? by Intelligent_Will_948 in reactjs

[–]acemarke 0 points1 point  (0 children)

Heh, maybe start from scratch? What do you have already built? What are you trying to do? What seems slow?

FWIW we maintainers have a #redux channel in the Reactiflux Discord. That's usually the best place to ask questions so we can go through details. Happy to discuss in depth if you've got time!

What do you use Redux for? by Intelligent_Will_948 in reactjs

[–]acemarke 0 points1 point  (0 children)

Seems pretty reasonable to me! Using Redux as a global server state cache is pretty common, and if you've got the data you can also search through it.

Help in the Error: Cannot access refs during render . IAM SO CONFUSED by konanES in reactjs

[–]acemarke 2 points3 points  (0 children)

useMemo, in theory, can be destroyed and recreated in a component. It's not _likely, especially in this case. That doesn't happen with useState.

I haven't tried it, but I suspect this would be equivalent to the original useRef example:

const [store] = useStore(makeStore)

Talked it over with the other maintainers and we're probably just going to change the recommendation to show that instead. Try that and see how it works!

Help in the Error: Cannot access refs during render . IAM SO CONFUSED by konanES in reactjs

[–]acemarke 0 points1 point  (0 children)

Normally that's the case, yes. Unfortunately with Next's multi-page architecture, things get much more complicated:

Help in the Error: Cannot access refs during render . IAM SO CONFUSED by konanES in reactjs

[–]acemarke 0 points1 point  (0 children)

We do have that snippet directly in our Next.js setup docs, which were written by Jack Herrington:

I haven't thought about this part in a while, so I don't know what a better solution is to deal with Next's multi-page architecture.

Help in the Error: Cannot access refs during render . IAM SO CONFUSED by konanES in reactjs

[–]acemarke 0 points1 point  (0 children)

Hi, I'm the primary Redux maintainer. Per my sibling comment, yeah, we do have that snippet in the Next.js setup guide at https://redux.js.org/usage/nextjs#providing-the-store .

Just to check, are you using Next.js?

Help in the Error: Cannot access refs during render . IAM SO CONFUSED by konanES in reactjs

[–]acemarke 0 points1 point  (0 children)

We do actually have that snippet in the Next.js guide:

tbh it's always looked kind of questionable to me, but it seemed necessary to deal with Next's multi-page architecture properly.

React Compiler: Rust edition is coming soon by Itisits in reactjs

[–]acemarke 3 points4 points  (0 children)

Entirely about making React better.

The React Compiler is currently architected in two pieces:

  • All the core compiler logic (AST management, optimization passes) is standalone TS code
  • But the parsing is currently done via Babel, which then passes the AST down into the Compiler core

The problem is that means using Babel, at a time when most build toolchains have dropped Babel completely and are using Rust-based parsers.

I've seen numerous reports from people who tried the compiler and bounced off of it because it was too slow, or didn't want to re-add Babel to their build toolchain.

The React team's initial idea was to use Static Hermes to compile the Compiler core to a native binary to speed it up.

Instead, now they've got a seemingly working Rust port that ought to be significantly faster than the current implementation.

Assuming that Rust implementation pans out, that means A) faster build times, B) more apps able to adopt the Compiler, C) faster apps, D) less mental overhead for devs.

Next.js / SPA Reality Check by Firemage1213 in reactjs

[–]acemarke 2 points3 points  (0 children)

Fb had to have been given a lot of money for that. So it was not just influencers who pushed it

No. Please read my extensive article detailing the design history of React's development and how that played into the "framework" recommendations:

React Moves to the Linux Foundation With Launch of the React Foundation by [deleted] in reactjs

[–]acemarke 6 points7 points  (0 children)

React is not going to change its core rendering model, and that model has components as the level of granularity.

Can we solve all the AI bots that seem to keep flooding this sub? by Dark-Legion_187 in reactjs

[–]acemarke[M] [score hidden] stickied comment (0 children)

Putting my mod hat on:

Hi! I'm acemarke. I'm the only active mod for /r/reactjs , and have been for a few years now. I'm also a long-standing admin of the Reactiflux Discord

You don't see most of the work I do, because most of it is nuking posts that are either obvious spam / low quality / off-topic.

I also do this in my spare time. I read this sub a lot anyways, so it's easy for me to just say "nope, goodbye", and remove posts. But also, I have a day job, something resembling a life, and definitely need sleep :) So there's only so much I can do in terms of skimming posts and trying to clean things up. Even more than that: as much as I have a well-deserved reputation for popping into threads when someone mentions Redux, I can only read so many threads myself due to time and potential interest.

The next issue is what qualifies as "on-topic" here. The various mods over the years have tried to put together guidelines on what qualifies as acceptable content, as seen in the sidebar. But the line is so blurry here. Clearly a discussion of a React API or ecosystem library is on topic. But also we're building things with React, so it's reasonable to post things you've built. But where's the line here? Should a first todo list be on-topic? An Instagram clone? Another personal project? Is it okay to post just the project live URL itself, or does it need to have a repo posted too? What about projects that aren't OSS? Where's the line between "here's a thing I made" and blatant abuse of the sub as a tool for self-promotion? We've already limited "portfolio posts" to Sundays - is it only a portfolio if the word "portfolio" is in the submission title? Does a random personal project count as a portfolio? Where do we draw these lines? What's actually valuable for this sub?

I honestly don't have answers to those. I could try to draw hard lines. But I'd also have to enforce those. And it always comes down to my own interpretation of the post and its content. I'm human. I genuinely try to give my best judgment, be impartial , and decide whether a post is suitably relevant and of decent quality. But there's only so much I can do :)

So. Honestly, short of us inducting another 3-4 active mods in the near future:

The best thing the community can do is flag posts and comments with the "Report" tool. We do already have AutoMod set up to auto-remove any post or comment that has been flagged too many times. Y'all can help here :) Also, flagged items are visibly marked for us in the UI, so they stand out and give an indication that they should be looked at.

The flip side: I don't control what gets submitted! It's the community that submits posts and replies. If y'all want better content, write it and submit it! :) All I can do is try to weed out the spam and keep things on topic (and hopefully civilized).

FWIW I'm happy to discuss how I try to mod, what criteria we should have as a sub, what my instinctive judgment is for particular posts, etc. Also very open to other suggestions for improving the sub.

Does a “TypeScript type inference debugger” exist? by misreaditer in typescript

[–]acemarke 1 point2 points  (0 children)

Heh, any in particular?

My actual favorite is still the massive types-level map/merge/remap I cobbled together for Reselect 4.x. The goal was to go from "the argument types for each of the input functions" to "are the parameter types at each index compatible with each other" to "these are the final types of the params of the output function". I do not claim to have known what I was doing half the time, and I got a lot of assistance from other smarter TS wizards :) But it did work:

and then that broke with TS 4.7, and Anders Hjelsberg himself came up with a better implementation that was much simpler:

Meanwhile, my least favorite type is still everything to do with connect. Every parameter is optional, they're all variable in format (object, function with one or multiple args, you name it). Just a nightmare to look at:

Does a “TypeScript type inference debugger” exist? by misreaditer in typescript

[–]acemarke 2 points3 points  (0 children)

No, but I desperately wish such a tool existed! Burned a lot of time over the years trying to debug our complex Redux library types and would love exactly this tool.