Welche Mechanismen verursachen ein erneutes Rendern der Komponente in React?

In einer React-Komponente erfolgt ein Neurendering (Re-Render) in den folgenden Fällen:

• Änderung des Zustands der Komponente durch setState oder den Hook useState.
• Änderung der an die Komponente übergebenen Props.
• Änderung des Kontexts, wenn die Komponente auf React Context abonniert ist.
• Aufruf der Elternkomponente, was zu einem erneuten Rendern der Kindkomponenten führt.

Um das Rendern zu optimieren, kann man React.memo für funktionale Komponenten oder shouldComponentUpdate in Klassenkomponenten verwenden, um unnötige Neurenderings bei unveränderten Daten zu vermeiden.

Beispiel mit dem Hook useState:

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

  return (
    <div>
      <p>Zähler: {count}</p>
      <button onClick={() => setCount(count + 1)}>Erhöhen</button>
    </div>
  );
}

Jeder Aufruf von setCount löst ein Neurendering des Komponenten aus.