title: infinite loop using useEffect
body: <p>so creating a project that updates me on my data in firebase however i have console logged the data and its constantly coming through. How do i stop the loop essentially  so it doesn't crash.</p>
  
  <pre><code>import &quot;./App.css&quot;;
  
  import &quot;semantic-ui-css/semantic.min.css&quot;;
  import { Container, Divider, Card } from &quot;semantic-ui-react&quot;;
  import Header from &quot;./components/Header&quot;;
  import Cards from &quot;./components/Cards/index&quot;;
  import { useState, useEffect } from &quot;react&quot;;
  import { AppProvider } from &quot;./Context/Context.js&quot;;
  import &quot;firebase/compat/auth&quot;;
  import {} from &quot;firebase/firestore&quot;;
  import * as FirestoreService from &quot;./components/service/firebase&quot;;
  import firebase from &quot;@firebase/app-compat&quot;;
  
  function App() {
    const [user, setUser] = useState(null);
    const [cloudFucntions, setCloudFucntions] = useState();
    const [error, setError] = useState();
  
    useEffect(() =&gt; {
      firebase.auth().onAuthStateChanged((user) =&gt; {
        setUser(user);
  
        const unsubscribe = FirestoreService.getCloudFunctionItems(
          (querySnapshot) =&gt; {
            const updatedCloundFunctions = querySnapshot.docs.map((docSnapshot) =&gt;
              docSnapshot.data()
            );
            setCloudFucntions(updatedCloundFunctions);
            console.log(updatedCloundFunctions);
          },
          (error) =&gt; setError(&quot;list-item-get-fail&quot;)
        );
        return unsubscribe;
      });
    }, [cloudFucntions]);
  
    return (
      &lt;AppProvider&gt;
        &lt;div&gt;
          &lt;Container&gt;
            &lt;Header /&gt;
  
            &lt;Divider horizontal section&gt;
              Cloud Function Monitor
            &lt;/Divider&gt;
  
            {user ? (
              &lt;Card.Group itemsPerRow=&quot;4&quot;&gt;
                {cloudFucntions &amp;&amp;
                  cloudFucntions.map((cloudFunction) =&gt; {
                    return (
                      &lt;Cards
                        key={cloudFunction.id}
                        cloudFunction={cloudFunction}
                      &gt;&lt;/Cards&gt;
                    );
                  })}
              &lt;/Card.Group&gt;
            ) : (
              &lt;h2&gt; Please sign in using the button in the top right. &lt;/h2&gt;
            )}
          &lt;/Container&gt;
        &lt;/div&gt;
      &lt;/AppProvider&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p><img src="https://i.stack.imgur.com/UfzXj.png" alt="Image of console..." /></p>
  <p>I have tried using an empty array and not passing anything through however i get the errors:
  Warning: Each child in a list should have a unique &quot;key&quot; prop.
  Warning: Failed prop type: Invalid prop <code>children</code> supplied to <code>CardContent</code>, expected a ReactNode.
  Warning: Functions are not valid as a React child. This may happen if you return a Component instead of  from render. Or maybe you meant to call this function rather than return it.</p>