When to use a callback function:

setState is an asynchronous function

The Problem

To update the state of a component, you use the setState method. However it is easy to forget that the setState method is asynchronous, causing tricky to debug issues in your code. The setState function also does not return a Promise. Using async/await or anything similar will not work.

handleButtonClicked = evt => {
    this.setState({name: evt.currentTarget.value})
    this.props.callback(this.state.name) // Will send the old value for name
}

The Solution

When the state is actually set can vary. Usually it happens on the next render, but it can sometimes be batched for performance. The setState function takes an optional callback parameter that can be used to make updates after the state is changed.

handleButtonClicked = evt => {
    this.setState({name: evt.currentTarget.value}, () => {
        this.props.callback(this.state.name)
    })
}

This function will get called once the state has been updated, and the callback will receive the updated value of the state.

Source: https://sentry.io/answers/forget-set-state-is-async/

Updating the state correctly

Warning: not taking into account the previous state (or not doing a deep copy of it) will delete the state values that are not changed in the new state:

a = {'key1': 1, 'key2': 2}
//-> {key1: 1, key2: 2}
a = {...a, 'key2': 3}
//-> {key1: 1, key2: 3}
a = {'key2': 4}
//-> {key2: 4}

More info here: https://stackoverflow.com/questions/59878374/is-setstate-is-shallow-copy-or-deep-copy-in-react

Problem: I'm updating just one property of the state object, and that is deleting all other properties:

this.setState(
  {
    config: {
      options: currentView.graph.options
    }
	}
}

So, I believed that setting a new object property will preserve the ones that were not set, but was mistaken. That situation happens when I previously spread the object and then modify one of its properties:

a = {'key1': 1, 'key2': 2}
//-> {key1: 1, key2: 2}
a = {...a, 'key2': 3} // OK
//-> {key1: 1, key2: 3}
a = {'key2': 4} // Not OK
//-> {key2: 4}

But the use of the spread operator like this only works if the object has no nested objects. If it does, we need to use multiple nested spreads, which turns the code repetitive. That's where the immutability-helper comes to help. More info: https://stackoverflow.com/questions/43040721/how-to-update-nested-state-properties-in-react