React Messaging Design

Suman Ghosh — Mon, 21 Jul 2025 17:53:23 +0000

Problem Statement:

How do various components communicate with each other?
Problem is to communicate each other component like we have parent component A and child
components b and c and d so we want when we click on b components c and d component also
change for this problem we can use different ways using global library like redux, zustand, jotai but this architecture is hard to manage
write more code manage many file and slow performance so for solve this problem simply we create a global hub where we manage this so first when we click any component its go to global component and send information what they want
to send and the global hub react according to it and send data to child component .

Solution:

We can use a custom hook that allows us to decouple event handling and data flow. Instead of relying on props drilling for passing data and events between deeply nested components, we can create an event-driven architecture. In this solution, the custom hook helps listen to events
and allows components to communicate without having to pass data through intermediate
components.

Custom Hook (For React Only):

The useEvent hook allows us to subscribe to specific events and dispatch events to notify
listeners across different components. It enables components to react to events like mapClick
and perform actions, such as updating state or logging data, without the need for props to be
passed explicitly.

import { useEffect, useCallback } from "react";
interface AppEvent<PayloadType = unknown> extends Event {
 detail: PayloadType;
}
export const useEvent = <PayloadType = unknown>(
 eventName: string,
 callback?: (payload: PayloadType) => void,
) =>  useEffect(() => {
 if (!callback) return;
 const listener = (event: CustomEvent<PayloadType>) => {
 callback(event.detail);
 };
 window.addEventListener(eventName, listener);
 return () => {
 window.removeEventListener(eventName, listener);
 };
 }, [callback, eventName]);
 const subscribe = useCallback(
 ({ source, input, data }: { source: string; input: string; data: any[] }) => {
 const event = new CustomEvent(source, {
 detail: { input, data },
 });
 window.dispatchEvent(event);
 },
 [],
 );
 return { subscribe };
};

How It Works:

Listening for Events: The useEvent hook listens for a specific event (e.g., mapClick) and
executes the provided callback function when that event is triggered
Subscribing to Events: The subscribe function inside the hook allows components to
trigger events by dispatching them with custom data. In the code example, the subscribe
function is used to send selected data when a map is clicked.
Decoupling Components: With this setup, components no longer need to pass props
down the hierarchy. Instead, they can use the useEvent hook to subscribe to and
dispatch events, making communication between components more efficient and decoupled.

Example Usage:
In the application, we have the following usage:
Subscribing to the mapClick event:

const { subscribe } = useEvent("mapClick");
subscribe({
 source: "mapClick",
 input: "select",
 data: [selectedUnitIds],
});
Handling the event:
useEvent("mapClick", (data: any) => {
 console.log(data);
 });

Benefits:

Decoupled Architecture: Components no longer need to be aware of each other's
internal state or pass props down multiple layers. They can communicate via events.
Simplified Code: The custom hook abstracts away the complexity of handling events and
subscribing to them, making the code easier to maintain and extend.
Reusable Logic: The useEvent hook can be reused across different components that
need to listen for or trigger events, leading to a more modular design.

Hello 👋

Suman Ghosh — Sat, 29 Apr 2023 14:37:15 +0000

console.log("i am new");