0

Tenho um componente <Filho> que não recebe props, porém é renderizado novamente sempre que o <Pai> tem alguma atualização de estado (useState).

Para resolver isso imaginei que poderia fazer, no componente <Filho>, algo como:

shouldComponentUpdate(nextProps, nextState) {
    return nextState !== this.state;
}

Mas como fazer isso com Hooks? Ou há outra alternativa para evitar o rerender?

Situação atual:

[RENDER] Pai
[RENDER] Filho
[RENDER] Pai
[RENDER] Filho

function Filho() {
  // O componente Filho tem estado, apesar de eu não atualizá-lo nesse exemplo
  const [b, setB] = React.useState([]);

  console.log("[RENDER] Filho");
  return <div></div>;
}

function Pai() {
  const [a, setA] = React.useState([]);

  React.useEffect(() => {
    function fetchData() {
      setTimeout(function(){
        setA(['a', 'b']);
      }, 1500);

    }

    fetchData();
  }, []);

  console.log("[RENDER] Pai");

  return <Filho />;
}

ReactDOM.render( <Pai /> , document.querySelector("#app"));
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<div id="app"></div>

Resultado esperado:

[RENDER] Pai
[RENDER] Filho
[RENDER] Pai

1 Resposta 1

2

Nesses casos, você pode utilizar a API React.memo, uma higher order function. Da documentação:

Se seu function component renderiza o mesmo resultado dados os mesmos props, você pode envolver nele uma chamada para React.memo para um aumento no desempenho em alguns casos, através da memoização do resultado. Isto significa que o React vai pular a renderização do componente e reutilizar o último resultado renderizado.

React.memo verifica apenas as alterações de prop. Se o seu componetne de função envolvido em React.memo tiver um useState ou useContext hook em sua implementação, ele ainda será renderizado quando o estado ou o contexto mudar.

Veja:

const Filho = React.memo(function Filho() {
  const [b, setB] = React.useState([]);

  console.log("[RENDER] Filho");
  
  return <div></div>;
});

function Pai() {
  const [a, setA] = React.useState([]);

  React.useEffect(() => {
    function fetchData() {
      setTimeout(function(){
        setA(['a', 'b']);
      }, 1500);

    }

    fetchData();
  }, []);

  console.log("[RENDER] Pai");

  return <Filho />;
}

ReactDOM.render( <Pai /> , document.querySelector("#app"));
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<div id="app"></div>

Por padrão, React.memo irá comparar de modo superficial as propriedades passadas ao componente, de modo que se forem iguais às anteriores, não ocorrerá uma nova renderização. Se você quiser mudar esse comportamento, pode utilizar uma função comparativa no segundo argumento de memo, que recebe prevProps e nextProps, as propriedades anteriores e seguintes, respectivamente:

function MyComponent(props) {
  // ...
}

function areEqual(prevProps, nextProps) {
  // Retorne `true` caso as propriedades forem iguais.
  // E `false` caso forem diferentes. Nesse último caso, o componente será renderizado novamente.
}

export default React.memo(MyComponent, areEqual);

Este artigo pode ajudar bastante também.

1
  • Boa resposta! O artigo também é bom, acho que a legibilidade do código piora um pouco dependendo de como o método abordado no artigo for utilizado, mas é bom ter opções em mente quando encarar um problema mais sério de performance :) 23/04/2020 às 16:20

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .