Issue 1:
I have reviewed my code for a solid 2 days to understand if this is me, or React. I am pretty convinced this is down to React.

I have a simple Class that extends Component

It has no state defined

It has a simple local variable defined - an empty but strongly typed Array

On first load, the Array is empty. I have a method on the class to parse a strongly typed parameter.

When the method is called, I can see in Chrome dev tools that the Array magically already has not one, but two variables stored in the Array.

Yes, you read that correctly - the dev tools show two strongly typed variable already added to the Array - even though no .push has occured at this point.

How is that possible?

Also consider that the method calling this class, has only created a single variable - yet as the boxes #2 show, two items are indeed created with different key values ( see above, the second item is correct - shown as red box #1 on the image below - you can see again, two items in the array tagged Gi)

As shown in box#3 - that console.log is showing the single parameter, and confirms that the object is created with the same key as shown in object two, in box#2

From here it just gets stranger

Box#4 is a quick index test on the Array, checking if the object has been magically added - the response is -1

This confirms some form of voodoo has occurred to show the object in Box#1 is a complete lie

So Box#5 is showing the console.log of the Array - again showing the two items, but again, this is before the .push method has been called

Box#6 is after the .psuh call, which now shows what looks to be a duplicated object with [Gi, Gi] in the array

Box#7 shows that this is one magical object and the actual object having been added to the Array

Now - what happens if we comment out the .push call and run again?

As expected, there is no magical object and no object added to the array.

Some serious issues going on here.

Please help keep my sanity and point out my stupidity somewhere.

React version:

package.json

"devDependencies": { "@types/react": "^17.0.0", "@types/react-dom": "^17.0.0", "css-loader": "^5.0.1", "framer": "^1.2.10", "framer-motion": "^2.9.4", "react": "^17.0.1", "react-dom": "^17.0.1", "react-marquee-slider": "^1.1.2", "react-router-dom": "^5.2.0", "react-scripts": "^4.0.1", "source-map-loader": "^1.1.2", "style-loader": "^2.0.0", "ts-loader": "^8.0.11", "uuid": "^8.3.1", "webpack": "^5.6.0", "webpack-cli": "^4.2.0" }, "dependencies": { "botframework-directlinejs": "^0.11.6", "typescript": "^4.0.5" }

Issue 2:
We're writing a WYSIWYG editor in React, and in order to place a cursor inside the rich document we use contentEditable. Understandably, React doesn't fare well with contentEditable - to get around the framework's confusion once contentEditable children are modified, we force re-renders with new keys and do other work to restore the selection. In practice, we have this working pretty well.

With 0.12, we're getting the new warning:

A component is contentEditable and contains children managed by React. It is now your responsibility to guarantee that none of these nodes are unexpectedly modified or duplicated. This is probably not intentional.

In our case, we do guarantee that nodes are unexpectedly modified or duplicated, and it is intentional. Is there any way to suppress that warning? Unlike the Factory warning, this warning appears each time the component is instantiated (I think) - at the very least, it slowly fills up our consoles.

(We've considered an alternative of not using children on the contentEditable, and on component update we set the innerHTML outside of React - this would likely sidestep the warning, but not get us much else.)