DEV Community: Soumya Ranjan Padhy

useEventEmitter: A react hook to emit and listen to custom events

Soumya Ranjan Padhy — Mon, 16 Sep 2024 09:45:35 +0000

In React, there are often scenarios where we need to communicate between different components without passing props down multiple levels. A common solution is to use global state managers like "Redux" or "Zustand". Alternatively, we can use an event pattern similar to Node.js’s "EventEmitter". In this post, I’ll walk you through how I built a custom hook, "useEventEmitter", to address this issue in a React and TypeScript environment by leveraging the "EventTarget" API.

Step 1: Setting up the Global Event Emitter

The core of the solution is creating a global event emitter based on the "EventTarget" class. This allows us to dispatch and listen for events globally.

// event-emitter.ts
class GlobalEventEmitter extends EventTarget {}

const globalEventEmitter = new GlobalEventEmitter();

export default globalEventEmitter;

"EventTarget" is a built-in browser API that allows objects to handle events and dispatch them. By creating a single instance of "GlobalEventEmitter", we ensure that all components share the same event system.

Step 2: The Custom "useEventEmitter" Hook

2.1. Defining the Hook and State

import { useEffect, useState, useCallback, useRef } from "react";
import globalEventEmitter from "./event-emitter";

export const useEventEmitter = <T>(eventName: string) => {
  const [eventData, setEventData] = useState<T>();
  const skipRerender = useRef(false);
};

useEventEmitter: This is a generic hook that takes an "eventName" of type string and uses a generic type for the event data.
eventData: A state variable to hold the data from the event.
skipRerender: A ref used to control whether the component should re-render when an event is received.

2.2. Publishing an Event

const publishEvent = useCallback(
    (eventData: T, skipRender = true) => {
      skipRerender.current = skipRender;
      const event = new CustomEvent(eventName, { detail: eventData });
      globalEventEmitter.dispatchEvent(event);
    },
    [eventName]
  );

publishEvent: This function dispatches an event with the given data.
- eventData: The data to send with the event.
- skipRender: A flag to indicate if the re-render should be skipped (default is "true").
skipRerender.current: Sets the value of "skipRerender" to determine if the component should skip updating its state.
new CustomEvent(eventName, { detail: eventData }): Creates a new "CustomEvent" with the specified event name and data.
globalEventEmitter.dispatchEvent(event): Dispatches the created event to the global event emitter.

2.3. Subscribing to the Event

  useEffect(() => {
    const listener = (event: Event) => {
      if (skipRerender.current) {
        skipRerender.current = false;
        return;
      }
      setEventData((event as CustomEvent).detail);
    };

    globalEventEmitter.addEventListener(eventName, listener);

    // Cleanup subscription on unmount
    return () => {
      globalEventEmitter.removeEventListener(eventName, listener);
    };
  }, [eventName, skipRerender]);

useEffect: Handles subscribing to the event and cleaning up the subscription when the component unmounts or when "eventName" changes.
listener: A function that will be called whenever the specified event is dispatched.
- skipRerender.current: Checks if the re-render should be skipped. If so, it resets "skipRerender.current" and returns.
- setEventData((event as CustomEvent).detail): Updates the state with the event data.
globalEventEmitter.addEventListener(eventName, listener): Registers the listener to the global event emitter for the specified "eventName".
Cleanup Function: Removes the event listener when the component is unmounted or when "eventName" changes. This prevents memory leaks and ensures the component is cleaned up properly.

2.4. Returning Values

 return { eventData, publishEvent };

eventData: The current state data from the event, which components can use to display or react to the event.
publishEvent: The function to dispatch events, which components can use to send data.

Step 3: Creating the Publisher Component

// publisher.tsx
import { useEventEmitter } from "../lib/use-event-emitter";

const Publisher = () => {
  const { publishEvent } = useEventEmitter<{ data: string }>("event-name");

  const handleClick = () => {
    // Publish event without triggering a rerender
    publishEvent({ data: "Hello World" });

    // Trigger a re-render after 5 seconds
    setTimeout(() => {
      publishEvent({ data: "Hello World Again" }, false);
    }, 5000);
  };

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

export default Publisher;

Here, we use the "publishEvent" function to send out data. When the button is clicked, the event is dispatched with "data", and after 5 seconds, another event is dispatched, allowing subscribers to respond.

Step 4: Creating the Subscriber Component

// subscriber.tsx
import { useEventEmitter } from "../lib/use-event-emitter";

const Subscriber = () => {
  const { eventData } = useEventEmitter<{ data: string }>("event-name");

  return <div>{eventData && <div>{eventData.data}</div>}</div>;
};

export default Subscriber;

This component uses the "useEventEmitter" hook to subscribe to the event named "event-name". When the event is dispatched, the "eventData" state is updated, and the component re-renders to display the data.

Conclusion

App-Wide Notifications: Dispatch notifications that can be received by various components across the application, making it easy to implement a global notification system.
WebSocket Message Updates: Broadcast WebSocket messages to multiple components that need to react to real-time data updates, without coupling them directly.
Custom Event Handling: Create a flexible event system where you can add custom business logic to track event history, manage event-driven state changes, or implement complex interactions between components.

Overall, while global state managers such as "Redux" and "Zustand" are powerful tools, "useEventEmitter" provides a lightweight and versatile option for handling inter-component communication, offering a different approach that may fit well in many React applications.

Feel free to try out this hook in your projects! Let me know your thoughts, and happy coding!

useScreenSize: A Custom React Hook for Dynamic Screen Size Detection

Soumya Ranjan Padhy — Fri, 13 Sep 2024 09:44:49 +0000

Everyone knows responsive design is crucial for a seamless user experience across devices. While CSS frameworks offer utility classes for screen sizes, detecting screen size programmatically can be useful sometimes. This is where the useScreenSize React hook comes in.

What is useScreenSize?

The "useScreenSize" hook allows you to dynamically detect the current screen size and respond to changes in real-time. This hook returns screen size values like "xs", "sm", "md", "lg", "xl", and "2xl", which correspond to the screen widths used in popular CSS frameworks such as Tailwind CSS.

Let's make it

1.Define the hook

export const useScreenSize = () => {}

2.Managing State with useState

import {useState} from "react";

export const useScreenSize = () => {
  const [screenSize, setScreenSize] = useState<
    "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | ""
  >("");
}

We use the useState hook to create a state variable screenSize that can take one of several string values representing different screen size categories: "xs", "sm", "md", "lg", "xl", and "2xl". The default value is an empty string (""), which will be updated once the screen size is determined.
3.Detecting Window Resize Events

import {useState, useEffect} from "react";

export const useScreenSize = () => {
  const [screenSize, setScreenSize] = useState<
    "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | ""
  >("");

  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth < 640) {
        setScreenSize("xs");
      } else if (window.innerWidth >= 640 && window.innerWidth < 768) {
        setScreenSize("sm");
      } else if (window.innerWidth >= 768 && window.innerWidth < 1024) {
        setScreenSize("md");
      } else if (window.innerWidth >= 1024 && window.innerWidth < 1280) {
        setScreenSize("lg");
      } else if (window.innerWidth >= 1280 && window.innerWidth < 1536) {
        setScreenSize("xl");
      } else if (window.innerWidth >= 1536) {
        setScreenSize("2xl");
      }
    };

    window.addEventListener("resize", handleResize);
    handleResize();

    return () => window.removeEventListener("resize", handleResize);
  }, []);

}

useEffect: This ensures that the screen size is calculated after the component mounts, and it updates dynamically as the user resizes the window.

handleResize: Inside this function, we check the width of the browser window using window.innerWidth and set the screenSize accordingly:
Below 640 pixels: "xs"
640–768 pixels: "sm"
768–1024 pixels: "md"
1024–1280 pixels: "lg"
1280–1536 pixels: "xl"
Above 1536 pixels: "2xl"

Event Listener: We attach the resize event listener to trigger the "handleResize" function every time the window is resized. This ensures that "screenSize" stays up-to-date.

Cleanup: The return function within "useEffect" removes the resize event listener when the component unmounts, preventing potential memory leaks.

How to Use useScreenSize in Your Component

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

const MyResponsiveComponent = () => {
  const screenSize = useScreenSize();

  return (
    <div>
      <h1>Current screen size: {screenSize}</h1>
      {screenSize === "xs" && <p>This is a mobile-sized screen!</p>}
      {screenSize === "lg" && <p>You are viewing this on a large screen.</p>}
    </div>
  );
};

export default MyResponsiveComponent;

In this example, the screen size is dynamically detected and displayed in the component. We also use the detected "screenSize" to conditionally render different content based on the user's device.

Conclusion

Reactivity: The hook automatically detects screen size changes and updates the UI in real-time.

Flexibility: By handling screen sizes programmatically, you can conditionally render different components or styles in your React app.

Customization: You can easily modify the breakpoints in the hook to match your specific design requirements.

Feel free to try out this hook in your projects! Let me know your thoughts, and happy coding!