Почему useIsMounted возвращает обратный вызов вместо самого значения?

Я имею в виду useIsMounted из usehooks-ts. Я пытаюсь понять, почему функция возвращает useCallback(() => isMounted.current, []), а не просто isMounted.current.

Я протестировал обе идеи в CodeSandbox, который просто использует setTimeout для имитации асинхронной работы, и я не обнаружил никаких проблем с возвратом значения вместо обратного вызова. Что мне не хватает?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
0
19
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

По какой-то причине авторы этого хука useIsMounted решили вернуть функцию вместо логического isMounted значения. Возвращаемая функция запоминается, поэтому ее можно безопасно передавать в качестве обратного вызова дочерним компонентам.

Возврат isMounted.current не работает, но возврат всей ссылки isMounted работает.

Пример:

const useIsMounted = () => {
  const isMounted = useRef(false);

  useEffect(() => {
    isMounted.current = true;

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

  return isMounted;
}

И это требует, чтобы потребители знали, что это ссылка React и что им нужно распаковать текущее значение ссылки.

function Child() {
  const [data, setData] = useState("loading");
  const isMounted = useIsMounted();

  // simulate an api call and update state
  useEffect(() => {
    void delay(3000).then(() => {
      if (isMounted.current) setData("OK"); // <-- access ref value
    });
  }, [isMounted]);

  return <p>{data}</p>;
}

Edit why-does-useismounted-return-a-callback-instead-of-the-value-itself

Кажется, это было просто дизайнерское решение вернуть запомненную функцию.

Другие вопросы по теме