Uploading Images to Firebase through a React App - reactjs

Question

I created a photo gallery app using React. When I upload an Image in the App, it is storing two documents of the image in the firestore, containing exactly the same 'created At' and 'url', but under two difference IDs. I want it to store only 1 document. I am not able to understand why my code is running twice and uploading the image twice?
Uploading is done using 'useStorage' custom hook:
import { useState, useEffect } from 'react'
import { projectStorage, projectFirestore, timestamp } from '../firebase/config'
const useStorage = (file) => {
const [progress, setProgress] = useState(0)
const [error, setError] = useState(null)
const [url, setUrl] = useState(null)
useEffect(() => {
// references
const storageRef = projectStorage.ref(file.name)
const collectionRef = projectFirestore.collection('images')
// uploading the file to the reference
storageRef.put(file).on(
'state_changed',
(snap) => {
let percentage = (snap.bytesTransferred / snap.totalBytes) * 100
setProgress(percentage)
},
(err) => {
setError(err)
},
async () => {
const url = await storageRef.getDownloadURL()
const createdAt = timestamp()
await collectionRef.add({ url, createdAt })
setUrl(url)
}
)
}, [file])
return { progress, url, error }
}
export default useStorage
'useFirestore' custom hook:
import { useEffect, useState } from 'react'
import { projectFirestore } from '../firebase/config'
const useFirestore = (collection) => {
const [docs, setDocs] = useState([])
useEffect(() => {
// return a function to un-subscribe from the collection
const unsub = projectFirestore
.collection(collection)
.orderBy('createdAt', 'desc')
.onSnapshot((snap) => {
let documents = []
snap.forEach((doc) => {
documents.push({ ...doc.data(), id: doc.id })
})
setDocs(documents)
})
// clean-up function
return () => unsub()
}, [collection])
return { docs }
}
export default useFirestore

Answer 1

Remove Strict Mode in index.js file, that is causing upload of file 2 times.