Images getting uploaded twice in firebase storage

[thekavikumar]

Here is my code:
`import React from "react";
import { useState, useEffect } from "react";
import { firestore, storage } from "../firebase/config";
import { ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";
import { addDoc, collection, serverTimestamp } from "firebase/firestore";

const useStorage = (file) => {
const [progress, setProgress] = useState(0);
const [error, setError] = useState(null);
const [url, setUrl] = useState(null);

useEffect(() => {
const storageRef = ref(storage, file.name);
const collectionRef = collection(firestore, "images");
const uploadTask = uploadBytesResumable(storageRef, file);
uploadTask.on(
"stage_changed",
(snapshot) => {
let percentage =
(snapshot.bytesTransferred / snapshot.totalBytes) * 100;
setProgress(percentage);
},
(error) => {
setError(error);
},
() => {
getDownloadURL(uploadTask.snapshot.ref).then((url) => {
const created = serverTimestamp();
addDoc(collectionRef, { url, created });
setUrl(url);
});
}
);
}, [file]);
return { url, progress, error };
};

export default useStorage;
`

[rafaellyz]

try to remove React.StrictMode from index.js. I was having the same problem and this solved it

[thekavikumar]

Hey there, Thanks for the reply. I've already solved it.
Thank you again

[waihankan]

@moonrafa I have been trying to solve this for a while. At first, I thought, it was because of the new Firebase 9 🤔 . But, removing React.StrictMode solved. Could you explain it to me?

[rafaellyz]

@moonrafa I have been trying to solve this for a while. At first, I thought, it was because of the new Firebase 9 🤔 . But, removing React.StrictMode solved. Could you explain it to me?

From what I read it seems like react 18 renders useEffect twice during dev mode. That can be bypassed by removing React.StrictMode