I'm trying to get all data with the 'public' parameter of a firebase collection and then use useffect, but the console accuses error.
I took this structure from firebase's documentation:
https://firebase.google.com/docs/firestore/query-data/get-data#get_multiple_documents_from_a_collection
but the console says 'Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function'
So I went to this other page:
https://firebase.google.com/docs/firestore/query-data/listen#detach_a_listener
But I'm not using onSnapshot, besides firebase documentation seems wrong to me, since unsub is not a function.
useEffect(() => {
let list = []
const db = firebase.firestore().collection('events')
let info = db.where('public', '==', 'public').get().then(snapshot => {
if (snapshot.empty) {
console.log('No matching documents.');
setLoading(false)
return;
}
snapshot.forEach(doc => {
console.log(doc.id, "=>", doc.data())
list.push({
id: doc.id,
...doc.data()
})
})
setEvents(list)
setLoading(false)
})
.catch(error => {
setLoading(false)
console.log('error => ', error)
})
return () => info
}, [])
You need to invoke the listener function to detach and unmount.
https://firebase.google.com/docs/firestore/query-data/listen#detach_a_listener
useEffect(() => {
let list = []
const db = firebase.firestore().collection('events')
let info = ...
return () => info() # invoke to detach listener and unmount with hook
}, [])
You don't need to clear a .get(), it's like a normal Fetch api call.
You need to make sure your component is still mounted when you setLoading
Example:
// import useRef
import { useRef } from 'react'
// At start of your component
const MyComponent = () =>{
const isMounted = useRef(false)
useEffect(() => {
isMounted.current = true;
return () => isMounted.current = false;
}, [])
// Your query
db.where('public', '==', 'public').get().then(snapshot => {
if(isMounted.current){
// set your state here.
}
})
return <div></div>
}
Related
Please consider the following code:
Parent:
const Messages = (props) => {
const [targetUserId, setTargetUserId] = useState(null);
const [currentChat, setCurrentChat] = useState(null);
useEffect(() => {
const { userId } = props;
const initiateChat = async (targetUser) => {
const chatroom = `${
userId < targetUser
? `${userId}_${targetUser}`
: `${targetUser}_${userId}`
}`;
const chatsRef = doc(database, 'chats', chatroom);
const docSnap = await getDoc(chatsRef);
if (docSnap.exists()) {
setCurrentChat(chatroom);
} else {
await setDoc(chatsRef, { empty: true });
}
};
if (props.location.targetUser) {
initiateChat(props.location.targetUser.userId);
setTargetUserId(props.location.targetUser.userId);
}
}, [props]);
return (
...
<Chat currentChat={currentChat} />
...
);
};
Child:
const Chat = (props) => {
const {currentChat} = props;
useEffect(() => {
const unsubscribeFromChat = () => {
try {
onSnapshot(
collection(database, 'chats', currentChat, 'messages'),
(snapshot) => {
// ... //
}
);
} catch (error) {
console.log(error);
}
};
return () => {
unsubscribeFromChat();
};
}, []);
...
The issue I'm dealing with is that Child's UseEffect clean up function, which depends on the chatroom prop passed from its parent, throws a TypeError error because apparently chatroom is null. Namely, it becomes null when the parent component unmounts, the component works just fine while it's mounted and props are recognized properly.
I've tried different approaches to fix this. The only way I could make this work if when I moved child component's useEffect into the parent component and defined currentChat using useRef() which honestly isn't ideal.
Why is this happening? Shouldn't useEffect clean-up function depend on previous state? Is there a proper way to fix this?
currentChat is a dependency of that effect. If it's null, the the unsubscribe should just early return.
const {currentChat} = props;
useEffect(() => {
const unsubscribeFromChat = () => {
if(!currentChat) return;
try {
onSnapshot(
collection(database, 'chats', currentChat, 'messages'),
(snapshot) => {
// ... //
}
);
} catch (error) {
console.log(error);
}
};
return () => {
unsubscribeFromChat();
};
}, [currentChat]);
But that doesn't smell like the best solution. I think you should handle all the subscribing/unsubscribing in the same component. You shouldn't subscribe in the parent and then unsubscribe in the child.
EDIT:
Ah, there's a bunch of stuff going on here that's not good. You've got your userId coming in from props - props.location.targetUser.userId and then you're setting it as state. It's NOT state, it's only a prop. State is something a component owns, some data that a component has created, some data that emanates from that component, that component is it's source of truth (you get the idea). If your component didn't create it (like userId which is coming in on props via the location.targetUser object) then it's not state. Trying to keep the prop in sync with state and worry about all the edge cases is a fruitless exercise. It's just not state.
Also, it's a codesmell to have [props] as a dependency of an effect. You should split out the pieces of props that that effect actually needs to detect changes in and put them in the dependency array individually.
Before posting the below, I have reviewed similar posts on stackoverflow but none resolved my issue.
I'm new to react and fetching data from firestore database. The below code works as required but getting this prompt within react
import React, {useState, useEffect} from 'react'
import {db} from '../firebase'
const ListRecord = () => {
const [details, setDetails] = useState([]);
useEffect(() => {
getContacts()
},[]);
const getContacts = async() => {
await db.collection('contacts').get().then((querySnapshot) => {
let arr = []
querySnapshot.forEach((doc) => {
arr.push({id: doc.id, value: doc.data()})
});
setDetails(arr);
});
console.log(details);
return details
}
return (
<div>
<h2>List Contact Details</h2>
</div>
)
}
export default ListRecord
As per other similar posts I tried moving the getContacts function inside useEffect body which make the prompt disapper but the getContacts function goes in a continuous loop.
I'm not sure what I'm missing here and any help would be appreciated.
There are different potential solutions:
1. Move getContacts() inside the useEffect() hook:
If you call getContacts() only once and only when the component mounts for the first time, this is probably the most logic solution.
useEffect(() => {
const getContacts = async () => {
await db.collection('contacts').get().then((querySnapshot) => {
let arr = []
querySnapshot.forEach((doc) => {
arr.push({
id: doc.id,
value: doc.data()
})
});
setDetails(arr);
});
//console.log(details);
//return details // why are you returning details?
}
getContacts()
}, [setDetails]); // setDetails() is granted to never change therefore the hook will never re-run
or, of course, you can use an IIFE:
useEffect(() => {
(async function() {
// ... same body as getContacts
})()
}, [setDetails])
2. Use a useCallback() hook:
This is something you might want to do if getContacts() is called more than once (for example, when the component mounts and every time some prop changes or when you click on some button)
const getContacts = useCallback(async () => {
await db.collection('contacts').get().then((querySnapshot) => {
let arr = []
querySnapshot.forEach((doc) => {
arr.push({
id: doc.id,
value: doc.data()
})
});
setDetails(arr);
});
//console.log(details);
//return details // why are you returning details?
}, [setDetail]); // setDetails() is granted to never change therefore getContacts() will never be re-created
useEffect(() => {
getContacts()
}, [getContacts]); // as getContacts() never changes, this will run only once
3. Move getContacts() out of the component and make it an independent function:
This can make sense if you want to reuse the same logic into other components:
// getContacts.js file
// OR this code could be in the ListRecord.js file but **outside** the component,
// although, in this case, solutions (1) or (2) would make more sense
import { db } from 'path/to/firebase'
export async function getContacts() {
await db.collection('contacts').get().then((querySnapshot) => {
let arr = []
querySnapshot.forEach((doc) => {
arr.push({
id: doc.id,
value: doc.data()
})
});
return arr; // this time you HAVE TO return arr
});
}
// ListRecord.js file
import React, { useState, useEffect } from 'react';
import { getContacts } from 'path/to/getContacts.js';
const ListRecord = () => {
const [details, setDetails] = useState([]);
useEffect(async () => {
const arr = await getContacts();
if (arr && arr.length > 0) setDetails(arr);
}, [setDetails]);
//...
}
I suggest you have a look at how useEffect and its dependency list works in the official document.
In short, do the following:
useEffect(() => {
getContacts()
}, [getContacts]);
This means when getContacts changes, the useEffect will be re-run.
I created a React custom hook which listens to firestore database, i followed the documentation in firebase website but I'm having trouble when I re-render the component.
When I refresh my app the useEffect hook runs correctly but the listener inside unsubscribe() method doesn't. Here is the full code of the hook.
It works fine when the code recompiles itself after I save something in a component (first-render), but when it re-renders it shows as it if was always loading but it never executes the listener. Hope you can help me!
import { db } from "initFirebase";
import { useEffect, useState } from "react";
interface Payment {
name: string;
email: string;
phone: string;
course: string;
pagado: boolean;
}
export const usePaymentsCollection = () => {
const [payments, setPayments] = useState<Payment[]>([]);
const [isLoading, setIsLoading] = useState<boolean>(true);
const [error, setError] = useState<any>(null);
useEffect(() => {
const unsubscribe = () => {
try {
db.collection("payments").onSnapshot(
(snapshot) => {
if (snapshot.docs.length) {
console.log("simona");
let allDocs: Payment[] = [];
snapshot.docs.map((doc) => {
console.log(doc.data());
return allDocs.push(doc.data() as Payment);
});
setPayments(allDocs);
setIsLoading(false);
} else {
console.log("isEmpty");
setIsLoading(false);
}
},
(error) => {
// ...
}
);
} catch (e) {
setError(e);
}
};
return () => unsubscribe();
}, [db]);
return {
payments,
isLoading,
error,
};
};
The unsubscribe anonymous function you have provided is not a snapshot listener unsubscribe method. It is a function which creates a snapshot listener (and ignores the unsubscribe method returned from db.collection("payments").onSnapshot()).
You should set unsubscribe to the value returned from db.collection("payments").onSnapshot():
useEffect(() => {
const unsubscribe = db.collection("payments").onSnapshot(
(snapshot) => {
// ...
},
(error) => {
// ...
}
);
return unsubscribe;
}, [db]);
Additionally, by passing the array [db] into the useEffect hook, it will run again on rerender when the db state/prop is updated. Be sure that this is what you want - it probably isn't, since db is likely not a state/prop.
In my react app, I am making a request to an API inside useEffect. Once the promise is returned, I am setting state. I then need to use that state to subscribe to a websocket, but state is coming back as undefined so for now I am just logging the state. I only want to do this on initial page load. How can I make an API request, save that information to state, then use that state to do something all on initial page load only?
const fetchInstruments = () => {
return axios
.post('http://localhost:5050/0/public/AssetPairs')
.then(({ data }) => {
return data.result
})
.catch((error) => console.log(error))
}
function App() {
const [instruments, setInstruments] = useState()
useEffect(() => {
fetchInstruments().then((fetchedInstruments) => {
setInstruments(fetchedInstruments)
})
.then(()=> console.log(instruments)) //this is undefined
}, [])
}
if I were in your place, I would not use the state to subscribe to a websocket, I will use the result of the HTTP request
checkout this
function App() {
const [instruments, setInstruments] = useState()
useEffect(() => {
fetchInstruments().then((fetchedInstruments) => {
setInstruments(fetchedInstruments);
return fetchedInstruments; // <======
})
.then((fetchedInstruments) => {
console.log(fetchedInstruments);
//TODO : handle websocket subscription
})
}, [])
}
You can just make your second API call when you fetched your instruments:
function App() {
const [instruments, setInstruments] = useState()
useEffect(() => {
fetchInstruments().then((fetchedInstruments) => {
setInstruments(fetchedInstruments)
secondApiCall(fetchedInstruments); // You can do your second API call here
})
}, [])
}
I want to wait for 10 seconds for my API call to fetch the category list array from backend and store in hook state. If nothing is fetched in 10 sec, I want to set error hook state to true.
But the problem is even after the array is fetched initially, the error state is set to true and categoriesList array in state blanks out after 10 sec.
import React, { useState, useEffect } from "react";
import { doGetAllCategories } from "../helper/adminapicall.js";
const ViewCategories = () => {
let [values, setValues] = useState({
categoriesList: "",
error: false,
});
let { categoriesList, error } = values;
const preloadCategories = () => {
doGetAllCategories()
.then((data) => {
if (data.error) {
return console.log("from preload call data - ", data.error);
}
setValues({ ...values, categoriesList: data.categories });
})
.catch((err) => {
console.log("from preload - ", err);
});
};
useEffect(() => {
preloadCategories();
let timerFunc = setTimeout(() => {
if (!categoriesList && !error) {
setValues({
...values,
error: "Error fetching category list... try after some time !",
});
}
}, 10000);
return () => {
clearTimeout(timerFunc);
};
}, []);
//...further code
The problem is that the useEffect callback is a closure over categoriesList, so you'll always see the initial categories list inside the callback, and you won't see any changes to it. Now one could add categoriesList as a dependency to the useEffect hook, that way the hook will be recreated on every categoriesList change, and thus you can see the changed version:
useEffect(/*...*/, [categoriesList]);
Now the good thing is, that by updating the hook the timeout also gets canceled, so if the category list is set, we just don't have to create a new timeout:
useEffect(() => {
if(!categoriesList && !error) {
let timerFunc = setTimeout(() => {
setValues({
...values,
error: "Error fetching category list... try after some time !",
});
}, 10000);
return () => clearTimeout(timerFunc);
}
}, [!categoriesList, !error]); // some minor optimization, changes to the list don't bother this hook
I recommend you to read this blog post on useEffect by Dan Abramov.
The problem with your code is that you expect to have a change of the state of the component inside the useEffect hook. Instead, you create two variables inside the useEffect that track whether the limit of 10 sec has passed or the data is fetched. In contrary to state variables, you can expect these variables to change because they lie within the same useEffect.
export default function App() {
const [data, setData] = React.useState(null);
const [error, setError] = React.useState(null);
React.useEffect(() => {
let didCancel = false;
let finished = false;
async function fetchData() {
const data = await subscribeAPI();
if (!didCancel) {
finished = true;
setData(data);
}
}
const id = setTimeout(() => {
didCancel = true;
if (!finished) {
setError("Errorrrr");
}
}, 10000);
fetchData();
return () => {
clearTimeout(id);
};
}, []);