title: useContext only works in stateless functional component
body: <p>I'm trying to get to grips with the new <code>useContext</code> function in React. Works great in stateless functionality components. For example:</p>
  <pre><code>import React from 'react';
  import LocaleContext from '../LocaleContext';
  
  const Link = ({ text, url }) =&gt; {
    const locale = useContext(LocaleContext);
  
    return (
      &lt;a href={`/${locale}/${url}`}&gt;
        {text}
      &lt;/a&gt;
    );
  };
  
  export default Link;
  </code></pre>
  <p>I also want to use <code>useContext</code> in stateful components, and even non React functions, but when I do so, I get the following error:</p>
  <p><code>Hooks can only be called inside the body of a function component.</code></p>
  <p>The message seems simple enough to understand, but is this really true? I can only use it in a stateless functional component? If so, it seems kind of pointless to me, because it's super easy to use a simple HOC or the traditional method of:</p>
  <pre><code>&lt;Locale Consumer&gt;
    {locale =&gt; (
      ...
    )}
  &lt;/LocaleConsumer&gt;
  </code></pre>
  <p>So what gives here? I have the latest version of every package in my project. Not sure if it matters but I'm developing a NextJS site here.</p>