title: Why am I getting too many renders when trying to setState?
body: <p>Here is my code. I'm grabbing data from firebase and placing it into my <code>groupDataMap</code>.</p>
  <pre><code>const Home = () =&gt; {
      
      const [memberInfo, setMemberInfo] = useState('');
      const auth = getAuth();
      const user = auth.currentUser;
      const memberId = auth.currentUser.uid
      const db = getDatabase();
      const dbRef = ref(db, 'groups');
      let groupDataMap = {};
  
      //get group name's if member_id(user) matches member id
      onValue(dbRef, (snapshot)=&gt; {
          const data = snapshot.val();
  
          for(var key in data){
              if(data.hasOwnProperty(key)){
                  const groupname = data[key]
                  groupDataMap = groupname
              }
          }
      })
      setMemberInfo(groupDataMap)
  
  
  </code></pre>
  <p>I'm using <code>memberInfo</code> to populate a <code>&lt;li&gt;</code> element in my return:</p>
  <pre><code> return (
          &lt;div&gt;
              &lt;div class=&quot;brand&quot;&gt;
                  &lt;h1&gt;Headline&lt;/h1&gt;
                  &lt;p&gt;paragraph&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;ul class=&quot;list-group container-fluid&quot;&gt;
                  &lt;li class=&quot;list-group-item&quot;&gt;
                  {memberInfo}
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      );
  
  </code></pre>
  <p>Am I not just setting the state once?</p>