React Stateless VS Stateful Components

React Stateless VS Stateful Components

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article
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.

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


Buy me a Coffee


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. Open an online store and take your business anywhere in the world.

Sign up today to get started

Support what I do and push me to keep making free content.

 
Share this

Impressum

TechStack Media was launched in the year 2020 to make the learning of web technologies easier and more fun.

My name is Bello Osagie, I am the founder of TechStack, and my focus is to give in-depth, senior-level knowledge of the course through a step-by-step approach. You will learn HTML, CSS, JavaScript etc.

You can find my posts on Dev.to, Medium, Hashnode, Hackernoon, and Blogspot

The approach is to first start with the basics, then advance to more topics. Lots of practical examples are added to make learning more easier. TechStack Media also includes videos apart from content writing to make sure you understand all the concepts in a particular topic or course. Contents are frequently updated, so you do not miss out on the latest technology.

If you need a contact me on any of my social media or email:

For exclusive web technology tutorials, join my patron page.

Proudly part of