How should I declare a Stateless Functional Component with Typescript in React?

react typescript
react typescript default props functional component
react functional components
react.function component typescript
typescript react functional component 2019
react.component type
typescript react component as prop
react typescript setstate

I've seen two ways of declaring a SFC in React with Typescript, which are these two:

import * as React from 'react'

interface Props {
  message: string
}

const Component = (props: Props) => {
  const { message } = props
  return (
    <div>{message}</div>
  )
}

export default Component

and:

import * as React from 'react'

interface Props {
  message: string
}

const Component: React.StatelessComponent<Props> = props => {
  const { message } = props
  return (
    <div>{message}</div>
  )
}

export default Component

From this question I see that with the second way you can omit children from your interface if you are using it in your component.

Are there any more differences? Which one is the preferred one and why?

Looks like React.SFC and React.StatelessComponent are deprecated.

Use React.FunctionComponent instead:

import * as React from 'react'

interface IProps {
  text: string
}

export const MyComponent: React.FunctionComponent<IProps> = ({ text }: IProps): JSX.Element =>
<div>{text}</div>

Technically the name doesn't imply the same thing though, as Dan Abramov summed up nicely

EDIT: Note it's often aliased as React.FC<> now.

React Stateless Functional Component with TypeScript, Use React Stateless Functional Component when you don't need to manage states in a component. TypeScript supports SFC type that is the alias of StatelessComponent interface. How to Declare a Stateless Functional Component in TypeScript. One way to declare a Stateless Functional Component in React is to create a function that takes a Props like below: 1 2 3 4 5 export function Example(Props: ExampleProps) { return ( <div /> ) } tsx.

The definition for React.StatelessComponent<T> is:

interface StatelessComponent<P> {
    (props: P & { children?: ReactNode }, context?: any): ReactElement<any>;
    propTypes?: ValidationMap<P>;
    contextTypes?: ValidationMap<any>;
    defaultProps?: Partial<P>;
    displayName?: string;
}

In your for snippet Component is inferred by the compiler to be:

(props: Props): ReactElement<any>

(or something similar).

If you write the first one like this:

const Component = (props: Props & { children?: ReactNode }) => {
    ...
}

You are pretty much getting the same thing (as long as you don't use the properties of Component)

How should I declare a Stateless Functional Component with , Looks like React.SFC and React.StatelessComponent are deprecated. Use React.FunctionComponent instead: import * as React from 'react'  React with TypeScript is a robust solution for web application developers almost without exception. By using SFC, You can build stateless components clearly without writing Class.

When you declare that const Component: React.StatelessComponent<Props> You basically declaring what this function gets, and what it returns:

interface StatelessComponent<P> { (props: P ... ): ReactElement<any>;

So for readability, I would actually do:

const Component = (props: Props): JSX.Element => {

Because here the developer that looks into this code don't need to know what is the interface of StatelessComponent - he can just read what goes in and what goes out.

And basically, it is all a big:

const Component: React.StatelessComponent<Props> = (props: IProps): JSX.Element =>

TypeScript and React: Components, Components are at the heart of React. Let's see what we can do to get better error handling and tooling for them! In this section: Functional components; Stateful  Voilà. Adding the "React.StatelessComponent<{}>" type suffices to make the compiler understand the passed object, because the resulting parameter type becomes: {} & { children?: ReactNode; } (Remember, you have to add “@types/react” to your devDependencies in order to have access to React's type definitions.)

UPDATE: read the final part for React Hooks update

The preferred one is React.SFC (Before React 16.7):

import * as React from 'react'

interface Props {
  message: string
}

const MyComponent: React.SFC<Props> = props => {
  const { message } = props
  return (
    <div>{message}</div>
  )
}

export default MyComponent

Why?

SFC stands for Stateless Functional Component.

About your 1st examle, given it was done "manually" it has some problems. For example, it cannot point to props.children, because it wasn't defined in your interface. You don't have this problem with React.SFC.

(Note that Stateless Functional Component, Functional Component and Stateless Component seem to mean the same but actually are 3 different things (Functional Components vs. Stateless Functional Components vs. Stateless Components)

Given you're looking for a Stateless Functional Component, React.SFC is exactly the way to go. Other options may not be functional or may not be stateles, or may not fulfill a correct Component interface (like your manual example).

EDIT: Update since React Hooks arrived:

Since React hooks arrived, function components can also have internal state, so the disctintion is smaller now. The preferred way for function components (state or stateless) now is React.FunctionComponent

const MyComponent: React.FunctionComponent<Props> = props => {
  // ... Same as above
}

Cheers, from La Paz, Bolivia.

Using React Functional Components with Hooks in TypeScript, Using TypeScript with React's class components comes naturally as you simply due to the default value, even if we do define it as the union type ' SomeType  So the question is how should we use children in a stateless functional component in TypeScript? I could go back to the old way of MyProps extends React.Props , but the Props interface is marked as deprecated , and stateless components don't have or support a Props.ref as I understand it.

React: Class Component vs Functional Component, makes sure the signature of our function is correct and the return value is valid JSX. A React component can be declared either as a function or as a class. A functional component is implemented as a function and is structured as shown below (types are omitted). const MyComponent = (props) => { // 1 // other functions may go here return (<div></div> // 2) } export default MyComponent;

Functional vs Class-Components in React - David Jöch, These components are sometimes referred to as functional stateless We define a function component using an arrow function, passing the props type in as a  Stateful and Stateless Components in React Stateful and Stateless Components. Today, we’re going to review what stateful and stateless components are in React, how you can tell the difference, and the complex process of deciding whether to make components stateful or not. State Review. First, let’s review what state is.

Why and How to use TypeScript in your React App?, Luckily, TypeScript makes it easy to define type annotations for JavaScript libraries, Stateful Components can (and should) derive from React. React Function Components -- also known as React Functional Components -- are the status quo of writing modern React applications. In the past, there have been various React Component Types, but with the introduction of React Hooks it's possible to write your entire application with just functions as React components.

Comments
  • So, it seems that if I need to access the properties of the component or it's children the more convenient way is to use StatelessComponent and if not It's up to me to decide which one feels better, right? Also, correct me if I'm wrong, if I'm using React.StatelessComponent I don't have to explicitly put the return type.
  • You're free to use StatelessComponent, it only makes a difference if you need to access the properties of it later on. The resulting js will be the same regardless of what you do, so there's no "better solution" here. And you haven't explicitly declared the return type in both cases
  • True, I forgot about the return type. However, wouldn't in your example be as follows: const Component: React.StatelessComponent<IProps> = props): JSX.Element =>, as you already declare in the interface the props of the StatelessComponent? Also, is the return type necessary if using React.StatelessComponent?
  • I don't get the const Component: React.StatelessComponent<IProps> = props): JSX.Element => question, sorry. As for the second question - it is not necessary but it might be helpful for the next developer to know what goes out, without the need to go into React.StatelessComponent declaration and check it. (well, in these global React functions it is already known, but, best practices ect...).
  • You are redeclaring twice the props of the component. Once here React.StatelessComponent<Props> and another time here: (props: IProps). Isn't declared the return type in React.StatelessComponent? You can see it here
  • React.SFC is deprecated, the new type is React.FunctionComponent<props>