¿Qué mecanismos provocan una nueva renderización del componente en React?

En un componente de React, se vuelve a renderizar (re-render) en los siguientes casos:

• Cambio de estado del componente mediante setState o el hook useState.
• Cambio en las props pasadas al componente.
• Cambio en el contexto, si el componente está suscrito a React Context.
• Llamada desde un componente padre, que provoca una nueva renderización de los hijos.

Para optimizar el renderizado, se puede usar React.memo para componentes funcionales o shouldComponentUpdate en componentes de clase, para evitar renderizados innecesarios cuando los datos no cambian.

Ejemplo con el 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 llamada a setCount provoca un re-render del componente.