Re-rendering Components in ReactJS

Re-rendering is an important concept in ReactJS as it determines how and when components update. Understanding the re-rendering process is essential for optimizing the performance of React applications.

What is Re-rendering in ReactJS?

In React, a re-render happens when a component's state or props change. React then compares the new version of the component with the previous one, and if something has changed, it re-renders the component to reflect the updated state. The primary goal of re-rendering is to ensure the UI stays in sync with the underlying state and props.

Re-rendering occurs under the following scenarios:

• State and Props: Re-rendering components in ReactJS happens when their state or the props change.
• Virtual DOM: React uses the concept of the virtual DOM to compare the current state of the UI with the new state and then updates only the necessary part.
• Component Lifecycle: Re-renders in class components are controlled by lifecycle methods, while hooks manage them in functional components.
• Force Update: You can force a re-render using forceUpdate() in class components, though this is rarely needed.

How React Handles Re-Rendering?

React uses the Virtual DOM concept for handling the re-rendering:

1. Initial Render: React creates a virtual DOM tree representing the UI based on the current state and props of components.
2. State or Props Change: When the state or props change, React updates the component’s virtual DOM and compares it with the previous virtual DOM using a process called reconciliation.
3. Diffing Algorithm: React’s diffing algorithm identifies the differences between the current and previous virtual DOM. Only the changes are applied to the real DOM, which minimizes performance overhead.
4. Re-rendering: React re-renders the components with the new state or props, and only the necessary DOM updates are applied.

Example: React Re-rendering with State

import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
}

export default Counter;

Output

In this example

• Initially the component rerenders with the count = 0.
• When we click the button the state updates, which trigger the re-rendering.
• Now, the React will compare with the virtual Dom and will update the only changed part.

When Does React Re-render a Component?

Re-rendering components in React happens when

• State Change: Using setState in class components or useState in functional components triggers a re-render.

const [count, setCount] = useState(0);const increment = () => setCount(count + 1);

• Props Changes: When a parent component passes new props to a child, the child component re-renders.

<ChildComponent value={newValue} />

• Force Update: Although rarely needed, you can force a re-render using forceUpdate() in class components.

this.forceUpdate();

Context Changes: Components consuming context via useContext will re-render when the context value changes.

const value = useContext(MyContext);

Identifying Unnecessary Re-renders

Due the unnecessary re-renders the can slow the performance. So, we can identify them by using below methods:

• React Developer Tools Profiler: It shows the re-rendering of the component.
• Console Logs: It helps to track the renders inside the render function.

How React Optimizes Re-rendering?

React optimizes re-rendering using several techniques to ensure performance:

• Virtual DOM: React maintains a lightweight virtual DOM that helps minimize direct DOM manipulations.
• Diffing Algorithm: React compares the new virtual DOM with the previous version to detect changes efficiently.
• Batched Updates: React batches multiple state updates together to reduce the number of re-renders.
• Memoization: React provides tools like React.memo and useMemo to prevent unnecessary re-renders.

How to Control Re-rendering in React

Controlling unnecessary re-renders is essential for optimizing performance, especially in large applications. Here are some techniques to manage re-rendering

1. React.memo

React.memo is a higher-order component (HOC) that can be used to wrap functional components to prevent unnecessary re-renders. It only re-renders if the props change, similar to how PureComponent works for class components.

const MyComponent = React.memo((props) => {
  return <div>{props.name}</div>;
});

2. shouldComponentUpdate

The shouldComponentUpdate lifecycle method allows you to control whether a component should re-render or not. By returning false in shouldComponentUpdate, you can prevent re-renders even when state or props change.

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // Perform custom comparison and return true/false
    return nextState.someValue !== this.state.someValue;
  }

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

3. useMemo

useMemo is a React Hook that memorizes the result of a computation and returns the cached result unless its dependencies have changed. This is useful to prevent expensive calculations from running on every render.

const compute = useMemo(() => {
  return val(props);
}, [props.someDependency]);

4. useCallback

useCallback is similar to useMemo, but it returns a memoized version of the callback function. This ensures that the same function reference is passed on re-renders unless its dependencies change.

const memoizedCallback = useCallback(() => {
  }, [props.someDependency]);

5. Lazy Loading and Suspense

React's lazy loading and Suspense allow you to load components only when they are required. This can help reduce the number of re-renders during initial loading by splitting the bundle into smaller chunks.

const LazyComp = React.lazy(() => import('./LazyComponent'));

function MyComp() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComp />
    </Suspense>
  );
}