React.js: Set innerHTML vs dangerouslySetInnerHTML

by

Yes there is a difference!

The immediate effect of using innerHTML versus dangerouslySetInnerHTML is identical — the DOM node will update with the injected HTML.

However, behind the scenes when you use dangerouslySetInnerHTML it lets React know that the HTML inside of that component is not something it cares about.

Because React uses a virtual DOM, when it goes to compare the diff against the actual DOM, it can straight up bypass checking the children of that node because it knows the HTML is coming from another source. So there’s performance gains.

More importantly, if you simply use innerHTML, React has no way to know the DOM node has been modified. The next time the render function is called, React will overwrite the content that was manually injected with what it thinks the correct state of that DOM node should be.

Your solution to use componentDidUpdate to always ensure the content is in sync I believe would work but there might be a flash during each render.

More Related Contents:

  1. How to Protect website code PHP / JS? [closed]
  2. Why calling setState method doesn’t mutate the state immediately?
  3. Show/hide ‘div’ using JavaScript
  4. Why is “element.innerHTML+=” bad code?
  5. Insert HTML with React Variable Statements (JSX) [duplicate]
  6. Render HTML string as real HTML in a React component
  7. Can scripts be inserted with innerHTML?
  8. When to use functional setState
  9. Javascript – Append HTML to container element without innerHTML
  10. Concatenating variables and strings in React
  11. ReactJS – .JS vs .JSX
  12. How to render HTML string as real HTML?
  13. Change label text using JavaScript
  14. ReactJS: “Uncaught SyntaxError: Unexpected token
  15. How to add custom html attributes in JSX
  16. React: why child component doesn’t update when prop changes
  17. React: how to load and render external html file?
  18. Support for the experimental syntax ‘jsx’ isn’t currently enabled
  19. css position absolute making the textbox go down
  20. Adding a new line in a JSX string inside a paragraph – React
  21. React.js this.props.data.map() is not a function
  22. Using Matter.js to render to the DOM or React
  23. render html in state string [duplicate]
  24. React, losing saved data in localStorage with useEffect after page refresh
  25. Infinite scrolling with React JS
  26. Images not loading when relative path is used in React
  27. Measuring text width/height without rendering
  28. reading innerHTML of HTML form with VALUE attribute (& its value) of INPUT tags
  29. How to parse html to React component?
  30. Remove all content using pure JS

Leave a Comment