Video: React's Most Useful Types

The video explores various React types, focusing on the differences between React.FC and JSX.Element. React.FC, or React.FunctionComponent, is a utility type for defining functional components, ensuring they return JSX and support props. In contrast, JSX.Element is specifically for JSX nodes. React.FC vs JSX.Element is discussed to highlight that React.FC now returns ReactNode, allowing more flexibility in what can be returned. ReactNode encompasses all possible return types from a React component, including strings and numbers, unlike JSX.Element, which is limited to JSX nodes. The talk also delves into React.ComponentType, which is useful for handling both class and function components, providing flexibility in assigning component types. React.ElementType is another focus, ensuring compatibility with native tags and props. The video also covers React.JSX.IntrinsicElements, which provide a comprehensive record of DOM elements and their props, enhancing the developer experience. By using React.ElementRef, developers can determine the correct ref type for components, especially third-party ones, avoiding errors.

This talk has been presented at React Day Berlin 2023, check out the latest edition of this React Conference.