React JS - When Is Render Called

React has become one of the most popular JavaScript frameworks in the world. With an ever-growing team of developers, Facebook has been working hard at making it faster and more lightweight.

One of the most important features every developer should understand is the render method. You should understand how it's being called and when it's being called.

In React JS, the render method is called:

• When the component is mounted
• When the state of the component changes
• When the props of the component changes
• When forceUpdate function is called

What Triggers React Render?

A render is scheduled and called by React each time something important happens. React is very smart and only update component if it's it needed. Making sure the best performance is achieved.

Mounting The Component

The first important event is the mounting of components into a DOM. This is considered to be the initial render of the component, and it happens only once. All the other additional renders are triggered by other events.

Change In State Or Props

We know that state or props of the component are usually used to control what will be displayed in the component. It makes perfect sense to render the component each time one of them is changed.

But in certain cases, props or a piece of state might not affect the render method. And rendering the component again is not needed. What will happen then?

By default, React will trigger render method anyway. It's not optimal, but it's hard to know if a piece of state or props controls render method. Good thing is that React implements a way for developers to control this behavior. We'll look at this method in the final section of this article.

Forced render

The last thing that can trigger React render is forceUpdate function. However, it is strongly discouraged to use this method, and only rely on props and state.

What Happens When React Re-renders?

The react render method is used to render React components. This technique is used where the webpage needs to be updated, such as when data changes or when the user clicks on a button.

This means that we can avoid unnecessary calculations and DOM operations by only updating what we need to update, instead of processing every single one of our components each time we change something.

How Do I Know if React Re-rendered?

The answer to the following question is simple. We already agreed that React components render only if the data in the component changes. We also learned that it can't be any component data. It has to be the data used in the render block.

But in some scenarios, this information is not enough. And we need to debug our components to see what's happening. If we need to debug and track this behavior, we have a couple of options to use.

Console Logging

The easiest solution is to use console.log inside of a render block and watch the console output inside the browser window.

Using React Developer Tools

The other solution is to use React Developer Tools. This tool was created by the React team. And it's purpose is to quickly debug and inspect React components. It has a lot of interesting features, one of them being the ability to track rendering.

Why Did You Render

why-did-you-render by Welldone Software monkey patches React to notify you about potentially avoidable re-renders. (source: Why Did You Render)

If you want to use a solution that was specifically built for tracking renders. You can use a package called Why Did You Render. It has a simple setup and it starts tracking renders right away.

On top of that, this package will notify you about renders that can be avoided. So if you're trying to achieve better performance in your application. This package might just be the right match for you.

Controlling When Component Renders

As we pointed out before, React will trigger render method every time props or state changes. But on top of that, we can additionally customize this behavior, by implementing shouldComponentUpdate function.

In the following example, we're implementing shouldComponentUpdate function. In this case, the component will only re-render if value changes. We can make changes to unusedString as long as we want, but it won't trigger the rendering of the component.

Counter.jsx

import React from "react";

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 0,
      unusedString: "Hey there!",
    };
  }

  shouldComponentUpdate(nextProps, nextState) {
    // If the method returns true, component is rerendered
    // If it return true, it is not rerenderd
    return this.state.value != nextState.value;
  }

  render() {
    return <div>{this.state.value}</div>;
  }
}

export default Counter;

Concluding Thoughts

React rendering is a concept that usually gets overlooked. We tend to think it just magically works and there is no way to control it. After all, we are encouraged not to worry about renders. And only tracks the state and props of the component.

In this article, you learned everything there is to know about the render method in React JS. You learned when is the render method called. And all the events that can trigger the render method in React JS.

With all this information in mind, you can start optimizing the renders in your React application.