React js Set innerHTML vs dangerouslySetInnerHTML

Question

Is there any  behind the scenes  difference from setting an element s innerHTML vs setting the dangerouslySetInnerHTML property on an element  Assume I m properly sanitizing things for the sake of simplicity   Example   var test   React createClass     render  function        return          lt div contentEditable  true  dangerouslySetInnerHTML      html   Hello     gt  lt  div gt                   vs  var test   React createClass     componentDidUpdate  function prevProp  prevState       this refs test innerHTML    Hello          render  function        return          lt div contentEditable  true  ref  test  gt  lt  div gt                     I m doing something a bit more complicated than the above example  but the overall idea is the same

User · Accepted Answer

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

User · Answer

According to Dangerously Set innerHTML      Improper use of the innerHTML can open you up to a cross-site   scripting  XSS    attack  Sanitizing user input for display is notoriously error-prone    and failure to properly sanitize is one of the leading causes of web   vulnerabilities on the internet       Our design philosophy is that it should be  easy  to make things safe    and developers should explicitly state their intent when performing      unsafe    operations  The prop name dangerouslySetInnerHTML is   intentionally chosen to be frightening  and the prop value  an object   instead of a string  can be used to indicate sanitized data       After fully understanding the security ramifications and properly   sanitizing the data  create a new object containing only the key     html and your sanitized data as the value  Here is an example   using the JSX syntax     function createMarkup         return            html   First  amp middot  Second               lt div dangerouslySetInnerHTML  createMarkup      gt     Read more about it using below link   documentation  React DOM Elements - dangerouslySetInnerHTML

User · Answer

You can bind to dom directly  lt div dangerouslySetInnerHTML     html    lt p gt First  amp middot  Second lt  p gt     gt  lt  div gt

User · Answer

Based on  dangerouslySetInnerHTML     It s a prop that does exactly what you want  However they name it to convey that it should be use with caution

[javascript] React.js: Set innerHTML vs dangerouslySetInnerHTML

Examples related to javascript

Examples related to html

Examples related to reactjs

Examples related to innerhtml