a little confused about setproject hooks code

Hi

i got little confused about the follow code

export const useProjects = () => {
  const [projects, setProjects] = useState([]);

  useEffect(() => {
    firebase
      .firestore()
      .collection('projects')
      .where('userId', '==', 'jlIFXIwyAL3tzHMtzRbw')
      .orderBy('projectId')
      .get()
      .then(snapshot => {
        const allProjects = snapshot.docs.map(project => ({
          ...project.data(),
          docId: project.id,
        }));

        if (JSON.stringify(allProjects) !== JSON.stringify(projects)) {
          setProjects(allProjects);
        }
      });
  }, [projects]);

  return { projects, setProjects };
};

i thought, if component calls setProject, the hooks will update projects, and the UI will got updated. after that, the effect will got fired, which will update the UI again.

should that reading from firebase just get called in app mounting time, and when component calls setProject, we just need to save it to firebase.

sorry for the poor english, the about maybe seems a little rude, but i am not meaning it

[vp5h]

const allProjects = snapshot.docs.map((project) => ({
          name: project.data().name,
          userId: project.data().userId,
          projectId: project.data().projectId,
          docId: project.id,
        }));

This solves the RErendering as Stringify conditions work only when sequence is maintained, firestore is Sending data in random order at times, So avoid spread operaetor here would save 50k firebase calls for you.

[vp5h]

Something is causing it to render projects again and again is there a possibility of circular dependency here