title: Pattern for syncronously loading a react Provider component
body: <p>My :brain: is exploding.</p>
  
  <p>In the root of my application I want to set a UserProvider (simplified version below).  </p>
  
  <p>I want all consumers of it to have confidence that the Provider has the user.</p>
  
  <p>With the following implementation  I need to do a null check on every use:</p>
  
  <pre><code>  const userContext = useContext(UserContext)
    const userId = userContext!.id   // I do not want that bang(!)
  </code></pre>
  
  <p>My current implementation:</p>
  
  <pre><code>interface IUserContext {
    id: string
    email: string
  }
  
  const UserContext = React.createContext&lt;IUserContext|null&gt;(null);
  
  const UserProvider: React.FC = ({ children }) =&gt; {
    const [user, setUser] = useState(initalContext);
    const [loading, setLoading] = useState(true);
  
    useEffect(() =&gt; {
      client
        .query&lt;CurrentUserQuery&gt;({
          query: currentUserQuery
        })
        .then((res) =&gt; {
          if (res.error) {
            logger(res.error);
          }
          if (res.data.me) {
            setUser(res.data.me);
            setLoading(false);
          }
        });
    });
  
    if (loading) {
      return &lt;Loading /&gt;;
    }
  
    return &lt;UserContext.Provider value={user}&gt;{children}&lt;/UserContext.Provider&gt;;
  };
  </code></pre>
  
  <p>I know that I can do something like:</p>
  
  <pre><code>const emptyUser = {
    id: '',
    email: ''
  }
  
  const UserContext = React.createContext(emptyUser);
  </code></pre>
  
  <p>But that smells really bad to me.</p>
  
  <p>Has anyone come up with a clean solution to this?</p>
  
  <p>Thanks!</p>