Forem: graciesharma

You're Probably Refreshing Auth Tokens Wrong. Here's a 40-Line Fix.

graciesharma — Fri, 03 Apr 2026 14:52:20 +0000

TL;DR: When multiple API calls fire at once and the token is expired, most apps trigger 5-10 duplicate refresh requests simultaneously. This is called a token refresh stampede. It causes race conditions, 401 loops, and random logouts. The fix is 40 lines of TypeScript — a shared promise reference, JWT expiry parsing without libraries, and a 60-second early expiration buffer.

The Bug No One Talks About

Your app loads a dashboard. Five components mount. Five API calls fire. The access token just expired.

What happens next?

POST /auth/refresh → 200 ✅ (new token)
POST /auth/refresh → 200 ✅ (new token... again)
POST /auth/refresh → 200 ✅ (third time)
POST /auth/refresh → 401 ❌ (refresh token already rotated)
POST /auth/refresh → 401 ❌ (same)

Three of those succeed because the server hasn't rotated the refresh token yet. The last two fail because it has. Now two components get 401s. Your interceptor sees 401 and tries to refresh again. You're in a loop. The user gets logged out.

This is a token refresh stampede. And almost every auth tutorial on the internet creates this exact bug.

Why Most Solutions Are Broken

Here's what a "typical" token refresh looks like:

// ❌ The version every tutorial teaches you
async function getAccessToken(): Promise<string | null> {
  const token = localStorage.getItem("access_token");

  if (token && !isExpired(token)) {
    return token;
  }

  // Every concurrent caller hits this line simultaneously
  const response = await fetch("/auth/refresh");
  const { newToken } = await response.json();
  localStorage.setItem("access_token", newToken);
  return newToken;
}

Five components call getAccessToken() at the same time. All five see the expired token. All five call /auth/refresh. Race condition achieved.

Common "fixes" that still break:

Approach	Why it fails
Boolean flag (`isRefreshing = true`)	Concurrent callers skip refresh entirely and return `null` — now they all fail
`setTimeout` retry	Adds latency, still races if timing is unlucky
Queue with callbacks	30+ lines of complexity for something that should be simple
Axios interceptor with retry	Re-queues the original request but can still fire multiple refreshes

The Fix: Promise Deduplication in 40 Lines

Here's the actual production code. Read it — it's short.

"use client";

let cachedToken: string | null = null;
let tokenExpiresAt = 0;
let tokenPromise: Promise<string | null> | null = null;

async function fetchAccessToken(): Promise<string | null> {
  try {
    const response = await fetch("/auth/access-token");
    if (!response.ok) return null;
    const { token } = (await response.json()) as { token?: string };
    return token ?? null;
  } catch {
    return null;
  }
}

function parseTokenExpiry(token: string): number {
  try {
    const parts = token.split(".");
    const encodedPayload = parts[1];
    if (!encodedPayload) return Date.now() + 5 * 60 * 1000;

    const payload = JSON.parse(atob(encodedPayload)) as { exp?: number };
    return payload.exp
      ? payload.exp * 1000 - 60_000  // Expire 60 seconds early
      : Date.now() + 5 * 60 * 1000;
  } catch {
    return Date.now() + 5 * 60 * 1000;
  }
}

export async function getAccessToken(): Promise<string | null> {
  // 1. Return cached token if still valid
  if (cachedToken && Date.now() < tokenExpiresAt) {
    return cachedToken;
  }

  // 2. If a refresh is already in-flight, piggyback on it
  if (!tokenPromise) {
    tokenPromise = fetchAccessToken()
      .then((token) => {
        cachedToken = token;
        tokenExpiresAt = token ? parseTokenExpiry(token) : 0;
        return token;
      })
      .finally(() => {
        tokenPromise = null;
      });
  }

  return tokenPromise;
}

export function clearTokenCache() {
  cachedToken = null;
  tokenExpiresAt = 0;
  tokenPromise = null;
}

That's it. No libraries. No queues. No retry loops.

How It Works — 3 Techniques in 40 Lines

Technique 1: Promise Deduplication via Shared Reference

This is the core insight. Instead of a boolean flag, we store the promise itself.

let tokenPromise: Promise<string | null> | null = null;

When the first caller triggers a refresh, the promise is stored. Every subsequent caller gets the same promise. They all await the same network request. One fetch, N consumers.

if (!tokenPromise) {
  // First caller — creates the promise
  tokenPromise = fetchAccessToken().then(/* ... */).finally(() => {
    tokenPromise = null; // Reset for next cycle
  });
}

// All callers — same promise, same result
return tokenPromise;

The .finally() resets the reference after the fetch completes (success or failure), so the next batch of expired calls will trigger a fresh refresh.

Why this beats a boolean flag:

// ❌ Boolean flag — concurrent callers get nothing
if (isRefreshing) return null; // Caller 2, 3, 4, 5 all get null

// ✅ Promise ref — concurrent callers get the same result
if (tokenPromise) return tokenPromise; // Caller 2, 3, 4, 5 all get the token

Technique 2: JWT Expiry Parsing Without Libraries

Most apps use jwt-decode (7KB) or jsonwebtoken (200KB+ with deps) to read token expiry. You don't need them.

A JWT is three base64 segments separated by dots. The middle one is the payload. That's it.

function parseTokenExpiry(token: string): number {
  try {
    const payload = JSON.parse(atob(token.split(".")[1]));
    return payload.exp
      ? payload.exp * 1000 - 60_000
      : Date.now() + 5 * 60 * 1000;
  } catch {
    return Date.now() + 5 * 60 * 1000; // Fallback: 5 min TTL
  }
}

Three lines to parse. Zero dependencies. The try/catch handles malformed tokens gracefully — if parsing fails, default to a 5-minute TTL so the app doesn't break.

Note: This is safe because we're only reading the exp claim client-side. We're not validating the signature — that's the server's job.

Technique 3: 60-Second Early Expiration Buffer

This is the one even senior devs miss.

payload.exp * 1000 - 60_000  // Expire 60 seconds before actual expiry

Why? Network latency. If the token expires at 12:00:00 and your request reaches the server at 12:00:00.300, it gets rejected even though it was valid when you sent it.

By treating the token as expired 60 seconds early, you guarantee the refresh happens before any request hits the server with a stale token. No more intermittent 401s on slow connections.

Wiring It Into Your API Client

import { getAccessToken, clearTokenCache } from "./token-cache";

// Request interceptor — inject token into every request
apiClient.addRequestInterceptor(async (config) => {
  const token = await getAccessToken();
  if (token) {
    config.headers = {
      ...config.headers,
      Authorization: `Bearer ${token}`,
    };
  }
  return config;
});

// Error interceptor — clear cache on 401 so next request triggers refresh
apiClient.addErrorInterceptor(async (error) => {
  if (error.status === 401) {
    clearTokenCache();
  }
  throw error;
});

Before and After

Before (stampede):

Component A → getToken() → fetch /refresh → new token A
Component B → getToken() → fetch /refresh → new token B
Component C → getToken() → fetch /refresh → 401 ❌ (refresh token rotated)
Component D → getToken() → fetch /refresh → 401 ❌
Component E → getToken() → fetch /refresh → 401 ❌
→ User logged out

After (deduplication):

Component A → getToken() → fetch /refresh → new token
Component B → getToken() → awaits same promise ↑
Component C → getToken() → awaits same promise ↑
Component D → getToken() → awaits same promise ↑
Component E → getToken() → awaits same promise ↑
→ 1 network request, 5 components served

Edge Cases Handled

Scenario	Behavior
Token valid	Returns cached token instantly, no network request
Token expired, single caller	Fetches new token, caches it
Token expired, 5 concurrent callers	One fetch, all 5 get the same token
Refresh fails	Returns `null`, resets promise so next call retries
Malformed JWT	Falls back to 5-minute TTL
401 from server	`clearTokenCache()` forces next request to refresh
Network timeout	`catch` returns `null`, `.finally()` resets promise
Token has no `exp` claim	Falls back to 5-minute TTL

Common Questions

"Why module-level variables instead of a class or React state?"

Auth tokens are app-global. Module-level let gives you a singleton automatically — no React context, no provider, no class instantiation. Every import gets the same reference. Simple.

"Why not use navigator.locks?"

Browser support is decent but not universal. The promise reference pattern works everywhere, is simpler, and doesn't need async coordination APIs.

"Does this work with refresh token rotation?"

Yes. That's the entire point. When the server rotates the refresh token on use, the stampede causes all but the first request to fail. This fix ensures only one request is ever made.

"What about SSR?"

The module-level variables are client-only ("use client" directive). On the server, auth is handled via HTTP-only cookies — no client-side token management needed.

The Takeaway

Stop building auth refresh with boolean flags and retry loops.

The fix is one shared promise reference. Every concurrent caller awaits the same in-flight request. Zero stampede. Zero race conditions. Zero dependencies. 40 lines.

Copy the code. Ship it. Move on to the features that actually matter.

Google Places Autocomplete Is Completely Broken Inside Radix Modals — Here's the 3-Part Fix

graciesharma — Fri, 03 Apr 2026 14:45:08 +0000

Google Places Autocomplete Is Completely Broken Inside Radix Modals — Here's the 3-Part Fix

TL;DR: Google Places Autocomplete silently breaks inside Radix UI dialogs — the dropdown renders in the DOM but is invisible, unclickable, and locked with inert. One fix isn't enough. You need three: a CSS override, a requestAnimationFrame loop, and an onInteractOutside guard. Complete copy-paste solution at the bottom.

The Bug That Will Make You Question Your Sanity

You wire up @react-google-maps/api Autocomplete inside a Radix Dialog. Standard stuff. You open the modal, start typing an address, and wait for the familiar dropdown.

It never comes.

You open DevTools. The .pac-container is there — sitting perfectly in the DOM, fully populated with suggestions. But it's invisible. Unclickable. Slapped with an inert attribute like it insulted someone.

This isn't a misconfiguration. It isn't a version mismatch. It's a three-layer collision between how Radix locks down its modal environment and how Google Places injects its dropdown into the page. Every layer breaks something different. Every layer needs its own fix.

I burned hours on this. Stack Overflow has fragments of answers. None of them work completely. Here's the full production fix.

Why This Happens — 3 Layers Deep

When modal={true} (the default), Radix Dialog does three things that independently destroy Google Places:

Layer 1 — `pointer-events: none` on `<body>`

Radix's DismissableLayer sets pointer-events: none on the entire <body> to ensure clicks outside the dialog trigger dismissal. Google's .pac-container is appended as a direct child of <body> — completely outside the dialog portal. It inherits pointer-events: none and becomes untouchable.

Layer 2 — `inert` + `aria-hidden` via MutationObserver

Radix uses the aria-hidden package to enforce accessibility isolation. It sets aria-hidden="true" and the HTML inert attribute on every direct child of <body> that is not the active dialog portal.

The brutal part: it uses its own MutationObserver to continuously re-apply these attributes whenever new children are added to <body>. Google Places appends .pac-container dynamically when suggestions load. The observer sees it, and within milliseconds, locks it down again. You can't out-run it with a one-time fix.

Layer 3 — "Outside" Click Dismissal

Even if you get past layers 1 and 2, there's a third trap. When the user clicks a suggestion inside .pac-container, Radix sees a pointer event originating outside the dialog bounds. It interprets this as an outside interaction and closes the modal before the selection can register. The modal snaps shut. Nothing is selected. The user has to start over.

The 3-Part Fix

Part 1 — CSS: Restore Visibility and Pointer Events

/* globals.css */

/*
 * Fix: Google Places Autocomplete inside Radix UI modal dialogs.
 *
 * z-index: 9999 renders the dropdown above the Radix overlay (z-50).
 * pointer-events: auto overrides the body-level pointer-events: none.
 */
.pac-container {
  z-index: 9999 !important;
  pointer-events: auto !important;
}

This handles Layer 1. The dropdown is now visible and technically interactive — but still frozen with inert. On its own, this fix accomplishes nothing useful.

Part 2 — `requestAnimationFrame` Loop: Win the War Against `aria-hidden`

The instinct here is to use a MutationObserver to strip inert whenever it's applied. That won't work. The aria-hidden package has its own observer that immediately re-applies it. Your observer and theirs enter a race condition — and yours will lose frames.

The solution is requestAnimationFrame. It fires before every paint, meaning the dropdown is always clean and interactive by the time the user sees it — regardless of what aria-hidden's observer does between frames.

useEffect(() => {
  if (!open) return;

  let rafId: number;

  const unblock = () => {
    document.querySelectorAll(".pac-container").forEach((el) => {
      el.removeAttribute("inert");
      el.removeAttribute("aria-hidden");
    });
    rafId = requestAnimationFrame(unblock);
  };

  rafId = requestAnimationFrame(unblock);
  return () => cancelAnimationFrame(rafId);
}, [open]);

"Isn't a RAF loop expensive?"

No. querySelectorAll on a class selector is near-instant. Removing a non-existent attribute is a no-op. The loop only runs while the dialog is open and cleans up automatically on close. In practice, the performance footprint is negligible.

Part 3 — `onInteractOutside`: Stop Radix From Closing the Dialog on Selection

const handleInteractOutside = useCallback((e: Event) => {
  const target = e.target as Element | null;
  if (target?.closest(".pac-container")) {
    e.preventDefault();
  }
}, []);

Wire it to your DialogContent:

<DialogContent onInteractOutside={handleInteractOutside}>
  {/* Google Places Autocomplete input */}
</DialogContent>

Clicking a suggestion is no longer treated as an outside interaction. The dialog holds open. The selection fires correctly. Done.

Full Copy-Paste Solution

Step 1 — Add to your global CSS:

.pac-container {
  z-index: 9999 !important;
  pointer-events: auto !important;
}

Step 2 — Drop this into your dialog component:

"use client";

import { useCallback, useEffect, useState } from "react";
import { Dialog, DialogContent, DialogTrigger } from "@radix-ui/react-dialog";

export function AddressFormDialog() {
  const [open, setOpen] = useState(false);

  // Part 2: Strip inert/aria-hidden every frame while the dialog is open
  useEffect(() => {
    if (!open) return;

    let rafId: number;

    const unblock = () => {
      document.querySelectorAll(".pac-container").forEach((el) => {
        el.removeAttribute("inert");
        el.removeAttribute("aria-hidden");
      });
      rafId = requestAnimationFrame(unblock);
    };

    rafId = requestAnimationFrame(unblock);
    return () => cancelAnimationFrame(rafId);
  }, [open]);

  // Part 3: Prevent dialog dismissal when clicking a Places suggestion
  const handleInteractOutside = useCallback((e: Event) => {
    const target = e.target as Element | null;
    if (target?.closest(".pac-container")) {
      e.preventDefault();
    }
  }, []);

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger>Edit Address</DialogTrigger>
      <DialogContent onInteractOutside={handleInteractOutside}>
        {/* Your Google Places Autocomplete input here */}
      </DialogContent>
    </Dialog>
  );
}

Why Every Other "Fix" Falls Short

Common suggestion	Why it fails
Just add `z-index` to `.pac-container`	Doesn't touch `inert` or `pointer-events` — dropdown is still frozen
Use `modal={false}` on the Dialog	Disables focus trapping and dismissal — breaks accessibility entirely
Portal the Autocomplete manually	Google Places manages its own DOM insertion — you can't control it
`MutationObserver` to remove `inert`	Races with `aria-hidden`'s own observer and consistently loses frames
Only handle `onPointerDownOutside`	Misses keyboard selection; doesn't address `inert` at all

Compatibility

This fix works with all of the following — no modifications needed:

@radix-ui/react-dialog (any version)
@react-google-maps/api
@googlemaps/react-wrapper
Raw google.maps.places.Autocomplete
Radix AlertDialog, Sheet, Drawer, and any component built on DismissableLayer

The Bigger Lesson

This bug exists because two well-engineered libraries make opposing assumptions about the DOM:

Radix assumes it owns <body> when a modal is open and aggressively enforces that contract.
Google Places assumes it can freely append to <body> and have those elements be interactive.

Neither library is wrong on its own terms. But when they meet, the result is a silent failure that's nearly impossible to debug without understanding both systems deeply.

The three-part fix isn't a hack — it's a precise surgical response to each layer of the conflict. CSS restores visibility. RAF wins the frame race. onInteractOutside protects the selection. Remove any one part and the bug comes back.

How to Create a Flipping Card Animation Using Framer Motion

graciesharma — Sun, 22 Dec 2024 08:59:10 +0000

Link video : Flipping Card

Framer Motion is a popular library for creating smooth and customizable animations in React. In this blog, we’ll walk through the steps to create a visually appealing flipping card animation. This card will flip between its front and back sides at regular intervals, using Framer Motion's powerful features.

Prerequisites
Before diving into the code, ensure you have the following:

Basic knowledge of React.
A React project set up (using tools like Create React App or Next.js).
Framer Motion installed in your project.
You can install it with:
npm install framer-motion

"use client";

import React, { useState, useEffect } from "react";
import { motion } from "framer-motion";
import CardFront from "./card-front";
import CardBack from "./card-back";

const FlippingCard = () => {
  const [isFlipped, setIsFlipped] = useState(false);

  useEffect(() => {
    const interval = setInterval(() => {
      setIsFlipped((prev) => !prev);
    }, 2000);

    return () => clearInterval(interval);
  }, []);

  return (
    <motion.div
      className="card-container"
      style={{
        width: "454px",
        height: "271px",
        perspective: "1000px", // Adds depth for 3D animation
      }}
    >
      <motion.div
        className="card"
        animate={{ rotateY: isFlipped ? 180 : 0 }} // Animates the flip
        transition={{ duration: 1 }} // Controls the flip speed
        style={{
          width: "100%",
          height: "100%",
          position: "relative",
          transformStyle: "preserve-3d", // Enables 3D effect
        }}
      >
        {/* Front Side */}
        <motion.div
          className="card-front"
          style={{
            position: "absolute",
            backfaceVisibility: "hidden", // Ensures only one side is visible
            width: "100%",
            height: "100%",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <CardFront />
        </motion.div>

        {/* Back Side */}
        <motion.div
          className="card-back"
          style={{
            position: "absolute",
            backfaceVisibility: "hidden",
            transform: "rotateY(180deg)", // Flips the back face
            width: "100%",
            height: "100%",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <CardBack />
        </motion.div>
      </motion.div>
    </motion.div>
  );
};

export default FlippingCard;

Key Features of This Component

3D Effect with Perspective:The perspective property in the outer container ensures the flipping motion feels realistic by adding depth.

Dynamic Rotation: The rotateY property toggles between 0 (front) and 180 (back) degrees to create the flip animation.

Smooth Animation: The transition property in Framer Motion controls the flip speed and smoothness.

Automatic Flip: A setInterval hook toggles the isFlipped state every 2 seconds for continuous flipping. You can replace this with user-triggered events like onClick or onHover.

Backface Visibility: backfaceVisibility: hidden ensures that only the visible side is displayed while flipping.

How to Customize the Flipping Card

Content: Replace CardFront and CardBack components with custom designs or dynamic content.

Dimensions: Modify width and height in the styles to fit your design needs.

Transition Speed: Adjust the duration in the transition property for faster or slower flips.

Flip Trigger: Replace the setInterval with an event handler.

Implementing a QR Code Download Feature in React

graciesharma — Tue, 07 May 2024 04:17:10 +0000

In this blog post, I will demonstrate how to implement a QR code download React application. This tutorial assumes that you have a basic understanding of React. It follows the steps involved in building a component named DownloadQR, responsible for orchestrating the download of a QR image file at the user’s click request.



import React, { useState } from "react";

// Constant URL for the QR code image
const qrCodeDownload = "https://yourserver.com/path/to/qr";

const DownloadQR = () => {
  const [error, setError] = useState("");

  const handleDownload = async () => {
    try {
      const response = await fetch(qrCodeDownload);
      const blob = await response.blob();
      const downloadUrl = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = downloadUrl;
      a.download = "AH_Campaign_QRCode.png";
      document.body.appendChild(a);
      a.click();
      a.remove();
      URL.revokeObjectURL(downloadUrl);
    } catch (err) {
      setError("Failed to download QR Code. Please try again.");
    }
  };

  return (
    <>
      {error && <p styles={{ color: "red" }}>{error}</p>}
      <button onClick={handleDownload}>
        Download QR
      </button>
    </>
  );
};

export default DownloadQR;

Key components include the:

useState Hook for Error Handling
We employ useState to handle error messages in the component. When the download fails, we can notify the user of what went wrong.

handleDownload function
This is an event handler for the click event on the download button. Firstly, it tries to obtain the QR code image from a predefined URL (qrCodeDownload). A blob is then generated from the downloaded image. After that, we create a temporary URL for the blob. We make use of URL.createObjectURL to generate a URL for the blob, turning it into a file-like object. Then we create a temporary anchor tag <a>, assign the generated URL to the href attribute, and set the download attribute to the desired file name. Finally, we simulate a click event on the manipulatively created anchor tag and remove the anchor tag from the document.

Error Handling
In the event that the fetch is rejected at any point in the process during the handleDownload function call fails due to some error in the URL or the server is unreachable, an exception will be captured in the catch block, updating the error message in the state.

UI elements
The final component consists of a simple button that the user can click to initiate the download. An error message is shown above the button if an error has been dispatched.

Once you have done that, Test Your Component Your component should be tested to account for the following scenarios, once you have integrated the DownloadQR component into your existing codebase:

The QR code is successfully downloaded from the server.
The server request fails due to an error in the server or network.
The URL pointing to the QR code image is incorrect.

This utility component improves user engagement by providing a download feature that enables direct downloads of QR codes. This functionality can be beneficial on digital marketing platforms where QR codes are used for campaigns or for activities that demand the scanning of QR codes, such as event registrations. Besides, it highlights how one can handle asynchronous operations and errors effectively in web applications using React.

Implementing CSV Data Export in React Without External Libraries

graciesharma — Fri, 26 Apr 2024 13:21:47 +0000

In the realm of React development, exporting data in CSV format is a frequent requirement. This task can be accomplished without the dependency on external libraries by leveraging vanilla JavaScript capabilities within a React component. This guide details the process of creating a feature that enables users to export CSV files directly from a React application.

Step 1: Construct a React Component

Begin by crafting a straightforward React component dedicated to managing the CSV export process. This component should include a button to initiate the export and a function to handle the creation and downloading of the CSV file.

import React from 'react';

const ExportCSV = ({ data, fileName }) => {
  const downloadCSV = () => {
    // Convert the data array into a CSV string
    const csvString = [
      ["Header1", "Header2", "Header3"], // Specify your headers here
      ...data.map(item => [item.field1, item.field2, item.field3]) // Map your data fields accordingly
    ]
    .map(row => row.join(","))
    .join("\n");

    // Create a Blob from the CSV string
    const blob = new Blob([csvString], { type: 'text/csv' });

    // Generate a download link and initiate the download
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = fileName || 'download.csv';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
  };

  return <button onClick={downloadCSV}>Export CSV</button>;
};

export default ExportCSV;

Step 2: Deploy the Component

Incorporate the ExportCSV component into another component or page within your application where you need the CSV export functionality. Supply the necessary data and the desired filename for the exported file.

import React from 'react';
import ExportCSV from './ExportCSV';

const MyComponent = () => {
  const data = [
    { field1: "row1-col1", field2: "row1-col2", field3: "row1-col3" },
    { field1: "row2-col1", field2: "row2-col2", field3: "row2-col3" }
    // Include additional data as needed
  ];

  return (
    <div>
      <h1>My Data Exporter</h1>
      <ExportCSV data={data} fileName="myData.csv" />
    </div>
  );
};

export default MyComponent;

Detailed Workflow Explanation:

Generate CSV String: The function transforms an array of data into a CSV format, starting with headers and followed by the corresponding data rows.
Blob and URL Handling: A Blob object is created using the CSV string to facilitate the file download.
Dynamic Link for Download: The download process is triggered by creating a temporary anchor (a) element programmatically and assigning the Blob URL to it. This is followed by a simulated click to commence the download.
Cleanup Post-Download: The Blob URL is revoked, and the anchor element is removed to release resources and clean up the document.

The technique can be expanded to include more complex CSV formatting options, handle diverse data types, or introduce error handling mechanisms to enhance the robustness and functionality of your application.

Async and Await

graciesharma — Mon, 18 Dec 2023 14:11:53 +0000

Hey there! 🌟 Today, let's talk about something cool that will make your coding adventures even more awesome: async and await. Don't worry if these terms sound like fancy tech jargon – we're here to make them as simple as playing your favorite game!

Imagine Your Code as a Story
Picture your code as a storybook. In traditional coding (synchronous), it reads like a story from start to finish. But what if we want our story to do a few things at once, like drawing and playing music? That's where async and await come in to make our story more exciting!

Meet async – The Storytelling Wizard

async Function:
Think of an async function like a wizard in your story. It's special because it can do magic (or code) while the rest of your story keeps going.


async function myAsyncFunction() {
}

Enter await – The Pause Button

await Operator:
await is like a pause button in your story. It tells your wizard (the async function) to wait for something to finish before moving on.

async function fetchData() {
  let response = await fetch('https://api.example.com/data');
  let data = await response.json();
  console.log(data);
}

Why You'll Love Them

No More Code Confusion: Remember when you had to jump around your storybook (code) because of callbacks? async and await make your story flow smoothly, like reading one page at a time.

Easy-to-Read Code: Your code becomes like a simple story you can read step by step. It's like telling your computer, "Hey, do this, then do that.

Fixing Mistakes Made Easy: Mistakes happen, but with async and await, you can catch and fix them just like finding a hidden treasure in your story.

Super-Fast Stories: With async and await, your story can do multiple things at once, making it as fast and exciting as your favorite game!

Let's Wrap It Up, Storyteller!
So, async and await are your buddies, making your code more fun and adventurous. They help your story (code) do cool things without getting all tangled up. Keep playing with them! Happy Learning :D

React Error Boundary

graciesharma — Tue, 28 Feb 2023 15:01:11 +0000

React Error Boundaries are a feature introduced in React that allows you to catch errors that occur during rendering, in life cycle methods, and in constructors of the entire component tree. With error boundaries, you can prevent an error from crashing the entire application and instead, display a fallback UI. Error boundaries are currently only supported as class components in React, so if you're using hooks, you may need to include a class component for error handling.

Error Boundaries work by wrapping the components that you want to monitor for errors. When an error occurs within one of these components or any of its descendants, the Error Boundary component catches the error and displays a fallback UI instead of the crashed component tree.

To catch errors during rendering, wrap the component you want to handle errors with an Error Boundary component. Here is an example:

<ErrorBoundary errorComponent={ClientError}>
                <Component {...pageProps} />
              </ErrorBoundary>

In this example, if an error occurs during rendering , the Error Boundary component will catch the error and display the fallback UI instead.

import React, { Component, ErrorInfo } from "react";

interface ErrorBoundaryProps {
  errorComponent: () => JSX.Element;
  children: React.ReactNode;
}

interface ErrorBoundaryState {
  hasError: boolean;
}

class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
  constructor(props: ErrorBoundaryProps) {
    super(props);
    this.state = {
      hasError: false,
    };
  }

  static getDerivedStateFromError(error: unknown) {
    return { hasError: true };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    //TODO: Integrate Datadog
    console.error("Error Boundary Caught an error: ", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <this.props.errorComponent />;
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

In the example above,there is a React component called ErrorBoundary. Its purpose is to catch any errors that occur within its child components and display a fallback UI instead of the crashed component tree.

The ErrorBoundary class has two interfaces. The ErrorBoundaryProps interface defines the props that ErrorBoundary accepts, which includes an errorComponent prop and a children prop. The ErrorBoundaryState interface defines the state of the ErrorBoundary, which is whether or not an error has occurred.

The ErrorBoundary class has a constructor that initializes the state to hasError: false.

The ErrorBoundary class also has two methods to handle errors. The static getDerivedStateFromError()method is called when an error is thrown from any of its child components. It returns an object that updates the state of the ErrorBoundary to indicate that an error has occurred.

The componentDidCatch() method is called after an error is thrown from any of its child components. In this method, the developer can add any code necessary to handle the error, such as logging or reporting the error to an external service. In this code snippet, the method logs the error and errorInfo to the console.

Finally, the render() method checks if an error has occurred by looking at the hasError state. If an error has occurred, it renders the errorComponent that was passed in as a prop. If no error has occurred, it renders its children prop, which is the child component tree that it is wrapping.

This component is very useful for catching errors in production environments.It’s generally advisable to use at least one Error Boundary at the root of your app (e.g., the App.js file). This will prevent users from seeing a blank HTML page and perhaps see a nice/custom fallback UI instead.

Remember, just like in life, sometimes things can go wrong in our React applications too. But with the ErrorBoundary, we can catch those errors and make sure they don't bring the whole house down! So go ahead and wrap your components with an ErrorBoundary, and rest assured that even if your code throws some shade, your application will keep on shining!;)

Forem: graciesharma

You're Probably Refreshing Auth Tokens Wrong. Here's a 40-Line Fix.

The Bug No One Talks About

Why Most Solutions Are Broken

The Fix: Promise Deduplication in 40 Lines

How It Works — 3 Techniques in 40 Lines

Technique 1: Promise Deduplication via Shared Reference

Technique 2: JWT Expiry Parsing Without Libraries

Technique 3: 60-Second Early Expiration Buffer

Wiring It Into Your API Client

Before and After

Edge Cases Handled

Common Questions

The Takeaway

Google Places Autocomplete Is Completely Broken Inside Radix Modals — Here's the 3-Part Fix

Google Places Autocomplete Is Completely Broken Inside Radix Modals — Here's the 3-Part Fix

The Bug That Will Make You Question Your Sanity

Why This Happens — 3 Layers Deep

Layer 1 — pointer-events: none on <body>

Layer 2 — inert + aria-hidden via MutationObserver

Layer 3 — "Outside" Click Dismissal

The 3-Part Fix

Part 1 — CSS: Restore Visibility and Pointer Events

Part 2 — requestAnimationFrame Loop: Win the War Against aria-hidden

Part 3 — onInteractOutside: Stop Radix From Closing the Dialog on Selection

Full Copy-Paste Solution

Why Every Other "Fix" Falls Short

Compatibility

The Bigger Lesson

How to Create a Flipping Card Animation Using Framer Motion

Implementing a QR Code Download Feature in React

Implementing CSV Data Export in React Without External Libraries

Step 1: Construct a React Component

Step 2: Deploy the Component

Detailed Workflow Explanation:

Async and Await

React Error Boundary

Layer 1 — `pointer-events: none` on `<body>`

Layer 2 — `inert` + `aria-hidden` via MutationObserver

Part 2 — `requestAnimationFrame` Loop: Win the War Against `aria-hidden`

Part 3 — `onInteractOutside`: Stop Radix From Closing the Dialog on Selection