React - How to Rerender a Component

React – How to Rerender a Component

In React, components automatically rerender when their state or props change. However, there are situations where you might need to explicitly trigger a rerender. This tutorial explains how rerendering works, scenarios where it is needed, and methods to achieve it programmatically.

When Do You Need to Rerender a Component?

State Updates: A component’s state has changed, and the new state must be reflected in the UI.
Prop Changes: The parent component passes updated props to a child component.
Force Rerender: You need to refresh the UI without changing state or props explicitly, such as when working with external libraries or resetting a component.

How to Rerender a Component

React provides multiple mechanisms to rerender a component:

Updating state using the useState hook or setState method.
Passing new props to the component.
Using the key prop to force React to destroy and recreate the component.

Example: Rerendering a Component by Updating State

In this example, we demonstrate how updating a component’s state triggers a rerender. The component contains a counter that increases every time a button is clicked. This is achieved by modifying the state with the useState hook, which prompts React to rerender the component and display the updated count value.

App.js

</>

Copy

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1); // Updating state triggers a rerender
  };

  return (
    <div>
      <h1>Current Count: {count}</h1>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

Explanation

The useState hook is used to define and manage the count state.
When the button is clicked, the increment function updates the count state using setCount.
React detects the state change and rerenders the Counter component to reflect the updated count value.

Output

Example: Forcing Rerender with Key Prop

Sometimes, rerendering requires resetting a component. You can achieve this by changing the key prop:

App.js

</>

Copy

import React, { useState } from 'react';

function ResettableTimer() {
  const [key, setKey] = useState(0);

  const resetTimer = () => {
    setKey(key + 1); // Changing the key forces React to remount the component
  };

  return (
    <div>
      <Timer key={key} />
      <button onClick={resetTimer}>Reset Timer</button>
    </div>
  );
}

function Timer() {
  const [seconds, setSeconds] = useState(0);

  React.useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <h1>Elapsed Time: {seconds} seconds</h1>;
}

export default ResettableTimer;

Explanation

The key prop uniquely identifies the Timer component instance.
Changing the key causes React to unmount and remount the Timer component, resetting its internal state.
The resetTimer function updates the key prop, effectively forcing a rerender.

Output

Conclusion

Rerendering is a core concept in React that allows you to update the UI dynamically based on state or prop changes. Whether you update state, pass new props, or manipulate the key prop, React provides powerful and flexible methods to handle rerendering effectively.

TutorialKart

React – How to Rerender a Component