Skip to content

use React.FC<Props> in tsrafc #175

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
SarthakC opened this issue Apr 4, 2021 · 8 comments
Closed

use React.FC<Props> in tsrafc #175

SarthakC opened this issue Apr 4, 2021 · 8 comments

Comments

@SarthakC
Copy link

SarthakC commented Apr 4, 2021

tsrafc generates

import React from 'react'

interface Props {
    
}

export const Component = (props: Props) => {
    return (
        <div>
            
        </div>
    )
}

a more "React" way of doing things would be generating something like

import React from 'react'

interface Props {
    
}

export const Component:React.FC<Props> = (props) => {
    return (
        <div>
            
        </div>
    )
}
@andrewphamvk
Copy link

andrewphamvk commented Apr 11, 2021

I prefer the current template because it's more aligned with the functional programming style React is evolving towards. Inheritance is an OOP concept. If anything, the interface should be turned into a simple type.

EDIT: Looks like there is already an issue mentioning this #157

@DanielBailey-web
Copy link

DanielBailey-web commented May 1, 2021

I like the suggested change specifically because it makes it so you no longer have to declare children as a prop... I would also support just having children being added into the interface "Props" as optional by default...

For react 17; however, _tsrafc should probably be a named import of FC... And for earlier versions it wouldn't hurt having it be a named import either I guess...

import { FC } from 'react';

interface Props {
    
}

export const Component:FC<Props> = (props) => {
    return (
        <div>
            
        </div>
    )
}

@OlekRia
Copy link

OlekRia commented Jun 23, 2021

Why not:

import React from 'react';

interface Props {
    
}

export const Component = (props: Props): JSX.Element => {
    return (
        <div>
            
        </div>
    )
}

Anyway a return type is important. ESLint/TSLint/etc often fall into hysteria without it :)

@jraut
Copy link

jraut commented Oct 9, 2021

I am heavily in favour of this PR. React.FC is the most reasonable typing.

Additionally, I would suggest naming Props as Component and making those two (the interface and the component name) being in the same highlight/tab group. They should receive the same name for all purposes.

@raulmarindev
Copy link

The use of React.FC is currently discouraged facebook/create-react-app#8177

@ice-chillios
Copy link

@raulmarindev thanks for pointing out the issue. I'm closing this one in favour of leaving Props but making it possible to change interface and type in those.

@jraut
Copy link

jraut commented Oct 13, 2021

This is unfortunate.

The reasoning for facebook/create-react-app#8177 has some shortcomings. I'll get back to this shortly.

@jraut
Copy link

jraut commented Oct 13, 2021

"I would suggest naming Props as Component and making those two (the interface and the component name) being in the same highlight/tab group. They should receive the same name for all purposes."

interface DisplayComponent { value: string }
const DisplayComponent: React.FC<DisplayComponent> = ({ value }) => {...}

Makes working with types easier. There are no cases where DisplayComponent the component/implementation and DisplayComponent the interface could be confused. They have 0% overlap in technical sense and should have 100% overlap in the semantic sense.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging a pull request may close this issue.

7 participants