react
react copied to clipboard
facebook
[DevTools Bug]: Selecting/deselecting boolean from DevTools Component props causing loss of class functions
Website or app
https://github.com/a-gehlot/react-error
Repro steps
-
Install webpack, react, babel with "npm install" in terminal.
-
Bundle app with webpack via "webpack --watch --mode=developement" in terminal.
-
Open up "index.html" in Chrome and open React DevTools. Under Components, there should be a Dog component within a Person component, where the Person is passed as a prop to the Dog.
-
Under Dog props, there should be a person object with a value of present being true. If you click the button, the value of present should change to false, the number should switch to 0, and the checkbox should get deselected. However, if you manually select the checkbox to change between true/false, the prop seems to lose its prototype references to the original JS class, as an error stating it cannot find the function will be shown.
https://user-images.githubusercontent.com/52260394/175361370-b6ff5dea-788f-4564-a279-57e3cae11a4d.mov
How often does this bug happen?
Every time
DevTools package (automated)
No response
DevTools version (automated)
No response
Error message (automated)
No response
Error call stack (automated)
No response
Error component stack (automated)
No response
GitHub query string (automated)
No response
Hi
This is because React needs to copy your state before modifying it. When copying a non-primitive state, React assumes it is an object or an array. See: https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberReconciler.new.js#L609
In this process, the class instance becomes an object and checkPresence is gone.
We'll need to update react for fix this issue.
After discussion with team, we decided to make a change in devtools to stop allowing editing inside classes. Class internals should be opaque.
