В итоге я взял немного из разных ответов, чтобы сделать свой собственный крючок для этого. Я хотел иметь возможность просто отбросить что-нибудь вместо useEffect
для быстрой отладки, какая зависимость запускает useEffect
.
const usePrevious = (value, initialValue) => {
const ref = useRef(initialValue);
useEffect(() => {
ref.current = value;
});
return ref.current;
};
const useEffectDebugger = (effectHook, dependencies, dependencyNames = []) => {
const previousDeps = usePrevious(dependencies, []);
const changedDeps = dependencies.reduce((accum, dependency, index) => {
if (dependency !== previousDeps[index]) {
const keyName = dependencyNames[index] || index;
return {
...accum,
[keyName]: {
before: previousDeps[index],
after: dependency
}
};
}
return accum;
}, {});
if (Object.keys(changedDeps).length) {
console.log('[use-effect-debugger] ', changedDeps);
}
useEffect(effectHook, dependencies);
};
Ниже приведены два примера. Для каждого примера я предполагаю, что dep2
изменяется с «foo» на «bar». В примере 1 показан результат без передачи dependencyNames
, а в примере 2 показан пример с dependencyNames
.
Пример 1
До:
useEffect(() => {
// useEffect code here...
}, [dep1, dep2])
После:
useEffectDebugger(() => {
// useEffect code here...
}, [dep1, dep2])
Вывод в консоль:
{
1: {
before: 'foo',
after: 'bar'
}
}
Ключ объекта «1» представляет собой индекс зависимости, которая изменилась. Здесь dep1
изменилось и является вторым элементом в зависимости или индексом 1.
Пример 2
До:
useEffect(() => {
// useEffect code here...
}, [dep1, dep2])
После:
useEffectDebugger(() => {
// useEffect code here...
}, [dep1, dep2], ['dep1', 'dep2'])
Вывод в консоль:
{
dep2: {
before: 'foo',
after: 'bar'
}
}
person
Brad Ryan
schedule
21.01.2020