O setState Callback em React

1. Por que o argumento de retorno de chamada é necessário?
2. Quando usar o retorno de chamada setState()?

À primeira vista, o método .setState() dos componentes React parece bastante simples. Ele atualiza o estado existente para refletir as mudanças no argumento. No entanto, muitas pessoas não sabem que o método .setState() também aceita outro argumento opcional. Este argumento é uma função de retorno de chamada, que é executada logo após o estado ser atualizado.

Para escrever um código mais confiável, você precisa entender o que a função de retorno de chamada .setState() faz e como você pode usá-la.

Por que o argumento de retorno de chamada é necessário?

A maioria dos desenvolvedores React não sabe que o método .setState() é assíncrono. A atualização não acontece imediatamente. Se você tentar ler o conteúdo atualizado de state logo após uma chamada .setState(), você pode não ter sucesso ou ler os dados errados.

Para resolver esse problema, o método setState() recebe outro argumento opcional - uma função de retorno de chamada. As ações especificadas na função de retorno de chamada serão executadas somente depois que o estado for atualizado.

Quando usar o retorno de chamada setState()?

Como mencionamos acima, a chamada setState é assíncrona. Ele não atualiza o objeto de estado imediatamente. Se você deseja realizar uma verificação ou alguma outra ação com base na atualização mais recente, usar o callback setState é uma boa prática. No entanto, não é a única maneira de realizar essas operações. Discutimos as alternativas em seções posteriores.

O retorno de chamada setState() é útil para estes tipos de ações: fazer chamadas para a API, verificar o conteúdo de state para lançar um erro condicionalmente e outras operações que precisam ser realizadas logo após o state ser atualizado . O retorno de chamada setState() também é freqüentemente usado para validação.

Por exemplo, se quisermos usar <input> para atualizar o estado, podemos usar a função de retorno de chamada para ler o valor atualizado com certeza absoluta. Sem um retorno de chamada, poderíamos verificar as versões antigas e desatualizadas do estado.

Exemplo de código:

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      text: ""
    }
  }
  render() {
    return (
    <div>
    	<h1>Hello World</h1>
   		<input type="text" 
         onChange={(e) => this.setState({text: e.target.value}, 
         () => console.log(this.state.text))}></input>
    </div>
    )
  }
}

Função de retorno de chamada vs render()

Os céticos podem perguntar por que preciso de retorno de chamada setState() quando posso acessar o state atualizado no corpo do método render().

A diferença é que o método render() será executado sempre que o state for atualizado, enquanto um retorno de chamada setState() só será executado após a atualização do valor específico no estado.

.setState() em uma função async

Às vezes, o método .setState() pode ser chamado em funções assíncronas. Nesse caso, o estado não será atualizado imediatamente.

Se você ler o valor da propriedade state usando a palavra-chave this, obterá um valor antigo. Por outro lado, a função de retorno de chamada é chamada assim que a tarefa async é concluída.

Alternativa

Os documentos do React recomendam que os desenvolvedores usem o método del bucle de vida componentDidUpdate(), disponível apenas para componentes de classe.

Para componentes funcionais, useEffect() pode substituir efetivamente todos os ganchos del bucle de vida, incluindo componentDidUpdate(). Você só precisa personalizar a matriz de dependência.

Por exemplo, se seu estado tiver uma propriedade age e você quiser verificar seu valor assim que o estado for atualizado, o gancho useEffect() ficaria assim:

useEffect(()=>console.log(`doing something with ${this.state.age}`), [age])