Как обработать ситуацию, когда props обновились, а предыдущий запрос ещё не завершился? Как избежать race condition?

Чтобы избежать race condition при обновлении props и одновременном выполнении асинхронных запросов, можно использовать следующие подходы:

• Отмена предыдущих запросов. Если API поддерживает отмену (например, через AbortController в fetch), при обновлении props отменять предыдущий запрос.

const controller = new AbortController();

useEffect(() => {
  controller.abort(); // отменяем предыдущий запрос
  const newController = new AbortController();

  fetch(url, { signal: newController.signal })
    .then(response => response.json())
    .then(data => {
      // обновляем состояние
    })
    .catch(err => {
      if (err.name === 'AbortError') return; // запрос отменён
      // обработка ошибок
    });

  return () => newController.abort();
}, [props]);

• Использование счетчика запросов или токена. При каждом новом запросе увеличивать счетчик или генерировать уникальный токен, и при получении ответа проверять, что он соответствует последнему запросу. Если нет — игнорировать результат.

• Локальное состояние для отслеживания актуальности. Например, сохранять идентификатор запроса в состоянии и обновлять только если ответ соответствует последнему запросу.

Эти методы помогают избежать ситуации, когда старый ответ перезаписывает данные, полученные из более нового запроса.