DEV Community

Discussion on: How to write a progressive image loading hook

selbekk profile image
selbekk Author • Edited


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 (
      { => <ProgressiveImage key={image} src={image.src} fallbackSrc={image.fallbackSrc} />)}
vladsez profile image

it worked, thank you:)