Я имею в виду useIsMounted
из usehooks-ts. Я пытаюсь понять, почему функция возвращает useCallback(() => isMounted.current, [])
, а не просто isMounted.current
.
Я протестировал обе идеи в CodeSandbox, который просто использует setTimeout
для имитации асинхронной работы, и я не обнаружил никаких проблем с возвратом значения вместо обратного вызова. Что мне не хватает?
По какой-то причине авторы этого хука 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>;
}
Кажется, это было просто дизайнерское решение вернуть запомненную функцию.