React 16.7 - React.SFC is now deprecated

ReactjsTypescriptDeprecatedDeprecation Warning

Reactjs Problem Overview


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?

Reactjs Solutions


Solution 1 - Reactjs

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}) => ();

Solution 2 - Reactjs

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 => ();

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJonas PraemView Question on Stackoverflow
Solution 1 - ReactjsDoğancan ArabacıView Answer on Stackoverflow
Solution 2 - ReactjspanepeterView Answer on Stackoverflow