title: Error when trying to use useRef on a page
body: <p>I want to use useRef() and componentDidMount() to autofocus an input field on a page. Here's the page code:</p>
  <pre><code>import React, { Component, useState, useEffect } from &quot;react&quot;;
  import styles from '../..//styles/Home.module.css'
  
  
  interface Props {
  }
  
  class Test extends Component&lt;Props&gt;  {
    nameRef = React.useRef&lt;HTMLInputElement&gt;(null);
  
    componentDidMount() {
      this.nameRef.current!.focus();
    }
  
    render() {
      return (
        &lt;main className={styles.main}&gt;
          &lt;form action=&quot;/account/sign-up&quot; method=&quot;post&quot;&gt;
            &lt;label htmlFor=&quot;last&quot;&gt;Name:&lt;/label&gt;
            &lt;input type=&quot;text&quot; id=&quot;name&quot; name=&quot;name&quot; required ref={this.nameRef} /&gt;
            &lt;label htmlFor=&quot;first&quot;&gt;Email address:&lt;/label&gt;
            &lt;input type=&quot;text&quot; id=&quot;email&quot; name=&quot;email&quot; required /&gt;
            &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
          &lt;/form&gt;
        &lt;/main&gt;
      )
    }
  
  }
  
  export default Test
  
  </code></pre>
  <p>However I get an error at runtime: <code>Error: Invalid hook call. Hooks can only be called inside of the body of a function component.</code> This error is at the <code>nameRef = React.useRef..</code> line.</p>