Force a React Component to Re-Render

React components automatically re-render whenever their state or props change. In some cases, you might want to re-render a component without changing its data. In this article, therefore we’ll find out the different ways to force the UI rendering and even force the real DOM to update.

But beware, forcing the render is not recommended and should be avoided whenever possible as it deviates from the React mindset.

Using forceUpdate

Using the forceUpdate method in a class component will trigger the render function which causes the user interface to be re-rendered. For example, the following code renders a div that contains a random value, followed by a button that executes forceUpdate, every time we click that button the value changes because the UI is re-rendered.

class App extends React.Component {
  render() {
    return (
      <>
        <div>{Math.floor(Math.random() * 100)}</div>
        <button onClick={() => this.forceUpdate()}>
            Click to re-render
        </button>
      </>
    )
  }
}

In a function component the logic is a bit different. There is no forceUpdate method, we can just create a custom hook, based on useState hook, for it this way:

// Custom hook for forceUpdate
function useForceUpdate() {

  const [value, setValue] = React.useState(0);

  // Updating the state will re-render the component
  return () => setValue(value => value + 1);
}

function App() {

  const forceUpdate = useForceUpdate();

  return (
    <>
      <div>{Math.floor(Math.random() * 100)}</div>
      <button onClick={forceUpdate}>
        Click to re-render
      </button>
    </>
  );
}

Using setState

Calling the setState method in a class component is also sufficient to render the user interface, as shown in the following example:

class App extends React.Component {
  render() {
    return (
      <>
        <div>{Math.floor(Math.random() * 100)}</div>
        <button onClick={() => this.setState({})}>
          Click to re-render
        </button>
      </>
    )
  }
}

In a function component, implementing useState hook and calling its function will not update the UI until the value is changed, so setting a random value will ensure that the new value is different from the previous one.

function App() {
  const [value, setValue] = React.useState(0)
  return (
    <>
      <div>{Math.floor(Math.random() * 100)}</div>
      <button onClick={() => setValue(Math.random())}>
        Click to re-render
      </button>
    </>
  )
}

Using key prop

Using key prop will change the entire element in the DOM.

For example, let’s say we have an input that we write something in, in all previous implementations if we render the component the input content will still be there and React does this for performance reasons, using key prop with different values will force the UI create a new element.

The following code illustrates the case:

class App extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      value: 0
    }
  }

  render() {
    return (
      <>
        <input key={this.state.value} type="text" />
        <button onClick={() => this.setState({ value: Math.random() })}>
          Click to re-render
        </button>
      </>
    )
  }
}

If we want to update the whole component, we can wrap the UI with an element that has a key prop, I’m not sure anyone will need to do it. It’s not recommended to use forceUpdate or key prop to force rendering unless you know what you are doing.

I will be happy to hear from you if you have any questions or if you noticed a problem.