Когда функциональный компонент перерендеривается при использовании useState?

Когда происходит ререндер при использовании useState

В React функциональный компонент перерендеривается каждый раз, когда вызывается функция-сеттер, полученная из хука useState. Это основной механизм обновления UI в ответ на изменения состояния.

Механизм сравнения

React использует строгое сравнение Object.is для определения, изменилось ли значение состояния. Если новое значение отличается от предыдущего, компонент перерендеривается. Если значения одинаковы (например, при передаче того же объекта или примитива), ререндер не происходит.

Пример кода

import React, { useState } from 'react';

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

  const handleClick = () => {
    setCount(count + 1); // ререндер произойдет
  };

  const handleSameValue = () => {
    setCount(count); // ререндер НЕ произойдет, так как значение не изменилось
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
      <button onClick={handleSameValue}>Set same</button>
    </div>
  );
}

Важные нюансы

• При передаче функции в сеттер (например, setCount(prev => prev + 1)) React гарантирует, что будет использовано актуальное значение состояния.
• Если состояние — объект или массив, необходимо создавать новую ссылку, чтобы ререндер произошел. Мутация существующего объекта не вызовет ререндер.
• Ререндер компонента также может быть вызван изменением пропсов или контекста.

Вывод: Используйте useState для локального состояния компонента. Помните, что ререндер происходит только при изменении значения, а не при каждом вызове сеттера. Для сложных состояний используйте функциональную форму обновления.