useEffect runs forever

Question

I am a newbie to React.js. I have a question about useEffect today. I know that if I pass an empty [] as a second parameter, useEffect only runs once. But, my app runs too often and if I console.log(something), I can see that. Here is my code. Please look at line 19. [] is there. I tried to add quizzes in [] like [quizzes].

import { useEffect, useState } from 'react'; import { doc, collection, onSnapshot } from 'firebase/firestore'; import db from '../firebaseConfig'; const Quiz = () => { const [quizes, setQuizes] = useState([]); useEffect(() => { const collectionRef = collection(db, 'quizes'); const unsub = onSnapshot( collectionRef, snapshot => { setQuizes( snapshot.docs.map( doc => ({ ...doc.data(), id: doc.id }) ) ); }, [] ); return unsub; // getData(): run once // onSnapshot(): listen for realtime updates }); console.log(quizes) return ( <div className='quiz'> {quizes.map(quiz => ( <div key={quiz.id} className='quiz'> {quiz.correctAns} </div> ))} </div> ); }; export default Quiz;

samthecodingman · Accepted Answer · 2022-03-17 22:35:26Z

You have a typo where you have misplaced the empty array and passed it into the onSnapshot() call instead of the useEffect() call.

In addition, you should make sure that you attach listeners to both of the onSnapshot's events - next and error. When you don't use an observer object like shown below, these are the second and third arguments to the onSnapshot call.

// the recommended onSnapshot form in React const unsub = onSnapshot( ref, { next: (snapshot) => { /* ... */ }, error: (err) => { /* ... */ } } ); // OR, the more confusing as your handlers grow in size: const unsub = onSnapshot( ref, (snapshot) => { /* ... */ }, (err) => { /* ... */ } );

useEffect( () => { const collectionRef = collection(db, 'quizes'); const unsub = onSnapshot( collectionRef, { next: (snapshot) => { setQuizes( snapshot.docs.map( doc => ({ ...doc.data(), id: doc.id }) ) ); }, error: (err) => { // don't forget error handling! e.g. update component with an error message console.error("quizes listener failed: ", err); } } ); // <-- not here return unsub; // getData(): run once // onSnapshot(): listen for realtime updates }, [] // <-- empty array goes here, not in onSnapshot );

Collectives™ on Stack Overflow

useEffect runs forever

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related