title: useContext doesn't work when in same file
body: <p>So not sure if this is exactly the problem, but wondering why this is happening when using contexts in the same file vs different files.</p>
  <p>So here is the constant:</p>
  <h3>StartupContext.js</h3>
  <pre><code>import React from &quot;react&quot;;
  
  export const StartupContext = React.createContext()
  
  export const StartupProvider = ({ something, children }) =&gt; {
      return (
          &lt;StartupContext.Provider value={{ something }}&gt;
              {children}
          &lt;/StartupContext.Provider&gt;
      )
  }
  </code></pre>
  <p>No problems there. But when I run this:</p>
  <h3>App.js</h3>
  <pre><code>function Root() {
    const { something } = useContext(StartupContext);
  
    return (
      &lt;Text&gt;Root {something}&lt;/Text&gt;
    )
  }
  
  export default function App() {
    const [something, setSomething] = useState(&quot;ayyyy&quot;)
  
    return (
      &lt;StartupProvider something={something}&gt;
        &lt;Root /&gt;
      &lt;/StartupProvider&gt;
    );
  }
  </code></pre>
  <p>I'll get this error:</p>
  <blockquote>
  <p>TypeError: undefined is not an object (evaluating 'Context._context')</p>
  </blockquote>
  <p><strong>BUT</strong></p>
  <p>If I split into two files</p>
  <h3>App.js</h3>
  <pre><code>import { Root } from &quot;./Root&quot;;
  
  export default function App() {
    const [something, setSomething] = useState(&quot;ayyyy&quot;)
  
    return (
      &lt;StartupProvider something={something}&gt;
        &lt;Root /&gt;
      &lt;/StartupProvider&gt;
    );
  }
  </code></pre>
  <h3>Root.js</h3>
  <pre><code>export default function Root() {
    const { something } = useContext(StartupContext);
  
    return (
      &lt;Text&gt;Root {something}&lt;/Text&gt;
    )
  }
  </code></pre>
  <p>It will work just fine. Why is this happening?</p>