Довольно специфическая проблема.
Я использую значение isMounted
, чтобы предотвратить выполнение функции useEffect
. Это не вызывает исчерпывающую задержку deps, когда она содержится внутри самого компонента:
const MyComponent = ({ value }) => {
const isMounted = useRef(false);
useEffect(() => {
isMounted.current = true;
}, []);
useEffect(() => {
if (isMounted.current) {
console.log(value);
}
}, [value]); // no exhaustive deps error
return <div />
}
Но если мы абстрагируем это в ловушку, вот так:
// useIsMounted.js
export const useIsMounted = () => {
const isMounted = useRef(false);
useEffect(() => {
isMounted.current = true;
return () => {
isMounted.current = false;
};
}, []);
return isMounted;
};
// MyComponent.js
const MyComponent = ({ value }) => {
const isMounted = useIsMounted();
useEffect(() => {
if (isMounted.current) {
console.log(value);
}
}, [value]); // has exhaustive deps error
return <div />
}
Затем мы получаем ошибку линтинга.
Это не конец света, но я хотел бы иметь возможность использовать правило линтинга и не иметь ненужного повторения кода повсюду. Есть ли что-то, что я могу с этим сделать?
Спасибо
Редактировать: Я на самом деле немного рефакторинг, чтобы использовать сравнения с предыдущими значениями в моих ловушках эффектов вместо проверок монтирования и так немного чище для моего конкретного случая. Однако несоответствие описанной выше ошибке линтинга мне все еще странно.