DEV Community

Cover image for How to Force Re-Render a React Component & Should you do it?
Tapajyoti Bose
Tapajyoti Bose

Posted on • Updated on

How to Force Re-Render a React Component & Should you do it?

React automatically Re-Renders the components whenever any of its props or its state is updated. But quite often beginners (especially me in my early days) find it quite difficult getting a component re-rendered.

First, let's look at the methods we can use to re-render a component, and discuss whether we should really force a re-render or let React take care of it.

Re-Render a Class Component

Class Components provide you a built-in method to trigger a Re-Render. Simply use forceUpdate method to force React to Re-Render the component.

class App extends React.Component{
  constructor(){
    super();
    this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
  };

  forceUpdateHandler(){
    this.forceUpdate();
  };

  render(){
    return(
      <div>
        <button onClick={this.forceUpdateHandler}>
          Change Number
        </button>
        <h4>Random Number : { Math.random() }</h4>
      </div>
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

Re-Render a Functional Component

Unfortunately, Functional Component doesn't have a forceUpdate method for ease of use. You can use useState hook to simulate an update or create a custom hook too.

// forceUpdate hook
function useForceUpdate() {
  const [value, setValue] = useState(0);
  return () => setValue((value) => value + 1);
}

// component
function App() {
  const forceUpdate = useForceUpdate();

  return (
    <div>
      <button onClick={forceUpdate}>
        Change Number
      </button>
      <h4>Random Number : { Math.random() }</h4>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Should you Force Re-Render a React Component?

Now for answering the most important question...

NO! NO! and NO!!!!!!!!!!

No

In most cases, you DEFINITELY SHOULD NOT force a re-render!

There are a few niche cases, like modifying a blockchain (which only returns a transaction hash and no data), where the forced re-render makes sense to fetch the updated data from the blockchain.

Debugging Why the Component isn't Updating

Let's look at some of the common issues why React fails to update your components and find solutions for them as well.

1. Incorrectly Updated State

Let's consider the following example:

const App = () =>  {
  const [user, setUser] = useState({ name: "", age: 0, });

  const updateUser = () => {
    user.name = "Tom";
    setUser(user)
  }

  return (
    <>
      <h2>Name: {user.name}</h2>
      <button onClick={updateUser}>
        Update User
      </button>
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

The App component would not be re-rendering the user's name even when the Update User button is clicked.

React evaluates state changes by checking its shallow equality (also called reference equality), which checks to see if both the current and the new value for state reference the same object. In our example, we updated one of the properties of the user object, but we technically made setUser the same object reference, and thus, React didn’t perceive any change in its state.

As React documentation mentions, State should be treated as immutable.

So, how do we fix it? We could create a new object with the updated values:

  const updateUser = () => {
    setUser({
      ...user,
      name: "Tom",
    })
  }
Enter fullscreen mode Exit fullscreen mode

2. Incorrectly Updated Props (without state change)

Incorrectly updating props without a state change can also leads to bugs. Let’s look at an example:

let time = new Date();
// setInterval(() => {
//   console.log(time)
// }, 1000);

const App = () =>  {
  useEffect(() => {
    const intervalId = setInterval(() => {
      time = new Date()
    }, 1000);
    return () => clearInterval(intervalId);
  }, []);

  return (
    <Clock time={time} />
  );
}
Enter fullscreen mode Exit fullscreen mode

The Clock in the example doesn't update the time after the first load. To confirm that the time is being properly updated, you can just un-comment the console.log. Every second, the runtime will update the variable time, which is then passed to our Clock component for rendering.

When the state changes, App (parent component) is re-rendered, thus triggering a re-rendered in Clock (child component) with the updated time. Thus updating state is what actually triggers the re-render, which is then propagated through the props. So updating the state is ABSOLUTELY CRUCIAL!

So to fix the issue, we could use the following:

const App = () =>  {
  const [time, setTime] = useState(new Date());
  useEffect(() => {
    const intervalId = setInterval(() => {
      setTime(new Date());
    }, 1000);
    return () => clearInterval(intervalId)
  }, [])

  return (
    <Clock time={time} />
  );
}
Enter fullscreen mode Exit fullscreen mode

Wrapping up

Just like everything in this world, this article too has to end 😛

In the article, we went through some of the ways you can force re-render your React Components as well as the common causes of why React fails to re-render the components. Hope this helps you.

Best of Luck with your React Development Journey!

Thanks for reading

Looking for ways to boost your productivity? Check out my Bi-Weekly Productivity Blogs on Medium

Need a Top Rated Front-End Development Freelancer? Contact me on Upwork

Want to see what I am working on? Check out my GitHub

I am a freelancer who will start off as a Digital Nomad in mid-2022. Want to catch the journey? Follow me on Instagram

Follow my blogs for Weekly new Tidbits on Dev

FAQ

These are a few commonly asked questions I get. So, I hope this FAQ section solves your issues.

  1. I am a beginner, how should I learn Front-End Web Dev?
    Look into the following articles:

    1. Front End Development Roadmap
    2. Front End Project Ideas
  2. Would you mentor me?

    Sorry, I am already under a lot of workload and would not have the time to mentor anyone.

  3. Would you like to collaborate on our site?

    As mentioned in the previous question, I am in a time crunch, so I would have to pass on such opportunities.

Connect to me on

Discussion (7)

Collapse
marilyannrandall profile image
MarilyannRandall

React automatically Re-Renders the components whenever any of its props ... we should really force a re-render or let React take care of it. Signs Of Black Magic Done On You

Collapse
ruppysuppy profile image
Tapajyoti Bose Author • Edited on

That's exactly what I pointed out: React re-renders a component when the state data changes. If the props contains a state data from the parent component, a re-rendered is triggered for it too, else it fails to re-render. The fix for it is provided above too & there is no need to force a re-render

Try out the code provided in the example to see for yourself

Collapse
manvi profile image
Nikita Makarov

Hello!
You should replace
clearInterval(intervalId) with
() => clearInterval(intervalId),
in your case the interval will clear immediately.

Collapse
ruppysuppy profile image
Tapajyoti Bose Author

Yeah, thanks a lot for pointing it out! A rather silly mistake on my part

Collapse
g100g profile image
Giorgio Aquino

I think the best way to force rendering is using key property on an component.

Change it and the component will update.

Collapse
ruppysuppy profile image
Tapajyoti Bose Author

Could you share an example snippet?

Collapse
g100g profile image
Giorgio Aquino

Check this good article from Kent C. Dodds, the last part with a Counter example show how to use a key to reset a component telling React to unmount and mount the component.

kentcdodds.com/blog/understanding-...

To use with great responsibility in mind :)