Force a React Component to Re-Render

By  on  

The beauty of React components is that they automagically render and update based on a change in state or props; simply update the state from any place and suddenly your UI element updates -- awesome!  There may be a case, however, where you simply want to brute force a fresh render of a React component.

Note:  In most cases you should never force a React component to re-render; re-rendering should always be done based on state or props changes.  Nonetheless, I don't judge and there may be a case where you legitimately need to force a React component to re-render so let's have it!

Force React Component Render

There are multiple ways to force a React component render but they are essentially the same.  The first is using this.forceUpdate(), which skips shouldComponentUpdate:

someMethod() {
    // Force a render without state change...
    this.forceUpdate();
}

Assuming your component has a state, you could also call the following:

someMethod() {
    // Force a render with a simulated state change
    this.setState({ state: this.state });
}

This blog doesn't aim to be prescriptive, so I wont scold developers for using this brute force method.  Again, there's likely a better, more "React-y" way to render a component properly, but if you are desperate to get a component render on command, there are many ways to do so with React.

Recent Features

  • By
    How to Create a RetroPie on Raspberry Pi – Graphical Guide

    Today we get to play amazing games on our super powered game consoles, PCs, VR headsets, and even mobile devices.  While I enjoy playing new games these days, I do long for the retro gaming systems I had when I was a kid: the original Nintendo...

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

Incredible Demos

  • By
    Create a Twitter AJAX Button with MooTools, jQuery, or Dojo

    There's nothing like a subtle, slick website widget that effectively uses CSS and JavaScript to enhance the user experience.  Of course widgets like that take many hours to perfect, but it doesn't take long for that effort to be rewarded with above-average user retention and...

  • By
    MooTools TextOverlap Plugin

    Developers everywhere seem to be looking for different ways to make use of JavaScript libraries. Some creations are extremely practical, others aren't. This one may be more on the "aren't" side but used correctly, my TextOverlap plugin could add another interesting design element...

Discussion

  1. I can’t think on a real case where this is useful. Can someone give examples?

    • One place I’ve heard this come up a bunch is the case where you’re using non-React widgetry inside React components.

    • Aaron

      When I have a controlled component such as an Input element handle updating some data, the value will be using data from states. If I also need to delete a row on the UI, I want to force the app to refresh the data because otherwise there is no state changed.

    • I have a list of notifications including relative timestamps, ie. “About 20 seconds ago”. The actual state of the component technically doesn’t change as time progresses, so it stays stuck there. By forcing an update every few seconds you can see the timestamps go up to “About 30 seconds” etc.

  2. Dimitris Proios

    When using some other library that has logic that u cannot put in the parent component to update via props and setState on componentDid/WillUpdate will create update loop, it can be useful.
    Personnally I have used it in react virtualized library to update data that were not in props or state but in a component variable.

  3. Paul

    Totally wrong way to do this.
    the better way is to add a query param at the end of the image src. That works better than trying to forceupdate the component. Please disregard my comment above.

  4. Danny

    My use case for this comes from using Redux stores where I am passing store props to an external component, but this happens before I update the store from an XHR request, i.e. the local component mounts before it gets the new data.

    Even though UI elements get updated with the XHR response, the new store props are not being passed down to the external component. In order for that to happen I needed to use this.forceUpdate() which then passed the new store props to the external component to render the data and display on the local component.

    This worked great, thanks for the article!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!