🚀🚀 Integrating the PubSub Pattern in React with a Custom Hook 🚀🚀

In modern React applications, managing communication between components can be challenging, especially as your project scales. A common solution to decouple components and manage event-driven communication is the Publish-Subscribe (PubSub) pattern. By integrating this pattern as a custom hook in React, you can create a flexible and powerful way to handle events across your application.

What is the PubSub Pattern?
The PubSub pattern is a design pattern that allows components to publish events and other components to subscribe to those events. This decouples the components, making your application more modular and easier to manage. With PubSub, you can trigger actions or update states in one component based on events in another, without direct prop passing or tightly coupling your components.

Implementing the PubSub Pattern as a Custom Hook in React
Here's how you can integrate the PubSub pattern into a React application by creating a custom hook.

Step 1: Create the usePubSub Hook

First, we define the usePubSub hook, which will provide the functionality to subscribe to events, publish events, and unsubscribe when a component unmounts.

import { useEffect, useRef } from 'react';

const PubSub = {
    subscribers: new Map(),

    subscribe: function (event, subscriber) {
        if (!this.subscribers.has(event)) {
            this.subscribers.set(event, []);
        }
        this.subscribers.get(event).push(subscriber);
    },

    unsubscribe: function (event, subscriber) {
        if (this.subscribers.has(event)) {
            const subscribers = this.subscribers.get(event).filter(sub => sub !== subscriber);
            this.subscribers.set(event, subscribers);
        }
    },

    publish: function (event, payload) {
        if (this.subscribers.has(event)) {
            this.subscribers.get(event).forEach(subscriber => {
                subscriber(payload);
            });
        }
    }
};

export const usePubSub = (event, handler) => {
    const handlerRef = useRef();

    useEffect(() => {
        handlerRef.current = handler;
    }, [handler]);

    useEffect(() => {
        const eventHandler = (payload) => handlerRef.current(payload);
        PubSub.subscribe(event, eventHandler);

        return () => {
            PubSub.unsubscribe(event, eventHandler);
        };
    }, [event]);

    const publish = (payload) => {
        PubSub.publish(event, payload);
    };

    return publish;
};

Step 2: Using the usePubSub Hook in Your Components

You can create multiple SubscriberComponent and get the message from the PublisherComponent.

import React from 'react';
import { usePubSub } from './usePubSub';

const SubscriberComponent = () => {
    usePubSub('myEvent', (payload) => {
        // using this event you can do the actions
        console.log('Received payload:', payload);
    });

    return <div>Subscribed to myEvent</div>;
};

export default SubscriberComponent;

Publishing an Event:

import React from 'react';
import { usePubSub } from './usePubSub';

const PublisherComponent = () => {
    const publish = usePubSub('myEvent',()=>{});

    const handleClick = () => {
        publish({ message: 'Hello, PubSub!' });
    };

    return <button onClick={handleClick}>Publish Event</button>;
};

export default PublisherComponent;

Why Use the PubSub Pattern in React?

• Decoupling: The PubSub pattern helps to decouple components, making your application more modular and easier to maintain.
• Event-Driven Architecture: It enables an event-driven approach, where components can react to events without being directly connected.
• Flexibility: With the usePubSub hook, you can easily manage events across different parts of your application without needing to pass props or manage complex state hierarchies.

Conclusion
By integrating the PubSub pattern into React as a custom hook, you can manage communication between components more effectively. This approach allows for a cleaner, more modular application architecture, making your React projects easier to scale and maintain.

Feel free to use this pattern in your own projects and adapt it to fit your specific needs. Happy coding!