0

Which way of passing props in react with typescript is considered to be a best practice. Are there any difference between the two ways of passing props, or it's only a syntax sugar.

    type Props = {name: string;}
    const MyComponent: React.FC<Props> = props => {...}
    const MyComponent = (props: Props) => {...}
Spongi
  • 501
  • 3
  • 10
  • 19
  • The former allows it to be checked _outside_ the component. – jonrsharpe Aug 08 '21 at 08:22
  • 1
    Does this answer your question? https://stackoverflow.com/questions/59988667/typescript-react-fcprops-confusion. Or maybe this blog can help. https://fettblog.eu/typescript-react-why-i-dont-use-react-fc/ – Subrato Pattanaik Aug 08 '21 at 08:41
  • 1
    You want to supply the type argument (your first example), preferably with a meaningful name. E.g.: `const MyComponent: React.FC = props => {/*...*/};` In fact, your second example gives me an error from TypeScript saying that the function isn't compatible with the type of the constant. But even if it didn't cause an error, supplying the type argument lets TypeScript correctly type-check the JSX attributes you write for the component, and lets your IDE auto-suggest them. – T.J. Crowder Aug 08 '21 at 08:56

0 Answers0