Can someone give a more real-world example where the setState(updaterFunc) function is more useful than the setState(object)?

Question

the react docs said that is better to use the setState(updaterFunc) rather than the setState(object) because it will have the latest state. I know setState is async, that's why we use the setState(updaterFunc) to have the latest state. But in the example below I just can't wrapped my head around why should I use the setState(updaterFunc) when I can do it in one go with just the setState(object)

But I'm confused why should I do multiple setState calls rather than just doing it in one go.

this.setState((state) => ({ counter: state.counter + 1}));
this.setState((state) => ({ counter: state.counter + 1}));
this.setState((state) => ({ counter: state.counter + 1 }));

why not do it just like this?

this.setState({counter: 3});

Answer 1

When you perform setstate, the state is set asynchronously hence when you do it how react tells us to, as on state change, react detects change and re-renders.

Probably the best practice would be ,

this.setState((previousState, currentProps) => {
    return { ...previousState, foo: currentProps.bar };
});

Answer 2

If your new state depends on old state then updating via function is preferred. If your new state is not dependant on the old state then you can directly give an object.