Design Pattern in React Part 1:-Container/Presentational Design Pattern in React.js- A Guide for Clean and Scalable UI Development

In the world of web development, especially in libraries like React.js, design patterns play a crucial role in crafting maintainable and scalable applications. One such pattern that frequently used is the Presentational/Container Design Pattern. Let’s dive into it and why it’s essential in React.js development.

What is Presentational Design Pattern?

The Presentational Design Pattern segregates components into two distinct categories: presentational and container components. Presentational components are responsible only for rendering UI elements, while container components handle logic and data-fetching operations. This pattern encourages a clear separation of concerns within a React.js application, enhancing code maintainability and scalability.

Why do We Need Presentational Design Pattern?

The Presentational Design Pattern is crucial in React.js development to address the complexities of modern web applications. As applications grow in size and complexity, maintaining the codebase becomes increasingly challenging. This pattern promotes code modularity, readability, and maintainability by separating concerns. It enables developers to focus on specific aspects of the application without being overwhelmed by unnecessary complexities.

What Problem Does it Solve?

The Presentational Design Pattern solves the messy problems that usually happen in front-end code. It does this by separating how things look (presentation) from how they work (business logic). This separation makes the code cleaner, easier to read, and less overwhelming. It means developers can focus on one thing at a time, which makes teamwork smoother and finding and fixing issues simpler.

Below are the certain scenarios, where presentational pattern comes into the picture.

1. Imagine you’re building a recipe application. The presentational components would include the individual recipe cards, displaying the recipe name, image, and perhaps a brief description. On the other hand, the container components would handle tasks like fetching recipes from an API, managing state (e.g., for favouriting recipes), and arrange interactions between multiple presentational components (e.g., displaying a list of recommended recipes based on user preferences).
2. Consider a team of developers working on an e-commerce platform. By adhering to the Presentational Design Pattern, they can divide tasks efficiently. Designers can focus on crafting visually appealing presentational components, while other developers can handle business logic and data operations within container components. This division of tasks streamlines development, collaboration, and ultimately leads to a more maintainable and scalable product.
3. Imagine a social media platform where users can post content, like posts, and follow other users. The Presentational Design Pattern allows developers to create reusable components for rendering posts, likes, and user profiles. This modularity ensures that changes to one component do not affect others, making it easier to introduce new features or troubleshoot issues without disrupting the entire application.

Example

TaskList.js

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

const TaskList = () => {
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    fetch('api/tasks')
      .then(response => response.json())
      .then(data => setTasks(data))
      .catch(error => console.error('Error fetching tasks:', error));
  }, []);

  return (<ul>
            {tasks?.map(task => (
              <li key={task.id}>{task.title}</li>
            ))}
          </ul>);
};

export default TaskList;

As we can see in above example TaskList is responsible for fetching tasks from the API and also rendering the list of tasks. We can divide TaskList component into two parts, one is TaskListContainer, which will reponsible for API call and other component will be TaskListPresentaion, this will responsible only for rendering the tasks. This will clear the separation of concerns, enhances code maintainability and facilitates future modifications. See in the below example.

TaskListContainer.js

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

const TaskListContainer = () => {
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    // Fetch tasks from API
    fetch('api/tasks')
      .then(response => response.json())
      .then(data => setTasks(data))
      .catch(error => console.error('Error fetching tasks:', error));
  }, []);

  return <TaskListPresentation tasks={tasks} />;
};

export default TaskListContainer;

TaskListPresentaion.js

import React from 'react';

const TaskListPresentaion = ({ tasks }) => (
  <ul>
    {tasks?.map(task => (
      <li key={task.id}>{task.title}</li>
    ))}
  </ul>
);

export default TaskListPresentaion;

Conclusion

The Presentational Design Pattern is like a foundation for building React.js apps. It provides a clear way to make apps that can grow without becoming messy. When developers use this pattern, it makes the code easier to manage, read, and work on together. This means different parts of the app are separated, making it simpler to understand and maintain. By following this pattern, developers can work more efficiently and create apps that last a long time.

Happy Coding :) !!

In Plain English 🚀

Thank you for being a part of the In Plain English community! Before you go:

• Be sure to clap and follow the writer ️👏️️
• Follow us: X | LinkedIn | YouTube | Discord | Newsletter
• Visit our other platforms: Stackademic | CoFeed | Venture | Cubed
• More content at PlainEnglish.io