CODEWITHSUNDEEP
reactjsfirebasegoogle-cloud-firestore
React Enjoyer
React Enjoyer

Reputation: 1402

Why Data disappear after refreshing React JS - Firebase?

Hello there's something I really do not understand because it does not make any sense at all, I have 2 pieces of code that are EXACTLY the same only difference is the variables I use to find the collections and one does persist even after refreshing and the other one doesn't here are the pieces of code:

Students list one:

const [estudiantes, setEstudiantes] = useState([]);
  const estudiantesRef = db.collection("usuarios").doc(user.uid).collection("estudiantes")

 useEffect(() => {
  estudiantesRef.onSnapshot(snapshot => {
    const tempData = [];
    snapshot.forEach((doc) => {
      const data = doc.data();
      tempData.push(data);
    });
    setEstudiantes(tempData);
  })
 }, []);

 console.log(user.uid)
 console.log(estudiantes)

Books list one:

const [productos, setProductos] = useState([]);
    const productosRef = db.collection('libros');

    useEffect(() => {
        productosRef
        .orderBy('grado')
        .onSnapshot( snapshot => {
            
            const tempData = [];
            snapshot.forEach((doc) => {

              const data = doc.data();
              tempData.push(data);
            });
            setProductos(tempData);
        })
      }, []);

Gif student

Gif books list

Update: The user.uid is ALWAYS present regardless of the refresh however the data stored in estudiantes disappears when I refresh and that's not good lol. Why does the data disappear ? I test it by only loading 1 collection and it doesn't disappear so why does it disappear when it goes to multiple collections and how I can fix it ?

Before Refresh

enter image description here

After Refresh

enter image description here

Upvotes: 2

Views: 2117

Answers (3)

React Enjoyer
React Enjoyer

Reputation: 1402

I just want to clarify that after a week or more of fighting with this issue, the answer wasn't because it was a nested collection

(Nested) estudiantesRef references: collection > document > collection

(not nested) productosRef references: collection

it was because the user from my code was being set back to null as soon as you refresh but if you wait like 2 seconds it changes back to his normal value. all I had to do is use user in the array dependency in my firebase useEffect.

However this means that the issue wasn't because it was a nested collection as someone else pointed out. just that, firebase can load data instantly (as long as there aren't that many values clearly) there shouldn't be an issue in loading just 1 piece of information.

Upvotes: 0

amandarose
amandarose

Reputation: 301

Not sure if you still need an answer, but:

For data to be kept on refresh, you should set your items in localStorage

const item= localStorage.setItem('keyValue', 'dataToPersist')

then get data by:

const item= localStorage.getItem('keyValue')

Upvotes: 0

Kerron
Kerron

Reputation: 436

The two pieces of code might seem to do exactly the same thing, but the reality is, they are not.

estudiantesRef references: collection > document > collection

productosRef references: collection

Naturally you'd expect productosRef to return faster as it's only doing one lookup, but it also depends on the number of records in each collection, etc. So you should double check this. Also, any additional processing done on the data after retrieval will affect the time it takes to show.

My suggestion is you create a loading state (or use console.log) to double check you're getting back data when you expect to.

one does persist even after refreshing and the other one doesn't

Unless you're using something other than React.useState to store your state, then the data shouldn't be persisting between refreshes. This could be a result of local caching, or the page just loading quickly.

Upvotes: 3

Related Questions