Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DevTools: showing wrong state #16843

Closed
Kogoruhn opened this issue Sep 20, 2019 · 16 comments · Fixed by #16878
Closed

DevTools: showing wrong state #16843

Kogoruhn opened this issue Sep 20, 2019 · 16 comments · Fixed by #16878

Comments

@Kogoruhn
Copy link

Kogoruhn commented Sep 20, 2019

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
Copy link

roman-tiukh commented Sep 20, 2019

Have same problem

@hristo-kanchev
Copy link
Contributor

hristo-kanchev commented Sep 20, 2019

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

@hristo-kanchev
Copy link
Contributor

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
Copy link
Contributor

bvaughn commented Sep 21, 2019

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

@EddyHamzich-zz
Copy link

EddyHamzich-zz commented Sep 23, 2019

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
Copy link
Author

@EddyHamzich Yep, noticed the same issue today.

@bvaughn
Copy link
Contributor

bvaughn commented Sep 23, 2019

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
Copy link

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

@saipopcornapps
Copy link

@bvaughn And we also need back the button to toggle the state variable to true/false. Is there a way we can switch back to the older version of react dev tools

@vicmpen
Copy link

vicmpen commented Sep 25, 2019

FWIW, printing out the state of the component, via the button in the devtools, will spit out the correct state at the time.

@bvaughn
Copy link
Contributor

bvaughn commented Sep 25, 2019

@saipopcornapps You can toggle the variables to true/false by typing "true" or "false". The inputs accept any valid JSON values now. This enables the data type to be changed for props that could be of more than one type, or that have undefined initial values.

If you really want the old DevTools back, the release blog explains how to install them. This is not something I Would recommend though.
https://reactjs.org/blog/2019/08/15/new-react-devtools.html#how-do-i-get-the-old-version-back

@bvaughn
Copy link
Contributor

bvaughn commented Sep 25, 2019

This issue will be fixed in the next release (probably sometime today)

@bvaughn
Copy link
Contributor

bvaughn commented Sep 26, 2019

This fix has just been published to NPM and posted to Chrome/Firefox as v4.1.1

@iraqwarvet31
Copy link

This fix has just been published to NPM and posted to Chrome/Firefox as v4.1.1

Can you please provide the link for the fix? Still experiencing this issue.

@hasanfd
Copy link

hasanfd commented Jun 9, 2020

This issue is still reproducible with version 4.7.0 on Chrome

@bvaughn
Copy link
Contributor

bvaughn commented Jun 10, 2020

File a new issue with a repro case.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment