const [orgList, setOrgList] = useState([]);
  const [selectedOrgList, setSelectedOrgList] = useState();
  const [loading, setLoading ] = useState(true);
  const [ error, setError ] = useState(false);

  useEffect(() => {
    // if (doc.exists) {
      const unsubscribe = firebase
        .firestore()
        .collection("organisations")
        .onSnapshot((snapshot) => {
          const orgList = snapshot.docs.map((doc) => ({
            id: doc.id,
            shortName: doc.data().shortName,
            location: doc.data().location
          }));
          setOrgList(orgList);
          console.log("orglist", orgList)
        }, () => {
          setError(true)
        });
        setLoading(false);
        return() => unsubscribe();
     
    
  }, [orgList]);

From my understanding of this, we are telling React, run this effect if orgList changes. The effect does the following:

1. Make the call to Firestore.
2. Map... <- this contributes to the problem, because we're creating a new array.
3. setOrgList(orgList) <- this is where the problem lies

Now that orgList has changed, React has to rerun the effect. I created a similarish stackblitz (from material-ui's homepage) that can cause this problem. See https://stackblitz.com/edit/evsxm2?file=demo.js. See the console and notice it just runs all the time.

Possible ways to solve for this

If we only need the data once and only once...

Suggestion 1: put a if condition in the beginning of useEffect

  const [orgList, setOrgList] = useState([]);
  const [selectedOrgList, setSelectedOrgList] = useState();
  const [loading, setLoading ] = useState(true);
  const [ error, setError ] = useState(false);

  useEffect(() => {
      if (orgList.length > 0) {
         return; // we already have data, so no need to run this again
      }

      const unsubscribe = firebase
        .firestore()
        .collection("organisations")
        .onSnapshot((snapshot) => {
          const orgList = snapshot.docs.map((doc) => ({
            id: doc.id,
            shortName: doc.data().shortName,
            location: doc.data().location
          }));
          setOrgList(orgList);
          console.log("orglist", orgList)
        }, () => {
          setError(true)
        });
        setLoading(false);
        return() => unsubscribe();
     
    
  }, [orgList]);

Suggestion 2 If we really need to listen on realtime changes...? (I haven't tested this)

  const [orgList, setOrgList] = useState([]);
  const [selectedOrgList, setSelectedOrgList] = useState();
  const [loading, setLoading ] = useState(true);
  const [ error, setError ] = useState(false);

  useEffect(() => {
      const unsubscribe = firebase
        .firestore()
        .collection("organisations")
        .onSnapshot((snapshot) => {
          const orgList = snapshot.docs.map((doc) => ({
            id: doc.id,
            shortName: doc.data().shortName,
            location: doc.data().location
          }));
          setOrgList(orgList);
        }, () => {
          setError(true)
        });
        setLoading(false);
        return() => unsubscribe();
     
    
  }, []); // we don't depend on orgList because we always overwrite it whenever there's a snapshot change

orgList should not be declared as a dependency in the useEffect hook, what you really want is setOrgList.

I believe you are triggering an infinite loop here as the hook re-triggers every time orgList changes and it is always "updated" inside the hook itself, re-triggering it. However it is never used inside the hook and it looks like that's really not what you are after. If you want to set up the snapshot listener only on "mount" then simply use an empty dependency list or look into memoization strategies. What you likely want is:

  useEffect(() => {
      const unsubscribe = firebase
        .firestore()
        .collection("organisations")
        .onSnapshot((snapshot) => {
          const orgList = snapshot.docs.map((doc) => ({
            id: doc.id,
            shortName: doc.data().shortName,
            location: doc.data().location
          }));
          setOrgList(orgList);
          setLoading(false);
        }, () => {
          setError(true)
          setLoading(false);
        });

        return () => unsubscribe();
  }, []); // <----- empty dependency means it only runs on first mount

Edit:

The likely confusion is that you think if the data looks the same inside orgList then React should know to not retrigger however useEffect is not as smart as you might think so you have to do some work yorself to help it out. As orgList is an object, it is really a reference and this reference is being updated repeatedly. Some potential clarification on te by value vs by reference here: JavaScript by reference vs. by value

A solution that worked for many is to use cache rather than reading from Firestore constantly.

For example, directly from the Firebase documentation

var getOptions = {
    source: 'cache'
};

// Get a document, forcing the SDK to fetch from the offline cache.
docRef.get(getOptions).then(function(doc) {
    // Document was found in the cache. If no cached document exists,
    // an error will be returned to the 'catch' block below.
    console.log("Cached document data:", doc.data());
}).catch(function(error) {
    console.log("Error getting cached document:", error);
});

This is also very informative and has a code example (though in Java for Android) that I find very useful to understanding how to reduce the amount of reads to Firestore.

For anyone else looking to learn, I just found this blog post which also helps understand the dependency array: https://maxrozen.com/learn-useeffect-dependency-array-react-hooks/