title: Component gets rendered before getting its values
body: <p>I have an <code>AuthContext</code> file for the user info. when I <code>console.log</code> the data returning from the api, the <code>user</code> is being set properly. However the <code>AuthContext</code> component gets rendered <strong>before</strong> the api returns the user's value so on the page that uses the context the user properties are always null.</p>
  
  <p>Any idea on how to solve that?</p>
  
  <p><code>AuthContext</code>:</p>
  
  <pre><code>const AuthContext = React.createContext();
  
  class AuthProvider extends React.Component {
    state = {
      user: {
        name: '',
        isAdmin: false,
      },
    };
  
    componentDidMount = async () =&gt; {
      try {
        const { data: user } = await axios.get('/api/user/GetUser');
        this.setState(user);
      } catch (error) {}
    };
  
    render() {
      const { user } = this.state;
      return &lt;AuthContext.Provider value={{ user }}&gt;{this.props.children}&lt;/AuthContext.Provider&gt;;
    }
  }
  
  const AuthConsumer = AuthContext.Consumer;
  
  export { AuthProvider, AuthConsumer };
  </code></pre>
  
  <p><code>Hedrer</code> component that call the <code>AuthContext</code>:</p>
  
  <pre><code>import { AuthConsumer } from '../AuthContext';
  import Welcome from './Welcome';
  import Initial from './Initial';
  export default ({ user, children }) =&gt; (
    &lt;AuthConsumer&gt;
      {({ user }) =&gt; (
        &lt;div css={headerStyles}&gt;
          &lt;div&gt;
            &lt;Welcome name={user.name} /&gt;
            &lt;Initial name={user.name} /&gt;
          &lt;/div&gt;
          {children}
        &lt;/div&gt;
      )}
    &lt;/AuthConsumer&gt;
  );
  </code></pre>