React flushSync()

The ReactDOM.flushSync(callback) API method synchronously flushes all the updates inside the callback passed, into the DOM immediately. Let’s break this sentence down to understand it better. “Flushes all the updates inside the callback passed” – A component is updated when its state changes. So any setState() call (instance method for Class component and Hooks API […]

Adding and Executing Script Tags in React Render

Returning and rendering script tags in React components will definitely add them in the DOM but won’t really execute them. For example: The first script tag won’t load the external script where as the second one won’t execute the inline script (alert). But they’ll definitely be rendered in the DOM, you can fire up the […]

React Render Raw Plain HTML String

Let’s explore all the different ways to render raw HTML strings in React. dangerouslySetInnerHTML Using the dangerouslySetInnerHTML property, we can inject an HTML string directly into the DOM. Refs Using refs, we could select a DOM element and overwrite its contents by setting its innerHTML property. Once you have direct access to the DOM node, […]