title: When to use JSX.Element vs ReactNode vs ReactElement?
body: <p>I am currently migrating a React application to TypeScript. So far, this works pretty well, but I have a problem with the return types of my <code>render</code> functions, specifically in my functional components.</p>
  <p>I have always used <code>JSX.Element</code> as the return type, now this doesn't work any more if a component decides to <em>not</em> render anything, i.e. returns <code>null</code>, since <code>null</code> is not a valid value for <code>JSX.Element</code>. This was the beginning of my journey. I searched the web and found that you should use <code>ReactNode</code> instead, which includes <code>null</code> and a few other things that can happen.</p>
  <p>However, when creating a functional component, TypeScript complains about the <code>ReactNode</code> type. Again, after some searching I found, that for functional components you should use <code>ReactElement</code> instead. However, if I do so, the compatibility issue is gone, but now TypeScript again complains about <code>null</code> not being a valid value.</p>
  <p>To cut a long story short, I have three questions:</p>
  <ol>
  <li>What is the difference between <code>JSX.Element</code>, <code>ReactNode</code> and <code>ReactElement</code>?</li>
  <li>Why do the <code>render</code> methods of class components return <code>ReactNode</code>, but functional components return <code>ReactElement</code>?</li>
  <li>How do I solve this with respect to <code>null</code>?</li>
  </ol>