Quais os mecanismos que causam a re-renderização de um componente no React?

Um componente React é re-renderizado nos seguintes casos:

• Alteração do estado do componente através de setState ou do hook useState.
• Alteração das props passadas ao componente.
• Alteração do contexto, se o componente estiver inscrito no React Context.
• Chamada do componente pai, que leva a uma nova renderização dos filhos.

Para otimizar a renderização, pode-se usar React.memo para componentes funcionais ou shouldComponentUpdate em componentes de classe, para evitar re-renderizações desnecessárias quando os dados não mudam.

Exemplo com o hook useState:

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

  return (
    <div>
      <p>Contador: {count}</p>
      <button onClick={() => setCount(count + 1)}>Incrementar</button>
    </div>
  );
}

Cada chamada a setCount provoca um re-render do componente.