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

Learn about React's most useful types, including JSX IntrinsicElements, ComponentProps, FC, Node, and JSX Element, and how to use them to improve your React coding experience.

Key takeaways
  • React’s most useful types are React.JSX.IntrinsicElements and React.ComponentProps.
  • React.JSX.IntrinsicElements is a global type that exposes all the possible elements that can be rendered to the DOM.
  • React.ComponentProps is a type helper that extracts the props from a native element.
  • React.FC (Functional Component) is a type that represents a functional component, and is a good way to type a component if you want to use it as a function.
  • React.ReactNode is the type that represents any React node, including strings, numbers, booleans, and React elements.
  • React.JSX.Element is the type that represents a JSX element, but it’s not as useful as React.ReactNode.
  • The .ReactJSX.IntrinsicElements type is useful when you need to extract the props from a native element, and is a good alternative to using React.FC.
  • The React.ComponentProps type is useful when you need to type a component’s props, and is a good alternative to using React.FC.
  • React.FC is no longer as useful as it used to be, because it used to implicitly add children to the component, but now it’s more explicit.
  • The React team oversees the types, and there are members of the team who focus specifically on types and making sure they are correct.
  • Types are part of your API, and it’s important to think about types as features that are part of your API.
  • The React.ReactNode type is a union of all the possible types that can be rendered to the DOM, and is a good type to use when you want to represent any React node.
  • The React.JSX.IntrinsicElements type is a global type that exposes all the possible elements that can be rendered to the DOM, and is a good type to use when you need to extract props from a native element.