Preferred TypeScript signatures for functional components in ReactNative?

Question

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

Check stackoverflow.com/questions/59988667/… and stackoverflow.com/questions/58656026/… and github.com/facebook/create-react-app/pull/8177 — tokland
– tokland, Commented Apr 23, 2022 at 15:53
@tokland Like I said: old questions. What's considered current? Abe's answer below seems to disagree with the consensus of these links (that the first is preferred, and that the second is actually bad.) — orome
– orome, Commented Apr 23, 2022 at 20:58

Abe · Accepted Answer · 2023-04-15 18:15:32Z

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

edited Apr 15, 2023 at 18:15

answered Apr 23, 2022 at 16:07

Abe

5,6082 gold badges17 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

orome Over a year ago

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 Over a year ago

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.

Benjamin Over a year ago

@orome is correct, do not use React.FC in modern react apps. github.com/facebook/create-react-app/pull/8177

Collectives™ on Stack Overflow

Preferred TypeScript signatures for functional components in ReactNative?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related