У меня есть контекст, который используется для отображения полного счетчика страниц, пока мое приложение выполняет длительные задачи.
Когда я пытаюсь получить к нему доступ внутри useEffect, я получаю сообщение react-hooks/exhaustive-deps ESLint. Например, следующий код, хотя и работает как положено, утверждает, что busyIndicator — это отсутствующая зависимость:
const busyIndicator = useContext(GlobalBusyIndicatorContext);
useEffect(() => {
busyIndicator.show('Please wait...');
}, []);
В статье Этот предлагается обернуть функцию useCallback, которая может выглядеть следующим образом:
const busyIndicator = useContext(GlobalBusyIndicatorContext);
const showBusyIndicator = useCallback(() => busyIndicator.show('Please wait...'), []);
useEffect(() => {
showBusyIndicator();
}, [showBusyIndicator]);
Хотя это работает, проблема переместилась в строку useCallback, которая теперь жалуется на отсутствующую зависимость.
Можно ли игнорировать сообщение ESLint в этом сценарии или я что-то упустил?
🤔 А знаете ли вы, что...
React обладает активным сообществом разработчиков и множеством сторонних библиотек и компонентов.
Если ваш busyIndicator не изменился в течение жизни компонента, вы можете просто добавить его как зависимость к useEffect:
const busyIndicator = useContext(GlobalBusyIndicatorContext);
useEffect(() => {
busyIndicator.show('Please wait...');
}, [busyIndicator]);
Если busyIndicator можно изменить и вы не хотите видеть ошибку, вы можете использовать useRef хук:
const busyIndicator = useRef(useContext(GlobalBusyIndicatorContext));
useEffect(() => {
busyIndicator.current.show('Please wait...');
}, []);
The useRef() Hook isn’t just for DOM refs. The “ref” object is a generic container whose current property is mutable and can hold any value, similar to an instance property on a class. read more
Не нужно обертывать ваш useContext в хук useRef. вы можете обновить свои контекстные данные, просто позвоните в useEffect Brackets так.
const comingData = useContext(taskData);
useEffect(() => {
console.info("Hi useEffect");
}},[comingData]); //context data is updating here before render the component