Безопасные асинхронные операции

Хук useIsMounted решает проблему вызова обновления состояния в размонтированном компоненте. Она возникает, когда асинхронная операция (например, fetch) завершается уже после того, как пользователь покинул страницу и компонент был удален из DOM.

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

import { useRef, useEffect } from 'react';

function useIsMounted() {
  const isMountedRef = useRef(true);

  useEffect(() => {
    return () => {
      isMountedRef.current = false;
    };
  }, []);

  return () => isMountedRef.current;
}

👉 @sWebDev