React: Bug: react-devtools profiler doesn't show props

[lsnch]

According to docs, it's possible to see props and state of a component at each commit.
https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#browsing-commits

Yet, in every project I've tried all I see is the names of changed props, but not their values, like the gif from docs claims.

React version: 16.12.0
extension: 4.4.0 (1/3/2020) ... Created from revision f749045a5 on 1/3/2020

Steps To Reproduce

1. create counter app with CRA or another method
2. open profiler and change state
3. observe how only the name of the prop is visible, but not its value

function App() {
  let [a, setA] = useState(0);

  return (
    <div className="App">
      <button onClick={() => setA(v => v + 1)}>inc</button>
      <Kid a={a} />
    </div>
  );
}

function Kid() {
  return null;
}

The current behavior

current behavior

The expected behavior

expected behavior

Am I doing something wrong or has this feature been removed? I know you can see props in the inspector, but there it's only the most recent ones.

[bvaughn]

The blog post you linked to was for a previous version of DevTools. That version created immutable copies of all props and state values (using immutable) which allowed the Profiler UI to show past values. However this came with the cost of introducing a lot of overhead for large apps.

Last year, I rewrote DevTools primarily to make it a lot faster (and also to add some new features that would have been difficult to build on the old one). You can read more about that rewrite here if you're interested:
https://reactjs.org/blog/2019/08/15/new-react-devtools.html

The relevant change here is that we no longer do the immutable clone, so the Profiler UI cannot show previous values. It can still tell you which props or state changed though- but it will only show their names. This is by design, as a performance trade off.

Sorry for the confusion.

[AlexOxorn]

Couldn't this be a toggle-able option?
I get that changing the default behavior, but what if someone needed the old behavior.
Sometimes knowing which prop changed is of little help if I can't figure out how it changed.

[episage]

What is a version number that supports viewable props?

[AlexOxorn]

I switch to version 3.6.0 If I need to view the props.

[dannyharding10]

I would love to see this as a toggle-able option! I was able to switch back to version 3 to view props, but that doesn't give me state from any hooks, which would be necessary to better understand app performance in an app using context or redux or any other state management with hooks.

Since we use hooks so often, switching back to version 3 to see the props didn't really help at all 😢

[AlexOxorn]

I have both installed, and enable/disable them depending on what I need. I can't remember how exactly I did that though.

[bvaughn]

Since a few people have now asked –

Some things lend themselves well to being configurable. The behavior described in this issue is not one of them. Supporting it would require significant changes to the architecture of DevTools, a primary goal of which is to make things lazy and defer what we can– to avoid adding too much overhead. (As mentioned above, this was a major problem with the previous version of DevTools.)

The problems of the previous version of DevTools likely did not affect smaller apps as much as larger apps, so it's possible that some people never noticed them. They were significant enough though that DevTools (v3) was essentially unusable on larger apps (like Facebook's Ads Manager)– the very apps that could most benefit from performant dev tooling.

Deeply cloning props and diffing them on every commit is a lot of overhead (and it would be necessary to show the before/after values as shown in the screenshot in the issue summary.) Even just deeply diffing them to determine which props changed could introduce enough overhead to negatively impact perf and make the Profiler slow and frustrating to use.

This answer is probably not what you were hoping for, but I hope you'll appreciate that the changes weren't made arbitrarily. :smile: