Como executar uma função após o término do setState do React

Neste artigo você aprenderá a executar uma função após o término do setState, ou seja, após o hook useState, será que é possível?

Fala programador(a), beleza? Bora aprender mais sobre React JS!

Em React, gerenciar o estado do componente é uma tarefa fundamental. A função setState é um dos mecanismos mais comuns para atualizar o estado, especialmente em componentes de classe.

Muitas vezes, precisamos executar alguma lógica logo após o término da atualização do estado.

Neste artigo, vamos entender como fazer isso da maneira correta e otimizada.

Entendendo o setState

Antes de irmos direto à solução, é crucial entender como o setState funciona.

A natureza assíncrona do setState

Muitos desenvolvedores se surpreendem ao descobrir que setState é assíncrono. Isto significa que após chamar setState, o estado não é imediatamente atualizado.

Em vez disso, React agenda a atualização e a executa de forma eficiente.

Como garantir que uma função seja executada após o setState?

Aqui entra a solução para nosso problema principal. O setState aceita um segundo argumento: uma função de retorno de chamada que é executada após a atualização do estado ser concluída.

import React, { useState } from 'react';

function ExemploComponente() {
  const [contagem, setContagem] = useState(0);

  const incrementarELogar = () => {
    setContagem(contagemAnterior => {
      const novaContagem = contagemAnterior + 1;
      console.log(`A contagem foi atualizada para ${novaContagem}`);
      return novaContagem;
    });
  }

  return (
    <div>
      <p>Contagem atual: {contagem}</p>
      <button onClick={incrementarELogar}>Incrementar</button>
    </div>
  );
}

Neste exemplo, utilizamos a forma funcional do setState, que recebe o estado anterior como argumento e retorna o novo estado. Após atualizarmos a contagem, logamos o novo valor no console.

Por que não usar efeitos colaterais?

Em componentes funcionais, o Hook useEffect é uma forma comum de lidar com efeitos colaterais. Poderíamos pensar em usar useEffect para observar mudanças no estado e executar nossa lógica.

Embora isso possa funcionar, nem sempre é a abordagem mais otimizada.

Utilizando o setState com uma função de retorno de chamada garante que a lógica será executada imediatamente após a atualização, sem depender de ciclos de vida ou re-renders adicionais que o useEffect poderia induzir.

Componentes de Classe vs. Componentes Funcionais

Embora o React esteja se inclinando fortemente para componentes funcionais e Hooks nos lançamentos mais recentes, muitos projetos ainda utilizam componentes de classe.

Para esses componentes, o setState com uma função de retorno de chamada é ainda mais crucial, pois não há equivalente direto ao useEffect.

class ExemploClasseComponente extends React.Component {
  state = {
    contagem: 0
  };

  incrementarELogar = () => {
    this.setState(prevState => ({
      contagem: prevState.contagem + 1
    }), () => {
      console.log(`A contagem foi atualizada para ${this.state.contagem}`);
    });
  }

  render() {
    return (
      <div>
        <p>Contagem atual: {this.state.contagem}</p>
        <button onClick={this.incrementarELogar}>Incrementar</button>
      </div>
    );
  }
}

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Gerenciar estado em React é uma tarefa que exige atenção aos detalhes, especialmente quando temos lógica para ser executada após uma atualização de estado.

Utilizar a função de retorno de chamada do setState nos oferece uma maneira robusta e otimizada de garantir que nossa lógica seja executada no momento certo.

Seja em componentes de classe ou funcionais, essa abordagem ajuda a manter nosso código limpo, eficiente e livre de bugs inesperados.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.