78

I use to declare stateless components like this:

const example: React.SFC<IExample> = ({propsType}) => ();

However the SFC is now deprecated, maybe this twitter post from Dan Abramov explains why.

What should we use now that SFC is deprecated?

Ian Kemp
  • 28,293
  • 19
  • 112
  • 138
Jonas Praem
  • 2,296
  • 5
  • 32
  • 53
  • 3
    Funnily enough, `SFC` is deprecated but `StatelessComponent` isn't. However, as @Doğancan Arabacı said, `FunctionComponent` should be used. – Dan Dec 21 '18 at 14:03

2 Answers2

121

You should use React.FunctionComponent: Rename React's SFC to 'FunctionalComponent

This PR renames React.SFC and React.StatelessComponent to React.FunctionComponent, while introducing deprecated aliases for the old names.

So your example would become:

const example: React.FunctionComponent<IExample> = ({propsType}) => ();

or

const example: React.FC<IExample> = ({propsType}) => ();
L. F.
  • 19,445
  • 8
  • 48
  • 82
Doğancan Arabacı
  • 3,934
  • 2
  • 17
  • 25
11

I'd say the accepted answer isn't up-to-date any more.

React.FunctionComponent has certain drawbacks, as explained by the folks at create-react-app. Their reasoning is pretty convincing, and I stopped using FC entirely.

Better alternative:

const example = ({ propsType }: IExample): JSX.Element => ();
panepeter
  • 3,224
  • 1
  • 29
  • 41
  • Both yes and no. While you probably are correct, the question is about React 16.7. I don't know the guidelines to change the title because future iterations has changed once again. – Jonas Praem Sep 01 '21 at 10:42
  • I've only started using react fairy recently, so I might be missing something here. But in my understanding the `FunctionComponent` type has been flawed from the very beginning. Implicit `children` are not a problem of newer react versions, or are they? – panepeter Sep 02 '21 at 06:01
  • No I agree very much with the problems stated in the linked PR. Very hard to do generic typing. This was at the time the typescript supported way of doing things in React 16.7 according to the docs. Remember that this was before hooks (16.8) - so you could only use SFC/FC etc. when you didn't need states, sideeffects or anything else. Primarily used for visual components only. – Jonas Praem Sep 02 '21 at 11:12