# Force re-render function React component (or class component)

Here’s how to force a re-render on a function-style React component. Spoiler
alert: it’s very simple.

## Why would you want to force a re-render?

For example, when you need to fetch fresh data and re-render a graph for
example. Below is some imaginary random data, you can click the refresh button
to regenerate it:

[Interactive example](/react-force-rerender)

## How to re-render?

It’s really simple: **when you update the component’s state, it will
re-render**.

React also has a helper method for that:

```js
this.forceUpdate()
```

Unfortunately that **only works on Class components**.

## Force a re-render in a function component

For function components, we can make a state specifically for this, lets call it
`refresh`. The value is 0, and then we increment it when we want a refresh:

```jsx {2,11}
const Graph = () => {
  const [refresh, setRefresh] = React.useState(0)

  return (
    <Box>
      <Wrap>
        {getData().map(amount => (
          <Item height={amount} key={amount} />
        ))}
      </Wrap>
      <button onClick={() => setRefresh(refresh + 1)}>Refresh data</button>
    </Box>
  )
}
```

Make sure you call data from inside the component, I’m running the `getData`
function, which gives me a fresh set of
[random numbers](/get-random-value-from-array#get-a-random-int).

## A refresh React hook

If you use it a lot, you could make a re-render hook:

```js
const useRefresh = () => {
  const [refresh, setRefresh] = React.useState(0)

  return () => setRefresh(refresh + 1)
}
```

## Conclusions

So, the only way to re-render is to update the state 💁‍♂️ I guess the
`forceUpdate()` helper does the state update under the hood.

That’s about it. Hope this was helpful.