Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React 16.7 - React.SFC is now deprecated

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?

like image 348
Jonas Praem Avatar asked Dec 21 '18 13:12

Jonas Praem


People also ask

Is react FC deprecated?

From the sounds of things, it will eventually be deprecated in favor of the naming React. FunctionComponent once React 18 is released.

What is SFC in react?

The SFC (short for stateless functional component) defines a function type that returns a JSX Element. Use the React.ReactChild return type if you want to allow other renderable elements, like strings or numbers. // This is not allowed const MyComponent: React.

Does react have single file components?

May 2021 edit: the Remix framework from the React Router duo also adopt a single file component format that involves exporting links , loader , and action . The launch of RedwoodJS today marks a first: it is the first time React components are being expressed in a single file format with explicit conventions.

How do you make a stateless component in react?

A functional(a.k.a. stateless) component is just a plain javascript function which takes props as an argument and returns a react element. const MyStatelessComponent = props => React. createElement('div', null, props.name);


1 Answers

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}) => (); 
like image 79
Doğancan Arabacı Avatar answered Sep 18 '22 09:09

Doğancan Arabacı