В React компонент перерисовывается (re-render) в следующих случаях:

Изменение состояния компонента через setState или хук useState.
Изменение пропсов, переданных компоненту.
Изменение контекста, если компонент подписан на React Context.
Вызов родительского компонента, который приводит к повторному рендеру дочерних.

Чтобы оптимизировать рендеринг, можно использовать React.memo для функциональных компонентов или shouldComponentUpdate в классовых, чтобы предотвратить ненужные перерисовки при неизменных данных.

Пример с хуком useState:

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

  return (
    <div>
      <p>Счётчик: {count}</p>
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
    </div>
  );
}

Каждый вызов setCount вызывает re-render компонента.

Какие механизмы вызывают re-render компонента в React?