Я написал небольшой кастомный хук. Этот хук генерирует ссылку на

изображение с необходимыми параметрами. Я буду благодарен вам, если вы укажете на мои ошибки в коде. Может быть производительность?
js
import { useAdaptive, useDeviceDetect } from "altha-nextjs-helpers";
import generateImageUrl from "../helpers/generateImageUrl";

const QUALITY_FOR_MOBILE = 20;
const QUALITY_FOR_TABLET = 20;
const DEFAULT_QUALITY = 75;

const useImageUrlBuilder = ({
src,
width,
height,
}) => {
const { isIE, isSafari } = useDeviceDetect();
const isSupportWebp = !(isIE || isSafari);

const { width: screenWidth, isMobile, isTablet } = useAdaptive();
const quality = (isMobile && QUALITY_FOR_MOBILE) || (isTablet && QUALITY_FOR_TABLET) || DEFAULT_QUALITY;

const devicePixelRatio = 2;
const realScreenWidth = (isMobile || isTablet) ? screenWidth * devicePixelRatio : screenWidth;

const breakpoints = [600, 700, 800, 900, 1000, 1150];
const aspectRatio = (height / width) * 100;
const adaptiveWidth = breakpoints.reduce((prev, curr) => ((Math.abs(curr - realScreenWidth) < Math.abs(prev - realScreenWidth)) ? curr : prev), 0);
const adaptiveHeight = Math.ceil(adaptiveWidth * aspectRatio);

return generateImageUrl(src, adaptiveWidth, adaptiveHeight, isSupportWebp, quality);
};

export default useImageUrlBuilder;
Пример использования:
js
import useImageUrlBuilder from "../../hooks/useImageUrlBuilder";

const AdaptiveImageComponent = ({
src,
width,
height,
alt,
loading,
...rest
}) => {
const generatedImageSrc = useImageUrlBuilder({
src,
width,
height,
});

return (
<img
src={generatedImageSrc}
alt={alt}
width={width}
height={height}
loading={loading || "lazy"}
decoding="async"
{...rest}
/>
);
};

export default AdaptiveImageComponent;

А это же не хук а просто функция обычная

а что ей не хватает, чтобы хук был?

Хук с циклом жизни компонента взаимодействует, эта функция не взаимодействует и не должна