React - Stateless vs Stateful Components

Prerequisite - This tutorial is intended for beginners who have started learning React and need a better overview of components.

Component Intro

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. When building your React application you will have many different components that make up your React application. Some will likely have state changes and may even have to access your backend. Other components may just render a piece of your UI with access to props to render successfully. Below we will go though a stateful and stateless example.

Stateful - Establishes state, has methods

import React from "react";
import Show from "./show";

class Input extends React.Component {
  constructor(props) { //<----Method
    super(props);
    this.state = { //<----Initialize state
      value: ""
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) { //<---- Method/Set State
    this.setState({ value: event.target.value });
  }

  render() { . //<-----Method/Return JSX/HTML
    return (
      <div>
        <input
          name="firstName"
          type="text"
          value={this.state.value}
          onChange={this.handleChange}
        />
        <Show value={this.state.value} />
      </div>
    );
  }
}
export default Input;

The above is an example of a stateful component, why? Three things, we first initialize state, secondly we have methods on our constructor, and lastly we setState within our handleChange method. These are three critical pieces of a stateful component. Next let's look at a stateless component.

Stateless - Returns a part of our UI with the value from our input

import React from "react";

function Show(props) {
  return( //<----Return JSX/HTML
    <p>{props.value}</p>
    )
}

export default Show;

The above is an example of a stateless component, its just simply returning a p tag that will have the value of our input as we type. It is not setting any state, there are no methods. This is a great way to keep your react code maintainable and readable. Breaking it up into smaller components and passing props to child components. We export this component and include it the parent component. Its only job is to display the value from the input.

If this were a complete form full of inputs our code would be hundreds of lines of code. Even longer if we needed to display the values, using this method allows us to break that up being more readable and maintainable.

Thanks for reading.

Comments

[Andy Wermke]

Thanks for sharing. Unfortunately it's not completely true anymore.

Since React hooks are now a thing, functional components can be stateful and have a lifecycle just as well. Furthermore class-based components can also be stateless (if all they have is a render method, but of course it would only be reasonable to turn them into a functional component then).

The post is rather describing class-based components vs functional components.

There is nothing wrong about describing that, but the concept class=stateful and function=stateless is now a thing of the past ;)

[Sung M. Kim]

Thanks Matthew.

Understanding the distinction in this article is helpful for new React beginners because having states unnecessarily spread out everywhere can cause components to have many sources of truth thus out of sync ♻ (e.g. initializing a component state to that of a prop).