React Stateless VS Stateful Components

This article is 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!

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

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

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

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

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

Bello OsagieFollow

Hi, I am Bello Osagie, a tech blogger, writer, and web developer. I teach web development for free… Join me to learn, discover, and have fun coding together!

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.

Sign up today to get started

Support Techstack