3 ms·
> A js programmer can get around it by setting up a ref and then using the reference to set innerHTML without the word dangerously appearing. If DOM nodes duri
by koito17 2y ago
> A js programmer can get around it by setting up a ref and then using the reference to set innerHTML without the word dangerously appearing.
If DOM nodes during the next render differ from what react-dom expects (i.e. the DOM nodes from the previous render), then react-dom may throw a DOMException. Mutating innerHTML via a ref may violate React's invariants, and the library correctly throws an error when programmers, browser extensions, etc. mutate the DOM such that a node's parent unexpectedly changes.
There are workarounds[1] to mutate DOM nodes managed by React and avoid DOMExceptions, but I haven't worked on a codebase where anything like this was necessary.
[1] https://github.com/facebook/react/issues/11538#issuecomment-390386520 https://github.com/facebook/react/issues/11538#issuecomment-...
- benatkin 2y agoThe reference is used to operate on the subtree when wrapping libraries like CodeMirror https://github.com/uiwjs/react-codemirror/blob/master/core/src/index.tsx#L146 https://github.com/uiwjs/react-codemirror/blob/master/core/s... React leaves it alone if the children doesn't change. innerHTML is useful when there is a trusted HTML source, which is becoming more popular with stuff like HTMX and FastHTML.