Avatar ·

When to use JSX.Element, ReactNode and ReactElement in TypeScript with React?

Hi! I started learning TypeScript with React and I'm constantly confused about the types for describing what can be returned from a component or passed as children. I often come across three types on the internet: `JSX.Element`, `ReactNode` and `ReactElement`. But when to use which — is a mystery to me. For example, I'm writing a wrapper component: ```typescript interface WrapperProps { children: ??? // What to put here? } ``` Or when I want to explicitly specify the return type of a component function: ```typescript const MyComponent = (): ??? => { return
Hello
; }; ``` I tried using `ReactNode`, but then TypeScript complains when I try to pass something like an array of components. Then I tried `JSX.Element` — it seems to work, but I'm not sure if it's correct. And p