The new way of declaring React function components with TypeScript appears to be (option 1):
interface IProps {
bar: string;
}
const Foo: React.FC<IProps> = ({ bar }) => <div>{bar}</div>;
export default Foo;
However that uses an anonymous arrow function, which some people believe makes debugging more difficult.
Option 2 would be:
export default function Foo({ bar }: IProps): JSX.Element {
return <div>{bar}</div>;
}
Option 3 is very verbose, but does include the "official" type:
function InternalFoo({ bar }: IProps): JSX.Element {
return <div>{bar}</div>;
}
const Foo: React.FC<IProps> = InternalFoo;
export default Foo;
There may be other options as well.
What is the idiomatic / preferred option and why?
function
set the display name on React components but anonymous arrow functions did not. – TrueWill Jul 10 at 16:49MyFunc.displayName = 'MyFunc'
so I still don't see it as a huge issue. – James Jul 10 at 17:00