DEV Community: Ali Morshedzadeh

Never Miss an Error: Get Node.js Logs and Alerts on Your Phone via Telegram

Ali Morshedzadeh — Tue, 01 Apr 2025 15:26:09 +0000

In modern Node.js and Next.js applications, robust logging is essential for more than just debugging – it's key to maintaining healthy, high-performing production systems. Proper logs allow you to quickly identify issues (error tracking), monitor performance metrics, and understand application behavior in real time. For example, if a critical error occurs on your server, you want to know immediately; relying on only basic logs or delayed email reports isn't enough. Real-time alerts (like a message to your phone) can notify you of critical failures instantly, so you can react before minor issues escalate. In short, advanced logging and alerting give development teams the visibility and response time needed to keep applications running smoothly even as they grow in complexity.

The Drawbacks of Using `console.log` in Production

Many developers start with simple console.log statements for debugging, but traditional logging via the console quickly shows its limitations in production environments. The Node.js console provides no concept of log severity or filtering – everything is just printed to stdout or stderr with minimal formatting. This means you can't easily distinguish an error from an info message, and there's no built-in way to turn off verbose logs or focus on critical ones. The output is unstructured (often just plain text), lacking standardized timestamps or JSON formatting, which makes it hard to parse or search when troubleshooting issues across many log lines.

Furthermore, console.log has no mechanism for remote or real-time alerts – it's purely local output. If something goes wrong in production, you're relying on manually checking log files or terminal output after the fact. There's no immediate notification to your team or integration with monitoring tools. Another challenge is that sprinkling console.log everywhere can clutter your code and even impact performance (especially if left in production code paths), since writing to console is synchronous and can be slow when logging extensively. Overall, while console.log is fine for quick local debugging, it’s “wholly unsuitable for serious production logging” without features like log levels, structured output, and customizable destinations.

Introducing LogPro: A Modern Node.js Logging Package for TypeScript

To address these logging challenges, LogPro comes into play as a modern solution. LogPro is a minimalistic, structured logging library built for Node.js applications written in TypeScript. It is designed from the ground up to provide a production-grade logging experience out-of-the-box, going far beyond console.log in capability. With LogPro, developers get a clean API for sending structured log events and the flexibility to route those logs to various outputs – including real-time channels like Telegram.

How LogPro Solves Common Logging Problems: LogPro brings features that directly tackle the shortcomings of traditional logging. It implements multiple log levels (so you can differentiate debug information from errors and fatal issues), formats logs as structured JSON for easy analysis, and allows attaching contextual metadata to every log (so you know which user or request an error pertains to, for instance). It also automatically adjusts its format and detail based on the environment – for example, you can have colorful, readable logs during development and compact JSON logs in production. Crucially, LogPro supports custom transports – meaning you can send logs to external services. One of its standout capabilities is the ability to send important log messages directly to Telegram, enabling instant alerts for critical events. In short, LogPro aims to be a one-stop logging package for Node.js/Next.js developers who need more power and polish in their logging system.

Key Features of LogPro for Production-Grade Logging

LogPro offers a suite of features tailored for professional logging needs in Node.js and Next.js apps:

Structured JSON logging – Logs are output in JSON format for easy parsing and analysis by log management systems. This means each log entry can include fields like timestamp, level, message, and context in a machine-readable way. No more scraping unstructured text to extract details.
Multiple log levels – Support for levels like debug, info, warn, error, and fatal to categorize logs by severity. You can filter or suppress lower-priority messages in production, while still logging verbosely during development. This ensures critical errors surface when it matters, without drowning in noise.
Contextual data support – Ability to attach metadata (context) to logs consistently. For example, you might include a user ID, request ID, or other relevant info with each log. LogPro makes it easy to pass a context object that will be merged into the log output, so you have richer information for debugging and auditing.
Environment-aware configuration – The logger can adjust automatically based on NODE_ENV. For instance, in development you might get human-friendly output with colors and full debug details, while in production LogPro defaults to JSON format and a higher log level (e.g. only info and above). This adaptive behavior means you get the right balance of verbosity vs. clarity depending on where your app is running.
Human-readable formatting (for dev) – In non-production environments, LogPro can pretty-print logs with colors and indentation. This improves readability during local development or testing, making it easier to spot issues without manually parsing JSON.
Zero dependencies core – The core logging functionality has no external runtime dependencies. This keeps the library lightweight and performance-friendly. (Transports for optional features are add-ons, so if you don't use Telegram or others, you aren't paying a cost for them.)
Extensible transports (e.g., Telegram) – LogPro supports adding custom transports to send logs to various destinations. Out of the box, it provides a Telegram transport that can push selected log messages to a Telegram chat or channel. This is extremely useful for setting up real-time alerts: for example, you can configure LogPro to send all errors or critical issues to your team's Telegram group instantly.

All these features make LogPro a powerful Node.js logging package for serious applications. It's especially appealing to TypeScript developers, as it is written in TypeScript and provides type definitions, ensuring type-safe configuration and usage.

Setting Up LogPro in a Node.js/Next.js Project (TypeScript)

Getting started with LogPro is straightforward. Let's walk through how to add LogPro to a Node.js or Next.js application and use it to improve your logging.

Installation

First, install the LogPro package (available on npm under @xenral/logpro):

npm install @xenral/logpro

(If you prefer Yarn: yarn add @xenral/logpro.)

Because LogPro is built with TypeScript, you'll get type definitions automatically with the package.

Basic Usage in TypeScript

After installing, you can import the logger and start logging with different levels right away. In a Next.js app, you might do this in an API route or any server-side code. In a plain Node.js app, you might set this up in your main server file. For example:

import { logger } from '@xenral/logpro';

// Basic logging usage
logger.info('Application started');  // informational log
logger.warn('Connection timeout, retrying...');  // warning condition
logger.error('Failed to connect to database');  // error condition

// Logging with context data
logger.info('User logged in', { userId: '123', role: 'admin' });

// Logging an error with stack trace
try {
  // some operation that throws
  throw new Error('Something went wrong');
} catch (error) {
  logger.error('Operation failed', { operation: 'data-import' }, error);
}

In the above code:

We import the default logger from LogPro. By default, this logger is environment-aware. In development, these logs would appear in the console in a colored, pretty format. In production (when NODE_ENV is "production"), they would appear as JSON lines which are easier to ship to log aggregators.
We log messages at various levels: .info() for a general event, .warn() for a potential issue, and .error() for a failure. Each method will include a timestamp and other metadata automatically.
We include additional context information in some logs (like user ID and role on a login event). LogPro will merge this context into the log output (e.g., adding userId and role fields in the JSON), which is extremely useful for debugging issues related to specific users or operations.
When catching an exception, we pass the error object as a third argument to logger.error(). LogPro will capture the stack trace and error message and include them in the log entry. This means you get the full error details in your logs without needing a separate console.error or manual stack print. Logging unexpected errors with stack traces is crucial for post-mortem analysis in production, and LogPro makes it simple.

This basic setup already greatly improves the quality of your Next.js production logs or Node.js service logs. You'll have structured, leveled logs that you can filter and analyze. But LogPro can do more – particularly when it comes to real-time alerting for critical issues.

Configuring Telegram Alerts for Real-Time Logging

One of LogPro's killer features is the ability to send log messages to Telegram. This allows you to get instant notifications on your phone or Telegram desktop app whenever something important happens (e.g., an error or a specific event in your app). Setting this up involves a few steps:

Install Telegram Bot API dependency: LogPro's Telegram transport is built on the popular Node Telegram Bot API. Install it in your project with: npm install node-telegram-bot-api (this is an optional dependency).
Create a Telegram bot: Use the official @BotFather bot on Telegram to create a new bot for your application. BotFather will walk you through naming your bot and will provide you with a bot token (a long string) once created. Save this token securely – treat it like a password.
Get a chat ID for alerts: Decide where you want the alerts to go – it could be a private chat with yourself or a group/channel for your dev team. You will need the chat ID number for that destination. If it's a chat with yourself, you can obtain your own chat ID by using a service like @username_to_id_bot on Telegram (just start it and follow instructions to get your ID). For a group, you might need to add the bot to the group and then get the group's ID similarly.
Add the Telegram transport in code: Now you can use LogPro's TelegramTransport to send logs to Telegram. You'll configure it with the token and chat ID from the above steps.

Here's an example of adding a Telegram transport to the logger in code:

import { getLogger, LogLevel, TelegramTransport } from '@xenral/logpro';

// (Make sure node-telegram-bot-api is installed as mentioned above)

// Create or get a logger instance (could be your main app logger)
const logger = getLogger('app');

// Create a Telegram transport for LogPro
const telegramTransport = new TelegramTransport({
  token: 'YOUR_TELEGRAM_BOT_TOKEN',    // from BotFather
  chatId: 'YOUR_CHAT_ID',             // from @username_to_id_bot or similar
  minLevel: LogLevel.ERROR,           // minimum level to send (e.g., only errors and above)
  // Optional: filter function to fine-tune which logs are sent
  filter: (entry) => entry.context.urgent === true
});

// Attach the Telegram transport to the logger
logger.addTransport(telegramTransport);

// Example log messages
logger.info('Application started'); 
// ^ This info log goes to console (or file), but not to Telegram (because of minLevel ERROR).

logger.error('Database connection failed', { 
  urgent: true, 
  dbHost: 'prod-db-1' 
});
// ^ This error log will appear in console and also trigger a Telegram alert, 
// since its level is ERROR and we marked it as urgent in context (matching our filter).

In this configuration:

We import TelegramTransport from LogPro.
We instantiate it with the bot token and target chatId. We also set minLevel: LogLevel.ERROR to ensure that only logs of level ERROR or FATAL (the highest severities) are sent to Telegram. This prevents spamming Telegram with debug or info logs.
An optional filter function is shown: in this case, we're only sending logs to Telegram if the log entry's context has urgent: true. This is just an example of how you can tag certain logs for alerts. You could decide to send all errors, or perhaps all logs on a certain logger name or context property – it's customizable.
We then add this transport to our logger. From that point on, any log message that meets the criteria (level and filter) will be forwarded to Telegram in addition to whatever other outputs the logger has (console, files, etc.).
In the example, an info log of "Application started" would not go to Telegram (it's below ERROR level). But an error log about a database failure will be sent to Telegram because it's an error-level and we flagged it as urgent.

After deploying this, you'll start receiving Telegram messages from your bot whenever such an error occurs. The message typically contains the log level, the logger name (in this case "app"), the text message, and any context (e.g., dbHost) you included. This immediate visibility can be a game-changer for production support – instead of waiting to discover an issue via user reports or digging through log files, you get proactively alerted in real time.

Tip: Make sure to keep your bot token secure. Do not commit it to your repository. Use environment variables or a secrets management system to load the token and chat ID. For example, you might set process.env.TG_BOT_TOKEN and process.env.TG_CHAT_ID in your deployment environment, and pass those into the TelegramTransport config instead of hardcoding the strings. This keeps sensitive credentials out of your codebase.

Best Practices for Production Logging with LogPro

Using a powerful logging tool like LogPro effectively requires following some best practices to get the most out of it while keeping your application secure and performant. Here are some recommendations:

Use appropriate log levels and avoid noise: In production, it's usually wise to log at info level and above, reserving debug logs for development or troubleshooting specific issues. LogPro lets you set a global minimum level (e.g., using logger.setLevel(LogLevel.INFO) or via environment) so that verbose logs don't overwhelm your production log files or alerts. This ensures you capture important events without the noise. You can elevate the level temporarily (to debug) if investigating an incident, but remember to revert back. Also, take advantage of LogPro's levels – use warn for recoverable issues or suspicious situations, error for actual errors, and fatal if the app might crash or terminate. Defining clear severity levels helps downstream log analysis and alerting systems work better.
Always capture errors with stack traces: When an exception is caught or an error occurs, make sure to log it with the error object (as shown in the try/catch example above). The stack trace and error message are invaluable for debugging. LogPro's API is designed to include error information, so pass the error object to logger.error() or logger.fatal(). Also consider logging a brief message explaining the context of the error (e.g., what the app was trying to do) along with the error – this combination of context + stack trace is ideal. By diligently logging errors, you'll have an auditable history of exceptions and can perform root cause analysis later.
Avoid logging sensitive information: Security is as important as utility when it comes to logs. Never expose confidential or personal data in your logs. This includes passwords, API keys, authentication tokens, credit card numbers, or personal user information. Even IP addresses or email addresses might be considered sensitive (PII) in some contexts. A famous incident in 2018 involved a company accidentally logging plaintext user passwords internally, highlighting how dangerous careless logging can be. Treat logs as data that could potentially leak; if your logs are forwarded to external systems (like a cloud log service or Telegram), the risk is even higher. With LogPro, you have fine control over what you include in context. Be mindful to exclude or sanitize sensitive fields. For instance, if you have a user object, log a user ID instead of the full user details. If you must log sensitive data for debugging, consider using LogPro's ability to filter or transform logs (or do it manually) to redact those values. Always err on the side of caution: "Your application logs should never capture data like passwords, credit card details, or authorization tokens."
Protect your alert channels: If you're using the Telegram integration or any external alerting, ensure that the channel is private or only accessible to your team. Telegram bots cannot send messages to a user who hasn't started a conversation with them or a group that hasn't added them, so there's some inherent security, but be aware that whatever you send to Telegram is going through an external service. Do not send extremely sensitive data over these alerts. The goal of alerts is to inform you that something went wrong, with enough detail to take action or look deeper in your secure logs. Think of Telegram alerts as a heads-up; the full context might still reside in your application logs or error tracking system which are more protected.
Monitor performance impact: LogPro is designed to be lightweight (no dependencies and efficient JSON serialization), but any logging has overhead. In very high-throughput parts of your application, be mindful not to log excessively (for example, in a tight loop or for every single web request in a very high QPS service, you might want to sample logs). Use log levels wisely to avoid performance degradation. The benefit of structured logging is you can later aggregate and analyze logs, so you might not need to log every detail of every request, just the significant events. If you use async logging or buffer logs to send out (LogPro could be extended for that), ensure those mechanisms are reliable under load.

By following these practices, you'll maintain a high signal-to-noise ratio in your logs, keep your application secure, and ensure your logging infrastructure (and alerting via Telegram) remains sustainable as traffic grows.

Conclusion: Elevate Your Node.js Monitoring with LogPro

As developers, we can't improve what we don't monitor. Advanced logging is a cornerstone of effective application monitoring and error recovery. If you're building serious applications with Node.js or Next.js, relying solely on console.log is a risk you don't want to take – you might miss critical insights or lose precious time during an outage. Embracing a production-grade logging tool like LogPro can transform how you track your app’s health in production. You'll gain structured, meaningful logs, real-time visibility into issues via Telegram alerts, and the confidence that no error will slip by unnoticed.

LogPro is easy to integrate, highly configurable, and purpose-built for TypeScript Node.js projects. It addresses the pain points of traditional logging while adding modern features that save time and headaches for developers. Whether you need to debug atricky issue, audit user actions, or get instant notifications of failures, LogPro has you covered.

Don’t wait for the next production fire to realize your logging is inadequate. Take proactive steps now: try LogPro in your Node.js/Next.js project and experience the difference in your production monitoring. With better logs and timely alerts, you'll be ready to tackle problems head-on and ensure your application runs smoothly 24/7. Happy logging!

References

LogPro GitHub Repository – A minimalistic, structured logging utility for TypeScript projects (GitHub - xenral/LogPro: A minimal, structured logging utility for TypeScript projects)
Better Stack Community – 11 Best Practices for Logging in Node.js (Ayooluwa Isaiah, Oct 2023) (11 Best Practices for Logging in Node.js | Better Stack Community)
Medium (Arunangshu Das, Dec 2024) – What Is the Best Way to Manage Node.js Application Logs in Production? (What Is the Best Way to Manage Node.js Application Logs in Production? | by Arunangshu Das | Medium)

Canceling HTTP Requests in React (TypeScript) – Why It Matters & How to Do It

Ali Morshedzadeh — Wed, 26 Mar 2025 16:01:34 +0000

In modern frontend development, managing HTTP calls is just as important as making them. If you've ever fired off an API request in a JavaScript app (especially a React + TypeScript project) and then realized you don't need the result anymore, you know the dilemma. Should you cancel the request or just ignore the response? It turns out that canceling fetch requests (or any async operation) is crucial for keeping your app efficient and bug-free. In this article, we'll have a friendly conversation about why canceling HTTP requests matters – touching on memory leaks, race conditions, and unwanted UI updates – and explore how to implement it. We'll look at the common challenges developers face with request cancellation and then introduce a modern, lightweight solution: the async-cancelator NPM package. Finally, we'll walk through an example of using it in a React app with TypeScript to cancel an API call gracefully.

Why Canceling HTTP Requests Matters

When a web application launches an asynchronous request (like fetching data), a lot can happen while waiting for the response. If the user navigates away or triggers another request, that original response might arrive at an inconvenient time. Canceling unnecessary requests is not just an optimization – it's often a necessity to prevent memory leaks, race conditions, and UI glitches. Here are the key reasons request cancellation is so important:

Avoiding Memory Leaks: Unneeded API calls that continue running can hold onto resources. If a component unmounts but its fetch is still in progress, the result may try to update state on an unmounted component. By canceling the request when it's no longer needed, we free those resources.
Preventing Race Conditions: In a dynamic app, the user might trigger multiple requests in succession (for example, typing in a search box sending new queries). If an older request returns after a newer one, it can overwrite or conflict with the latest data. Canceling the outdated call ensures that only the latest response updates the state, avoiding inconsistent UI states.
Avoiding Unwanted or Erroneous UI Updates: Stale responses can not only show wrong data but also cause errors. React warns when an async task tries to update UI after a component has unmounted. By canceling the request on time, we stop these unwanted updates that could confuse users or throw errors.

In short, canceling HTTP requests in JavaScript (and particularly in React apps) is about maintaining control over your app's state and resources. It leads to better performance (no wasted bandwidth on irrelevant responses) and a smoother user experience.

Common Challenges in Canceling Async Requests

Even though canceling requests is so important, developers often struggle with it. The issue lies in how JavaScript promises and async functions work. By default, a promise does not have a built-in cancel mechanism – once you kick off an async task, it will run to completion and there's no direct way to stop it halfway. This can lead to a few challenges:

No Native Promise Cancellation: Historically, JavaScript didn't allow you to directly cancel a promise. Developers resorted to workarounds like setting a flag (e.g., let isCancelled = true) to at least ignore the result when it arrives. This pattern can prevent a state update if a component is unmounted, but it doesn't actually stop the request from running in the background.
Manual Cancellation Boilerplate: The introduction of the Fetch API and the AbortController provided a way to cancel HTTP fetch requests. Using the AbortController API, you can create a controller, pass its signal to fetch, and later call controller.abort() to cancel the request. While effective, it requires extra boilerplate every time. You need to create the controller, attach signals, handle errors, and clean up properly in your React effects.
Inconsistent Patterns Across APIs: Not all async operations support a universal cancel method. Fetch has AbortController, Axios historically used cancel tokens, and other libraries require their own cancellation logic. Managing these different patterns can be cumbersome, leading to inconsistent code and additional boilerplate.
Risk of Ignoring Real Errors: When implementing cancellation, one challenge is distinguishing an intentional cancel from a genuine error. For instance, when you abort a fetch, it throws an error that you typically want to ignore or handle differently from other errors. Forgetting to handle that properly can result in confusing error logs or user messages.

All these challenges mean that while canceling fetch requests in React (or any JS app) is possible, it can be tedious and error-prone to do it manually for every async operation.

Traditional Solution: AbortController

Before jumping into newer solutions, it's worth acknowledging the standard way to cancel HTTP requests in front-end apps: the AbortController API. This API is built into modern browsers and is commonly used in React apps to cancel fetch calls.

How AbortController Works:

You create an AbortController instance and get its signal. Pass this signal into the fetch request. Later, when you call controller.abort(), the signal triggers the fetch to abort, causing the fetch promise to reject with an "AbortError". In React, you typically set this up in a useEffect hook:

useEffect(() => {
  const controller = new AbortController();
  const { signal } = controller;

  fetch("https://api.example.com/data", { signal })
    .then(response => response.json())
    .then(data => {
      /* use the data */
    })
    .catch(error => {
      if (error.name === 'AbortError') {
        console.log('Fetch aborted');
      } else {
        console.error('Fetch error:', error);
      }
    });

  return () => {
    // Cleanup: abort the request if still in-flight
    controller.abort();
  };
}, []);

This pattern effectively prevents memory leaks and race conditions. However, while AbortController is powerful, using it for every request can become repetitive. You have to create, pass, and clean up controllers each time, which adds boilerplate, especially in larger codebases.

Introducing async-cancelator – A Modern, Lightweight Solution

One modern solution for simplifying async cancellation is the async-cancelator NPM package. This library was created to address exactly the problems we discussed. Instead of handling cancellation manually each time, async-cancelator provides a convenient API to make any promise cancellable. It works with fetch requests, third-party APIs, or any async function you write, all with a consistent approach.

What is async-cancelator?

It's a zero-dependency JavaScript library (usable in Node.js and browser environments) that gives you tools to cancel promises and even impose timeouts on them. Essentially, you wrap your async operation using the library, and it gives you back a promise that you can cancel on demand. It has full TypeScript support, making it a great fit for React+TypeScript projects.

Key Benefits of Using async-cancelator:

Simplified Promise Cancellation: Wrap any async operation in a cancellable promise. You get a cancel() function to call when you need to terminate the task, eliminating the need for manual flags or AbortControllers.
Automatic Promise Timeouts: Specify a timeout for any promise. If the operation doesn't finish in time, it automatically rejects with a clear TimeoutError. This saves you from writing custom timeout logic and ensures your app doesn't hang on slow requests.
Cross-Platform and Framework-Agnostic: It works in Node.js, vanilla browser JS, or within React apps. Whether you're canceling a network call or a long computation, the same approach applies.
TypeScript Support: Full type definitions mean you get type safety and IntelliSense as you integrate cancellation into your functions, reducing bugs and making refactors easier.
Zero Dependencies & Lightweight: The library is focused solely on async cancellation and timeout functionality, so it adds minimal overhead to your project.

Essentially, async-cancelator offers a clean API to create cancellable promises and manage them. Instead of manually wiring up an AbortController or juggling cancellation flags, you can use this tool to keep your code readable and consistent. It handles the heavy lifting of canceling async operations so you can focus on your app's logic.

How Does async-cancelator Work?

async-cancelator provides a few utility functions that make cancellation straightforward:

createCancellable(asyncFunction):

Wraps your async function and returns an object with { promise, cancel }. Calling cancel() prevents further then-handlers or state updates from that task. Inside your function, you receive a signal object to check (e.g., if (signal.cancelled) return;) at appropriate points.
createCancellableWithReject(asyncFunction):

Similar to the previous function, but if you call cancel(), the returned promise will be rejected with a special CancellationError. This allows you to handle cancellations in a try-catch block just like any other error.
withTimeout(promise, ms, message?):

Wraps any promise and returns a new promise that will reject if the original doesn't settle within the specified time. If it times out, it rejects with a TimeoutError, ensuring your app doesn't wait indefinitely on slow operations.

These utilities give you a unified approach to managing async tasks—whether they involve fetching data, performing computations, or any other promise-based work.

Example: Canceling an API Call in a React `useEffect` Hook

To illustrate how to integrate async-cancelator in a React component, consider a component that fetches data from an API and displays it. We want to ensure that if the component unmounts or the API endpoint changes, we cancel any ongoing request.

First, install async-cancelator via npm or yarn. Then use it in your component like so:

import React, { useEffect, useState } from 'react';
import { createCancellableWithReject, CancellationError } from 'async-cancelator';

function DataFetcher({ url }: { url: string }) {
  const [data, setData] = useState<any>(null);
  const [loading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    setLoading(true);
    setError(null);
    setData(null);

    // Wrap the fetch call in a cancellable promise
    const { promise, cancel } = createCancellableWithReject(async (signal) => {
      const response = await fetch(url);
      const result = await response.json();
      return result;
    });

    // Handle the promise outcome
    promise
      .then((result) => {
        setData(result);
        setLoading(false);
      })
      .catch((err) => {
        if (err instanceof CancellationError) {
          console.log("Fetch cancelled:", err.message);
        } else {
          setError(err);
          setLoading(false);
        }
      });

    // Cleanup: cancel the request if the component unmounts or the URL changes
    return () => {
      cancel("Component unmounted or URL changed");
    };
  }, [url]);

  return (
    <div>
      {loading && <p>Loading...</p>}
      {error && <p>Error: {error.message}</p>}
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
}

export default DataFetcher;

What's Happening Here?

We wrap our fetch call using createCancellableWithReject, which gives us both a promise and a cancel function.
The promise is then handled with .then and .catch. On success, the component state is updated. On error, we differentiate between a genuine error and a cancellation.
The cleanup function in the useEffect hook calls cancel() to ensure that if the component unmounts or the URL prop changes, the in-flight request is canceled. This prevents any unwanted state updates after the component has been removed.

This pattern can be adapted as needed. For example, if you wanted to impose a timeout on the request, you could use the withTimeout helper to wrap the fetch promise. The library makes it easy to mix cancellation and timeouts as required by your application.

Conclusion

Canceling HTTP requests in frontend JavaScript applications is a best practice that can save you from memory leaks, race condition bugs, and poor user experiences. In React, cleaning up async tasks in useEffect is essential to avoid the dreaded "state update on an unmounted component" warning. Traditionally, the AbortController API has been the go-to solution for canceling fetch requests, but it can be verbose to implement consistently.

The async-cancelator library offers a modern approach to request management by abstracting cancellation logic into a simple, reusable API. With it, you get cancellable promises and easy timeouts, all in a neat package that plays well with React hooks. This means less boilerplate and more confidence that your app only processes the async tasks it really needs. Embracing promise cancellation with tools like async-cancelator leads to cleaner, more maintainable code—and a smoother user experience.

Happy coding, and may your requests always be intentional and under control!

Boost React Performance and User Experience with Keyboard Shortcuts

Ali Morshedzadeh — Sat, 22 Mar 2025 19:42:05 +0000

When building modern web applications, performance and user experience (UX) often rank among the top priorities. One effective yet often overlooked way to improve both is by integrating keyboard shortcuts. Not only do shortcuts speed up user interaction, they also reduce reliance on repetitive mouse actions, resulting in a smoother and more efficient experience. In this article, we’ll explore how to leverage the lightweight react-keyhub package to implement fast, centralized keyboard shortcuts in your React app. We’ll also highlight its live preview so you can see it in action before integrating it into your own project.

Why Keyboard Shortcuts Enhance Performance and UX

Faster Workflows: By avoiding constant mouse travel, keyboard shortcuts allow users to perform repetitive actions quickly, improving overall task efficiency.
Enhanced Accessibility: Power users and individuals with limited motor abilities benefit from an interface that can be fully navigated using the keyboard.
Reduced Cognitive Load: Consistent and predictable shortcuts help users remember and perform actions seamlessly, minimizing friction in the user flow.
Performance Gains: A single, optimized event listener (as offered by react-keyhub) ensures minimal re-renders and more efficient event handling compared to attaching multiple onKeyDown or onKeyUp listeners across components.

Previewing react-keyhub in Action

If you’d like to see react-keyhub before you install it, check out the Live Shortcut Sheet Demo at:

https://xenral.github.io/keyhub-example

You’ll find a working shortcut sheet, discover how various keyboard combos are registered, and explore how the package handles event logic behind the scenes.

Introducing react-keyhub

react-keyhub is a TypeScript-friendly keyboard shortcut manager specifically designed for React applications. Its notable features include:

Central Configuration: All shortcuts are defined in one place, making them easy to maintain and update.
Optimized Performance: A single event listener handles all keyboard events, reducing overhead and improving responsiveness.
Context Awareness: You can define shortcuts that only activate in specific contexts (e.g., editor, terminal, or global).
Built-In Shortcut Sheet: Quickly display all registered shortcuts in a user-friendly modal or sidebar for improved discoverability.
Scalable and Modular API: Subscribe to any shortcut from any component without repeating logic or code.

Installation

To get started, install react-keyhub via your preferred package manager:

npm install react-keyhub
# or
yarn add react-keyhub

Basic Setup and Usage

Configure Your Shortcuts Create a shortcut configuration object (or extend the default shortcuts) to centralize all your key mappings:

   // shortcuts.ts
   import { defaultShortcuts, ShortcutSettings } from 'react-keyhub';

   export const myShortcuts: ShortcutSettings = {
     ...defaultShortcuts, // Include predefined shortcuts (e.g., Ctrl+S for Save)
     customAction: {
       keyCombo: 'ctrl+k',
       name: 'Custom Action',
       description: 'Perform a custom action',
       scope: 'global',
       priority: 100,
       status: 'enabled',
       group: 'Custom',
       type: 'regular'
     }
   };

Wrap Your App with the Provider The KeyHubProvider makes your shortcuts and event handling available throughout the React component tree:

   // App.tsx
   import React from 'react';
   import { KeyHubProvider } from 'react-keyhub';
   import { myShortcuts } from './shortcuts';
   import MyMainComponent from './MyMainComponent';

   function App() {
     return (
       <KeyHubProvider shortcuts={myShortcuts}>
         <MyMainComponent />
       </KeyHubProvider>
     );
   }

   export default App;

Subscribe to a Shortcut Within any component, use useShortcut to subscribe to a specific shortcut by its ID:

   // MyMainComponent.tsx
   import React, { useState } from 'react';
   import { useShortcut, ShortcutSheet } from 'react-keyhub';

   const MyMainComponent = () => {
     const [isSheetOpen, setIsSheetOpen] = useState(false);

     // Subscribe to an existing shortcut (e.g., showShortcuts = Ctrl+/)
     useShortcut('showShortcuts', () => setIsSheetOpen(prev => !prev));

     // Subscribe to our custom action (Ctrl+K)
     useShortcut('customAction', () => {
       console.log('Custom action triggered!');
       // Perform custom logic here
     });

     return (
       <div>
         <h1>Welcome to Our App</h1>
         <p>Press Ctrl+/ to open the Shortcut Sheet.</p>
         <ShortcutSheet 
           isOpen={isSheetOpen} 
           onClose={() => setIsSheetOpen(false)} 
         />
       </div>
     );
   };

   export default MyMainComponent;

With just these steps, you have a centralized shortcuts system that’s easy to maintain and scalable for future growth.

Performance Benefits of a Centralized Shortcut System

Reduced Event Handlers: Rather than adding multiple key listeners to separate components, react-keyhub uses a single optimized event listener at the document level. This approach lowers the chance of event conflicts and cuts down on overhead, improving your app’s responsiveness.
Minimized Re-Renders: Because subscription logic is handled through a specialized hook that references a central event bus, you avoid unnecessary re-renders triggered by re-attaching or removing event listeners in various components.
Scoped Updates: If you need to enable, disable, or update shortcuts, you only do it once. This saves time and resources compared to toggling multiple event handlers scattered across your codebase.

Best Practices for Improving UX with Shortcuts

Keep Shortcuts Simple: Use combinations that are widely recognized (e.g., Ctrl+S for Save). Avoid overly complex combos that users are less likely to remember.
Provide a Shortcut Reference: The built-in ShortcutSheet component in react-keyhub is perfect for displaying all shortcuts in one place, helping users discover features quickly.
Contextual Shortcuts: For advanced scenarios, define shortcuts that only work when a certain part of the UI is active (e.g., editor context vs. global context). This prevents users from triggering irrelevant actions.
Accessibility Checks: Ensure that your shortcuts do not interfere with accessibility features, such as screen readers or native browser shortcuts (e.g., Ctrl+T for new tab in most browsers).

Example: Dynamic Registration for Power Users

When you need additional shortcuts for power users, you can register them dynamically and remove them later if they become irrelevant:

import React from 'react';
import { useShortcutRegister } from 'react-keyhub';

const PowerUserShortcut = () => {
  useShortcutRegister('powerUserMode', {
    keyCombo: 'ctrl+shift+p',
    name: 'Activate Power-User Mode',
    description: 'Enables advanced features',
    scope: 'global',
    priority: 200,
    status: 'enabled',
    group: 'Advanced',
    type: 'regular',
    action: () => {
      alert('Power-User Mode Activated!');
    }
  });

  return null; // This component only handles the shortcut and has no UI
};

export default PowerUserShortcut;

This dynamic approach underscores how flexible react-keyhub can be for evolving user needs.

Conclusion

Implementing keyboard shortcuts in your React application is a straightforward strategy to enhance both performance and user experience. By centralizing keyboard events with react-keyhub, you benefit from reduced overhead, scalable shortcut management, and an improved workflow for end users.

And don’t forget: you can try it out first with the

Live Shortcut Sheet Demo

to understand how react-keyhub works in a real-world scenario.

Whether you’re catering to power users who crave keyboard efficiency or simply looking to streamline navigation, react-keyhub provides all the tools you need. By following best practices for shortcut creation, context awareness, and dynamic registration, your React app can deliver a faster and more intuitive experience for everyone.

Ready to supercharge your React app with keyboard shortcuts? Install react-keyhub today and start improving your application’s performance and UX.

React Keyboard Shortcuts: Boost App Performance Using React-Keyhub

Ali Morshedzadeh — Sun, 16 Mar 2025 14:48:35 +0000

Introduction: Why Keyboard Shortcuts Improve UX in React

Keyboard shortcuts are a proven way to enhance user experience by enabling faster interactions. They boost productivity and save time for power users. In practice, a few quick key presses can accomplish tasks much faster than navigating through clicks and menus, allowing users to operate your application more efficiently. Modern web applications (from email clients to project management tools) often include rich sets of shortcuts to streamline frequent actions. In the context of React apps, implementing keyboard shortcuts can significantly improve the UX for power users and developers alike, providing a smoother and more efficient workflow.

However, adding keyboard shortcuts to a React application isn’t without challenges. Managing numerous key events across components can become complex as an app grows. Developers need to carefully handle event listeners, prevent conflicts, and maintain performance. Below, we’ll explore these challenges and introduce React-Keyhub, a new library that simplifies and optimizes keyboard shortcut management in React applications.

Challenges in Managing Keyboard Shortcuts in React

Implementing keyboard shortcuts “from scratch” or with basic libraries can lead to several challenges:

Complex Event Handling: Using native event listeners (e.g. keydown/keyup) in React components requires adding and removing listeners in lifecycle hooks (or using useEffect). In large apps with many components, this can scatter shortcut logic across the codebase. If multiple components register the same shortcut, their behaviors may conflict or override each other, leading to unpredictable results. For example, two open components listening for the same key combo might both trigger, or one might prevent the other from firing.
Global vs Local Scope: Determining when a shortcut should be active is tricky. Some shortcuts are global (should work anywhere in the app), while others are context-specific (only active in a certain section or when a modal is focused). Handling this manually often means tracking focus or application state to enable/disable listeners. One developer noted that using a library like Mousetrap (a low-level key handler) required manually registering and deregistering shortcuts on component focus to simulate context-specific behavior. This manual bookkeeping is error-prone and hard to scale.
Preventing Unwanted Behavior: Many key combinations have default browser actions (e.g. Ctrl+S opening the browser “Save Page” dialog, Ctrl+P for Print, etc.). When implementing custom shortcuts, you typically need to call event.preventDefault() to stop the browser from executing its default action. Forgetting to do so can lead to confusing user experiences. Similarly, you might want to ignore key events that occur while the user is typing in an input field (so that, for instance, typing “Ctrl+F” in a search box doesn’t trigger your app’s global Find shortcut). Handling these cases with manual listeners or simpler libraries can be cumbersome – one Stack Overflow user pointed out that a React hotkeys library didn’t provide a built-in way to prevent shortcuts from firing when typing in a text input, illustrating how this can be a tricky issue to solve.
Maintenance and Consistency: Without a central definition, shortcut mappings can end up duplicated in multiple places. For instance, a component might define a keyboard shortcut and also display the shortcut in a tooltip or menu. If these definitions are not centralized, it’s easy for them to get out of sync (e.g. you change the key combo in one place and forget to update the tooltip). This duplication can lead to inconsistencies. Additionally, some older React shortcut libraries have fallen out of maintenance or have known bugs (as reported with certain keys on macOS in an older library), which is a concern for long-term projects.
Performance Concerns: Attaching many event listeners (one per component or feature) can impact performance. Each listener added to window or document will execute on every key press, potentially doing redundant checks. In a naïve implementation, dozens of components each with their own keydown handler can slow down response time or cause unnecessary re-renders. Ensuring that shortcuts are handled efficiently (with minimal overhead per key stroke) requires careful architecture.

Given these challenges, a robust solution for keyboard shortcut management in React is highly valuable. React-Keyhub aims to address these issues by providing a central, declarative system for defining and handling shortcuts in React applications. Let’s introduce React-Keyhub and see how it tackles the pain points outlined above.

Introducing React-Keyhub: A Modern Approach to React Shortcuts

React-Keyhub is a lightweight, scalable keyboard shortcut manager for React apps that brings a much-needed structured approach to handling shortcuts. It was designed to solve the common challenges of shortcut implementation by offering a comprehensive feature set out of the box. Key features of React-Keyhub include:

Centralized Configuration: All keyboard shortcuts can be defined in one place, rather than scattered throughout components . This means you have a single source of truth for shortcut definitions (keys, descriptions, scope, etc.), making it easy to review or modify shortcuts globally.
TypeScript Support and Type Safety: React-Keyhub is built with TypeScript, and it provides strong type definitions for your shortcuts and hooks. This ensures that if you reference a shortcut by its ID in your code, you’ll get compile-time checks and autocompletion. You can’t accidentally use a non-existent shortcut ID without TypeScript catching it – a big win for maintainability.
Optimized Performance (Single Event Listener): Unlike ad-hoc solutions that attach many listeners, React-Keyhub uses one central event listener (an “event bus”) for all shortcuts. All key presses are funneled through this single handler with an efficient lookup mechanism to determine if a defined shortcut was pressed. This design minimizes overhead and avoids the duplicated work of multiple listeners. It’s essentially a publish/subscribe model: one global listener publishes key events, and React-Keyhub notifies the relevant subscriber callbacks.
Modular, Hook-based API: The library provides React Hooks (and equivalent utilities) to subscribe to shortcuts from any component. You don’t have to wrap components in special providers beyond the one top-level provider. Any component can call a hook like useShortcut('save', callback) to respond to a shortcut. This keeps your component logic concise and focused only on what to do when the shortcut triggers, while React-Keyhub handles the wiring behind the scenes.
Built-in Shortcut Cheat Sheet UI: A standout feature is the ShortcutSheet component, which can render a nice looking list of all registered shortcuts in your app. Many applications implement a “keyboard shortcuts help” modal or overlay (often shown when the user presses a certain key like ? or Ctrl+/). React-Keyhub provides this out of the box, so you don’t need to manually create and maintain a shortcuts reference UI. This improves the user experience by making shortcuts discoverable and reduces the developer effort to document them.
No External Dependencies: React-Keyhub is self-contained and doesn’t rely on jQuery or other large libraries (it only depends on React itself). This keeps bundle size small and avoids compatibility issues.
Dynamic Updates at Runtime: Shortcuts can be enabled, disabled, or even reconfigured on the fly. This means if your app needs to change shortcuts based on user preferences or mode, React-Keyhub can handle that without requiring a full reload. For example, you could let users remap keys or turn off certain shortcuts and apply those changes immediately.
Contextual Shortcuts: React-Keyhub has built-in concept of scope and context for shortcuts. You can define shortcuts that only work under certain conditions – for instance, when a specific modal or page is active, or when focus is in a particular UI region. This is much simpler than manually adding/removing listeners on focus changes. If a shortcut has a context defined, React-Keyhub will only trigger it when the active context matches, otherwise it’s ignored. This addresses the earlier focus management problem directly.
Support for Key Sequences: In addition to single key combinations (like Ctrl+K), React-Keyhub supports multi-key sequences. This means you can define shortcuts that require pressing keys in order (e.g. press G then C to trigger some action). This capability is useful for apps that have many shortcuts and want to offer mnemonic sequences (like Gmail or GitHub’s “go to” shortcuts). React-Keyhub handles the timing and state for sequences so you don’t have to implement that logic.
Theming and Responsive UI for ShortcutSheet: The provided ShortcutSheet component supports light and dark themes (or auto theme) and can be displayed as a modal or a sidebar. It’s also responsive, so it will adapt to different screen sizes or layouts. This means the shortcut help UI will look consistent with your app style and can be shown in different ways depending on your design needs.
Developer Experience Enhancements: Little touches like autocomplete suggestions for shortcut IDs in your editor (thanks to the type definitions) and informative console warnings if you try to use an undefined shortcut ID, make the developer experience smoother. These help catch errors early and guide you as you integrate shortcuts into your app.

Overall, React-Keyhub’s feature set is designed to cover the needs of large, complex React applications that want a reliable, maintainable way to implement keyboard shortcuts. It effectively addresses the earlier challenges: central configuration and context handling mitigate unpredictable behavior and duplication, built-in prevention of default events and input-field ignoring addresses the interference issues, and the single listener architecture boosts performance.

In the next section, we’ll walk through a practical tutorial on setting up React-Keyhub in a React application, illustrating how to define shortcuts and use the library’s API in a step-by-step guide.

Getting Started with React-Keyhub (Implementation Guide)

Integrating React-Keyhub into your project is straightforward. In this mini React-Keyhub tutorial, we’ll cover the essential steps to get it up and running, along with best practices for usage.

Step 1: Install the package. If you haven’t already, add React-Keyhub to your project via npm or Yarn:

npm install react-keyhub
# or
yarn add react-keyhub

This will download the library and add it to your dependencies.

Step 2: Define your shortcuts configuration. Decide on the keyboard shortcuts you want in your application and define them in a central object. React-Keyhub comes with a set of default shortcuts for common actions (like Save, Copy, Paste, etc.), which you can import and extend. For example, you can create a myShortcuts object that merges the defaults with your custom shortcuts:

import { defaultShortcuts } from 'react-keyhub';

const myShortcuts = {
  ...defaultShortcuts,       // include common defaults
  newIssue: {
    keyCombo: 'ctrl+shift+n',
    name: 'New Issue',
    description: 'Create a new issue',
    scope: 'global',
    priority: 100,
    status: 'enabled',
    group: 'Issues',
    type: 'regular'
  },
  openSettings: {
    keyCombo: 'ctrl+,',      // Ctrl + comma
    name: 'Open Settings',
    description: 'Open the settings panel',
    scope: 'global',
    priority: 100,
    status: 'enabled',
    group: 'Navigation',
    type: 'regular'
  }
};

In this example, we included a couple of custom shortcuts (newIssue and openSettings) in addition to the defaults. Each shortcut entry has properties like the key combination (keyCombo), a human-friendly name and description, its scope (global or local), and so on. You can define as many as you need here – keeping them in one object makes it easy to manage. (We’ll discuss all the available shortcut properties in a moment.)

Step 3: Wrap your app with the KeyHubProvider. React-Keyhub uses a context provider to make the shortcut definitions available throughout your React component tree. In your application’s root (for example, in your entry file or top-level App component), wrap the app with <KeyHubProvider> and pass in the shortcuts object you created:

import { KeyHubProvider } from 'react-keyhub';
import { myShortcuts } from './myShortcuts';  // the object we defined in Step 2
import App from './App';

const Root = () => (
  <KeyHubProvider shortcuts={myShortcuts}>
    <App />
  </KeyHubProvider>
);

export default Root;

This makes all your shortcuts active and ensures they are listened for globally. By default, the provider attaches a key event listener to the document and sets up all shortcuts defined in myShortcuts. You can also pass an options prop to KeyHubProvider to tweak settings (like preventDefault, stopPropagation, and other behaviors – more on these in the Performance section). But for most cases, the defaults are sensible.

Step 4: Subscribe to shortcuts in your components. With the provider in place, individual components can use hooks to respond to specific shortcuts. The primary hook is useShortcut(shortcutId, callback). When you call this hook, it will register the given callback to run whenever the shortcut with that ID is triggered. For example, in a component:

import { useShortcut } from 'react-keyhub';

function EditorPane() {
  // Subscribe to the "save" shortcut (e.g., Ctrl+S) to run saveDocument()
  useShortcut('save', (event) => {
    event.preventDefault();
    saveDocument();  // custom logic to save content
  });

  // Subscribe to a custom shortcut "openSettings"
  useShortcut('openSettings', () => {
    openSettingsModal();
  });

  // ... component JSX ...
}

Here we used useShortcut('save', ...) to intercept the Save command. The event passed in can be used to preventDefault() if needed (though note, React-Keyhub’s provider has an option to do this automatically for all shortcuts). We also hook into our custom openSettings shortcut to open a settings modal. You can call useShortcut multiple times in the same component for different shortcut IDs. Under the hood, these are all tying into the central event bus, rather than adding new DOM listeners for each usage – so you get a clean component API without the performance hit of separate listeners.

Step 5: (Optional) Display a Shortcut Cheat Sheet. To make your shortcuts discoverable, you can include the provided <ShortcutSheet> component somewhere in your app (often in a top-level component or a modal overlay). This component will render a list of all registered shortcuts, grouped and nicely formatted. A common pattern is to toggle the visibility of the ShortcutSheet when the user presses a certain key (like Ctrl+/ or ?). In fact, React-Keyhub includes a default shortcut for this purpose: by default pressing Ctrl+/ is mapped to an action ID "showShortcuts", intended to open or toggle the shortcuts menu. You can leverage that:

import { useState } from 'react';
import { useShortcut, ShortcutSheet } from 'react-keyhub';

function App() {
  const [sheetOpen, setSheetOpen] = useState(false);
  // Toggle the shortcut sheet when "showShortcuts" shortcut (Ctrl+/) is pressed
  useShortcut('showShortcuts', () => setSheetOpen(open => !open));

  return (
    <>
      {/* ... rest of your app UI ... */}
      <ShortcutSheet 
        isOpen={sheetOpen} 
        onClose={() => setSheetOpen(false)} 
      />
    </>
  );
}

In this snippet, pressing Ctrl+/ anywhere in the app will trigger the useShortcut('showShortcuts', ...) hook and toggle the ShortcutSheet. The <ShortcutSheet> component will show all the shortcuts (including names and key combos, exactly as defined in your myShortcuts object). We can see in the React-Keyhub documentation that using the ShortcutSheet is as simple as controlling its isOpen prop and handling an onClose callback. By default it will show all shortcuts, but you can also filter it or theme it if needed.

That’s it for the basic setup! With these steps, you have a working keyboard shortcut system in your React application. All your shortcuts are declared in one place, any component can respond to them, and you have a built-in way to show the user what shortcuts are available.

Best Practices: When implementing keyboard shortcuts with React-Keyhub, consider these tips:

Group and Name Shortcuts Clearly: Use the group property to categorize shortcuts (for example "File" vs "Edit" vs "Navigation") and provide descriptive name and description for each shortcut. This will make the ShortcutSheet more user-friendly and your configuration easier to understand.
Choose Scopes Appropriately: If a shortcut should always be available, use scope: 'global'. If it only makes sense in a certain UI region, consider using scope: 'local' and managing it via context or only mounting the listener in that part of the app. React-Keyhub’s context feature can also be used for more fine-grained control (e.g., only active when a certain mode or component is active). For instance, you might set context: 'editor' on editor-specific shortcuts and call useShortcutContext('editor') in your Editor component to activate those.
Prevent Conflicts and Defaults: Rely on React-Keyhub’s default behavior of preventing default browser actions and stopping propagation for shortcuts. By default preventDefault and stopPropagation are enabled in the provider options, which means your Ctrl+S won’t open the browser save dialog, and the event won’t trickle down to other handlers once handled. These defaults save you from having to manually call e.preventDefault() in every handler (unless you have a special case). They also ensure that once a key combo is handled by a shortcut, it won’t inadvertently trigger another handler elsewhere.
Test on Multiple Platforms: If your app is used on both Windows and macOS, test the shortcuts on each. Modifier keys differ (e.g., macOS users have the Command key). React-Keyhub supports the standard ctrl+ prefixes and will work with the Control key; if you want to support Command on Mac, you might define shortcuts using the meta key in the combo (e.g., meta+s for Command+S) or simply instruct Mac users to use Command if Control is not present. (React-Keyhub doesn’t automatically unify Ctrl/Cmd, so you might define both if needed for a truly cross-platform shortcut.)
Keep Shortcut Actions Lightweight: The handlers you register with useShortcut should ideally perform quick actions or defer heavier work (e.g., trigger a dispatch or state update, rather than doing a very expensive computation directly in the handler). This way, the UI remains responsive to key presses. Since the event handling is centralized, you want to keep each key event’s processing as efficient as possible.

By following these practices, you’ll ensure a smooth integration of React-Keyhub that is maintainable and user-friendly.

Performance Considerations and Optimizations

One of the primary advantages of React-Keyhub is its focus on performance. Let’s highlight how it optimizes keyboard event handling and what that means for your React app:

Single Event Listener Architecture: React-Keyhub attaches one keyboard event listener to a target (by default, the document object) for the entire application. All key presses are caught by this listener, and React-Keyhub internally routes the event to the appropriate shortcut callback(s) if a match is found. This is much more efficient than adding separate listeners in each component. In a traditional approach, if 10 components needed shortcuts, you might end up with 10 keydown listeners. With React-Keyhub, there’s just one listener no matter how many shortcuts you have. Fewer listeners mean less work for the browser on each key event and reduced memory usage. The library’s documentation explicitly notes this “single event listener with efficient lookup” design as an optimized performance feature.
Efficient Key Lookup: When a key event occurs, React-Keyhub quickly determines if that key (or key combination) corresponds to a registered shortcut. Under the hood, it likely maintains a map of key combos to shortcut IDs for constant-time lookups, as well as tracking state for sequence shortcuts. This avoids having to loop through all shortcuts for each key press. The result is that even if you have dozens of shortcuts, a key press will be processed in a very short time to decide if there’s a match.
Preventing Unnecessary Work: By default, the library prevents the default browser behavior for recognized shortcuts and stops the event’s propagation. This means once a shortcut is handled, other parts of your app or other listeners won’t also try to handle the same event. Stopping propagation not only prevents conflicts, but it saves the browser from having to notify other (non-existent) handlers for that event. Also, React-Keyhub’s default ignoreInputFields: true setting means that if the user is typing into a text field or textarea, the global shortcut handler will ignore those key events. This is a smart optimization: there’s no need to run shortcut logic for keys that the user is intentionally typing as input. This also ensures that typing in a form doesn’t accidentally trigger shortcuts – a big usability win, essentially solving the problem noted earlier with other libraries.
Debounce Option: The provider offers a debounceTime option which is by default 0, but you could set to a few milliseconds if you want to coalesce fast repeated key presses. For example, if a user holds down a key that triggers a shortcut repeatedly, a debounce can prevent firing the action too frequently. This is optional and can be tuned if your use case involves very rapid key presses.
No Forced Re-renders: The React-Keyhub context is designed such that simply pressing keys does not cause React component re-renders in itself. The useShortcut hook adds an event subscription, but it doesn’t use React state to trigger renders on each key press. Your components will only re-render if your shortcut handler explicitly updates state. This is important for performance – you don’t want every key press to re-trigger a React reconciliation unless something in the UI actually changed as a result. React-Keyhub manages the event listening outside of React’s render cycle (in the event bus), so it won’t slow down your app’s rendering.
Lightweight Footprint: Given it has no external dependencies and is built for this specific purpose, React-Keyhub keeps its bundle small. A smaller, purpose-built library often outperforms trying to use a general-purpose library or writing repetitive code throughout the app. Also, because it’s centralized, the code for handling shortcuts is loaded once instead of potentially duplicated logic in multiple components.

In summary, React-Keyhub contributes to React performance optimization by minimizing the number of event listeners and avoiding unnecessary processing on each keystroke. It was built with large applications in mind, where performance and scalability matter. By using it, you can be confident that adding more shortcuts won’t linearly degrade your app’s performance, thanks to the efficient event handling strategy.

Comparison with Other Shortcut Libraries

When evaluating options, consider this quick comparison:

Feature	React-Keyhub	react-hotkeys-hook	Mousetrap
TypeScript Support	✅ Yes	❌ No	❌ No
Built-In Shortcut Visualization	✅ Yes	❌ No	❌ No
Context-Aware Shortcuts	✅ Yes	❌ No	❌ No
Sequence Shortcuts	✅ Yes	❌ No	✅ Yes
Dynamic Updates	✅ Yes	❌ No	❌ No

React-Keyhub is a relatively new entrant in the React ecosystem, so it’s worth comparing it to other approaches you might have seen or used for keyboard shortcuts in React:

Manual Event Listeners vs React-Keyhub: Some developers roll their own solution using React’s useEffect to attach keydown listeners. While this works for simple cases, it becomes hard to manage as shortcuts multiply. You’d need to handle global state or context manually, ensure cleanup on unmount, and coordinate multiple listeners. By contrast, React-Keyhub provides a structured system with far less boilerplate – you declare shortcuts and use hooks, rather than dealing with low-level events yourself. The built-in features like default prevention and context awareness save a lot of effort that a manual solution would require.
Mousetrap (or low-level libraries): Mousetrap is a popular vanilla JS library for key events. It’s powerful but not React-specific. Using it in React means you still have to manage integration (e.g., calling Mousetrap in lifecycle hooks). One major limitation noted with Mousetrap is that it has a global key binding state, so only one callback can be bound to a given key combination at a time. If you want context-specific behavior, you must unbind and rebind keys as the user’s focus or context changes, which can get complex (and risk unbinding something that another part of the app needed). React-Keyhub inherently supports multiple shortcuts with the same keys in different contexts (using scope or context), and it prioritizes them appropriately (with a priority setting if needed). This means no manual unbinding is required — local shortcuts can override global ones when active, etc., in a controlled manner.
React-Hotkeys (and React-Hotkeys-Hook): react-hotkeys is an older library that introduced the idea of defining shortcuts via a wrapping component (<HotKeys>). It works, but as reported by some developers, it hasn’t been actively maintained and had quirks (especially with certain keys on macOS). More modern solutions like react-hotkeys-hook offer a hooks-based API, but under the hood they may still attach multiple event listeners if you use the hook in many components. One developer using a hooks-based library noted they needed to create a dedicated top-level component to catch all key events to avoid attaching many listeners throughout the app. React-Keyhub saves you from this pattern by design — its provider is effectively that single top-level listener, and you don’t need to engineer it yourself. Additionally, many of these libraries don’t provide extras like a built-in shortcuts help dialog or TypeScript type safety. React-Keyhub’s built-in ShortcutSheet and TS integration set it apart, giving it an edge in both user experience and developer experience.
React-Keyboard-Event-Handler / React-Keydown / Others: There are several other small libraries that allow you to specify key handlers in React. Many of them focus on component-level shortcuts or require higher-order components/decorators. They can be useful for specific isolated cases, but they often lack a global perspective. For example, handling orchestrated sequences of keys, or enabling/disabling shortcuts dynamically, might not be supported out of the box. In contrast, React-Keyhub was built to be a holistic solution, combining the global management with per-component subscription. It also provides utilities to dynamically register or update shortcuts at runtime, which is rarely found in simpler libraries.

In summary, React-Keyhub’s advantages lie in its unified approach and rich feature set. It takes lessons learned from earlier tools and addresses their shortcomings (maintenance, context handling, performance, etc.). If your application only needs a couple of very simple shortcuts, a smaller hook or manual listener could do the job. But for any non-trivial application where shortcuts are an important part of the UI, React-Keyhub offers a robust, scalable solution with features that would be tedious to implement manually. It’s designed to grow with your app, whereas piecemeal solutions might start to falter as you add more shortcuts or more complex requirements.

Common Use Cases for Keyboard Shortcuts in React Apps

To put things into perspective, let’s consider some common use cases and examples of keyboard shortcuts in real-world React applications. Many of these scenarios are easily implemented with React-Keyhub (and some are even included in its default shortcut set):

File and Document Operations: Web applications that mimic desktop apps often include shortcuts like Save (Ctrl+S), Print (Ctrl+P), or New Item (Ctrl+N) for convenience. For instance, a project management tool might use Ctrl+N to create a new task. React-Keyhub’s default shortcuts include Save and Print with the standard key combos, which you can use or override as needed.
Editing Commands: Rich text editors or form-heavy apps benefit from shortcuts for Undo/Redo (Ctrl+Z / Ctrl+Y), Copy/Paste (Ctrl+C / Ctrl+V), Find (Ctrl+F), etc. These accelerate text manipulation and navigation. If you’re building, say, a notes app or code editor in React, implementing Undo/Redo via shortcuts is almost essential for a good user experience.
Navigation and View Switching: Many apps allow quick navigation using keys. For example, an email client might use J/K to move to the next or previous message, or a dashboard might use Ctrl+1/2/3 to switch tabs. Some applications even implement sequence shortcuts for navigation; GitHub, for example, has shortcuts like pressing “G” then “C” to go to the Code tab. With React-Keyhub you can define a sequence like 'g c' to trigger a function. This could open a specific panel or focus a certain element in your app.
Help and Accessibility: Providing a shortcut for “Help” or “Show Shortcuts” is a common pattern. For instance, F1 is often used to open help documentation. Another common one is ? or Ctrl+/ to open an overlay listing all available shortcuts (as discussed, React-Keyhub even has showShortcuts built in for this purpose). Including such a shortcut is great for discoverability – users can hit one key and see a cheat sheet of what they can do without touching the mouse.
Context-Specific Controls: In complex interfaces, certain shortcuts only make sense in a given context. For example, a code editor might offer Vim-style navigation keys (H/J/K/L for left/down/up/right) but only when the editor is active and in “vim mode”. Using React-Keyhub, you could assign those keys to actions with a context like context: 'vim', so they only work when that context is set. Another scenario: in a modal dialog, you might want the Enter key to submit and Escape key to close, but only when that modal is open. Rather than globally binding Enter/Escape (which could interfere elsewhere), you can register those shortcuts as local to the modal’s context or scope.
Power-User Features: Shortcuts aren’t just for basic commands. They can unlock advanced workflows. Think of an application like Photoshop – nearly every action has a shortcut. In a React app, you might allow batch actions via shortcuts (e.g., multi-select items and press Delete key to remove them), or developer tools might have hidden shortcuts for debugging views. With a system like React-Keyhub, adding these is straightforward and doesn’t clutter your UI (until the user calls up the ShortcutSheet to see them).

These examples barely scratch the surface, but they illustrate how ubiquitous and useful keyboard shortcuts can be. When designing your application’s shortcuts, it’s good to follow established conventions (like using common keys for common actions – users appreciate when “Ctrl+F” means Find, etc.). React-Keyhub’s default set can act as a guide in this regard, as it includes many standard shortcuts with familiar key bindings. You can customize or disable any defaults that don’t apply to your app.

By implementing keyboard shortcuts thoughtfully, you cater to both novice users (who might gradually learn the shortcuts) and expert users (who will greatly appreciate the efficiency). Your React app can provide a desktop-like experience where power users rarely need to take their hands off the keyboard, thanks to a well-implemented shortcut system.

Conclusion

Keyboard shortcuts in React applications are a powerful tool for enhancing user experience and boosting productivity. They serve as “accelerators” that let experienced users get things done rapidly. Yet, managing a web of keyboard events in a complex React app can be challenging without the right approach.

React-Keyhub offers a professional, robust solution to this problem. By centralizing shortcut definitions, providing a simple hooks API, and handling all the heavy lifting (event management, context, sequences, etc.), it lets developers focus on what should happen on a shortcut, rather than how to wire it up. We’ve seen how it addresses common issues like event conflicts, performance overhead, and maintenance hassles, all while adding valuable features like a built-in shortcuts cheat sheet and TypeScript support.

For an intermediate React developer, React-Keyhub strikes a great balance: it’s deep enough to handle advanced use cases (dynamic updates, context-specific controls, intricate key sequences), but it’s also accessible to those with less experience – you can start with basic shortcuts and gradually adopt more features. The step-by-step integration is straightforward, and the defaults mean you get sensible behavior without a lot of configuration.

In adopting React-Keyhub, you make your application more efficient and user-friendly, especially for power users who rely on keyboard commands. It’s not about adding “cool tricks” – it’s about improving the overall usability and responsiveness of your app. And because React-Keyhub is focused on performance and clean architecture, you can add as many shortcuts as your app needs without worrying about a tangle of event listeners or sluggish key responses.

In summary, leveraging keyboard shortcuts in your React app (with the help of a tool like React-Keyhub) is a smart move for both user experience and developer maintainability. It allows you to deliver features that feel polished and responsive. Whether you’re building a rich text editor, a dashboard, or any interactive web application, consider giving your users the gift of speed with well-implemented React shortcuts. With React-Keyhub, doing so is easier and more effective than ever. Happy coding, and may your users never have to reach for the mouse when they don’t want to!

Still Using Redux Everywhere? How an Event Bus Could Transform Your React Workflow

Ali Morshedzadeh — Fri, 07 Mar 2025 14:12:48 +0000

Modern React developers often reach for state management libraries (Redux, Zustand, Recoil, etc.) by default to handle shared state. However, using these state managers everywhere can introduce unnecessary complexity and boilerplate into your apps. In many cases, an event-driven architecture can be a simpler, more flexible solution. In this article, we’ll explore the pitfalls of overusing state managers, discuss the event-driven alternative, introduce react-eventizer as a powerful event bus for React, and walk through real-world examples with code. We’ll also cover best practices and when to choose events vs. state managers. Let’s dive in!

The Pitfalls of Overusing State Managers

State management libraries like Redux, Zustand, and Recoil are powerful tools for complex apps. They provide a centralized store and fancy features (time-travel debugging, middleware, etc.), but they come at a cost. Introducing Redux or similar libraries in every situation can be overkill for small to medium apps, adding unnecessary overhead. Redux in particular often requires a lot of boilerplate (actions, reducers, providers) which can make code harder to understand and maintain. Even “lighter” solutions like Zustand or Recoil, while simpler, still add an extra layer of abstraction that you might not need for straightforward cases.

Another common issue is prop drilling and tangled callback chains in deep component hierarchies. In a typical React app, data flows down through props and events bubble up through callback props. In a simple component tree this is fine, but as your app grows, passing props through multiple layers (just to get data to a distant component) and wiring callbacks back up becomes cumbersome. You end up with intermediate components that exist only to shuttle data around, making the code harder to follow and maintain. This tight coupling of components increases cognitive load and brittleness in your codebase.

Prop drilling forces passing props (green arrows) down many layers, and bubbling callbacks (red arrows) up through intermediaries, which can tangle your component architecture.

To avoid prop drilling hell, many developers instinctively turn to a global state solution (Context API, Zustand, Redux, etc.) so components can share data without explicit prop passing ([Event-Driven Architecture for Clean React Component Communication - DEV Community]. While this can solve one problem, overusing global state introduces new complexity – you might be maintaining a giant store or context for things that could be handled more simply. So is there a middle ground? Event-driven architecture offers a compelling alternative for many scenarios.

The Event-Driven Alternative: Loosely Coupled Components

Event-driven architecture in React allows components to communicate through a publish/subscribe (pub-sub) pattern rather than via shared state or direct parent-child links. In essence, components can emit events (publish) and listen for events (subscribe) using a central event bus, without needing to know about each other’s existence. This decouples your components, making the app architecture more modular and easier to maintain.

In an event-driven approach, when something happens in one component, it can broadcast an event into a central channel. Any other component interested in that event can react to it, regardless of where it sits in the component tree. This means no more drilling props down or lifting state up just to get two distant components talking – the event bus handles that communication in a transparent, global way.

Event-driven communication: sub-components dispatch events to a central events handler (blue arrows), which notifies any listening components. This eliminates the need to thread callbacks up through every intermediate parent.

Because components remain unaware of who is listening or emitting, this pattern promotes loose coupling. Your components become more self-contained: they just announce what happened (e.g. “item X was deleted”) or respond to announcements (“someone deleted an item, I should update my list”) without tight integrations. The result is often simpler code flow – especially for cross-cutting concerns like global notifications, logging, or syncing data – and potentially fewer lines of code than an equivalent Redux setup. In fact, an event bus can bring clarity to a large codebase by centralizing how events are handled.

Meet `react-eventizer`: An Event Bus for React

So how can we implement an event-driven architecture in React? react-eventizer is a lightweight library that provides exactly this: a React-friendly event bus system. According to its documentation, react-eventizer is a “lightweight, zero-dependency React event bus with full TypeScript support” that enables decoupled component communication using a pub/sub model. In simpler terms, it lets you set up a global event hub in your React app, with minimal code.

Key features of react-eventizer:

🔄 Simple Pub/Sub API: Provides easy methods or hooks to emit events and subscribe to them.
🔒 Type-Safe: Built with TypeScript generics, so you can define strict types for each event’s payload (catching mistakes at compile time).
⚛️ Seamless React Integration: Uses React Context under the hood and offers custom Hooks (useSubscribe, useEmitter, etc.) to interface with the event bus anywhere in your component tree.
🪶 Lightweight: Zero external dependencies and a minimal footprint. It won’t bloat your bundle or slow your app.
🧩 Decoupled Communication: Allows components to talk to each other without direct relationships, eliminating the need for prop drilling or overly complex state lifting.

In short, react-eventizer gives you the benefits of an event bus pattern in a convenient React package.

Getting Started with `react-eventizer`

Using react-eventizer in your project is straightforward. You can install it via npm or yarn:

npm install react-eventizer

Then follow these general steps to set it up:

Define your events: For TypeScript users, define an EventMap interface listing all event names and their payload types. For example, you might have events like 'user:login', 'notification:new', 'theme:change', etc., each mapped to the shape of data it carries (or to void if no payload). This step is optional but highly recommended for type safety.
Create and provide the event bus: Initialize a new event bus instance (e.g. const eventBus = new Eventizer<EventMap>()) and make it available to your app by wrapping your app in an <EventizerProvider> with the bus passed as a prop. Typically, you do this once at the root (e.g. in App.tsx).
Subscribe to events: In any component that needs to react to a global event, use the useSubscribe(eventName, callback) hook provided by react-eventizer. This hook will register your callback to run whenever that event is emitted. (It also handles unsubscribing automatically on component unmount to prevent memory leaks).
Emit events: Whenever a component needs to broadcast something, use the useEmitter(eventName) hook to get an emitter function, and call that function with the appropriate payload. All subscribers to that event will then be notified.

Let’s look at a quick example of react-eventizer in action. Imagine we want to broadcast a user login event so various parts of the app can respond (maybe to display a welcome message, update a profile, fetch user-specific data, etc.). We’ll emit a "user:login" event from a login form and subscribe to it in a user profile component:

/* LoginForm.tsx – emitter example */
import { useEmitter } from 'react-eventizer';

const LoginForm: React.FC = () => {
  const [username, setUsername] = useState('');
  const emitLogin = useEmitter('user:login');  // prepare an emitter for the 'user:login' event

  const handleLogin = () => {
    // Emit the user:login event with a payload when login happens
    emitLogin({ username: username, id: 123 });
  };

  return (
    <form onSubmit={e => { e.preventDefault(); handleLogin(); }}>
      <input value={username} onChange={e => setUsername(e.target.value)} placeholder="Username" />
      <button type="submit">Login</button>
    </form>
  );
};

/* UserProfile.tsx – subscriber example */
import { useSubscribe } from 'react-eventizer';

const UserProfile: React.FC = () => {
  const [username, setUsername] = useState<string>('');

  // Subscribe to 'user:login' events
  useSubscribe('user:login', payload => {
    setUsername(payload.username);
  });

  return <div>{username ? `Welcome, ${username}!` : 'Please log in'}</div>;
};

In this example, the LoginForm doesn’t need to directly inform UserProfile through context or shared state. It simply emits a "user:login" event when the form is submitted. The UserProfile component, anywhere in the app, subscribes to "user:login" and updates its local state when that event occurs. The two components remain completely decoupled – they only share an event contract. If no component cared about "user:login", the event would just go into the void with no issues. If multiple components subscribe to it, all of them will receive the event. This pub-sub mechanism can dramatically simplify scenarios where many components need to respond to the same event.

Real-World Use Cases Made Easier with Events

What kinds of scenarios benefit most from an event-driven approach? Let’s explore a few common use cases where react-eventizer can make React development easier, along with how you might implement them.

Cross-Component Communication (No More Prop Drilling)

Problem: You have components that need to talk to each other but are not directly related in the JSX hierarchy. For instance, a deeply nested component needs to send info to a top-level layout or sibling component far away. Traditionally, you might lift state up to a common ancestor or use context – or you suffer prop drilling through many layers.

How react-eventizer helps: Use a global event instead! Any component can emit an event that any other component can listen for, without threading props. This achieves instant cross-component communication with zero prop drilling.

For example, suppose you have a list of items and a separate notifications area. When an item is deleted in the list, you want to show a notification banner. Without an event bus, you might have to pass a callback from the notifications system down into the item component, or use a global state flag. With react-eventizer, it’s trivial:

// In a deeply nested component (e.g. DeleteButton inside an Item component)
const emitDelete = useEmitter('item:delete');
<button onClick={() => emitDelete(itemId)}>Delete Item</button>

// ... Meanwhile, in a totally different part of the app ...
useSubscribe('item:delete', (deletedItemId) => {
  notify(`Item ${deletedItemId} was deleted successfully.`);
});

Here the Delete button simply emits an "item:delete" event carrying an item ID. A Notification component (or any component interested in deletions) subscribes to "item:delete" and, when it hears one, triggers a user notification. Neither component needs to know about the other – they only share the event name and data schema. This loose coupling means you can add or remove listeners freely without breaking functionality, and you don’t have to route that event through parent components. It makes your code more modular and your component tree cleaner.

Global Notifications and Alerts

Problem: You want to trigger notification messages or alerts from anywhere in the app (deep in the bowels of your code), but have them all display in a common UI component (like a toast container or alert stack). Without events, you might lift all notification state to a top-level store or use context to expose functions for adding notifications.

How react-eventizer helps: Treat notifications as global events. Any part of the app can emit a "notification:new" event with the message and type of notification. A single NotificationCenter component can subscribe to that event and handle displaying all incoming notifications.

For example, using react-eventizer you could do something like:

// Emit a notification event after some action (e.g., after saving data)
const emitNotification = useEmitter('notification:new');
...
emitNotification({ type: 'success', message: 'Data saved successfully!' });

// NotificationCenter component listens for any new notifications
useSubscribe('notification:new', (notif) => {
  // push the new notification into local state (to render it)
  setNotifications(prevList => [...prevList, notif]);
});

Every time an event is emitted (perhaps from anywhere: after API calls, user actions, errors caught, etc.), the NotificationCenter will pick it up and update its list of notifications. This way, components don’t have to directly call the notification system or import it; they just fire an event and forget. The notification handling is centralized, which is easier to manage and avoids duplicating notification logic across components.

Global UI State Changes (Themes, Modals, etc.)

Problem: Some UI state changes need to affect multiple independent components. For instance, changing the app’s theme should update many components, or closing a modal might need to inform various parts of the UI.

How react-eventizer helps: For one-off triggers like theme changes or modal toggles, an event can be more convenient than storing this state globally. You can emit a "theme:change" event or "modal:close" event that any component can respond to.

Theme switching: Instead of putting the current theme in a context and making every component consume that context, you could simply have a central theme store (or even just local storage) and emit "theme:change" events. Components that care (like those that style themselves differently or a <ThemeProvider/>) subscribe to apply the new theme. This can reduce continuous re-renders that a context might cause, since an event will only trigger subscribers once when it’s emitted.
Modal control: If a deeply nested component triggers a modal to open, and some other component needs to know when that modal closes, you can emit "modal:close" upon closure. Any component can listen for "modal:close" to, say, refresh data or update the URL, without tightly coupling to the modal logic.

The event-driven approach essentially broadcasts UI intents (like “theme updated” or “modal closed”) in a way that any interested piece of UI can act on, without maintaining that intent as persistent state if it’s not needed beyond the moment of the change.

Handling Asynchronous or External Events

Problem: Your app receives asynchronous data or messages (from WebSockets, server-sent events, etc.) that multiple components may need to respond to. Managing this via state can get tricky, especially if not all components mount at the same time or if the data isn’t something you want to store globally.

How react-eventizer helps: You can funnel external messages into events. For instance, imagine you have a WebSocket connection that receives real-time updates. With react-eventizer, your WebSocket service can emit events whenever a message arrives:

// Pseudocode for a WebSocket message handler
socket.onmessage = (event) => {
  const data = JSON.parse(event.data);
  eventBus.emit('socket:message', data);
};

// In any component that needs live updates
useSubscribe('socket:message', (data) => {
  // handle the incoming data (update component state, etc.)
  console.log("Received live update:", data);
});

By doing this, you decouple the WebSocket logic from your React components entirely. Components just declare an interest in 'socket:message' events and react when they occur. If the WebSocket implementation changes or moves, the components don’t care – as long as events with that name are emitted. Similarly, you can handle other external or async events (like a countdown finishing, a media query change, etc.) in this pub-sub way.

Best Practices for Event-Driven Architecture in React

Using react-eventizer (or any event bus) effectively requires a bit of forethought. Here are some best practices to keep your event-driven React architecture clean and maintain:

Define event types centrally: Declare all your event names and payload structures in one place (e.g. an events.ts file with the EventMap interface). This makes it easier to manage and document what events exist in the system, and ensures publishers and subscribers use the correct event names.
Use namespaces for event names: Adopting a naming convention like "category:action" (for example, user:login, cart:add, socket:message) helps avoid name collisions and keeps events organized. It’s easier to identify the purpose of an event at a glance, and you won’t accidentally have two different subsystems using generic names like "update" that conflict.
Clean up if needed: If you use the useSubscribe hook, it will automatically unsubscribe when the component unmounts. But if you ever subscribe manually via the event bus’s on() method, be sure to unsubscribe (off()) when appropriate to prevent memory leaks or unwanted behavior. Keeping subscription lifecycles tied to component lifecycles is usually safest.
Don’t abuse events: While events are great for decoupling, avoid emitting events willy-nilly or in very tight loops. Use events for higher-level communication, not as a replacement for every function call or state update. Too many global events can make it hard to trace what's happening. Also, avoid using events to store long-term state – remember that an event is a moment in time, not a state container.

By following these practices, you can ensure that your event-driven approach remains predictable and scalable as your application grows.

When to Use Events vs. When to Use a State Manager

It’s important to strike a balance. Event-driven architecture can simplify many aspects of a React app, but it’s not a silver bullet for all state management needs. Here’s a balanced perspective on when to choose each approach:

Use an Event Bus (like react-eventizer) for:

Decoupled interactions and notifications. If your goal is to have parts of the app react to something happening elsewhere (user actions, global UI triggers, background processes) without maintaining a lot of shared state, events are ideal. They shine for ephemeral, momentary communications – things that happen, other parts respond, and that’s it. This includes the use cases we discussed: cross-component messages, broadcast notifications, one-off UI updates, and integrating external event streams. Events keep these interactions simple and avoid the overhead of global state for transient data.

Reducing coupling. Use events when you want to avoid forcing a direct link or dependency between components or modules. This can make your code more modular and testable (you can test components by faking events, for example).
Use a State Manager (Redux, Zustand, Recoil, Context API) for:

Persistent and global state. If you have application-wide state that many components need to read and update over time (such as user authentication info, a large form data structure, or caching of fetched data), a state store or context might be more appropriate. These tools are designed to hold onto data and make it accessible anywhere, whereas an event bus by itself doesn’t store data – it just transmits it.

Complex state logic and debugging. When your state has complex transitions, strict requirements, or benefits from time-travel debugging and traceability (e.g. using Redux DevTools), a structured state manager is beneficial. Redux, for instance, can record every action and state change, which is great for debugging complex apps. Events are more fire-and-forget, which can be harder to debug if overused for critical state changes (though you can certainly log them).

Forms and synchronized state. Some scenarios (like multi-step forms or any feature where many parts of the UI must reflect the exact same state consistently) might still be easier with a centralized state or context that components read from directly, rather than emitting events to each other to stay in sync.

In practice, you don’t have to choose one or the other exclusively. You can mix and match: use an event bus for what it’s good at and a state store for what it’s good at. For example, you might use React Context or Zustand to hold the current user and theme (since those are needed as state by many components at all times), but use react-eventizer to handle things like “user logged in” or “theme changed” as events to trigger animations, fetches, or notifications across the app. In fact, the combination can be powerful: the event can carry the new state, and subscribers can update their own state or even a context based on it.

Conclusion

“Stop using state managers everywhere” doesn’t mean state libraries are bad – it means you should use them judiciously. Global state managers like Redux, Recoil, and Zustand are fantastic for certain use cases, but not every problem is a nail requiring that hammer. Many times, an event-driven approach provides a simpler and more elegant solution for component communication without the ceremony of global stores. By using react-eventizer or a similar event bus, you can make your React apps more modular, reduce prop drilling, and simplify how components interact.

The key is to choose the right tool for the job: if you find yourself adding a lot of complexity just to get components talking, consider using events to decouple and simplify. On the other hand, if you truly need a single source of truth for state and the ability to inspect or revert it, a state manager might be the way to go. Often, a hybrid approach yields the best of both worlds.

By understanding both paradigms, you can architect React applications that are simpler, more efficient, and easier to maintain. So next time you’re about to pull in a heavy state management library for a simple interaction, ask yourself: “Can an event solve this?” You might be surprised how often the answer is yes, and how much cleaner your code can be as a result.

How to Cancel Async Operations and Handle Timeouts in JavaScript, React, and Node.js

Ali Morshedzadeh — Wed, 05 Mar 2025 14:24:02 +0000

Managing asynchronous operations in JavaScript can sometimes feel like trying to herd cats—chaotic and unpredictable. Async tasks have a way of slipping through the cracks, whether they’re running longer than expected, getting stuck, or just hanging around when you don’t need them. If you’ve worked with async code, you know the struggle of handling timeouts, cancellations, and keeping everything running smoothly.

Here are some common problems that can arise:

Canceling long-running or unnecessary tasks: Ever start an async operation only to realize halfway through that you don’t need it anymore? Without a way to cancel that promise, it just keeps going, wasting time and resources.
Timeouts: Async operations that take too long can freeze up your app, leaving users frustrated. You need a way to automatically reject those promises that exceed your desired duration, so your app stays responsive.
Cross-platform consistency: Whether you're working in Node.js, a browser environment, or React, managing async tasks across different platforms can become a real headache.
TypeScript support: If you’re working with TypeScript, managing async operations while ensuring proper type safety can be tricky without the right tools.

Now, here’s the good news—we’ve found a way to tackle all these issues easily. Tools like async-cancelator are designed to take care of these exact problems. By using it in our projects, we’ve been able to cancel promises effortlessly, handle timeouts, and keep everything running smoothly across different platforms.

What makes this tool so great? It helps us manage async operations with clean, simple code. Instead of dealing with messy workarounds, we can focus on the logic that matters. Plus, it’s a zero-dependency solution that integrates seamlessly with our existing projects. It handles cancellation, timeouts, and even TypeScript support without making things complicated.

Here’s how you can jump in:

Install it: Just run npm install async-cancelator (or yarn add async-cancelator if that’s your thing) to get started.
Start using it: Implement cancellable promises and timeouts where you need them in your project.
Enjoy: Test your async code, knowing it won’t hang or overstay its welcome.

By adding async-cancelator to your toolkit, you’ll write smoother, more maintainable async code that behaves exactly as you expect. No more wrestling with timeouts or trying to cancel tasks manually. Ready to give it a go? Start by giving it a spin in your next project, and let it take care of the heavy lifting. Let's code!

Getting Started

First things first, let’s get this party started by installing the tool:

npm install async-cancelator

or, if you’re feeling yarn-y:

yarn add async-cancelator

You can find the full source code for this library on GitHub.

How to Use `async-cancelator`

Creating a Cancellable Promise

import { createCancellable } from 'async-cancelator';

const { promise, cancel } = createCancellable(async (signal) => {
  if (signal.cancelled) return;

  await someAsyncOperation();

  if (signal.cancelled) return;

  return 'Operation completed';
});

// Later, if you change your mind:
cancel('Operation no longer needed');

Cancellable Promise with Automatic Rejection

If you prefer your promises to throw a fit when canceled, createCancellableWithReject is here for that drama.

import { createCancellableWithReject, CancellationError } from 'async-cancelator';

const { promise, cancel } = createCancellableWithReject(async (signal) => {
  await someAsyncOperation();
  return 'Operation completed';
});

try {
  cancel('Operation no longer needed');
  const result = await promise;
} catch (error) {
  if (error instanceof CancellationError) {
    console.log(`Operation was cancelled: ${error.message}`);
  } else {
    // Handle other errors
  }
}

Setting a Timeout

Don’t want to wait forever? Set a timeout to keep things snappy.

import { withTimeout, TimeoutError } from 'async-cancelator';

const timeoutPromise = withTimeout(
  fetch('https://api.example.com/data'),
  5000,
  'Request timed out'
);

try {
  const result = await timeoutPromise;
} catch (error) {
  if (error instanceof TimeoutError) {
    console.log(`Operation timed out: ${error.message}`);
  } else {
    // Handle other errors
  }
}

Combining Cancellation and Timeout

Why not have the best of both worlds? Combine cancellation and timeout for ultimate control.

import { createCancellable, withTimeout } from 'async-cancelator';

const { promise, cancel } = createCancellable(async (signal) => {
  // Your async operation
});

const timeoutPromise = withTimeout(promise, 3000, 'Operation timed out');

setTimeout(() => cancel('No longer needed'), 1000);

Using with React Hooks

React developers, rejoice! async-cancelator plays nicely with hooks, ensuring your components stay in sync with your async logic.

import { useEffect, useState, useRef } from 'react';
import { createCancellableWithReject, CancellationError } from 'async-cancelator';

function useFetchData(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const cancelRef = useRef(null);

  useEffect(() => {
    const fetchData = async () => {
      const { promise, cancel } = createCancellableWithReject(async (signal) => {
        const response = await fetch(url);
        const data = await response.json();
        return data;
      });

      cancelRef.current = cancel;

      try {
        const result = await promise;
        setData(result);
        setLoading(false);
      } catch (error) {
        if (!(error instanceof CancellationError)) {
          setError(error);
          setLoading(false);
        }
      }
    };

    fetchData();

    return () => {
      if (cancelRef.current) {
        cancelRef.current('Component unmounted');
      }
    };
  }, [url]);

  return { data, loading, error };
}

Wrapping Up

async-cancelator is like the Swiss Army knife for managing asynchronous tasks in JavaScript. Its ability to handle cancellations and timeouts with ease makes it a must-have in your development toolkit. So go ahead, give it a try, and take control of your async operations like a pro.

Let’s Keep the Conversation Going!

🚀 Have you tried handling async cancellations or timeouts differently?

💡 Got any cool use cases or edge cases to share?

👇 Drop a comment below and let’s discuss!

Looking forward to hearing your thoughts! 🔥

DEV Community: Ali Morshedzadeh

Never Miss an Error: Get Node.js Logs and Alerts on Your Phone via Telegram

The Drawbacks of Using console.log in Production

Introducing LogPro: A Modern Node.js Logging Package for TypeScript

Key Features of LogPro for Production-Grade Logging

Setting Up LogPro in a Node.js/Next.js Project (TypeScript)

Installation

Basic Usage in TypeScript

Configuring Telegram Alerts for Real-Time Logging

Best Practices for Production Logging with LogPro

Conclusion: Elevate Your Node.js Monitoring with LogPro

References

Canceling HTTP Requests in React (TypeScript) – Why It Matters & How to Do It

Why Canceling HTTP Requests Matters

Common Challenges in Canceling Async Requests

Traditional Solution: AbortController

Introducing async-cancelator – A Modern, Lightweight Solution

How Does async-cancelator Work?

Example: Canceling an API Call in a React useEffect Hook

What's Happening Here?

Conclusion

Boost React Performance and User Experience with Keyboard Shortcuts

Why Keyboard Shortcuts Enhance Performance and UX

Previewing react-keyhub in Action

Introducing react-keyhub

Installation

Basic Setup and Usage

Performance Benefits of a Centralized Shortcut System

Best Practices for Improving UX with Shortcuts

Example: Dynamic Registration for Power Users

Conclusion

React Keyboard Shortcuts: Boost App Performance Using React-Keyhub

Introduction: Why Keyboard Shortcuts Improve UX in React

Challenges in Managing Keyboard Shortcuts in React

Introducing React-Keyhub: A Modern Approach to React Shortcuts

Getting Started with React-Keyhub (Implementation Guide)

Performance Considerations and Optimizations

Comparison with Other Shortcut Libraries

Common Use Cases for Keyboard Shortcuts in React Apps

Conclusion

Still Using Redux Everywhere? How an Event Bus Could Transform Your React Workflow

The Pitfalls of Overusing State Managers

The Event-Driven Alternative: Loosely Coupled Components

Meet react-eventizer: An Event Bus for React

Getting Started with react-eventizer

Real-World Use Cases Made Easier with Events

Cross-Component Communication (No More Prop Drilling)

Global Notifications and Alerts

Global UI State Changes (Themes, Modals, etc.)

Handling Asynchronous or External Events

Best Practices for Event-Driven Architecture in React

When to Use Events vs. When to Use a State Manager

Conclusion

How to Cancel Async Operations and Handle Timeouts in JavaScript, React, and Node.js

Getting Started

How to Use async-cancelator

Creating a Cancellable Promise

Cancellable Promise with Automatic Rejection

Setting a Timeout

Combining Cancellation and Timeout

Using with React Hooks

Wrapping Up

Let’s Keep the Conversation Going!

The Drawbacks of Using `console.log` in Production

Example: Canceling an API Call in a React `useEffect` Hook

Meet `react-eventizer`: An Event Bus for React

Getting Started with `react-eventizer`

How to Use `async-cancelator`