Implementing a notification system with suspense in React

16 Oct 2023

Notifications are an essential part of any web application, providing important updates and alerts to users. In this tutorial, we will explore how to implement a notification system using React’s Suspense feature.

Introduction to Suspense
Setting up the project
Creating the Notification component
Implementing the notification system
Showing notifications with Suspense
Conclusion

Introduction to Suspense

React Suspense is a feature that allows components to wait for asynchronous data to be loaded before rendering. It enables developers to create more efficient and responsive applications by managing the loading state of data-fetching components.

Setting up the project

To begin, make sure you have Node.js and npm installed on your machine. Then, create a new React project using the create-react-app command:

npx create-react-app notification-system
cd notification-system

Next, install the necessary dependencies:

npm install react react-dom react-notifications-component

Creating the Notification component

Let’s create a Notification component that we can use to display notifications throughout our application. This component will render a single notification with a message and a type (e.g., success, error, warning).

import React from 'react';

const Notification = ({ message, type }) => {
  return (
    <div className={`notification ${type}`}>
      {message}
    </div>
  );
};

export default Notification;

Implementing the notification system

Next, we need to create a notification system that manages the state of notifications and provides an interface to add or remove notifications. We will use React’s Context API to share the notification state across components.

import React, { createContext, useState } from 'react';

export const NotificationContext = createContext();

export const NotificationProvider = ({ children }) => {
  const [notifications, setNotifications] = useState([]);

  const addNotification = (message, type) => {
    setNotifications((prevNotifications) => [
      ...prevNotifications,
      { message, type },
    ]);
  };

  const removeNotification = (notification) => {
    setNotifications((prevNotifications) =>
      prevNotifications.filter((n) => n !== notification)
    );
  };

  return (
    <NotificationContext.Provider
      value=
    >
      {children}
    </NotificationContext.Provider>
  );
};

Showing notifications with Suspense

Now that we have our Notification component and the notification system set up, we can display notifications in different parts of our application using Suspense.

import React, { useContext } from 'react';
import { NotificationContext } from './NotificationContext';

const NotificationContainer = () => {
  const { notifications } = useContext(NotificationContext);

  return (
    <div className="notification-container">
      {notifications.map((notification, index) => (
        <Notification key={index} {...notification} />
      ))}
    </div>
  );
};

export default NotificationContainer;

To use the NotificationContainer component and the notification system in our app, wrap the relevant parts of the component tree with the NotificationProvider component.

import React from 'react';
import { NotificationProvider } from './NotificationContext';
import NotificationContainer from './NotificationContainer';

const App = () => {
  return (
    <NotificationProvider>
      <div className="app">
        <h1>My App</h1>
        {/* Other components */}
        <NotificationContainer />
      </div>
    </NotificationProvider>
  );
};

export default App;

Now, whenever you want to display a notification, you can use the addNotification function provided by the NotificationContext.

import React, { useContext } from 'react';
import { NotificationContext } from './NotificationContext';

const MyComponent = () => {
  const { addNotification } = useContext(NotificationContext);

  const handleClick = () => {
    addNotification('Notification message', 'success');
  };

  return <button onClick={handleClick}>Show Notification</button>;
};

export default MyComponent;

Conclusion

In this tutorial, we learned how to implement a notification system with React’s Suspense feature. By leveraging the power of Suspense, we can create a more efficient and responsive notification system that enhances the user experience.

Table of Contents