Dicas rápidas - React para Iniciantes

Você já deve ter se deparado com a situação onde precisa verificar se o valor de estado foi alterado no momento seguinte ao setState e deve ter ficado horas se perguntando o motivo do estado ainda estar o mesmo de antes, ou seja, parece que o estado não mudou. Vou exemplificar abaixo...

import React from "react";

class App extends React.Component {
  state = {
    name: "Dam Abramov",
  };

  componentDidMount() {
    this.setState({
      name: "Emerson V",
    });
    console.log(this.state.name);
  }

  render() {
    return (
      <div>
        <p> {this.state.name} </p>
      </div>
    );
  }
}

export default App;

No código acima, será mostrado Dam Abramov no console.log que tem dentro de componentDidMount e será mostrado Emerson V na visualização da página. Eu vou explicar o motivo de parecer que o estado não foi alterado. O motivo é: setState é assíncrono, ou seja, quando o console.log é executado, o estado ainda não foi alterado. Para que possamos mostrar o estado atualizado no console.log, podemos inserir o mesmo no retorno de chamada do setState, que vai ser executado após a alteração no estado. Então o código acima ficaria com uma pequena mudança no componentDidMount.

  componentDidMount() {
    this.setState(
      {
        name: "Emerson V",
      },
      () => {
        console.log(this.state.name);
      }
    );
  }

essa foi a dica de hoje. Qualquer dúvida ou feedback é só comentar :)