React Presentational vs. Container components: Which to choose?

When building complex React applications, it's important to organize components in a way that maximizes code reusability and maintainability. One common approach is to use presentational and container components.

Presentational components are responsible for rendering UI elements, while container components handle data and application logic. By separating these concerns, we can create a clear separation of concerns and keep our codebase clean and easy to understand.

In this article, we'll explore the differences between presentational and container components, and discuss when and why to use each.

Presentational components

Presentational components, also known as dumb components or stateless components, are responsible for rendering UI elements. They receive data and callbacks from their parent components via props, but they don't manage any state or application logic themselves.

Here's an example of a presentational component that renders a list of items:

import React from 'react';

function ItemList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export default ItemList;

In this example, the ItemList component receives an array of items via props and maps over them to render an unordered list of item names. This component doesn't manage any state or application logic itself, making it easy to understand and test.

Presentational components should be as simple and reusable as possible. They should focus on rendering UI elements and avoid complex business logic. By keeping them simple and reusable, we can use them in multiple places throughout our application.

Container components

Container components, also known as smart components or stateful components, are responsible for managing state and application logic. They receive data from their parent components via props, but they also manage their own state and handle any necessary data fetching or updating.

Here's an example of a container component that fetches a list of items and passes them down to a presentational component:

import React, { useState, useEffect } from 'react';
import ItemList from './ItemList';

function ItemListContainer() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    fetch('/api/items')
      .then(res => res.json())
      .then(data => setItems(data));
  }, []);

  return <ItemList items={items} />;
}

export default ItemListContainer;

In this example, the ItemListContainer component fetches a list of items from an API using the useEffect hook. It then passes the fetched items down to the ItemList component as a prop. By managing the state and fetching data in the container component, we can keep our presentational components simple and reusable.

Container components should be used sparingly and only when necessary. They can become complex and difficult to understand if we try to put too much application logic into them. Instead, we should aim to keep our container components as simple as possible and delegate as much logic as we can to other components or helper functions.

When to use presentational components

Presentational components should be used whenever we need to render UI elements. They should be as simple and reusable as possible, and should avoid complex business logic. By keeping them separate from our container components, we can make them easier to understand and test.

Here are some examples of when to use presentational components:

• Rendering lists, tables, or other collections of data
• Displaying forms, buttons, or other user input elements
• Showing modals, notifications, or other UI elements

When to use container components

Container components should be used whenever we need to manage state or application logic. They should be as simple as possible, but may be more complex than presentational components as they handle data fetching, data updating, and application logic.

Here are some examples of when to use container components:

• Fetching data from an API and passing it down to presentational components
• Handling user input and updating application state accordingly
• Implementing complex business logic that involves multiple components

It's important to remember that container components should be used sparingly and only when necessary. If we put too much logic into our container components, they can become difficult to understand and maintain.

Conclusion

React presentational and container components provide a clear separation of concerns in our application. Presentational components are responsible for rendering UI elements, while container components handle state and application logic.

By keeping our presentational components simple and reusable, and our container components as simple as possible, we can create a maintainable and scalable codebase.

When deciding whether to use a presentational or container component, consider the component's responsibility and the complexity of the logic it needs to handle. By following this approach, we can create a clean and easy-to-understand React application.