Typing return type of React components

user_4479585 0
Viewed 3015

This PR to Create-React-App removes React.FC as the return type for components (for the reasoning why, see the PR). Does this mean that ESlint's explicit function return type rule should no longer apply to React components? If so, how would one go about keeping ESlint happy?

eslint typescript reactjs
2 Answers

You can use React.ReactElement | null as the return type of your function components. That's what React.FC does today.

interface Props {
  children: React.ReactNode;
}

const MyComponent = ({ children }: Props): React.ReactElement => (
  <div>{children}</div>
)
user_103250320

One option is to declare your function as a ComponentType instead, which encapsulates a return type:

import { ComponentType } from 'react';

const App: ComponentType<AppProps> = () => (
  <div>Whatever</div>
);
user_1195490
Related