title: Make React wait for Firebase query to end
body: <p>I am making a call to Firebase, to check if user has a property.</p>
  
  <p>If he has, I want him to be redirected to page A, else I want to redirect him to page B.</p>
  
  <p>The problem is I think Firebase takes to long to come back, so React just renders the component with the default value.</p>
  
  <p>My code:</p>
  
  <pre><code>export default class CheckIfHasCurrentTasksComponent extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              questionId: this.props.match.params.id
          };
      }
  
      async componentDidMount() {
          var uid = firebase.auth().currentUser.uid;
          var AssignedWordRef = await firebase.database().ref('Users').child(uid).child('assignedWork');
          await AssignedWordRef.on('value', snapshot =&gt; {
              var question = snapshot.val();
              console.log('question', question);
              if (question.length &gt; 0) {
                  this.setState({
                      questionId: question,
                  });
                  console.log('redirect', this.state.questionId);
              }
              else {
                  this.setState({
                      questionId: this.props.match.params.id,
                  });
                  console.log('No redirect', this.state.questionId);
              }
          })
      }
  
      render() {
          console.log('questionId', this.state.questionId);
          return &lt;QuestionComponent questionId={this.state.questionId}/&gt;
      }
  }
  </code></pre>
  
  <p>The logs:</p>
  
  <pre><code>questionId -LEU6zUnLTO84KGh3pua     CheckIfHasCurrentTasksComponent.js:35
  question -LEU1fr2TmxHFKD3ObG_       CheckIfHasCurrentTasksComponent.js:18
  questionId -LEU1fr2TmxHFKD3ObG_     CheckIfHasCurrentTasksComponent.js:35
  redirect -LEU1fr2TmxHFKD3ObG_       CheckIfHasCurrentTasksComponent.js:23
  </code></pre>
  
  <p>The code seems to be running twice for some reason. The id is the one coming from a previous component. The last 3 are the ones from the database.</p>
  
  <p>The confusing part is that they get logged async-like. How can I make it synchronous/wait for the response from Firebase to come back?</p>
  
  <p>The <code>this.props.match.params.id</code> is an id coming from a previous component. This one is acting all right.</p>