Кои механизми предизвикват повторно рендиране на компонент в React?

В React компонент се извършва повторно рендериране (re-render) в следните случаи:

• Промяна на състоянието на компонента чрез setState или hook-а useState.
• Промяна на пропсите, предадени на компонента.
• Промяна на контекста, ако компонентът е абониран за React Context.
• Вика на родителския компонент, което води до повторно рендериране на децата.

За оптимизиране на рендерирането може да се използва React.memo за функционални компоненти или shouldComponentUpdate в класовите компоненти, за да се избегнат ненужни повторни рендери при неизменени данни.

Пример с hook-а useState:

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

  return (
    <div>
      <p>Брояч: {count}</p>
      <button onClick={() => setCount(count + 1)}>Увеличи</button>
    </div>
  );
}

Всеки път, когато се извика setCount, компонентът се рендерира отново.