How to Show Unread Notification Count in React

The Build vs Buy Decision

Before writing any code, consider the two paths available to you:

• ● Build it yourself — full control, but you own the backend, the real-time layer, the state management, and every edge case that comes with it.
• ● Use a tool like Notilayer — add two lines of code and get a bell icon, unread badge, inbox dropdown, and read/unread tracking out of the box.

We will cover both options below so you can make an informed choice. If you want the full comparison of notification tools, see our guide to adding a notification bell to any web app.

Option 1: Build It Yourself

Here is a minimal React component that renders a bell icon with an unread notification count badge. It polls your backend for the current count:

import { useState, useEffect } from 'react';

function NotificationBell() {
  const [unreadCount, setUnreadCount] = useState(0);

  useEffect(() => {
    const fetchCount = async () => {
      const res = await fetch('/api/notifications/unread-count');
      const data = await res.json();
      setUnreadCount(data.count);
    };

    fetchCount();
    const interval = setInterval(fetchCount, 10000); // poll every 10s
    return () => clearInterval(interval);
  }, []);

  return (
    <button style={{ position: 'relative' }}>
      🔔 {/* bell icon */}
      {unreadCount > 0 && (
        <span style={{
          position: 'absolute',
          top: -4, right: -4,
          background: 'red',
          color: 'white',
          borderRadius: '50%',
          width: 20, height: 20,
          fontSize: 12,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
          {unreadCount}
        </span>
      )}
    </button>
  );
}

This works for a basic prototype. You get a bell icon that shows a red badge with the number of unread notifications, updated every 10 seconds via polling. But as soon as you ship it to production, the problems start piling up.

The Problems With Building From Scratch

The component above looks simple, but it hides a long list of production requirements:

For most teams, this adds up to 2–4 weeks of engineering work — and ongoing maintenance after that. If notifications are not your core product, there is a faster way.

Option 2: Use Notilayer (2 Minutes)

Notilayer is an embeddable notification widget that handles the bell icon, unread badge, inbox dropdown, and read/unread state management out of the box. Here is the full setup:

Step 1: Add the Widget Script

Add the Notilayer script to your HTML — index.html for CRA/Vite, or _document.tsx for Next.js:

<!-- Add before the closing </body> tag -->
<script src="https://api.notilayer.com/widget/widget.js" defer></script>

Step 2: Initialize the Widget

Call Notilayer.init() inside a useEffect hook after your user authenticates. The widget automatically renders a bell icon with an unread count badge — no extra component code needed:

import { useEffect } from 'react';

function App() {
  const user = useAuth(); // your auth hook

  useEffect(() => {
    if (user && window.Notilayer) {
      window.Notilayer.init({
        appId: 'YOUR_APP_ID',
        userId: user.id,
      });
    }
  }, [user]);

  return (
    {/* Your app content */}
  );
}

That is it for the frontend. The widget handles the unread count badge, the inbox dropdown, and read/unread state transitions automatically. For a detailed walkthrough of embedding in React, see our guide to adding a notification bell to a React app.

Step 3: Send Notifications From Your Backend

Use the Notilayer REST API to send notifications from your server. When a notification is created, the widget updates the unread count badge in real time — no polling required:

const response = await fetch('https://api.notilayer.com/v1/notify', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_API_KEY',
  },
  body: JSON.stringify({
    userId: 'user_123',
    title: 'Your export is ready',
    body: 'Download your CSV file now.',
    url: '/exports/abc123',
  }),
});

The notification appears instantly in the user's inbox, and the unread badge count increments in real time. When the user opens the inbox or clicks the notification, it is automatically marked as read and the count decrements.

What You Get Out of the Box

With the three steps above, your React app now has a complete notification system. Here is everything the Notilayer widget provides without any additional code:

• ● Bell icon — a clean, customizable notification bell that sits in your app's UI.
• ● Unread count badge — a red badge that shows the exact number of unread notifications, updated in real time.
• ● Inbox dropdown — a scrollable list of notifications with timestamps, titles, and body text.
• ● Read/unread states — automatic state tracking that persists across sessions, devices, and tabs.
• ● Real-time updates — new notifications appear instantly without polling, and counts update the moment a notification is read.
• ● Mark all as read — a single action that clears the unread badge and marks every notification as read.

All of this would take weeks to build and maintain yourself. With Notilayer, it ships in two minutes. For more on how in-app notifications fit into your React SaaS product, check our complete React notification integration guide.

Related Articles