2

I'm having trouble following the current views on the best practice for typing functional React Native components in TypeScript. I find many posts and threads that seem to start with one view and then over time drift to another, without clear consensus.

Is there a current view on this? For example are any of the following preferred, or something else entirely?

// Version ONE (makes most "sense" to me)
const MyComponent = (props: MyComponentProps): JSX.Element => {
    return ( 
        //... some JSX
    )
}

// Version TWO (makes props a PropsWithChildren<MyComponentProps>?)
const MyComponent: FC<MyComponentProps> = (props) => {
    return (
        //... some JSX
    )
}

// Version THREE (what I have in older examples I've done, but I don't know why)
const MyComponent: FC<MyComponentProps> = (props): ReactElement => {
    return (
        //... some JSX
    )
}
orome
  • 45,163
  • 57
  • 202
  • 418
  • Check https://stackoverflow.com/questions/59988667/typescript-react-fcprops-confusion and https://stackoverflow.com/questions/58656026/what-is-the-difference-between-react-fc-and-jsx-element and https://github.com/facebook/create-react-app/pull/8177 – tokland Apr 23 '22 at 15:53
  • 1
    @tokland Like I said: old questions. What's considered _current_? [Abe's answer](https://stackoverflow.com/a/71981410/656912) below seems to disagree with the consensus of these links (that the first is preferred, and that the second is actually bad.) – orome Apr 23 '22 at 20:58

1 Answers1

-1

The most recent React Native template has had React.FC removed entirely. The recommended method in the new template is given as

const SometimesFancyButton = ({text, fancy}: SometimesFancyButtonProps) => {
    return fancy ? (<span className="fancy">{text}</span>) : text;
};

I.e. typing props but not the component return type, as an undefined component won't compile when imported (is how I interpreted the change). See discussion thread link thanks to @Benjamin

https://github.com/facebook/create-react-app/pull/8177

// Original (deprecated) answer below for context on comments

Version two is the most explicit and succinct. It tells Typescript that it expects certain props and returns a functional component, in one statement.

All three are valid and have no big downsides. Version one matches both functional and class components, so that's slightly less specific. Version three is redundant: since the component has already been typed, the return type on the function is unnecessary.

TL;DR: I prefer version two, but all are fine.

Abe
  • 4,500
  • 2
  • 11
  • 25
  • 1
    I had been using version two but was under the impression that FC was out of favor and had even been removed from project templates. – orome Apr 23 '22 at 18:06
  • Also whatever these things are, they're not really functions (in the sense of Haskell or Flix) they are "functions" that take props as arguments and return (I think) a JSX.Element, which the first seems to capture best. I'm not really sure whether ReactElement is a better description of what's returned though. – orome Apr 23 '22 at 21:01
  • @orome is correct, do not use React.FC in modern react apps. https://github.com/facebook/create-react-app/pull/8177 – Benjamin Apr 14 '23 at 14:49