title: How to prevent images from firebase storage to be downloaded every time on filter
body: <p>I'm using firebase storage to load images into my web page. I have a page where I show different kinds of projects. I also provided a filter option. That is where I have my problem now. Every time users use a filter, the images from the firebase storage are downloaded again.</p>
  <p>This is the code where I map over all my projects to show the project component.</p>
  <pre><code>{newProjects.map((project) =&gt; (
    &lt;Project project={project} key={project.id}&gt;&lt;/Project&gt;
  ))}
  </code></pre>
  <p>In my project component, I use the project data to download the right image.</p>
  <pre><code>const imgRef = useRef(null);
  const storageRef = firebase.storage().ref();
  storageRef
    .child('images/' + project.image)
    .getDownloadURL()
    .then(function (url) {
        imgRef.current.src = url;
      }
    });
  
  return (
    &lt;img
      className={style.card_image}
      ref={imgRef}
      alt={project.title}
    &lt;/img&gt;
  )
  </code></pre>
  <p>The projects are loaded in with the right images, great! The problem now is that if a user uses a filter, the images from the projects are downloaded from firebase again. The newProjects are a state and whenever I use the filter I will set the state again.</p>
  <pre><code>const [newProjects, setNewProjects] = useState(projects);
  
  const filter = () =&gt; {
  // filter stuff...
  
  setNewProjects(filteredProjects);
  }
  </code></pre>
  <p>Is there a way that the images won't download every time the users use a filter.</p>