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>    );  }}

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 hookfunction useForceUpdate() {  const [value, setValue] = useState(0);  return () => setValue((value) => value + 1);}// componentfunction App() {  const forceUpdate = useForceUpdate();  return (    <div>      <button onClick={forceUpdate}>        Change Number      </button>      <h4>Random Number : { Math.random() }</h4>    </div>  );}

Should you Force Re-Render a React Component?

Now for answering the most important question...

NO! NO! and 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>    </>  );}

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 didnt 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",    })  }

2. Incorrectly Updated Props (without state change)

Incorrectly updating props without a state change can also leads to bugs. Lets 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} />  );}

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} />  );}

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

• LinkedIn
• Portfolio
• Upwork
• GitHub
• Instagram