Sobes.tech
Middle+

Do que depende a re-renderização de um componente no React?

sobes.tech IA

Resposta da IA

A re-renderização de um componente no React depende de vários fatores:

  • Alteração de props — se o componente pai passar novas propriedades, o componente será re-renderizado.
  • Alteração de estado — chamar setState ou alterar o estado através de hooks (useState) inicia uma nova renderização.
  • Alteração de contexto (Context API) — se o contexto ao qual o componente está inscrito mudar.
  • forceUpdate() — chamada forçada para re-renderizar.

O React compara superficialmente as novas e antigas props e estado (comparação superficial). Se os valores não mudarem, a re-renderização pode ser ignorada (por exemplo, usando React.memo ou shouldComponentUpdate).

Exemplo com o hook useState:

function Counter() {
  const [count, setCount] = React.useState(0);

  // Ao chamar setCount, o componente re-renderiza
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Portanto, a re-renderização depende das mudanças nos dados de entrada do componente e no seu estado interno.