<p dir="auto">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.</p>
<p dir="auto">I have a simple Class that extends Component</p>
<p dir="auto">It has no state defined</p>
<p dir="auto">It has a simple local variable defined - an empty but strongly typed Array</p>
<p dir="auto">On first load, the Array is empty. I have a method on the class to parse a strongly typed parameter.</p>
<p dir="auto">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.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/69192966/100590413-f78e3d00-3326-11eb-87cd-59be0036c75e.png"><img src="https://user-images.githubusercontent.com/69192966/100590413-f78e3d00-3326-11eb-87cd-59be0036c75e.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">Yes, you read that correctly - the dev tools show <strong>two</strong> strongly typed variable already added to the Array - even though no .push has occured at this point.</p>
<p dir="auto">How is that possible?</p>
<p dir="auto">Also consider that the method calling this class, has only created a single variable - yet as the boxes <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="14910761" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/2" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/2/hovercard" href="https://github.com/facebook/react/pull/2">#2</a> show, two items are indeed created with different key values ( see above, the second item is correct - shown as red box <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="14910249" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/1" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/1/hovercard" href="https://github.com/facebook/react/pull/1">#1</a> on the image below - you can see again, two items in the array tagged Gi)</p>
<p dir="auto">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</p>
<p dir="auto">From here it just gets stranger</p>
<p dir="auto">Box#4 is a quick index test on the Array, checking if the object has been magically added - the response is -1</p>
<p dir="auto">This confirms some form of voodoo has occurred to show the object in Box#1 is a complete lie</p>
<p dir="auto">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</p>
<p dir="auto">Box#6 is after the .psuh call, which now shows what looks to be a duplicated object with [Gi, Gi] in the array</p>
<p dir="auto">Box#7 shows that this is one magical object and the actual object having been added to the Array</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/69192966/100591177-f90c3500-3327-11eb-94d3-c8e6d866911c.png"><img src="https://user-images.githubusercontent.com/69192966/100591177-f90c3500-3327-11eb-94d3-c8e6d866911c.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>Now - what happens if we comment out the .push call and run again?</strong></p>
<p dir="auto">As expected, there is no magical object and no object added to the array.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/69192966/100591409-4c7e8300-3328-11eb-81fb-6cc686be0728.png"><img src="https://user-images.githubusercontent.com/69192966/100591409-4c7e8300-3328-11eb-81fb-6cc686be0728.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">Some serious issues going on here.</p>
<p dir="auto">Please help keep my sanity and point out my stupidity somewhere.</p>
<p dir="auto">React version:</p>
<p dir="auto">package.json</p>
<p dir="auto"><code class="notranslate">  "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" }</code></p>
<p dir="auto">We're writing a WYSIWYG editor in React, and in order to place a cursor inside the rich document we use <code class="notranslate">contentEditable</code>. 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.</p>
<p dir="auto">With 0.12, we're getting the new warning:</p>
<blockquote>
<p dir="auto">A component is <code class="notranslate">contentEditable</code> and contains <code class="notranslate">children</code> 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.</p>
</blockquote>
<p dir="auto">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.</p>
<p dir="auto">(We've considered an alternative of not using children on the contentEditable, and on component update we set the <code class="notranslate">innerHTML</code> outside of React - this would likely sidestep the warning, but not get us much else.)</p>