title: useContext across files causes circular dependencies
body: <p>I have a two components Parent and Child and I want to export a context from Parent to Child but this causes circular dependency.</p>
  <p>Consider, for example, Parent.js to be</p>
  <pre class="lang-js prettyprint-override"><code>import {Child} from './Child.js';
  
  export const MyContext = React.createContext();
  
  const Parent = () =&gt; {
      return &lt;MyContext.Provider&gt;&lt;Child /&gt;&lt;/MyContext.Provider&gt;;
  }
  
  </code></pre>
  <p>and Child.js as</p>
  <pre class="lang-js prettyprint-override"><code>import {MyContext} from 'Parent';
  
  const Child = () =&gt; {
      const myContext = useContext(MyContext);
      return &lt;&gt;{myContext}&lt;/&gt;;
  }
  </code></pre>
  <p>I can pass this as props but if there are multiple level of nesting, it would be difficult. A possible solution I can think of is using another file called <code>contexts.js</code> and have all my contexts exported from there.</p>
  <p>Is there a better way to do this?</p>