title: How to render user list in React-Firebase
body: <p>I'm still learning React and I'm trying to make a &quot;design review app&quot; where users signup as customers or designers and interact with each other.
  I made the auth system and made sure that while signing up every user would get also some attributes in the firebase database.
  Therefore, in my DB, I have a 'users/' path where every user is saved by uid.
  <a href="https://i.stack.imgur.com/1tUSg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1tUSg.png" alt="structure" /></a></p>
  <p>Now I'm able to render a different dashboard if you're a customer or a designer.
  In my customer dashboard, I just want to render a list of designers (and clicking on them go to their projects).
  However, I'm having so many problems trying to get this stuff to work!</p>
  <p>In the following code, I'm trying to fetch the users from the db and add their uid to an array.
  Later I want to use this array and render the users with those uids.</p>
  <pre><code>import firebase from &quot;firebase/app&quot;;
  import &quot;firebase/database&quot;;
  
  export default function CustomerContent() {
      const[designers, setDesigners] = useState([]);
  
      function printUsers (){
          var users = firebase.database().ref('/users/');
          users.on('value', (snapshot)=&gt;{
              snapshot.forEach((user)=&gt;{
                  console.log(user.key) 
                  firebase.database().ref('/users/'+user.key).on('value', (snapshot)=&gt;{
                      var role = snapshot.val().role
                      console.log(role)
                      if(role === 'designer'){
                          const newDesigners = [...designers, user.key];
                          setDesigners(newDesigners);
                      }
                  })
              })
          })
      }
      useEffect(() =&gt; {
          printUsers();
          console.log(designers);
  
      }, [])
  
      return (
          &lt;div&gt;
              designer list
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p>Now the problem with this code is that:</p>
  <ol>
  <li>it looks like it runs the printUsers functions two times when loading the page</li>
  <li>the array is empty, however, if I link the function to a button(just to try it), it seems to add only 1 uid to the array, and always the same (I have no idea what's going on).</li>
  </ol>
  <p>ps. the console.log(user.key) and the console.log(role) print the right user-role combination</p>