Sometimes, we want to fix the ‘React.SFC is now deprecated’ warning with React and TypeScript.

In this article, we’ll look at how to fix the ‘React.SFC is now deprecated’ warning with React and TypeScript.

How to fix the ‘React.SFC is now deprecated’ warning with React and TypeScript?

To fix the ‘React.SFC is now deprecated’ warning with React and TypeScript, we should replace with React.FunctionComponent or React.FC.

For instance, we write

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

to create the Example component of type React.FunctionComponent<IExample> where IExample is an interface with the props’ types.

We can shorten that to

const Example: React.FC<IExample> = ({ propsType }) => {
  //...
};

Conclusion

To fix the ‘React.SFC is now deprecated’ warning with React and TypeScript, we should replace with React.FunctionComponent or React.FC.