0

I am working in quite a big project that has some history and I come across different syntax when typing component.

The one existing is

const StarsContainer: React.FC<StarsContainerProps> = ({
  result,
  isQuizBegin,
}: StarsContainerProps) => {
  ...
}

I find that declaring twice the props is redundant and I think the second one can be omitted. But also am I wondering if it's not better to omit 'React.FC' which the type inference will give JSX.Element

Basically resulting in this

const StarsContainer = ({
  result,
  isQuizBegin,
}: StarsContainerProps) => {
  ...
}

Which solution is better in your opinion ?

I want to get my code simple to read while keeping type safety

Bastien
  • 1
  • 1
  • I don't see any advantages to using `React.FC` – Konrad Mar 14 '23 at 09:03
  • 1
    I personally prefer the FC variant. You can omit the type in the props. If gives you not only types to props, but also return type and properties type of the component, like propTypes, defaultProps .... But it can't be used together with TS generics – Oktay Yuzcan Mar 14 '23 at 09:04
  • @OktayYuzcan FC is deprecated. You could just use a regular function and type the props directly. – vighnesh153 Mar 14 '23 at 09:11
  • 1
    @vighnesh153 Can you give source of this information saying that it is deprecated? Using regular function does not give types to Component.propTypes, component.defaultProps, Component.displayName ... Before React 18 it was adding children type to the props and this was a disadvantage, but it does not do it anymore. – Oktay Yuzcan Mar 14 '23 at 09:15
  • Sorry for using wrong terminology. You don't need to use FC anymore because it doesn't provide much value. There are lot of posts about this. To give types to your function, you can do `function Component(props: MyPropTypes): React.ReactNode {}` https://stackoverflow.com/questions/71788254/react-18-typescript-children-fc – vighnesh153 Mar 14 '23 at 10:20
  • @vighnesh153 What about validation for Component properties (not props). The component is not only function, it is an first class object at the same time. Without FC how you can validate .defaultProps, .propTypes, ... and so on ? I see many people prefer not using FC, but I still can't get why. It gives type to 3 things: types of the props, return type of the component, types to the object function properties. I know sometimes it is impossible to use it, but if the component is a simple one, nothing wrong with using it. It cant be used with generics and sub components, something else for cons? – Oktay Yuzcan Mar 14 '23 at 10:38
  • https://react-typescript-cheatsheet.netlify.app/ – Konrad Mar 14 '23 at 11:18
  • [Default props will eventually be deprecated in favour of object default values](https://twitter.com/hswolff/status/1133759319571345408), you are using typescript and hence you probably don't need `.propTypes` property and you can directly add type to the props during function definition. You don't need to explicitly set the `displayName` because it is inferred automatically. – vighnesh153 Mar 14 '23 at 14:59
  • (Providing some links:) Can't find an official statement from react about `React.FC` being deprecated (?). Only [discussions and opinions](https://github.com/facebook/create-react-app/pull/8177). Also note that React 18 [removed `children`](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-typescript-definitions) from the type `React.FC`, which was one argument against using `React.FC`. – kca Mar 15 '23 at 18:40

0 Answers0