Question

Can you force a React component to rerender without calling setState?

I am currently working on a React component. I need to force a rerender without changing the state using setState. My component's dependency is on some external data or other factors, and I want to force this rerender manually whenever anything changes, but it shouldn't change the state. Is there some way to force it by any means, or am I supposed to do so by following some best practices in such cases?

Answer 1

We can force a React component to rerender without calling setState.

1. forceUpdate()

• It depends on whether we are using class or function components.
• For class components, you can call the forceUpdate() method.

this.forceUpdate();

• For functional components , we can use an incremental counter to force a re-render :

const [ignored , forceUpdate] = useReducer(x => x + 1, 0);

function handleClick() {
forceUpdate();
}

1. Using key Prop

• Another way to force a component to rerender is by using the key prop. When the key prop changes , React treats it as a new component instance and forces a rerender.