Я получаю журнал консоли, который запускается внутри хука при каждом изменении размера, однако журнал консоли, который находится в обратном вызове, который передается в хук изменения размера, никогда не срабатывает.
Вот мой хук, который использует useCallbacks для исчерпывающий плагин deps eslint:
// @flow
import { useCallback, useEffect } from 'react';
let resizeId: AnimationFrameID;
export const useResize = (callbackFn: Function, ref?: any) => {
const resizeUpdate = useCallback(() => {
console.log('inside');
callbackFn();
}, [callbackFn]);
const handleResize = useCallback(() => {
cancelAnimationFrame(resizeId);
resizeId = requestAnimationFrame(resizeUpdate);
}, [resizeUpdate]);
const handleOrientation = useCallback(() => {
// After orientationchange, add a one-time resize event
const afterOrientationChange = () => {
handleResize();
// Remove the resize event listener after it has executed
window.removeEventListener('resize', afterOrientationChange);
};
window.addEventListener('resize', afterOrientationChange);
}, [handleResize]);
useEffect(() => {
if (typeof ResizeObserver === 'function' && ref && ref.current) {
let resizeObserver = new ResizeObserver(() => handleResize());
resizeObserver.observe(ref.current);
return () => {
if (!resizeObserver) {
return;
}
resizeObserver.disconnect();
resizeObserver = null;
};
} else {
window.addEventListener('resize', handleResize);
window.addEventListener('orientationchange', handleOrientation);
return () => {
window.removeEventListener('resize', handleResize);
window.removeEventListener('orientationchange', handleOrientation);
cancelAnimationFrame(resizeId);
};
}
}, [callbackFn, handleOrientation, handleResize, ref]);
};
export default useResize;
Вот как вы используете его внутри компонента:
...
const setContentRef = () => {
console.log('resize');
};
useResize(setContentRef);
...