How Does A Firestore Onsnapshot Listens For Changes In React-native?
Solution 1:
Your componentDidMount
is indeed only called once, but you're attaching a permanent listener in there. So the handler that you specify in onSnapshot.next
is called right away with the initial data from the database, and after that each time that the data matching the query changes.
Solution 2:
Solution1: Read the comment inside the code.
componentDidUpdate(prevState, prevProps) {
if(prevState !== this.state.screen && this.state.screen === 7) {
var query = firestore().collection('Collection').doc().collection('subcollection');
query = query.where('act', '==', 1);
query = query.where('city', '==', this.state.selected_city);
query = query.orderBy('update_time', 'desc');
query = query.limit(10);
query.onSnapshot({
error: (e) => this.setState({ errorMessage: e, refreshingPatients: false }),
next: (querySnapshot) => {
var dataSource = querySnapshot.docs.map(doc => { return { ...doc.data(), doc_id: doc.id } });
var lastVisiblePatient = dataSource[dataSource.length - 1].doc_id;
this.setState({
// you are not updating screen so it is always 7// if you update other state variables, it will trigger ComponentDidUpdate again, // and again and again and again
dataSource: dataSource,
lastVisiblePatient: lastVisiblePatient,
refreshingPatients: false,
});
},
});
}
}
By adding prevState !== this.state.screen
, you can prevent componentDidUpdate
being triggered everytime you update other states.
Like dataSource, lastVisiblePatient, and refreshingPatients.
Solution 2: Since you are using class components, you can use setState callback.
this.setState({screen: newValue}, doSomethingNew);
doSomethingNew(){
if (this.state.screen === 7) {
// your code goes here
}
}
the callback function(here doSomethingNew
) is triggered after screen
value is updated with newValue
.
Solution3: If you convert to function component, you can use useEffect
dependency.
const [screen, setScreen] = useState(initialValue);
useEffect(() => {
if (screen === 7) {
//do something here
}
}, [screen]); // adding screen as a dependency means this useEffect is triggered only when screen value is changed.
Post a Comment for "How Does A Firestore Onsnapshot Listens For Changes In React-native?"