DEV Community

Discussion on: How to write a progressive image loading hook

Collapse
selbekk profile image
selbekk Author • Edited

Hi!

Looks like you're using a the useProgressiveImage hook inside of a loop, which violates the rules of hooks.

Instead, create a new component ProgressiveImage, which calls this hook for each image. It'll look like this:

const ProgressiveImage = (props) => {
  const src = useProgressiveImage({ 
    src: props.src,
    fallbackSrc: props.fallbackSrc 
  });
  if (!src) return null;
  return <img className="hero" alt={props.alt} src={src} />;
};

const Images = ({ images }) => {
  return (
    <div>
      {images.map(image => <ProgressiveImage key={image} src={image.src} fallbackSrc={image.fallbackSrc} />)}
    </div>
  );
} 
Collapse
vladsez profile image
Vlad

it worked, thank you:)