Firebase listAll() function gives me same array from storage 2 times

Question

I am trying to display my images from firebase/storage but when I use listAll() to display my images on my app same images appear 2 times on the screen . I couldn't find what is cause this .

This code below upload and display the images . That is all it does .

import { useState, useEffect } from "react";
import "./App.css";
import { storage } from "./firebase";
import { ref, uploadBytes, listAll, getDownloadURL } from "firebase/storage";

function App() {
  const [imageUpload, setImageUpload] = useState(null);
  const [imageList, setImageList] = useState([]);


  const imagesListFolderRef = ref(storage, 'images');
  console.log("imagesListFolderRef---> " + imagesListFolderRef)

  const uploadImage = () => {
    if (imageUpload == null) return;

    const imageRef = ref(storage, `images/${imageUpload.name}`);
    uploadBytes(imageRef, imageUpload).then(() => {
      alert("image Uploaded");
    });
  };

  useEffect(() => {
    listAll(imagesListFolderRef).then((response) => {
      // console.log(response)
       
      response.items.forEach((item) => {
        getDownloadURL(item).then((url) => {
          return setImageList((prev) => [...prev, url]);
        });
      });
    });
  }, []);

  return (
    <div className="App">
      <input
        type="file"
        onChange={(e) => {
          setImageUpload(e.target.files[0]);
        }}
      />
      <button onClick={uploadImage}>Upload Image</button>
      {imageList.map((url) => {
        return <img src={url} />;
      })}
    </div>
  );
}

export default App;

DataBase/Storage Web Aplication

Answer 1

React Strick mode pulled the data twice which is why it was happening. Just remove the React Strick mode. Also, you can check a link about this issue from here.