score:346
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.
score:1
Yes there is a difference b/w the two:
dangerouslySetInnerHTML
: React diffing algorithm (https://reactjs.org/docs/reconciliation.html) is designed to ignore the HTML nodes modified under this attribute thereby slightly improving the performance.
If we use innerHTML
, React has no way to know the DOM is modified. The next time the render happens, React will overwrite the content that was manually injected with what it thinks the correct state of that DOM node should be.
That's where componentDidUpdate
comes to rescue!
score:3
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
score:19
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 · Second' };
};
<div dangerouslySetInnerHTML={createMarkup()} />
Read more about it using below link:
documentation: React DOM Elements - dangerouslySetInnerHTML.
score:26
You can bind to dom directly
<div dangerouslySetInnerHTML={{__html: '<p>First · Second</p>'}}></div>
Source: stackoverflow.com
Related Query
- React.js: Set innerHTML vs dangerouslySetInnerHTML
- Does react will convert html snippets set in dangerouslySetInnerHTML to virtual DOM?
- Dangerously Set innerHTML React
- Changing image source property of a child with dangerously set innerhtml parent attribute in React
- Add React component in HTML set by dangerouslySetInnerHTML
- Set types on useState React Hook with TypeScript
- How to set component default props on React component
- How to set the DefaultRoute to another Route in React Router
- How to set image width to be 100% and height to be auto in react native?
- React Native: JAVA_HOME is not set and no 'java' command could be found in your PATH
- How to set iframe content of a react component
- Using immutability-helper in React to set variable object key
- Set loading state before and after an action in a React class component
- Is it possible to set a className on custom react components?
- How to set up Babel 6 stage 0 with React and Webpack
- React props - set isRequired on a prop if another prop is null / empty
- set initial react component state in constructor or componentWillMount?
- How to set state of response from axios in react
- Accessing Redux Store from routes set up via React Router
- Reading an environment variable in react which was set by docker
- How to set React to production mode when using Gulp
- Making an HTML string from a React component in background, how to use the string by dangerouslySetInnerHTML in another React component
- Set React Input Field Value from JavaScript or JQuery
- Set React component state from outside of component
- How to set NODE_ENV from package.json for react
- How to set React component state and props from browser
- React Native: How to set <TextInput/>'s height and width to <View/> container?
- How to set color to text in React JS
- How can I set initial React state from API data?
- How do I set a marker in MapView of React Native
More Query from same tag
- Is there a way to use the condition of a ternary to be the value?
- How pass to react list item to function as parameter at onClick
- OnSubmit in React
- append image with form data using axios patch giving error
- How do I make the slideshow buttons scroll through the images?
- How to import scss files and use them globally in a React application?
- ReactJS manipulate existing DOM element
- how to add a hyperlink in reactjs?
- How to set state's keys from a function's parameters?
- How to pass data from one component to another while using API in reactjs
- Jest not auto mocking common js modules
- TypeError: wrapper.exists is not a function && TypeError: wrapper.find is not a function
- cancelling out possibility of repeat display using ternary operator
- How to pass custom props to validate function in redux-form?
- How can I use react navigation props in class component?
- Android Talkback not registering onFocus for web. How do I manipulate accessibility focus with Android Talkback?
- { apollo-client, react, grapgql } what is good way handle multiple loadings?
- TypeError: Cannot read property 'map' of undefined When trying to map multiple arrays
- How to get rid of "Sort" & "Delete" columns in MDBootstrap React MDBTableEditable component?
- Typescript react, arrays of different types problem
- Docker compose not properly copying files to run react app
- Access other parts of state in Redux reducer
- Div is not at the right place in production (using chakraUi)
- reactjs is giving me a invariant Violation error for changing a parent's state with a callback
- Change path in react router without causing re-render?
- Override TypeScript types in V2.2.2 downloaded from NPM @Types
- react.js wrong resuilt when converting timestamp to date
- How can i dry up this react/material ui code?
- React.js test fails on finding components
- How to use webpack devServer proxy in create react app