title: React useContext throws Invalid hook call error
body: <p>I am trying to pass a value from a context provider to a consumer using <code>useContext</code> and access the value outside of the render function.</p>
  
  <p>My provider looks like so:</p>
  
  <pre><code>export const AppContext = React.createContext();
  
  export class App extends React.Component(){
      render(){
          &lt;AppContext.Provider value={{ name: 'John' }} &gt;&lt;Main /&gt;&lt;/AppContext&gt;   
      }
  }
  </code></pre>
  
  <p>My consumer looks like so</p>
  
  <pre><code>import React, { useContext } from 'react';
  import { AppContext } from './App';
  
  export class Main extends React.Component(){
      componentDidMount(){
          const value = useContext(AppContext);
      }
      render(){
          return (
              &lt;div&gt;Main Component&lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p>The error is this:</p>
  
  <p><strong>Invalid hook call. Hooks can only be called inside of the body of a function component.</strong></p>
  
  <hr>