нужное устройство. Я пытаюсь использовать useMemo, но почему-то при
каждом ререндере картинка постоянно у сервера запрашивается. currentDevice - при ререндере у меня не изменяется. Я хук useMemo неправильно использую?
js
const useImageData = (ImageCollection) => {
const { isMobile, isTablet, isDesktop } = useAdaptive();
// эта переменная при ререндере не изменяется
const currentDevice = (isMobile && "mobile") || (isTablet && "tablet") || (isDesktop && "desktop");
return useMemo(
() => {
if (ImageCollection[currentDevice]) {
return ImageCollection[currentDevice];
}
return {
dimensions: ImageCollection.dimensions,
url: ImageCollection.url,
};
},
[currentDevice, ImageCollection],
);
};
export default useImageData;
Хук использую так:
js
const ImageComponent = ({
lightboxEnabled,
onClick,
ImageCollection,
}) => {
const { url, dimensions: { width, height } } = useImageData(ImageCollection);
return (
<ImageContainer
onClick={onClick}
>
{lightboxEnabled ? (
<ImageWithLightboxComponent
src={url}
alt="sample screen"
previewElement={(
<img
src={url}
alt="sample screen"
width={width}
height={height}
/>
)}
/>
) : (
<img
src={url}
alt="sample screen"
width={width}
height={height}
/>
)}
</ImageContainer>
);
};
gist.github.com
Можно посмотреть с помощью этого - https://github.com/welldone-software/why-did-you-render, но я бы подозревал ImageCollection в cбросе useMemo
проверить меняется ли объект ImageCollection?
useAdaptive - давай упрощать код
можем ли мы весь мусор выкинуть и сделать что-то типо этого?
дружочек, ну-ка покажи нам код ImageCollection
мб с этим связано?
Обсуждают сегодня