Menu
What is the difference between React.FunctionComponent and React.SFC. I'm new To typescript, and actually I don't know when to use one over the other. for example when using react hooks should I use only React.FunctionComponent, because I use some sort of state inside my component.
632
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.
FunctionComponent provides an implicit definition of children . This means that when you type your component with React. FC , the component automatically accepts children provided to your component. It will not throw any typescript error, but it actually should, because the children do nothing.
Class ComponentsA functional component is just a plain JavaScript pure function that accepts props as an argument and returns a React element(JSX). A class component requires you to extend from React. Component and create a render function which returns a React element.
Props are used to pass data from one component to another. The state is a local data storage that is local to the component only and cannot be passed to other components. The this. setState property is used to update the state values in the component.
React.SFC (which stands for stateless function component) is an alias for React.FunctionComponent.
It was deprecated because functional components aren't stateless since React 16.8.
153
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
