title: Typing function components with names
body: <p>The new way of declaring React function components with TypeScript appears to be (option 1):</p>
  
  <pre><code>interface IProps {
    bar: string;
  }
  
  const Foo: React.FC&lt;IProps&gt; = ({ bar }) =&gt; &lt;div&gt;{bar}&lt;/div&gt;;
  
  export default Foo;
  </code></pre>
  
  <p>However that uses an anonymous arrow function, which some people believe makes debugging more difficult.</p>
  
  <p>Option 2 would be:</p>
  
  <pre><code>export default function Foo({ bar }: IProps): JSX.Element {
    return &lt;div&gt;{bar}&lt;/div&gt;;
  }
  </code></pre>
  
  <p>Option 3 is very verbose, but does include the "official" type:</p>
  
  <pre><code>function InternalFoo({ bar }: IProps): JSX.Element {
    return &lt;div&gt;{bar}&lt;/div&gt;;
  }
  
  const Foo: React.FC&lt;IProps&gt; = InternalFoo;
  
  export default Foo;
  </code></pre>
  
  <p>There may be other options as well.</p>
  
  <p>What is the idiomatic / preferred option and why?</p>