Skip to main content

Basic React Types

The choice of which type definitions to use in your React + TypeScript project often depends on your specific needs, but there are some general recommendations and community preferences.

My Recommendation​

Functional components​

Consider avoiding React.FC if you don't require its additional properties like displayName and propTypes. Directly typing your function's props is more explicit and flexible.

Class components​

Continue using React.Component<Props, State> for full benefits of TypeScript features.

Higher-Order components​

Use React.ComponentType when you want to be agnostic to the kind of component being passed.

Childrencomponents​

Use React.ReactNode for typing children when you want to allow a broad range of JSX elements, text, arrays, and fragments.

Community Agreement​

Functional Components​

There's a trend in the React community towards using functional components due to their simplicity and support for hooks. The use of React.FC or React.FunctionComponent was popular initially but has seen some debate. Some developers have moved away from React.FC due to its implicit children typing and other limitations. Instead, they opt for direct prop typing.

Instead of using React.FC!
const MyComponent: React.FC<MyProps> = (props) => {
  /* ... */
};
Directly type props
const MyComponent = (props: MyProps) => {
  /* ... */
};

Class Components​

For class components, React.Component<Props, State> is the standard and provides strong type checking out of the box.

class MyComponent extends React.Component<MyProps, MyState> {
  /* ... */
}

Higher-Order Components and Library Integrations​

When you're unsure whether a passed component will be a class or functional component, or when you're writing higher-order components, React.ComponentType is generally recommended.

const withFoo = (Component: React.ComponentType<Props>) => {
  /* ... */
};

Children Prop​

If your component accepts children, and you're not using React.FC (which includes it automatically), React.ReactNode is often recommended for typing the children prop due to its flexibility.

interface MyProps {
  children: React.ReactNode;
}

JSX Elements​

When you're dealing with JSX elements directly, it's common to use React.ReactElement or React.ReactElement[] for arrays of JSX elements.

const element: React.ReactElement = <div>Hello</div>;