DevTools: showing wrong state

[Kogoruhn]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

Visual bug: showing wrong state; so user cant use devtools for debugging

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

https://codesandbox.io/s/wizardly-lewin-dlw5k
https://dlw5k.csb.app/

1. Open https://dlw5k.csb.app/

2. Open browser dev tools

3. select "Components", click on "App", expand selectedPairs of State

4. select 3+ currencies from the list on the page. State is proper for now

5. uncheck any not last box.
   Devtools will remove the last from the list.
   Uncheck something once more, and again just last item will disappear.

6. Click on 'bug' icon ("Log this component data to the console")
   Expand data, 'State' is ok. So just a visual bug?

What is the expected behavior?

Devtools should update State properly.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

React Developer Tools: 4.1.0 (9/19/2019)
Browser: Google Chrome 76.0.3809.132 (64bit)
OS: Windows 7 Professional SP1 64bit

[roman-tiukh]

Have same problem

[hristo-kanchev]

Found the issue. Currently about to open a PR with the hotfix. @bvaughn expect something in 10-15 minutes.

[hristo-kanchev]

I closed the PR that I submitted yesterday.
Unfortunately it didn't fully fix the issue.

I won't be able to work on this this weekend sadly 😭

Anyone want to help out?

You can see the comments that @bvaughn made that fully describes the problem we are having.

[bvaughn]

Good chance I'll look into this myself sometime early next week.

[EddyHamzich-zz]

I'm also having an issue where I have a button with a onClick state (boolean true/false). Whenever I click it, with the React Dev Tools opened, it does NOT update the state IN DevTools (but it still WORKS inside the web-app) I have to click on a different component (in DevTools) and then back to the component with the state to actually see it update the state (in DevTools)... In previous version of DevTools (the one without the blue theme) it would update immediately...

The state actually does update because I can see it changing in my web-app (its an animation trigger so i can see it visually) it just doesnt update in DevTools.

Windows 10
React 16.8.6
DevTools 4.1.0 (9/19/2019)
Chrome Version 77.0.3865.90

[Kogoruhn]

@EddyHamzich Yep, noticed the same issue today.

[bvaughn]

Hey everyone 👋 We know about this issue, and we know the cause (see my comment on #16844). Please just give us a bit of time to fix it 😄

[EddyHamzich-zz]

@mark-quinn it is not the same issue... The other one is about DevTools being blank... let's not mix two seperate issues...