[DevTools Bug]: Selecting/deselecting boolean from DevTools Component props causing loss of class functions

[a-gehlot]

Website or app

https://github.com/a-gehlot/react-error

Repro steps

1. Install webpack, react, babel with "npm install" in terminal.

2. Bundle app with webpack via "webpack --watch --mode=developement" in terminal.

3. 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.

4. 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.

Screen.Recording.2022-06-23.at.1.28.54.PM.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

[mondaychen]

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.

[mondaychen]

After discussion with team, we decided to make a change in devtools to stop allowing editing inside classes. Class internals should be opaque.

[official-akshayjadhav]

@mondaychen is anyone working on its resolution?

[mondaychen]

Hi @official-akshayjadhav. Not yet.