<p dir="auto">As an exercise, I am currently transforming some class components into FunctionComponent, using the new hook style. But I faced a strange problem: class components can render undefined (and so, will not display anything), stateless function components can render undefined, but if we need the new FunctionComponent to render nothing, it can only return null, and not undefined (same for RefForwardingComponent).</p>
<p dir="auto">I think this is a bug, and it will be annoying as my policy (and I know it is the same in many companies) is to avoid usage of null, and prefer undefined.</p>
<p dir="auto">The correction is trivial, so if you confirm this is an issue, I can make a PR.</p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I tried using the <code class="notranslate">@types/react</code> package and had problems.</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I tried using the latest stable version of tsc. <a href="https://www.npmjs.com/package/typescript" rel="nofollow">https://www.npmjs.com/package/typescript</a></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have a question that is inappropriate for <a href="https://stackoverflow.com/" rel="nofollow">StackOverflow</a>.  (Please ask any appropriate questions there).</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <a href="https://github.com/blog/821-mention-somebody-they-re-notified">Mention</a> the authors (see <code class="notranslate">Definitions by:</code> in <code class="notranslate">index.d.ts</code>) so they can respond.
<ul dir="auto">
<li>Authors: <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/eps1lon">@eps1lon</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Jessidhia/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Jessidhia">@Jessidhia</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/johnnyreilly/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/johnnyreilly">@johnnyreilly</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/threepointone/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/threepointone">@threepointone</a> (sorry did not retrieved all authors' git name)</li>
</ul>
</li>
</ul>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I tried using the <code class="notranslate">@types/xxxx</code> package and had problems.</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I tried using the latest stable version of tsc. <a href="https://www.npmjs.com/package/typescript" rel="nofollow">https://www.npmjs.com/package/typescript</a></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have a question that is inappropriate for <a href="https://stackoverflow.com/" rel="nofollow">StackOverflow</a>.  (Please ask any appropriate questions there).</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <a href="https://github.com/blog/821-mention-somebody-they-re-notified">Mention</a> the authors (see <code class="notranslate">Definitions by:</code> in <code class="notranslate">index.d.ts</code>) so they can respond.
<ul dir="auto">
<li>Authors: <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gaspard/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/gaspard">@gaspard</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/vbfox/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/vbfox">@vbfox</a></li>
</ul>
</li>
</ul>
<p dir="auto">As mentioned in <a href="https://facebook.github.io/react/docs/conditional-rendering.html#inline-if-with-logical--operator" rel="nofollow">React documentation</a>, a stateless component can return <code class="notranslate">false</code> for empty content. Currently <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L312-L313">StatelessComponent</a> is defined as:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="interface StatelessComponent&lt;P = {}&gt; {
        (props: P &amp; { children?: ReactNode }, context?: any): ReactElement&lt;any&gt; | null;"><pre class="notranslate"><span class="pl-k">interface</span> <span class="pl-smi">StatelessComponent</span><span class="pl-c1">&lt;</span><span class="pl-smi">P</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span> <span class="pl-kos">{</span>
        <span class="pl-kos">(</span><span class="pl-s1">props</span>: <span class="pl-smi">P</span> <span class="pl-c1">&amp;</span> <span class="pl-kos">{</span> <span class="pl-c1">children</span>?: <span class="pl-smi">ReactNode</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-s1">context</span>?: <span class="pl-smi">any</span><span class="pl-kos">)</span>: <span class="pl-smi">ReactElement</span><span class="pl-kos">&lt;</span><span class="pl-smi">any</span><span class="pl-kos">&gt;</span> <span class="pl-c1">|</span> <span class="pl-c1">null</span><span class="pl-kos">;</span><span class="pl-kos"></span></pre></div>
<p dir="auto">whereas <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L270-L280">Component</a> has</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class Component&lt;P, S&gt; {
        constructor(props?: P, context?: any);
        // ...snip...
        render(): JSX.Element | null | false;"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-smi">Component</span><span class="pl-c1">&lt;</span><span class="pl-smi">P</span><span class="pl-kos">,</span> <span class="pl-smi">S</span><span class="pl-c1">&gt;</span> <span class="pl-kos">{</span>
        <span class="pl-c1">constructor</span><span class="pl-kos">(</span><span class="pl-s1">props</span>?: <span class="pl-smi">P</span><span class="pl-kos">,</span> <span class="pl-s1">context</span>?: <span class="pl-smi">any</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-c">// ...snip...</span>
        <span class="pl-c1">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span>: <span class="pl-smi">JSX</span><span class="pl-kos">.</span><span class="pl-smi">Element</span> <span class="pl-c1">|</span> <span class="pl-c1">null</span> <span class="pl-c1">|</span> <span class="pl-c1">false</span><span class="pl-kos">;</span><span class="pl-kos"></span></pre></div>
<p dir="auto">Shouldn't these types be the same (including eliminating the ReactElement vs JSX.Element difference)? And to avoid future such issues (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="201343233" data-permission-text="Title is private" data-url="https://github.com/DefinitelyTyped/DefinitelyTyped/issues/14064" data-hovercard-type="issue" data-hovercard-url="/DefinitelyTyped/DefinitelyTyped/issues/14064/hovercard" href="https://github.com/DefinitelyTyped/DefinitelyTyped/issues/14064">#14064</a>, this one) it should probably be a named type, e.g. RenderResult.</p>
<p dir="auto">A search for <code class="notranslate">| null</code> also comes up with <code class="notranslate">ComponentSpec.render</code> which probably should also have the same result type.</p>