For my project, I am using next.js along with react-firebase-hooks and firebase. On my home page, I have something like this:
let [userAuth, authLoading, authError] = useAuthState(auth);
let uid = userAuth ? userAuth.uid : "_";
let [userData, userDataLoading, userDataError] = useDocument(doc(db, "users", uid));
let [imageURL, imageURLLoading, imageURLError] = useDownloadURL(ref(imageStorageRef, uid));
let content = "";
content is the actual output of my home page component, and it gets updated depending upon values of all these other variables. userAuth is initially undefined for a few seconds even for logged in users, thus value of uid is loading.png.
During this time, userData remains undefined as theres no such document as "_". When userAuth does become defined, uid also becomes defined and the useDocument hook also gets updated so as to work with the new values of uid, and so a few seconds after this, value of userData also gets updated.
I was expecting the same to happen with the useDownloadURL hook and the value of imageURL but that doesn't happen. Initially uid is "_" so nothing is retrieved and imageURL is undefined. When uid becomes defined, the useDownloadURL hook gets updated, and imageURL get the desired value for a few renders, but for some reason a few more renders are called automatically, and the value of imageURL becomes undefined again.
I checked this by placing a console.log(imageURL) at the top level of my home page component. Each time I reload the page, initially undefined is printed for a few times, then an error for something not being found on the storage is displayed. I assume it is for the "_" file. Then, a few more undefined get printed. Then my desired URL gets printed for a few times, one more error message for something not being found on the storage comes up, and then undefined is printed a couple of times, before the initial renders stop.
I am not sure why the imageURL value gets undefined after a while, I can catch the URL by setting a global variable and then my page works fine, but I cannot understand this behavior, and it took me a long while to figure it out before being able to implement the global variable fix.
Also, the useDownloadURL doesn't work after that, if in future the same image is updated or changed, the hook doesn't get triggered.
Please tell me what is happening.