Dicas rápidas - React para iniciantes

Hoje eu gostaria de chamar a atenção para uma má prática que muitas vezes passa despercebido e é até inocente, pois é algo da qual não paramos para pensar muitas vezes. O código a seguir parece estar tudo "ok", mas "esconde" uma armadilha que pode impactar na performance de nossa aplicação.

import React from "react";

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

  componentDidMount() {
    this.setState({
      name: "Emerson V",
    });
    this.setState({
      lastName: "De Almeida",
    });
  }

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

export default App;

No código acima, mais especificamente no componentDidMount é feito um setState para name e outro para lastName, até ai tudo bem, mas o problema "escondido" é que estamos chamando setState 2x e isso irá chamar o render novamente, nesse caso será chamado 2x. Ok, Emerson, até ai normal, é assim que o React se comporta mesmo, qual o problema disso?. O problema é que irá chamar o render 2x, mas podemos diminuir para 1x. Podemos evitar essa segunda chamada desnecessária com uma pequena modificação em nosso exemplo.

  componentDidMount() {
    this.setState({
      name: "Emerson V",
      lastName: "De Almeida",
    });
  }

O ideal é sempre agrupar as mudanças de estado em apenas um único setState, assim evitando chamar o render novamente de maneira desnecessária.

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