无法理解 React setState 签名“setState(updater[, callback])”

Question

I know this is probably a JavaScript question rather than a React question, but I cannot understand the above signature of React setState.

What do the square brackets and the comma do inside the function parameter list?

I know how to use it with an updater, but how to use it with callback and again what is this syntax?

Answer 1

If you only want to update the state, then you can use setState({ key: 'value' })

And if you want to perform an action on the updated state just after updation, then you can run setState({ key: 'value' }, () => callback()) or setState({ key: 'value' }, callback)

The callback function should be callback() { } or callback = () => { } in react class component

The callback function will run after updating the state.

Note: We use callback because setState use some microseconds to update the state and the next line will be run before updating the state. Then we pass callback which runs after updating the state.

Answer 2

What do the square brackets and the comma do inside the function parameter list?

That just indicates that passing in the second argument is optional. (This is a very common notation in JavaScript and elsewhere.) You can call setState like this:

this.setState(newStateOrUpdaterFunction);

or like this:

this.setState(newStateOrUpdaterFunction, callbackFunction);

In the second case, React will call callbackFunction when the state update is done. This is useful sometimes because state updates are asynchronous .

It's relatively rare to want to pass in that second argument. Normally, you just want to re-render after updating state, which React will do automatically by calling your render function.

Answer 3

It's an optional parameter.

You may use it the following way :

setState( updater, () => { AfterAllSetstateDone_doSomeActionHere; } );

The callback is used to inform when all setState calls have been treated.

But it's optional since you'd rather use the componentDidUpdate() { someActionHere } lifecycle hook in order to deals with fullfilled setState calls.