CODEWITHSUNDEEP
reactjstypescripteslint
Jefferson
Jefferson

Reputation: 451

Typing return type of React components

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?

Upvotes: 7

Views: 5912

Answers (2)

Karol Majewski
Karol Majewski

Reputation: 25790

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>
)

Upvotes: 11

Jacob
Jacob

Reputation: 78850

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>
);

Upvotes: 0

Related Questions