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


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


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 ...

Copied from the React documentation:
These two components are equivalent from React’s point of view.

The simplest way to define a component is to write a JavaScript function:

function Welcome(props) {
  return <h1>Hello, {}</h1>;

This function is a valid React component because it accepts a single “props” (which stands for properties) object argument with data and returns a React element. We call such components “function components” because they are literally JavaScript functions.

You can also use an ES6 class to define a component:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {}</h1>;

ETA on Codecademy React Hooks lessons?


Notice that its instructions object only has one property: render() .

Why are methods named in React Properties?
Is that “React slang”?
Or is there a profound explanation?

Seems that new updates are just added.

1 Like