Is a stateless functional component the same as a stateless component?


#1

Question

In the context of this exercise, is a stateless functional component the same as a stateless component?

Answer

Although similar in some aspects, a stateless functional component is not the same as a stateless component. Some of the differences are as follows:

A stateless functional component can be seen just as a function which returns JSX based on the prop values that are passed to it. It is not a class and does not extend the React.Component class. It also has no state.

The general structure typically looks like the following

const Example = (props) => {
  return ...
}

A stateless component is a class and extends the React.Component class. It has no state and no life-cycle unlike regular stateful components. These are typically used by a parent component for rendering something, like text or information, without the need for it to perform any actions.

The general structure is similar to a regular stateful component, but usually just has a render() method,

class Example extends React.Component {
  render() {
    return ...
  }
}

FAQ: Stateless Functional Components - Stateless Functional Components