> Зачем в setState передавать callback вместо значения (React)

Короткий ответ

Callback в setState гарантирует доступ к актуальному состоянию на момент выполнения, в отличие от передачи значения, которое может быть устаревшим при асинхронных обновлениях или batch-объединении. Это критично для последовательных обновлений, зависящих от предыдущего состояния, и предотвращает race conditions в React.

Подробное объяснение

В React setState работает асинхронно - React может объединять несколько вызовов в один batch для оптимизации производительности. Когда вы передаёте объект, React использует текущее состояние на момент начала batch, а не на момент выполнения каждого setState. Это приводит к проблемам при последовательных обновлениях:

JAVASCRIPT
// Проблема с объектом
this.setState({ count: this.state.count + 1 });
this.setState({ count: this.state.count + 1 });
// Результат: count увеличится только на 1, а не на 2

Callback-форма решает это, получая предыдущее состояние (prevState) и props как аргументы:

JAVASCRIPT
// Корректно с callback
this.setState((prevState) => ({ count: prevState.count + 1 }));
this.setState((prevState) => ({ count: prevState.count + 1 }));
// Результат: count увеличится на 2

Это особенно важно в:

• Циклах обновлений, где новое состояние зависит от предыдущего
• Обработчиках событий, где могут быть множественные вызовы
• Асинхронных операциях (setTimeout, promises), где состояние могло измениться

В функциональных компонентах с хуками аналогичная проблема решается через функциональную форму setState в useState.

На практике

В продакшене callback-форма обязательна, когда новое состояние вычисляется на основе предыдущего. Типичные сценарии:

• Инкременты/декременты счётчиков
• Toggle boolean-флагов
• Добавление элементов в массив
• Обновление вложенных объектов с сохранением предыдущих полей

Для простых присваиваний, не зависящих от текущего состояния (например, сброс формы), можно использовать объектную форму - она короче и читаемее.

Пример кода

JAVASCRIPT
// ❌ Проблемный код
class Counter extends React.Component {
  state = { count: 0 };

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
    this.setState({ count: this.state.count + 1 });
    // count станет 1, а не 2
  };

  // ✅ Корректный код
  handleClickCorrect = () => {
    this.setState((prevState) => ({ count: prevState.count + 1 }));
    this.setState((prevState) => ({ count: prevState.count + 1 }));
    // count станет 2
  };
}

// Функциональный компонент с хуками
function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount((prev) => prev + 1);
    setCount((prev) => prev + 1);
    // count увеличится на 2
  };
}

Как отвечать на собеседовании

Начни с ключевой причины - асинхронность setState и batch-обновления. Объясни, что React может объединять вызовы, и при передаче объекта используется состояние на момент начала batch. Приведи пример с двумя последовательными инкрементами. Упомяни, что callback гарантирует актуальность prevState. Добавь, что в функциональных компонентах та же логика работает через функциональную форму setCount. Если спросят про производительность - отметь, что разница минимальна, но корректность важнее.

Что проверяет интервьюер

• Понимание асинхронной природы setState и batch-механизма React
• Умение различать случаи, когда нужен callback vs объект
• Знание race conditions в асинхронных операциях
• Понимание, что это не баг React, а intentional design для оптимизации
• Способность применить это знание к функциональным компонентам с хуками

Типичные ошибки

• Утверждение, что callback нужен всегда - это избыточно для простых присваиваний
• Путаница с вторым аргументом setState (callback после обновления) - это другая функциональность
• Игнорирование проблемы в функциональных компонентах с useState
• Предложение использовать forceUpdate или другие хаки вместо правильной формы setState
• Непонимание, что проблема проявляется только при зависимости от предыдущего состояния