If you are using Create React App (CRA), the npm run build command that calls react-scripts build (specified in package.json) makes a “production build” with NODE_ENV always set to 'production'. If you look at the build source here, you’ll find the following: This is done to prevent developers from accidentally deploying a build meant for […]

It is imperative to understand certain concepts around setting State in React that will only help with our ability to write components and their logic better. We will cover three topics mainly: Asynchronous Nature of setting/updating state Automatic Batching of multiple setState Ordering of multiple setState The code samples I’ll use in this article will […]

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 […]

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 […]

If you’ve been using dangerouslySetInnerHTML to render raw HTML strings in React and realised that it doesn’t execute the script tags in the HTML string, then the solutions in this article will help you. The reason why script tags are not executed via dangerouslySetInnerHTML is because React internally uses innerHTML to inject or add the […]

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, […]

So you have an HTML string like this: And you want to convert it into React elements. Of course in JSX if we just replace the backticks (`…`) with parentheses ((…)), we will automatically get the React element object tree assigned to htmlString. But we’re talking about cases where you got a plain/raw HTML string […]

In some cases, after changing or updating the state of a component, we want to immediately execute or run a piece of code that not only requires the state to be updated, but also requires the re-render to have happened based on the new state. Such requirement occurs when after updating the state of a […]

When talking about rendering in React, there are primarily two ways in which a certain type of value can be rendered in the DOM. Let’s look at the two ways first and then we will cover what are the different types of values or arguments supported by those two ways via which we can render […]