0

I am writing codes for a react component with typescript. I an really curious how a generic type right beside React.FC work exactly. With or without the generic type with React.FC, the results seem pretty much the same to me.

Here are the codes.

    // With a generic type //

    import React, { FC } from 'react'
    import { WeatherData } from '../store/types'

    interface WeatherProps {
        data: WeatherData
    }

    const Weather: FC<WeatherProps> = ({ data }) => {
        return (
        . . . some codes
        )
    }

    // Without a generic type //
    
    import React from 'react'
    import { WeatherData } from '../store/types'

    interface WeatherProps {
        data: WeatherData
    }

    const Weather = ({ data }: WeatherProps) => {
        return (
        . . . some codes
        )
    }
Justin M
  • 177
  • 1
  • 3
  • 11
  • 2
    They're pretty much the same thing. I'd suggest staying away from React.FC as it has limited benefit and a couple of downsides. See this answer https://stackoverflow.com/a/59991281/2310450 and this MR removing React.FC from the CRA example https://github.com/facebook/create-react-app/pull/8177 – mbdavis Oct 12 '20 at 12:29
  • @mbdavis Thank you for your kind comment. It's helpful. – Justin M Oct 12 '20 at 15:49
  • The primary difference is that FC adds “children” to the props, so you could destructure children in the first example but not the second. But if you wanted to access children through the second way, you could replace WeatherProps with PropsWithChildren. – Linda Paiste Oct 12 '20 at 16:23

0 Answers0