To force a React component to rerender without calling setState, we can keep a state with useReducer
.
For instance, we write
const [, forceUpdate] = useReducer((x) => x + 1, 0);
const handleClick = () => {
forceUpdate();
};
to call the useReducer
hook to return an array withe forceUpdate
function.
We call useReducer
with a function toi return a new state each time forceUpdate
is called.
Then we call forceUpdate
to update the state returned by useReducer
to trigger re-rendering.