React Stateless VS Stateful Components
Tags: react, javascript, codenewbie, programming
Published: 2021-01-01 22:55:45

###### *This article is sponsored by [Flutterwave](https://dashboard.flutterwave.com/signup?referrals=RV686851) - Flutterwave is the easiest way to make and accept payments both online and offline from customers anywhere in the world. It is absolutely free!*

React components can be summarized as followed:

- Independent bit of code that can be reusable in a web app.
- It may contain logic when the state is managed.
- It describes part of a UI.

### Stateless Component
Stateless components contain no state. It is mostly used to build a template-like component that an app can use to avoid creating the same component multiple times from scratch.  This means you can have as many stateless components in an app.

Stateless components can be a functional component or a class component, whichever you prefer. Although, it is recommended to use stateless components in different files to have a better workflow. This takes advantage of the feature, **webpack**.

A functional component in its most basic form is just a component. This means it is best to use functional components as a stateless component.

Below is a functional component, but stateless:

**Person/Person.js**
```jsx
import React from 'react';

const Person = props => {
    return (
        <div className="App">
            <h3>Name: {props.name}</h3>
            <h3>Skill: {props.language}</h3>
            <h3>ID: {props.id}</h3>
        </div>
    );
};

export default Person;
```

Below is a class-based functional component but stateless:

**Person/Person.js**
```jsx
import React from 'react';
import { Component } from 'react';

class Person extends Component {
    render() {
        return (
            <div className="App">
                <h3>Name: {this.props.name}</h3>
                <h3>Skill: {this.props.language}</h3>
                <h3>ID: {this.props.id}</h3>
            </div>
        );
    }
};

export default Person;
```

#### Observations:
In the two code snippets, these are the observations:

##### Functional Component
-  The functional component with **props** as the parameter that holds data is a conventional properties-name. That is, it is properties-name people prefer to use as a parameter in a functional component.
- Only `React` is imported from the `react` module because we do not need to use **props** from the React library.

##### Class Component
- The class component with **props** as the parameter that holds data is not a conventional properties-name. That is, it is properties-name gotten from a library to use which can't be renamed
- The `React` and `Component` are both imported from the `react` module because we need to use **props** from the React library.

*Note*: `this.props` refers to the class, Person.

### Stateful Component
Stateful components contain state. They are not used to build template-like components.  This means you can use the template-like component from a stateless component, most likely in a separate file to pass data to it.

A Stateful component can be a functional component or a class component, whichever you prefer. React Hooks was introduced in React 16.8 to allow functional components to manage state.

Below is a functional component, but stateful:

**App.js**
```jsx
import React from 'react';
import { useState } from 'react';
import './App.css';
import Person from './Person/Person';

const App = () => {
  const [state, setState] = useState({
    persons: [
      { name: 'Bello', language: 'React', id: '2sdr3' },
      { name: 'Michael', language: 'Vue', id: 'de6c3' },
      { name: 'Mary', language: 'Angular', id: 'c1z3x' }
    ]
  });

  const personHandler = () => {
    setState({
      persons: [
        { name: 'Andela', language: 'Ember', id: '2sdr3' },
        { name: 'John', language: 'Backbone', id: 'de6c3' },
        { name: 'Mary', language: 'Angular', id: 'c1z3x' }
      ],
    })
  };

  return (
    <div>
      <Person
        name={state.persons[0].name}
        language={state.persons[0].language}
        id={state.persons[0].id} />
      <Person
        name={state.persons[1].name}
        language={state.persons[1].language}
        id={state.persons[1].id} />
      <Person
        name={state.persons[2].name}
        language={state.persons[2].language}
        id={state.persons[2].id} />
      <button
        onClick={personHandler}>Change Person State</button>
    </div>
  );
};

export default App;
```

Below is a class-based functional component but stateful:

**App.js**
```jsx
import React from 'react';
import { Component } from 'react';
import './App.css';
import Person from './Person/Person';

class App extends Component {
  state = {
    persons: [
      { name: 'Bello', language: 'React', id: '2sdr3' },
      { name: 'Michael', language: 'Vue', id: 'de6c3' },
      { name: 'Mary', language: 'Angular', id: 'c1z3x' }
    ]
  };

  personHandler = () => {
    this.setState({
      persons: [
        { name: 'Andela', language: 'Ember', id: '2sdr3' },
        { name: 'John', language: 'Backbone', id: 'de6c3' },
        { name: 'Mary', language: 'Angular', id: 'c1z3x' }
      ]
    })
  };

  render() {
    return (
      <div>
        <Person
          name={this.state.persons[0].name}
          language={this.state.persons[0].language}
          id={this.state.persons[0].id} />
        <Person
          name={this.state.persons[1].name}
          language={this.state.persons[1].language}
          id={this.state.persons[1].id} />
        <Person
          name={this.state.persons[2].name}
          language={this.state.persons[2].language}
          id={this.state.persons[2].id} />
        <button 
          onClick={this.personHandler}>Change Person State</button>
      </div>
    );
  }
}

export default App;
```

#### Observations:
In the two code snippets, these are the observations:

##### Functional Component
-  The functional component with array elements, `state` and `useState` as the parameters that hold data are conventional names. That is, it is a name people prefer to use as parameters in a functional component.
- Both `React` and `useState` are imported from the `react` module for the functional component to manage state instead of a class component.

##### Class Component
- The class component with **state** as the object that holds data is not a conventional object name. That is, it is an object name gotten from React library to use which can't be renamed
- The `React` and `Component` are both imported from the `react` module because we need to use the **state** object from the React library.

*Note*: `this.state` refers to the class, App.

**Happy Coding!!!**

<a href="https://www.buymeacoffee.com/bellotech" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>

{% user bello %}
#### Techstack | Flutterwave 
Techstack article, sponsored by Flutterwave. Flutterwave is the easiest way to make and accept payments both online and offline from customers anywhere in the world. It is absolutely free!  Also, you get a Flutterwave dollar barter card when you signup through the link. Open an online store and take your business anywhere in the world.

{% youtube ClXVUM3Rf7A %}

[Sign up today to get started](https://dashboard.flutterwave.com/signup?referrals=RV686851)

[Support](https://dashboard.flutterwave.com/donate/3lo9klliqwbu) Techstack