DEV Community: Prasanna Vijayan

The Container-Presenter Pattern in React: A Smart Approach to Component Design

Prasanna Vijayan — Mon, 17 Mar 2025 14:04:55 +0000

Introduction

As front-end applications grow in complexity, maintaining a clean and scalable architecture becomes essential. One of the most effective design patterns to achieve this is the Container-Presenter Pattern, also known as the Smart-Dumb Components Pattern. This pattern helps separate business logic from UI rendering, making components more reusable, maintainable, and easier to test.

In this blog, we'll explore the Container-Presenter Pattern, why it's beneficial, and how to implement it in React.

What is the Container-Presenter Pattern?

The Container-Presenter Pattern is a design approach that splits components into two distinct types:

Container Components (Smart Components): Responsible for state management, business logic, and API calls. They do not handle UI rendering.
Presenter Components (Dumb Components): Focus purely on displaying UI and receiving data via props. They do not handle state or side effects.

This pattern ensures that UI components remain pure and reusable, while logic-heavy components manage data efficiently.

Why Use the Container-Presenter Pattern?

✅ Separation of Concerns
Keeps UI and business logic separate, making the codebase cleaner and easier to maintain.

✅ Reusability
Presenter components are independent of state, so they can be reused across multiple parts of the application.

✅ Better Testing

Presenter components are easier to test as they are pure functions of their props.
Containers can be tested separately for state management and API calls.

✅ Scalability
Makes it easier to scale large applications without cluttering UI components with logic.

Implementing the Container-Presenter Pattern in React

Let's break down the pattern with a real-world example: Fetching and displaying a list of todo items.

Step 1: Create the Presenter (Dumb) Component

This component only renders the list of todo items and receives data via props.

import React from "react";

const TodoList = ({ items }) => {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
};

export default TodoList;

Step 2: Create the Container (Smart) Component

This component fetches data and passes it down to the Presenter component.

import React, { useState, useEffect } from "react";
import TodoList from "./TodoList";

const TodoListContainer = () => {
  const [items, setItems] = useState([]);

  useEffect(() => {
    fetch("https://api.json.com/checklist")
      .then((response) => response.json())
      .then((data) => setItems(data));
  }, []);

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

export default TodoListContainer;

Step 3: Use the Container Component in Your App

import React from "react";
import TodoListContainer from "./TodoListContainer";

const App = () => {
  return (
    <div>
      <h1>Todo List</h1>
      <TodoListContainer />
    </div>
  );
};

export default App;

When to Use the Container-Presenter Pattern?

✔️ Good Use Cases:

When separating UI from business logic makes sense.

When the UI component is used in multiple places.

When you need better testability.

When working on scalable applications.

❌ When NOT to Use It:

When the component is small and simple (splitting adds unnecessary complexity).

When using hooks-based state management that keeps logic within reusable hooks.

When the framework already manages state elegantly (e.g., Vue’s reactivity system).

Alternative Approaches

Besides the Container-Presenter Pattern, here are some other useful patterns in React:

Hooks-Based Pattern (Using useState, useEffect, and useReducer to manage logic separately).
State Machines (XState) (For managing complex UI states).
Context API / Redux (For global state management).

Final Thoughts

The Container-Presenter Pattern is a powerful way to separate concerns and keep your React components modular, testable, and maintainable. While it’s an excellent approach for larger applications, you should assess whether it adds value to your specific use case.

By structuring your components with clear responsibilities, you ensure a scalable and maintainable front-end architecture.

🚀 Building a Notification System in React Using the Pub-Sub Pattern

Prasanna Vijayan — Sat, 15 Mar 2025 00:46:57 +0000

Say Goodbye to Prop Drilling & Context! 🎉

Introduction
Every React app needs notifications—whether it's a success message, an error alert, or a warning toast. But how do we manage notifications globally without Redux, Context, or prop drilling?

The answer: The Publish-Subscribe (Pub-Sub) Pattern!

In this post, we'll build a notification system that:
✅ Uses Pub-Sub instead of Context or Redux
✅ Works globally without prop drilling
✅ Automatically dismisses notifications
✅ Stacks notifications on top of each other

🧠 What is the Pub-Sub Pattern?
The Publish-Subscribe (Pub-Sub) Pattern is a messaging system where:

Publishers send out events.
Subscribers listen for those events and react accordingly.
This makes it perfect for notifications because any part of the app can trigger an event, and the notification system will handle it automatically—without requiring direct dependencies!

🛠️ Step 1: Create an Event Bus (Pub-Sub Utility)
Since JavaScript lacks a built-in Pub-Sub system, we'll create a lightweight event bus.

🔹 Create a new file: eventBus.js

const eventBus = {
  events: {},

  subscribe(eventName, callback) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(callback);

    // Return unsubscribe function
    return () => {
      this.events[eventName] = this.events[eventName].filter(fn => fn !== callback);
    };
  },

  publish(eventName, data) {
    if (this.events[eventName]) {
      this.events[eventName].forEach(callback => callback(data));
    }
  }
};

export default eventBus;

🔍 How This Works:
✅ subscribe(eventName, callback): Adds a listener for an event.
✅ publish(eventName, data): Triggers all callbacks listening to an event.
✅ Returns an unsubscribe function so we can clean up listeners when needed.

📌 Step 2: Create the Notification List Component
The NotificationList will:
✅ Listen for notify events from the eventBus
✅ Store notifications in local state
✅ Automatically remove notifications after 3 seconds

🔹 Create a new file: NotificationList.js

import React, { useState, useEffect } from "react";
import eventBus from "./eventBus";
import "./Notifications.css";

const NotificationList = () => {
  const [notifications, setNotifications] = useState([]);

  useEffect(() => {
    // Subscribe to "notify" event
    const unsubscribe = eventBus.subscribe("notify", (notification) => {
      const id = Date.now();
      setNotifications((prev) => [...prev, { id, ...notification }]);

      // Auto-remove notification after 3 seconds
      setTimeout(() => {
        setNotifications((prev) => prev.filter((n) => n.id !== id));
      }, 3000);
    });

    return () => unsubscribe(); // Cleanup on unmount
  }, []);

  return (
    <div className="notifications-container">
      {notifications.map((notif) => (
        <div key={notif.id} className={`notification ${notif.type}`}>
          {notif.message}
        </div>
      ))}
    </div>
  );
};

export default NotificationList;

🎨 Step 3: Add Some Styles for Notifications
🔹 Create a new file: Notifications.css

.notifications-container {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
}

.notification {
  padding: 10px 15px;
  color: white;
  font-weight: bold;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  opacity: 0.9;
  animation: fade-in 0.3s ease-in-out;
}

.notification.success {
  background-color: green;
}

.notification.failure {
  background-color: red;
}

.notification.warning {
  background-color: orange;
}

@keyframes fade-in {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

⚡ Step 4: Use It in the App Component
Now, let's wire it all together by publishing notifications when buttons are clicked.

🔹 Modify App.js

import React from "react";
import eventBus from "./eventBus";
import NotificationList from "./NotificationList";

const App = () => {
  const notify = (type, message) => {
    eventBus.publish("notify", { type, message });
  };

  return (
    <div>
      <h2>Notification System (Pub-Sub Pattern)</h2>
      <button onClick={() => notify("success", "Success!")}>Success</button>
      <button onClick={() => notify("failure", "Failure!")}>Failure</button>
      <button onClick={() => notify("warning", "Warning!")}>Warning</button>

      <NotificationList />
    </div>
  );
};

export default App;

🎯 How Everything Works Together

1️⃣ Click a button → eventBus.publish("notify", { type, message })
2️⃣ NotificationList listens for "notify" events
3️⃣ Notification appears in the UI
4️⃣ After 3 seconds, the notification auto-disappears

📝 Final Thoughts: Why Use Pub-Sub?

Using Pub-Sub in React is powerful because:
✅ No Context or Redux needed → Clean & lightweight
✅ Fully decoupled → Components don’t need to know about each other
✅ Scalable → Can be extended to support WebSockets, logging, and more

🔥 Next Steps

Want to take this further? Try adding:
✅ A close button to manually remove notifications
✅ Animated entry/exit effects
✅ Persistent notifications that stay until dismissed

🚀 Now go and implement this in your projects! Happy coding! 🎉

A Step-by-Step Guide to Deploying Your App on Vercel

Prasanna Vijayan — Sat, 19 Aug 2023 03:22:35 +0000

In the fast-paced world of web development, deploying your application quickly and efficiently is crucial to getting your work into the hands of users. Vercel, a popular platform for deploying web applications, streamlines the deployment process and offers a seamless experience for developers. In this blog post, we'll walk you through the steps of deploying your app on Vercel, from setup to launch.

Why Choose Vercel for Deployment?

Vercel, formerly known as ZEIT, is a cloud platform that specializes in serverless deployment for front-end applications. It's renowned for its simplicity, speed, and scalability. Here's why you might want to consider using Vercel for deploying your app:

Zero Configuration: Vercel's default configurations work well for most projects. You can get your app online with minimal setup.
Automatic Deployments: Connect your repository to Vercel, and it will automatically build and deploy your app whenever you push changes to your codebase.
Serverless Architecture: Vercel uses serverless functions, which means you don't have to manage server infrastructure. This leads to cost savings and easier scalability.
Global CDN: Vercel's content delivery network ensures that your app is served from the location nearest to your users, improving loading times.
Preview Deployments: Create preview deployments for every pull request, enabling you to test changes before merging them into the main branch.

Now, let's dive into the steps of deploying your app on Vercel.

Step 1: Sign Up for a Vercel Account

If you haven't already, visit the Vercel website and sign up for an account. You can use your GitHub, GitLab, or Bitbucket account to authenticate.

Step 2: Install the Vercel CLI

The Vercel Command Line Interface (CLI) helps you manage deployments from your terminal. Install it globally using npm or yarn:

npm install -g vercel
# or
yarn global add vercel

Step 3: Prepare Your App

Ensure your app's directory structure and configuration are ready for deployment. This might involve setting up build scripts, ensuring your app runs correctly, and creating a Git repository if you haven't already.

Step 4: Connect Your Repository

Navigate to the Vercel dashboard and click "New Project." Select your Git repository from the list and grant Vercel the necessary permissions.

Step 5: Configure Deployment Settings

Vercel will ask you for deployment settings. Choose the branch you want to deploy, set up your build command (e.g., npm run build), and specify the output directory.

Step 6: Review and Deploy

Vercel will show you a summary of your deployment settings. Review them to make sure everything is correct, and then hit the "Deploy" button.

Step 7: Celebrate!

Your app is now deployed on Vercel! The deployment process might take a few moments. Once it's done, you'll receive a URL where you can access your live app.

Additional Tips

Custom Domains: If you want to use a custom domain for your app, Vercel makes it easy to set up and manage.
Environment Variables: Use Vercel's environment variable management to securely store sensitive data like API keys.
Scaling: As your app gains traction, Vercel's automatic scaling ensures your application can handle increased traffic without manual intervention.
Monitoring: Vercel provides analytics and monitoring tools to track the performance of your deployed app.

Wrapping Up

Deploying your app on Vercel is a straightforward process that empowers you to focus on building your application rather than managing deployment infrastructure. With its automatic deployments, serverless architecture, and global CDN, Vercel offers a powerful platform for getting your web app in front of users quickly and efficiently. Whether you're a seasoned developer or just starting out, Vercel's user-friendly interface and feature set make deploying web applications a breeze. So, what are you waiting for? Get your app online with Vercel and share your creation with the world!

Demystifying Ember Serialization: A Comprehensive Guide

Prasanna Vijayan — Sat, 19 Aug 2023 03:19:47 +0000

Serialization lies at the heart of data communication in web applications. It's the process of converting complex data structures, such as objects and arrays, into a format that can be easily transmitted and reconstructed on the receiving end. In the context of Ember.js, a popular JavaScript framework for building ambitious web applications, serialization plays a crucial role in managing data flow between the frontend and backend. In this blog, we'll delve into the world of Ember serialization, exploring its importance, techniques, and best practices.

Why Serialization Matters in Ember

Modern web applications often require communication with servers to exchange data, whether it's fetching information for display or updating records in a database. Serialization is the bridge that allows developers to transmit data in a standardized format, making it possible to send and receive information seamlessly. Ember, with its convention-over-configuration approach, simplifies this process by providing built-in serialization and deserialization mechanisms.

The Ember Serializer

At the core of Ember's serialization process is the serializer. A serializer is responsible for converting data between the application's internal representation and the format suitable for communication, typically JSON. Ember offers a range of serializers out of the box, such as JSONSerializer, JSONAPISerializer, and RESTSerializer.

JSONSerializer: This is a basic serializer that serializes records into JSON format. It's suitable for simple applications that don't require complex relationships between models.
JSONAPISerializer: If your application follows the JSON API specification, this serializer is the go-to choice. It handles complex relationships and follows the JSON API conventions for data structure.
RESTSerializer: This serializer is used when your API doesn't strictly adhere to the JSON API specification. It offers more customization options compared to the JSONAPISerializer.

Serialization in Action

Let's walk through a basic example of serialization using Ember's JSONSerializer.

Assume you have a post model with the following attributes: id, title, body, and createdAt. To serialize a post record, you would do the following:

import JSONSerializer from '@ember-data/serializer/json';

export default class PostSerializer extends JSONSerializer {
  // Customize the serialized format
  serialize(snapshot, options) {
    const json = super.serialize(...arguments);

    // You can modify the serialized JSON here
    json.published = true;

    return json;
  }
}

In this example, the serialize method is overridden to modify the serialized JSON before it's sent to the server. This customization can be immensely useful when you need to add extra metadata or transform data before transmission.

Best Practices

Choose the Right Serializer: Select a serializer that matches your API's data format and requirements. If your API follows the JSON API standard, using JSONAPISerializer is a wise choice.
Avoid Over-serialization: Sending unnecessary data over the network can lead to performance bottlenecks. Serialize only the data needed for a particular operation.
Customization when Necessary: If your serialization needs go beyond the basics, don't hesitate to create custom serializers. This allows you to fine-tune the serialized data to fit your application's needs.
Versioning and Compatibility: Keep an eye on API versioning and compatibility issues. Changes in serialization format can break frontend-backend communication.
Testing: Write tests for your serializers to ensure that they handle various scenarios correctly. Ember provides testing utilities to make this process easier.

Conclusion

Ember serialization is a fundamental aspect of modern web application development. It empowers developers to seamlessly communicate with servers, retrieve data, and update records. By leveraging Ember's built-in serializers and adhering to best practices, developers can ensure efficient, reliable, and secure data transmission in their applications. Understanding the nuances of serialization is key to mastering Ember and building robust, high-performance web applications.

How did I learn this.reduce();

Prasanna Vijayan — Sun, 15 Sep 2019 12:38:42 +0000

Javascript is so amazing to learn. I learn few things on the fly to fix some error or try {} catch way (basically fail and understand better). One among them is this.reduce();.

this.reduce() takes array and gives back single value. Let's take an example

Before going further to understand about reduce, let's take a look at it's arguments. Reduce takes 4 arguments.

total //!req a + b, it returns either initial value or summed value
currentValue //!req value of the current element
currentIndex //!opt
arr //!opt array

Example with just number of arrays

let arr = [1, 2, 3, 4, 5, 6];

let ans = arr.reduce( (a, b) => a + b ); // 21

Example with objects

let movies = [{ title: 'Cars', part: '1', views: '400' },
              { title: 'Cars', part: '2', views: '300' },
              { title: 'Cars', part: '3', views: '100' },
              { title: 'Planes', part: '1', views: '800' },
              { title: 'Planes', part: '2', views: '500' }];

let total = { cars: 0, planes: 0 };

let totalviewsmovies = movies.reduce( (a, b) => {
    total[b.title.toLowerCase()] += parseInt(b.views, 10);
});

console.log( total ); // { cars: 400, planes: 1300 }

Okay, there might be a question? How this is hard for you?.

Answer: I didn't know this much detail of arguments and how it works until I recently got interviewed in some company.

Thanks to him!

Let me know what you think.

Use Promise for popup

Prasanna Vijayan — Sun, 15 Sep 2019 07:39:27 +0000

There are lot of things you can do with Promise. Today, I will share my experience on using promise for modal which I recently learned.

If you don't know much about EmberJs or Promise. Please visit EmberJS and
Promise) to get your basics up

Why Promise?

https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261

Prerequisites

ember install ember-bootstrap
ember generate ember-bootstrap --preprocessor=sass

If you want to use less instead of sass use --preprocesor=less. For other config, please check here

Steps

Create your component using

ember generate component promise

promise.js

import Component from '@ember/component';

export default Component.extend({

  // It's important to have response undefined instead of boolean
  response : undefined,
  show     : false,

  actions: {
    promiseClicked() {
      new Promise( respond => {
        this.set( 'show', true );

        this.addObserver( 'response', function observer() {
          this.removeObserver( 'response', observer );
          respond( this.get( 'response' ) )
        });

      }).then( proceed => {
        if ( proceed ) {
          console.log( proceed );
        } else {
          console.log( proceed );
        }
        this.setProperties({ 'show': false, 'response': undefined });
      });
    },

    response( bool ) {
      this.set( 'response', bool );
    }
  },
});

Make sure variable response is set to undefined after removing observer.

promise.hbs

<BsButton @onClick={{action 'promiseClicked'}}> Promise </BsButton>

<BsModal
  @open={{show}}
  @onSubmit={{action "response" true}}
  @onHidden={{action "response" false}} as |modal|>
  <modal.header>
    <h4 class="modal-title">
      Custom Dialog
      <div class="badge">2</div>
    </h4>
  </modal.header>
  <modal.body>
    Promise Example?
    Check console when you click "Cancel or Save".
  </modal.body>
  <modal.footer>
    <BsButton @onClick={{action "response" false}}>Cancel</BsButton>
    <BsButton @type="success" @onClick={{action "response" true}}>Save</BsButton>
  </modal.footer>
</BsModal>

That's it. Thanks!