DEV Community: AYUSH SRIVASTAVA

Why do clicks feel slow in React and how can UI feel instant?

AYUSH SRIVASTAVA — Mon, 15 Sep 2025 14:19:23 +0000

Problem

Most interfaces wait for the server before showing changes, so users stare at spinners and assume the app is lagging even on high‑confidence actions like likes, toggles, and comments. Rendering every update as urgent also blocks interactions on large trees or slower devices, creating visible jank.

Solution

Use React’s useOptimistic to render a predicted state immediately (for example, show a “Sending…” message) while the async action runs in the background. Wrap the final commit in startTransition so non‑urgent reconciliation stays responsive and doesn’t block higher‑priority interactions.

Minimal code


import { useState, useOptimistic, startTransition, useRef } from 'react';

// Simulated server action
async function sendMessageToServer(text: string) {
  await new Promise((r) => setTimeout(r, 800));
  // throw new Error('Network down'); // uncomment to test rollback
  return { id: crypto.randomUUID(), text };
}

export default function Chat() {
  const formRef = useRef<HTMLFormElement>(null);
  const [messages, setMessages] = useState<{ id: string; text: string }[]>([]);

  // Merge optimistic message at the top while pending
  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (current, optimistic: { id: string; text: string }) => [
      { ...optimistic, pending: true } as any,
      ...current,
    ]
  );

  async function onSubmit(formData: FormData) {
    const text = String(formData.get('text') || '').trim();
    if (!text) return;

    const tempId = `temp-${Date.now()}`;

    // 1) Show instantly
    addOptimisticMessage({ id: tempId, text });
    formRef.current?.reset();

    try {
      // 2) Reconcile in a transition
      startTransition(async () => {
        const saved = await sendMessageToServer(text);
        setMessages((prev) => [
          { id: saved.id, text: saved.text },
          ...prev.filter(m => m.id !== tempId),
        ]);
      });
    } catch {
      // 3) Rollback on error
      startTransition(() => {
        setMessages((prev) => prev.filter(m => m.id !== tempId));
      });
      // Optionally trigger a toast or error state here
    }
  }

  return (
    <div>
      <form ref={formRef} action={(fd) => onSubmit(fd)}>
        <input name="text" placeholder="Write a message..." />
        <button type="submit">Send</button>
      </form>

      <ul>
        {optimisticMessages.map((m: any) => (
          <li key={m.id}>
            {m.text} {m.pending ? <em style={{ color: '#888' }}> (Sending…)</em> : null}
          </li>
        ))}
      </ul>
    </div>
  );
}

When to use

High‑success, reversible actions: messages, likes, toggles, reorders, comments.
Avoid for destructive/high‑stakes operations unless paired with confirmation and clear undo.

Gotchas

startTransition is for prioritization; useTransition provides isPending if a pending indicator is required.
After an awaited call, wrap subsequent setState in startTransition to keep it non‑urgent.
Keep controlled inputs outside transitions, and ensure server actions are idempotent or de‑duplicated for safe retries.

Takeaway

Optimistic rendering reduces perceived latency, while transition‑based reconciliation prevents non‑urgent work from blocking interactions—resulting in UI that feels instant without sacrificing correctness.

WebSocket vs Web Push vs Server-Sent Events: When to Use What?

AYUSH SRIVASTAVA — Fri, 12 Sep 2025 09:48:27 +0000

Here’s a clear comparison of WebSocket, Web Push, and Server-Sent Events (SSE)—with scenarios for when to use each, tailored for experienced developers:

Feature	WebSocket	Web Push	Server-Sent Events (SSE)
Communication	Full-duplex, bi-directional	One-way, server-to-client push	One-way, server-to-client streaming
Connection	Persistent TCP connection	No persistent connection; via push service	Persistent HTTP connection
Use Case	Real-time chat, gaming, collaboration tools needing low latency and bidirectional data	Push notifications even when app is closed or backgrounded, re-engagement	Live feeds, stock tickers, notifications when the app is open and connected
Resource Usage	High (maintains open socket)	Low (pushes via OS-level services)	Moderate (keeps HTTP connection open)
Works if App Closed?	No (requires open app/tab)	Yes	No
Browser & Server Support	Widely supported across browsers and backend stacks	Supported on modern browsers, requires HTTPS, service worker	Supported in browsers except IE; easier server-side than WebSockets
Complexity	More complex setup and scaling	Moderate setup (certificates, service workers)	Simpler than WebSocket, uses event streams
Delivery Guarantee	Best effort, TCP ensures ordering	Reliable via OS services, user permission required	Best effort over HTTP, can reconnect

When to Use Each

Use WebSocket when:

You need low-latency bidirectional communication.
Building chat apps, multiplayer games, or interactive collaboration suites.
You can handle scale and keep persistent connections open from many clients.

Use Web Push when:

Users must be notified even if the app is closed or browser is backgrounded.
You want to engage or re-engage users with important messages like alerts, promotions, or updates.
You want a battery-friendly, OS-integrated notification system with guaranteed delivery.

Use Server-Sent Events (SSE) when:

You need unidirectional, real-time streaming from server to client, such as live news, stock prices, feeds, or status updates.
Clients remain connected and you want a simpler alternative to WebSockets for data push.
You prefer built-in browser EventSource API without the complexity of WebSockets.

TL;DR

WebSocket: Interactive, bidirectional communication while app is open.
Web Push: Reliable notifications even if app is closed.
SSE: Lightweight, uni-directional real-time updates with open connection.

Ship real‑time alerts without WebSocket's: Web Push for enterprise constraints 🔔

AYUSH SRIVASTAVA — Thu, 11 Sep 2025 15:03:54 +0000

Some organizations restrict persistent connections like WebSockets, yet teams still need timely notifications even when the app isn’t open or focused.
With Web Push—the Push API, a Service Worker, and VAPID—servers can push messages reliably without keeping a socket alive, including when the page is backgrounded or closed.

Why Web Push

Works in the background via a Service Worker and shows native notifications using the Notifications API for consistent, system‑level UX.
Standards‑based, requires HTTPS, and uses VAPID keys so your server is identified securely to push services.

How it fits together

App registers a Service Worker and requests notification permission from the user on a secure origin.
App subscribes with Push Manager to get a unique subscription endpoint and keys for that browser/device.
Server stores subscriptions and later sends payloads signed with VAPID using a lightweight library.
The Service Worker receives the push event and displays a native notification immediately.

Client: register SW and subscribe

// Convert base64 VAPID public key to Uint8Array
function base64ToUint8Array(base64) {
  const padding = '='.repeat((4 - (base64.length % 4)) % 4);
  const b64 = (base64 + padding).replace(/-/g, '+').replace(/_/g, '/');
  const raw = atob(b64);
  const output = new Uint8Array(raw.length);
  for (let i = 0; i < raw.length; ++i) output[i] = raw.charCodeAt(i);
  return output;
}

async function subscribeToPush(vapidPublicKeyBase64) {
  const registration = await navigator.serviceWorker.register('/sw.js');
  const permission = await Notification.requestPermission();
  if (permission !== 'granted') return;

  const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: base64ToUint8Array(vapidPublicKeyBase64),
  });

  await fetch('/api/push/subscribe', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(subscription),
  });
}

The app subscribes via the Push API on a secure context and sends the resulting subscription to the backend for later use.

Service Worker: receive and notify


// /sw.js
self.addEventListener('push', (event) => {
  const data = event.data ? event.data.json() : { title: 'Update', body: 'New alert' };
  event.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: '/icon.png',
      data: data.url || '/',
    })
  );
});

self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  const url = event.notification.data || '/';
  event.waitUntil(clients.openWindow(url));
});

The Service Worker handles the push event payload and displays a native notification using the Notifications API.

Server (Node/Express): VAPID and send


// npm i express web-push
import express from 'express';
import webpush from 'web-push';

const app = express();
app.use(express.json());

// 1) Configure VAPID (generate once and set via env)
webpush.setVapidDetails(
  'mailto:admin@example.com',
  process.env.VAPID_PUBLIC_KEY,
  process.env.VAPID_PRIVATE_KEY
);

// 2) Store subscriptions (replace with MongoDB in production)
const subscriptions = new Map();

app.get('/api/push/public-key', (_req, res) => {
  res.json({ publicKey: process.env.VAPID_PUBLIC_KEY });
});

app.post('/api/push/subscribe', (req, res) => {
  const sub = req.body;
  subscriptions.set(sub.endpoint, sub);
  res.status(201).json({ ok: true });
});

app.post('/api/push/send', async (req, res) => {
  const payload = JSON.stringify({
    title: 'Policy update',
    body: 'Click to review changes',
    url: '/inbox',
  });
  const results = [];
  for (const sub of subscriptions.values()) {
    try {
      await webpush.sendNotification(sub, payload);
      results.push({ ok: true });
    } catch {
      results.push({ ok: false });
    }
  }
  res.json({ sent: results.length });
});

app.listen(3000, () => console.log('Server running on 3000'));

The web‑push library signs payloads with VAPID and delivers to each saved subscription endpoint, letting servers send messages without maintaining a persistent connection.

Practical tips

Only request permission at meaningful moments to avoid prompt fatigue and improve opt‑in rates.
Subscriptions can expire; handle send failures by pruning invalid endpoints and re‑subscribing when needed.
Push requires HTTPS and secure contexts; keep VAPID keys safe and reuse the same key pair across deploys per environment policy

If WebSocket's are off the table, Web Push gives reliable, secure, background delivery with a small footprint—perfect for “must‑know” alerts in constrained environments.

Keeping Browser Tabs in Sync with Broadcast Channel API 🔄✨

AYUSH SRIVASTAVA — Wed, 10 Sep 2025 15:34:20 +0000

Ever open multiple tabs of the same web app and notice things don’t stay in sync? Whether it’s your shopping cart, notifications, or form progress, inconsistent data across tabs can be frustrating for users.

The Challenge

Each browser tab runs independently. Without communication, updates in one tab don’t reflect in others, causing confusion and poor user experience.

The Simple Fix: Broadcast Channel API

This built-in browser API lets tabs communicate instantly over a shared “channel.” When one tab updates data, it broadcasts a message others receive — keeping everything perfectly synchronized.

How It Works (In a Nutshell)

const channel = new BroadcastChannel('app-sync');

channel.onmessage = (event) => {
  console.log('Update from another tab:', event.data);
  // Sync local state here
};

function updateData(newData) {
  // Local update
  channel.postMessage(newData); // Notify other tabs
}

Why Should You Care?

Say goodbye to stale or conflicting info
Avoid backend complexity for client-side syncing
Keep your app smooth and user-friendly no matter how many tabs are open

Multi-tab support is key to a polished user experience — give Broadcast Channel API a try in your next project!

How Bloom Filters Can Supercharge Your NLP Pipelines 🚀🧠

AYUSH SRIVASTAVA — Wed, 10 Sep 2025 14:45:44 +0000

Natural Language Processing (NLP) projects often deal with massive vocabularies, gargantuan corpora, and computationally expensive operations. But what if there was a lightweight, clever data structure that could help you speed things up dramatically and reduce resource usage? Enter the Bloom filter.

What is a Bloom Filter?

A Bloom filter is a compact, memory-efficient probabilistic data structure that quickly answers: Is this word, phrase, or token possibly in my dataset—or definitely not? It gives fast yes/no answers (with some false positives, but no false negatives) without storing every item explicitly.

This “maybe” capability allows you to skip expensive exact lookups or processing for inputs not present in your dataset.

Real-World Applications of Bloom Filters in NLP

Instant Spell-Checking & Token Validation
Validate tokens against huge vocabularies without loading them fully or performing costly exact checks.
Memory-Light Stopword Filtering
Halt common stopwords like “the,” “and,” “is” quickly during preprocessing to save cycles and memory.
Detecting Duplicate Texts
Identify repeated sentences or chunks before running heavy semantic or linguistic analysis.
Early Filtering of Candidate Entities
Eliminate unlikely keywords or entities early, streamlining downstream tasks like entity linking or topic modeling.

Why Should Developers Care?

Efficiency: Saves CPU cycles by avoiding unnecessary operations.

Scalability: Handles large datasets or streaming text with minimal memory footprint.

Speed: Accelerates preprocessing and filtering steps crucial to NLP workflows.

Simple Bloom Filter Example in Node.js

const { BloomFilter } = require('bloomfilter');

const bloom = new BloomFilter(32 * 256, 16);

const stopwords = ['the', 'and', 'is', 'in', 'of', 'to', 'with'];
stopwords.forEach(word => bloom.add(word));

function isStopword(word) {
  return bloom.test(word);
}

const tokens = ['this', 'is', 'an', 'example', 'of', 'text', 'processing'];
const filtered = tokens.filter(token => !isStopword(token));

console.log('Filtered tokens:', filtered);
// Output: Filtered tokens: [ 'this', 'an', 'example', 'text', 'processing' ]

Grab a Bloom filter package for your language (bloomfilter for JS, pybloom for Python), pick high-cost repetitive checks in your NLP pipeline, and start integrating these lightning-fast approximate filters!

Wrapping Up

Bloom filters are a simple yet powerful addition to your NLP toolkit — perfect for optimizing text processing, scaling pipelines, and delivering faster results.