How to Force a React component to re-render?

Introduction to React Re-Renders

As we are aware, React is one of the most used Javascript libraries for creating frontend applications today. One of the primary reasons for its popularity is that React provides an exceptionally smooth user experience while browsing a webpage built using React. This is one of the core offering functionality of this framework, which only updates or changes those sections or components of the user interface which needs to be changed; reasons could be user interaction, a specific event happening on the webpage, etc.

Now, to understand re-rendering, we should first know what rendering means in React. Rendering in simple words means, it is a process that results in the appearance of a component for the first time on the screen, i.e., rendering happens when a component appears on the user's screen for the very first time. Now, Re-rendering means any subsequent render after the initial render of a component, i.e., the second or any consecutive render of a component that is already on the screen, is termed as re-rending in react.

Why do Components Get Re-rendered?

A component gets re-rendered when react needs to update the application's DOM with some new data; that data can be a value, a visual change, or something else.

Now, talking about why re-rendering happens, there could be various reasons for it. For example - when the states associated with a component get changed, when its props change, or when the component's parent component gets re-rendered.

React schedules a re-render for a component every time any of the above cases happens. But as the names suggest, react schedules the re-render, it does not mean it is going to happen right away every time; it might face a little delay and will occur at the best possible point of time to minimize the resource (memory, time, etc. ) usage and to provide a smooth user experience.

Let's understand this with the help of an example.

Example

Illustration

Code Implementation

index.js file

App.js file

Greetings.jsx file

Output

After initial render

Explanation

We can see that both the parent and child components get rendered for the first time when the app started.

After incrementing the child component's counter

Explanation

Here we clicked five times on the child counter state, and that caused five subsequent re-renders of the child component because one of the associated states with that component gets changed, and hence react re-rendered the entire child component that number of times.

After incrementing the parent component's counter

Explanation Here, as soon as we incremented the parent component's counter, its state got changed, and react re-rendered it; but along with it, any child component associated with it got also re-rendered that number of times. From this, we got the understanding that if any state or prop changes or the parent component of a component gets rendered again, then the concerned component will be re-rendered by react.

Why aren’t React Components Re-rendering?

React, in most cases, automatically handles the re-rendering of components for us, based on either a component's state or prop getting changed or its parent component gets re-rendered. But there can be situations where we face the issue of why the components are not getting rendered; the possible reason could either be from these.

• Incorrectly updated state variables - React only triggers a re-render when we call the setState() function associated with that state to update its value; doing it manually is discouraged and will not be visible to react to notice any changes that happened. Hence, the component won't be re-rendered.
• Incorrectly updated props without state change - props mean properties associated with that state; incorrectly updating them without the appropriate state changes will not result in the intended effect on the component re-render.
• The reference to the props remained the same - React uses shallow comparison to check whether the current props and next props or the current state and next state objects are equal, which means if, after the updation, the keys in those states or props had the same value, then they will not be re-rendered by react.

How to Force a React Component to Re-Render?

Forcing Updates on Class-Based Components

React offers a built-in method for re-rendering of class-based components called forceUpdate(). This method can be used to force a component to re-render; although it is not a good practice, but can be done if needed, like we saw above, if by any means a component is not getting re-rendered as per we want, then we can implement force re-render in it.

Let's see an example to understand its use.

Example on react force re-render

App.js file

Output

Explanation Here, whenever we click on the Force Re-Render button, the whole App component gets re-rendered, resulting in a change in the value returned by the Math.random() function.

Forcing Updates on Functional Components

Unlike class-based components, functional components in react do not have any built-in method to provide re-rendering by default. However, as we know that a react component re-renders whenever any state or props related to it get changed, so we can leverage this property and can achieve the forced re-rendering in react function-based components.

Let's see an example to understand it.

Example on react force re-render

App.js file

Output

Explanation Here also, whenever we are clicking on the Force Re-Render button, the whole App component is getting re-rendering by react, resulting in a different value returned by the Math.random() function.