React's Most Useful Types - Matt Pocock, React Day Berlin 2023

Discover the most useful types in React, including React.FC, React.ReactNode, React.JSX.IntrinsicElements, and more. Learn how these types can help you write safer and more flexible React code.

Key takeaways
  • React.FC has changed over the years and now returns React.Node, making it safer and more flexible.

  • React.ReactNode represents all possible things that can be returned from a React component, including strings, numbers, booleans, React elements, and more.

  • React.JSX.IntrinsicElements is a global type that represents all of the native HTML elements that can be rendered into the DOM.

  • React.ComponentProps is a type helper that can be used to extract the props of a React component.

  • React.ComponentType is a type helper that can be used to represent any React component, whether it’s a function component, a class component, or a native HTML element.

  • React.jsx.Element represents a node of JSX, which can be a string, a number, a boolean, a React element, or a null or undefined value.

  • React.FC is a type alias for React.FunctionComponent, which is a function that takes props and returns a React element.

  • React.ReactElement is a type alias for JSX.Element, which represents a node of JSX.

  • React.displayName is a property that can be added to a React component to specify its display name in the React Developer Tools.

  • React.defaultProps is a property that can be added to a React component to specify its default props.