title: React Context API, Hook loading twice. Once without the data and once with the data
body: <p>I'm building an internal react app with a flask backend that stores user details in the flask session.</p>
  
  <p>My flask app uses the ADAL package to handle the Azure Active Directory user authentication.</p>
  
  <p>To get the user details into my react app, I make fetch calls and can get the data no problems.</p>
  
  <p>In my react app I'm trying to use Hooks, createContext, useContext, useState and UseState for the first time and for some reason the app looks like it loads my header hook twice. Once without the data and once with the data</p>
  
  <p><a href="https://i.stack.imgur.com/1ywmv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1ywmv.png" alt="enter image description here"></a></p>
  
  <p>I've created an example of my problem here <a href="https://codesandbox.io/s/new-react-context-api-ei92k" rel="nofollow noreferrer">https://codesandbox.io/s/new-react-context-api-ei92k</a> it shows in the console.log the Header firing twice. </p>
  
  <p>Is there a way to avoid this?</p>