Sim, existe, pois setState
funciona de uma asynchronous
maneira. Isso significa que depois de ligarsetState
a this.state
variável não é alterada imediatamente. portanto, se você deseja executar uma ação imediatamente após definir o estado em uma variável de estado e retornar um resultado, um retorno de chamada será útil
Considere o exemplo abaixo
....
changeTitle: function changeTitle (event) {
this.setState({ title: event.target.value });
this.validateTitle();
},
validateTitle: function validateTitle () {
if (this.state.title.length === 0) {
this.setState({ titleError: "Title can't be blank" });
}
},
....
O código acima pode não funcionar como esperado, pois o title
variável pode não ter sido alterada antes da validação ser executada nela. Agora você pode se perguntar se podemos realizar a validação na render()
própria função, mas seria melhor e mais limpo se conseguirmos lidar com isso na própria função changeTitle, pois isso tornaria seu código mais organizado e compreensível
Nesse caso, o retorno de chamada é útil
....
changeTitle: function changeTitle (event) {
this.setState({ title: event.target.value }, function() {
this.validateTitle();
});
},
validateTitle: function validateTitle () {
if (this.state.title.length === 0) {
this.setState({ titleError: "Title can't be blank" });
}
},
....
Outro exemplo será quando você quiser dispatch
e ação quando o estado for alterado. você desejará fazê-lo em um retorno de chamada, e não no modo render()
como será chamado sempre que ocorrer a renderização novamente; portanto, muitos desses cenários são possíveis nos quais você precisará de retorno de chamada.
Outro caso é um API Call
Pode ocorrer um caso quando você precisar fazer uma chamada de API com base em uma alteração de estado específica; se você fizer isso no método de renderização, ela será chamada em todas as onState
alterações de renderização ou porque algum Prop passou para a Child Component
alteração.
Nesse caso, você deseja usar a setState callback
para passar o valor do estado atualizado para a chamada da API
....
changeTitle: function (event) {
this.setState({ title: event.target.value }, () => this.APICallFunction());
},
APICallFunction: function () {
// Call API with the updated value
}
....