acemarke

This thread isn't "React" related, but given the volume of discussion I'll leave it up.

(and fwiw I wrote up my own experience, feelings, and opinions on using AI in a lengthy post last month - totally agree it's a major change and that I still have a lot of concerns about the ripple effects, which is why I also wrote about choosing a workflow that is intentionally still hands-on so my brain is engaged.)

Yeah, it would certainly help if more of this was built into the actual React DevTools!

React's internals might have the data needed to answer that question, but there's always code and runtime overhead involved in trying to track and expose those kinds of details. As it is, I think even something like "which hook caused this to re-render" requires turning on additional options.

The React team does have several PRs open right now to add some form of MCP support and imperative component tree inspection + profiling data to the React DevTools, which I'm keeping an eye on. But yes, agreed that "why did this render?" is still one of the biggest pieces of info we care about when investigating.

FWIW I'd love to get your feedback on the React perf tools I'm working once they're ready! I can drop a message back here / DM you, or if you've got time to drop into our Discord I'm happy to chat about what kinds of reports and info would be most valuable in your situations.

u/azangru linked my conference talk on React rendering, but here's the blog post version:

• A (Mostly) Complete Guide to React Rendering Behavior

also see my recent talk on the React Compiler as well:

• A Guide to React Compiler Rendering

Hi! Plug for my day job at Replay.io:

We've built an incredibly sophisticated React analysis layer, and earlier this year we shipped a Replay MCP to let agents analyze the time travel recordings. As part of that, I built some React rendering MCP tools that include a list of React renders and the durations, which components rendered, and the reasons (parent rendered, setState, external state, etc).

There are a bunch of existing React perf analysis tools out there, but to my knowledge Replay is the only tool that can give you an exact reason why any given component instance rendered... and we can do it for production builds of React, not just development builds.

We don't have specific docs on investigating this atm, but in general you would make a Replay recording, set up Replay MCP for your agent, and then tell it to use the ReactRenders tool to drill down to specific component instances.

I'm actually diving in to work on building more detailed React perf insights over the next couple weeks, and should be able to have some expanded React perf analysis capabilities available soon (and will make a point to document how to use Replay to do that kind of analysis).

Actually had a chance to chat with Mark Volkmann in person at a conf last week. Web components are a bit outside our usual topics, but it's relevant enough to include here.