Understanding React Component Categories

As you build applications using React.js, you'll start to see certain categories of components naturally unfold. These categories—stateless (or presentational) components, stateful components, and structural components—help us think about components more systematically, though it’s important not to force components to fit into any one category. Instead, let these components’ differences guide you as you structure your React applications.

Let's explore each category, their roles, and how they contribute to React applications. We'll also use some sample code and illustrations to make these concepts more practical.

Stateless (Presentational) Components

Stateless components, often known as presentational components, are simple components that do not hold any state. Their primary role is to receive data via props and display it without any complex logic or state management.

Characteristics of Stateless Components

No state: Stateless components don’t manage or modify state.
Receives props: They rely on data passed down from parent components.
Reusable: Since they only handle presentations, they’re typically highly reusable.

Let’s consider a component called MovieCard, which displays information about a movie (like its title, genre, and poster).

// MovieCard.js
const MovieCard = ({ title, genre, poster }) => (
  <div className="movie-card">
    <img src={poster} alt={`${title} poster`} />
    <h3>{title}</h3>
    <p>{genre}</p>
  </div>
);

export default MovieCard;

The code snippet above MovieCard doesn’t manage any state. It simply takes title, genre, and poster as props and renders them, making it a perfect example of a stateless, presentational component.

Note: Use stateless components for any part of the UI that only needs to display data passed in from props and doesn’t require any internal state or complex logic.

Stateful Components

https://onaircode.com/wp-content/uploads/2019/08/React-Search-Component-Examples-1080x675.jpg

Stateful components are components that manage and update their own state. They are often responsible for handling user interactions, updating UI based on state changes, and may use hooks like useState or useEffect to manage data.

Characteristics of Stateful Component

Holds state: Manages its own state, most often using hooks like useState.
Handles logic: Contains logic to respond to user interactions or handle data.
Reusability varies: Although some stateful components are reusable, others might be specific to certain parts of an application.

Here’s a code snippet example of a SearchBar component that maintains its own searchQuery state, which updates as the user types:

// SearchBar.js
import { useState } from 'react';

const SearchBar = ({ onSearch }) => {
  const [searchQuery, setSearchQuery] = useState('');

  const handleChange = (e) => {
    setSearchQuery(e.target.value);
    onSearch(e.target.value); // Pass updated query to parent
  };

  return (
    <input
      type="text"
      value={searchQuery}
      onChange={handleChange}
      placeholder="Search..."
    />
  );
};

export default SearchBar;

In the example above, SearchBar keeps track of searchQuery in its state and updates it whenever the input changes. This type of component is ideal and most suitable when we need an interactive element that responds to user actions, making it a stateful component.

Note: Stateful components are helpful when you need to handle interactions, manage data within a component, or dynamically update the UI.

Structural Components

https://mariyabaig.com/react-a-comprehensive-guide/

Structural components provide the overall layout or structure of the application. Think of them as “containers” that arrange other components. They may contain pages, layout components, or screens and are often responsible for the larger structure of the app.

Characteristics of Structural Component

Large-scale structure: These components define how different parts of the app fit together.
Contain smaller components: Structural components compose multiple smaller components.
Not always reusable: Structural components might be very specific to a page layout, though they can also be used to structure parts of the app that are reused.

Imagine a HomePage component that contains a search bar, a list of movies, and a footer. This component brings together other components to create a unified layout.

// HomePage.js
import SearchBar from './SearchBar';
import MovieList from './MovieList';
import Footer from './Footer';

const HomePage = () => (
  <div className="home-page">
    <SearchBar onSearch={(query) => console.log(query)} />
    <MovieList />
    <Footer />
  </div>
);

export default HomePage;

The code above shows HomePage as a structural component that assembles SearchBar, MovieList, and Footer components into a unified page layout.

Note: Use structural components to define the larger structure of your app, such as pages or significant sections. They help in organizing the application’s overall layout, bringing together other components to create a full view.

Component Structure Illustration

Here’s an illustration to show how stateless components, stateful components, and structural components relate within a typical application structure:

App Component
 ── HomePage (Structural Component)
      ── SearchBar (Stateful Component)
      ── MovieList (Stateless Component)
      ── Footer (Stateless Component)

Conclusion

In this article, we looked at how stateless (presentational) components are focused on displaying data passed through props without internal state or complex logic. Stateful components**,** on the other hand, manage their own state and handle user interactions, essential for dynamic, interactive parts of the UI. Structural components define the overarching layout or structure of the application, organizing other components into unified views.

Credits: This article is inspired by section 10 - Thinking in React of Jonas Schmedtmann of his React Course on Udemy

Understanding React Component Categories: Stateless, Stateful, and Structural Components

Table of contents