React Component from Stateful to Stateless (Difference)

Question

I am trying to work out the difference between a React Stateful component and a stateless component.

Correct me if I'm wrong:

So, this is a Stateful Component:

import React from "react";

export class Mycomponent extends React.Component {
    render() {
        return (

            <div>
                <p>My Component</p>
            </div>

        );
    }
}

and how would a stateless component be different to the one above?

What have you taken into consideration to conclude that this is a stateful component? As I see it right now, it is not stateful nor stateless. It is simply static. — Leandro, Apr 04 '17 at 20:02
For what I understand, a stateless component takes all of its rendering data exclusively from props. Once you start fiddling with `this.state` then you got yourself a stateful component. — Leandro, Apr 04 '17 at 20:05
Possible duplicate: https://stackoverflow.com/questions/34512696/reactjs-difference-between-stateful-and-stateless — Alex Fallenstedt, Apr 04 '17 at 20:06

Chaim Friedman · Accepted Answer · 2017-04-04T20:18:09.033

7

A react state-full component usually has the class syntax and extends the react component base class. This gives you access to the react life cycle methods such as render, componentDidMount, etc.

On the other hand, a stateless functional component, is nothing more than a function which returns jsx. You are not in the react life cycle and have no access to the component base class methods.

here is some example code of a stateless functional component.

export default function example() {
    return (
        <h1>This is where the jsx goes</h1>
    )
}

I should also point out that in a stateless functional component, you get access to props by passing a props argument to the function, something like this.

export default function example(props) {
    return (
        <h1>{props.person.firstName}</h1>
    )
}

but in a react class you have props simply by accessing this.props.whatever

edited Apr 04 '17 at 20:18

answered Apr 04 '17 at 20:04

Chaim Friedman

6,124
4
33
61

A pure functional component is one way of implementing a stateless component. The key word in your answer's first paragraph is *usually*. It is perfectly valid to implement a stateless component as a class (`ES6` or `React.createClass`). So, if you have a functional component, it is a stateless component; but the fact that you don't have a functional component does not necessarily imply that the component in question is not stateless. – Leandro Apr 04 '17 at 20:52
I think semantically what you are saying is perfectly correct, however I think, and I might be wrong, that in react land, a stateless functional component is understood to be be a function and not a class because in a class you CAN have state, whereas in a function you CAN'T. – Chaim Friedman Apr 05 '17 at 14:38
Again, you say stateless **functional** component. Of course it has to be implemented using a function (hence the *functional* adjective). And of course it must be stateless, because you cannot access state within a functional component. You could just say functional component, and stateless is implied. In a class, however, you can decide whether to use state or not, and that is what determines if the class component is stateful or stateless. – Leandro Apr 05 '17 at 15:08

score 1 · Answer 2 · answered Apr 04 '17 at 20:30

What you have right now is a Class component: https://facebook.github.io/react/docs/components-and-props.html#functional-and-class-components

A functional component can be written literally as a function:

export default () => <h1>Hello World!</h1>;

A Class component is similar to writing OOP:

import React, { Component } from 'react';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      error: false,
      loading: true
    }
  }
  componentDidMount() {
    const { data, status } = fetch(apiendpoint); // res.data
    if (status !== 200) {
      this.setState({ error: true });
      this._renderError();
    }
    this.setState({ loading: false });
  }
  _renderError() {
   return <h1>Error!</h1>;
  }
  render() {
    const component = loading ?
      <Loading /> :
      <h1>Hello {this.props.data}</h1>;
      return component;
  }
}

You can create state in a Class Component through the constructor and through the use of setState() can manage the state at the component level. Hope this helps give you a better idea on the differences!

React Component from Stateful to Stateless (Difference)

2 Answers2