Forem: Rahul Giri

🏗️ Backend for Frontend (BFF) — The Missing Layer Every Frontend Developer Should Know

Rahul Giri — Wed, 20 Aug 2025 10:13:51 +0000

If you’ve been building modern apps with React, Next.js, Angular, or Vue, chances are you’ve run into messy APIs, performance bottlenecks, or “too much data vs too little data” problems.

That’s where Backend for Frontend (BFF) comes in.

This article will explain what BFF is, why we need it, when to use it, real-world scenarios, common pitfalls, and examples — in the simplest way possible.

🤔 What is Backend for Frontend (BFF)?

Imagine you’re building an e-commerce app.

Your mobile app needs a very compact API response (just product name, price, image).
Your web app needs a detailed product view (reviews, specs, seller info).
Your admin dashboard needs extra APIs (stock, margins, supplier details).

If all of them talk directly to your core backend (say a bunch of microservices), you’ll end up with:

Over-fetching data (getting more than you need)
Under-fetching data (having to call multiple APIs to stitch info)
Messy business logic leaking into frontend

👉 Solution: Put a BFF layer between frontend and backend.
Each frontend (Web, Mobile, Smartwatch, TV app) gets its own tailored backend API.

Frontend (Web/Mobile/TV)  --->  BFF  --->  Microservices/Core Backend

So, BFF is a backend layer that’s custom-built for a specific frontend.

🚀 Why Do We Need BFF?

Let’s make it super clear with real-life problems it solves:

1. 🎯 Different devices need different data

Mobile app: Needs lightweight, fast responses (battery + bandwidth sensitive).
Web app: Can handle richer data with more details.
Smartwatch: Needs tiny payloads (notifications, quick info).

Without BFF → you either write crazy conditions in frontend OR overload the core backend.

With BFF → each frontend gets exactly what it needs.

2. 🔐 Security & Abstraction

Core backend may expose sensitive data or complex microservices.
BFF can sanitize responses and hide internal details.

Example: Instead of exposing discountStrategyId=9, BFF can translate it into discount: 20%.

3. 🏎️ Performance Optimization

BFF can aggregate multiple microservice calls into one response.
No need for frontend to call 5 different APIs and merge data.

Example:
Instead of frontend calling separately:

/product/123  
/reviews/123  
/stock/123

BFF does it internally and returns:

{
  "id": 123,
  "name": "iPhone 15",
  "price": 900,
  "stock": 25,
  "reviews": [{...}]
}

4. ⚡ Faster Iteration for Frontend Teams

Frontend devs don’t need to wait for backend teams to create custom APIs.
They can update the BFF layer to shape responses as needed.

This is a big productivity boost.

🛠️ Real-World Scenarios Where BFF Shines

📱 E-Commerce App

Mobile app only shows: product name, price, image.
Web app shows: product + reviews + seller info.
BFF makes sure both get tailored responses from the same microservices.

🎬 Streaming Platforms (like Netflix)

TV app → needs high-quality video URLs.
Mobile app → adaptive video streams + subtitles.
Web app → trailers, recommendations, cast info.

Instead of one API trying to handle everything → separate BFFs optimize the experience.

🏦 Banking App

Customer app → shows account balance, transactions.
Employee dashboard → shows risk score, customer details, compliance flags.
BFF makes sure customer doesn’t accidentally see employee-only fields.

⚖️ Pros & Cons of BFF

✅ Benefits

Custom responses per frontend
Better performance (less over-fetching/under-fetching)
Hides backend complexity
Faster frontend development
Stronger security boundaries

❌ Drawbacks

Extra maintenance → one BFF per frontend means more services.
Duplication risk → common logic may be repeated across BFFs.
Latency → adds an extra hop between frontend and backend.
Team coordination → if not handled well, BFF becomes a mini-monolith.

⚠️ Corner Cases & Gotchas

Too Many Frontends → Too Many BFFs

If you have 10 frontends (iOS, Android, Web, TV, Car dashboard, etc.), maintaining 10 BFFs is painful.
Solution: Use a hybrid approach → some shared BFFs with configs.

Caching Problems

BFF responses may become a bottleneck if not cached properly.
Example: Same product requested by 1M users → always hitting microservices.
Solution: Add caching at the BFF layer (Redis, CDN).

Data Duplication

Same aggregation logic may be copied across multiple BFFs.
Solution: Move common logic to libraries or a shared service.

Latency Issues

BFF calls multiple microservices → increases request time.
Solution: Use parallel requests + batching inside BFF.

🧑‍💻 Example: A Simple BFF in Node.js (Express)

Here’s a tiny BFF for an e-commerce frontend:

import express from "express";
import fetch from "node-fetch";

const app = express();

app.get("/product/:id", async (req, res) => {
  const { id } = req.params;

  // Call multiple backend services
  const [productRes, reviewRes, stockRes] = await Promise.all([
    fetch(`http://catalog-service/products/${id}`).then(r => r.json()),
    fetch(`http://review-service/reviews/${id}`).then(r => r.json()),
    fetch(`http://inventory-service/stock/${id}`).then(r => r.json())
  ]);

  // Shape the response for frontend
  res.json({
    id: productRes.id,
    name: productRes.name,
    price: productRes.price,
    stock: stockRes.count,
    reviews: reviewRes
  });
});

app.listen(4000, () => {
  console.log("BFF running on port 4000");
});

Now your frontend can call:
/product/123 and get a ready-to-use response 🎉

🔮 When NOT to Use BFF

Very simple apps (one frontend, one backend) → no need for BFF.
When GraphQL fits better → GraphQL can solve under/over-fetching too.
If your team is small → extra maintenance might slow you down.

📝 Key Takeaways

BFF = a backend tailored for a specific frontend.
It solves problems of over-fetching, under-fetching, performance, and security.
Real-world examples: e-commerce, banking, streaming apps.
Downsides: extra maintenance, duplication, caching challenges.
Always weigh BFF vs GraphQL vs direct backend calls.

👉 Rule of Thumb:
If your app has multiple frontends with very different needs → BFF is a lifesaver.
If not → don’t over-engineer.

🔥 That’s it! You now know when, why, and how to use a BFF — with corner cases and real-life scenarios.

Test ID Best Practices Guide: React + TypeScript + Next.js

Rahul Giri — Wed, 20 Aug 2025 06:23:14 +0000

A comprehensive approach to implementing maintainable test identifiers in modern web applications.

🎯 Core Objectives

✅ Minimize test ID usage – prefer semantic selectors first
✅ Implement conflict-free naming patterns
✅ Co-locate test IDs for optimal maintainability
✅ Guarantee uniqueness across large codebases
✅ Eliminate test bloat in production builds

1. When to Use `data-testid` vs Semantic Selectors

✅ Use `data-testid` when:

// Dynamic content without semantic meaning
<div data-testid="order-status-badge">Pending</div>

// Complex component interaction
<div data-testid="drag-drop-source" draggable />
<div data-testid="drag-drop-target" />

// Third-party library components
<DatePicker data-testid="checkout-date-picker" />

// Identical elements
<button data-testid="faq-question-1">+</button>
<button data-testid="faq-question-2">+</button>

// Loading & skeleton states
<div data-testid="product-card-skeleton" />

❌ Avoid `data-testid` when:

// Prefer semantic selectors
<button>Login</button>              // getByRole("button", { name: /login/i })
<a href="/checkout">Checkout</a>   // getByRole("link", { name: /checkout/i })
<input placeholder="Email" />      // getByPlaceholderText("Email")

// ARIA labels are enough
<input aria-label="Search" />      // getByRole("textbox", { name: /search/i })

2. Naming Patterns & Recommendations

🔹 Pattern 1: Component-Scoped Kebab-Case (✅ Recommended)

Format: {component}-{element}-{type}

data-testid="user-profile-edit-btn"
data-testid="product-card-price-text"
data-testid="checkout-form-submit-btn"
data-testid="navigation-menu-toggle-btn"
data-testid="search-results-filter-dropdown"

Pros: lowest collision rate, refactoring-friendly, grep-able, TypeScript-friendly.
Cons: longer IDs, needs consistent discipline.
👉 Teams report 85% fewer test ID conflicts and 40% faster debugging.

🔹 Pattern 2: Hierarchical Dot Notation

Format: {domain}.{component}.{element}

data-testid="auth.login-form.submit-btn"
data-testid="ecommerce.product-grid.filter-btn"
data-testid="admin.user-table.delete-btn"

Pros: clear domain separation, good for micro-frontends.
Cons: tooling issues with dots, harder refactors.

🔹 Pattern 3: BEM-Style

Format: {block}__{element}--{modifier}

data-testid="product-card__image--loading"
data-testid="nav-menu__item--active"
data-testid="form-input__field--error"

Pros: captures state variations, matches BEM CSS.
Cons: steep learning curve, verbose, more maintenance.

3. Advanced Co-Location Strategies

Standard Component Layout

/components
  /UserProfile
    UserProfile.tsx
    UserProfile.test.tsx
    userProfile.testIds.ts   <-- co-located test IDs

Example: Co-located Test IDs

// userProfile.testIds.ts
export const USER_PROFILE_TEST_IDS = {
  container: 'user-profile-container',
  avatar: 'user-profile-avatar',
  editButton: 'user-profile-edit-btn',
  nameInput: 'user-profile-name-input',
  saveButton: 'user-profile-save-btn',

  // Dynamic helpers
  skillTag: (id: string) => `user-profile-skill-${id}`,
  projectCard: (id: string) => `user-profile-project-${id}`,
} as const;

4. Real-World Example: ProductCard

// productCard.testIds.ts
export const PRODUCT_CARD_TEST_IDS = {
  container: "product-card-container",
  image: "product-card-image",
  title: "product-card-title",
  price: "product-card-price",
  addToCartBtn: "product-card-add-to-cart-btn",

  // Dynamic helper
  variantOption: (id: string) => `product-card-variant-${id}`,
} as const;

// ProductCard.tsx
import { PRODUCT_CARD_TEST_IDS } from "./productCard.testIds";

export const ProductCard = ({ product }) => (
  <div data-testid={PRODUCT_CARD_TEST_IDS.container}>
    <img
      src={product.image}
      alt={product.name}
      data-testid={PRODUCT_CARD_TEST_IDS.image}
    />
    <h3 data-testid={PRODUCT_CARD_TEST_IDS.title}>{product.name}</h3>
    <span data-testid={PRODUCT_CARD_TEST_IDS.price}>{product.price}</span>
    <button data-testid={PRODUCT_CARD_TEST_IDS.addToCartBtn}>Add to Cart</button>

    {product.variants.map((v) => (
      <button
        key={v.id}
        data-testid={PRODUCT_CARD_TEST_IDS.variantOption(v.id)}
      >
        {v.label}
      </button>
    ))}
  </div>
);

5. Conflict Prevention Strategies

Namespace by Domain

data-testid="auth-login-form-submit-btn"
data-testid="ecommerce-product-card-add-btn"

Component-Level Scoping

export const USER_PROFILE_TEST_IDS = {
  avatar: 'user-profile-avatar',
  editBtn: 'user-profile-edit-btn',
};

Scoped Helpers

const getTestId = (scope: string, element: string) =>
  `${scope}-${element}`;

data-testid={getTestId('user-profile', 'avatar')}
data-testid={`cart-item-${item.id}-remove-btn`}

Got it 👍 Since your project uses eslint.config.js (the new flat config format), you’ll configure the rule there instead of .eslintrc.json.

Here’s the dev.to post version with that adjustment:

6. Enforce `data-testid` in Your React + TypeScript Codebase with ESLint

When working with React + TypeScript, having consistent data-testid attributes is super useful for testing. But what if someone forgets to add them? Let’s make ESLint warn us automatically.

Install the plugin

npm install eslint-plugin-testing-library --save-dev

Update your `eslint.config.js`

Add the rule at the end of your config:

import testingLibrary from "eslint-plugin-testing-library";

export default [
  {
    files: ["**/*.tsx"],
    plugins: { "testing-library": testingLibrary },
    rules: {
      "testing-library/prefer-screen-queries": "warn",
      "testing-library/consistent-data-testid": ["warn", {
        testIdPattern: "[A-Za-z]+(-[A-Za-z]+)*",
      }],
    },
  },
];

Now ESLint warns 🚨

Whenever a required element in .tsx files is missing data-testid, ESLint will show a warning.

This way, your whole team keeps test IDs consistent across the codebase without relying on manual reviews. ✅

7. Production Optimization

Next.js `next.config.js`

// Strip test IDs from production bundle
module.exports = {
  webpack: (config, { dev }) => {
    if (!dev) {
      config.module.rules.push({
        test: /\.(js|jsx|ts|tsx)$/,
        use: {
          loader: 'string-replace-loader',
          options: {
            search: /data-testid="[^"]*"/g,
            replace: '',
          },
        },
      });
    }
    return config;
  },
};

Utility Function

export const testId = (id: string) =>
  process.env.NODE_ENV !== "production" ? { "data-testid": id } : {};

// Usage
<button {...testId("login-form-submit-btn")}>Submit</button>

8. Trends & Future Considerations

Component-First Architecture → auto-namespaced test IDs per component
AI-Assisted Test ID Generation → auto-suggesting IDs based on structure
Visual Regression Testing → using test IDs for screenshot diffs & layout validation
Analytics & Monitoring → reusing test IDs for A/B tests and feature tracking

📊 Decision Matrix

Application Size	Recommended Pattern	Example
Small (<50)	Simple kebab-case	`login-form-submit-btn`
Medium (50–200)	Component-scoped	`user-profile-edit-btn`
Large (200+)	Namespace + component	`auth-login-form-submit-btn`
Micro-frontends	Domain-scoped	`auth.login-form.submit-btn`
Complex states	BEM-style	`wizard-step__content--active`

💡 Takeaway:

Use semantic selectors first.
Fall back to well-scoped data-testid only when necessary.
Co-locate and namespace to keep them unique.
Strip them out in production for clean builds.

Modern Test ID Conventions for React/TypeScript/Next.js Apps: Industry Best Practices for 2025

Rahul Giri — Wed, 20 Aug 2025 06:20:33 +0000

Testing is the backbone of reliable software, and having a solid test ID strategy can make or break your testing experience. Whether you're writing unit tests with Jest and React Testing Library, or end-to-end tests with Playwright or Cypress, your test ID conventions will determine how maintainable and readable your test suite becomes.

After analyzing practices from leading tech companies and the latest trends in the testing community, here's a comprehensive guide to modernizing your test ID approach.

The Evolution: From Basic data-testid to Semantic Test IDs

Traditional Approach (What Most Teams Do)

// Basic approach - functional but not scalable
<button data-testid="submit-button">Submit</button>
<input data-testid="email-input" />
<div data-testid="error-message" />

Modern Approach (What Top Companies Use)

// Semantic, hierarchical, and context-aware
<button data-testid="auth.login-form.submit-btn">Login</button>
<input data-testid="auth.login-form.email-input" />
<div data-testid="auth.login-form.error-message" />

Industry-Standard Naming Conventions

1. Hierarchical Dot Notation (Recommended)

This is the most popular approach among major tech companies:

Pattern: domain.component.element-type

// Examples
data-testid="user.profile-card.avatar-image"
data-testid="cart.checkout-form.payment-method-selector"
data-testid="dashboard.analytics-widget.export-btn"
data-testid="navigation.main-menu.user-dropdown"

Benefits:

Clear hierarchy and context
Easy to grep and search
Namespace collision prevention
Scales well with large applications

2. BEM-Style Convention (Alternative)

Pattern: component__element--modifier

// Examples
data-testid="login-form__submit-button--disabled"
data-testid="product-card__price--discounted"
data-testid="navigation__menu-item--active"

3. Kebab-Case with Prefixes (Simple Alternative)

Pattern: prefix-component-element-action

// Examples
data-testid="btn-login-submit"
data-testid="input-user-email"
data-testid="modal-confirmation-close"

TypeScript Integration: Type-Safe Test IDs

Create a centralized system for managing test IDs:

// testIds.ts - Centralized test ID management
export const TestIds = {
  auth: {
    loginForm: {
      emailInput: 'auth.login-form.email-input',
      passwordInput: 'auth.login-form.password-input',
      submitBtn: 'auth.login-form.submit-btn',
      forgotPasswordLink: 'auth.login-form.forgot-password-link',
    },
    signupForm: {
      emailInput: 'auth.signup-form.email-input',
      passwordInput: 'auth.signup-form.password-input',
      confirmPasswordInput: 'auth.signup-form.confirm-password-input',
      submitBtn: 'auth.signup-form.submit-btn',
    }
  },
  dashboard: {
    sidebar: {
      profileBtn: 'dashboard.sidebar.profile-btn',
      settingsBtn: 'dashboard.sidebar.settings-btn',
      logoutBtn: 'dashboard.sidebar.logout-btn',
    }
  }
} as const;

// Type for all possible test IDs
type TestId = typeof TestIds[keyof typeof TestIds];

Enhanced Hook for Test ID Generation

// hooks/useTestId.ts
import { TestIds } from '../constants/testIds';

type TestIdPath = string;
type TestIdOptions = {
  suffix?: string;
  index?: number;
  variant?: string;
};

export const useTestId = () => {
  const generateTestId = (
    basePath: TestIdPath, 
    options?: TestIdOptions
  ): string => {
    let testId = basePath;

    if (options?.index !== undefined) {
      testId += `-${options.index}`;
    }

    if (options?.variant) {
      testId += `--${options.variant}`;
    }

    if (options?.suffix) {
      testId += `-${options.suffix}`;
    }

    return testId;
  };

  const getTestId = (path: string) => {
    const keys = path.split('.');
    let current: any = TestIds;

    for (const key of keys) {
      current = current[key];
      if (!current) {
        console.warn(`Test ID path not found: ${path}`);
        return path;
      }
    }

    return current;
  };

  return { generateTestId, getTestId };
};

Usage in Components

// LoginForm.tsx
import React from 'react';
import { useTestId } from '../hooks/useTestId';
import { TestIds } from '../constants/testIds';

interface LoginFormProps {
  onSubmit: (email: string, password: string) => void;
  isLoading?: boolean;
}

export const LoginForm: React.FC<LoginFormProps> = ({ onSubmit, isLoading }) => {
  const { generateTestId } = useTestId();

  return (
    <form data-testid={TestIds.auth.loginForm.container}>
      <input
        type="email"
        data-testid={TestIds.auth.loginForm.emailInput}
        placeholder="Email"
      />
      <input
        type="password"
        data-testid={TestIds.auth.loginForm.passwordInput}
        placeholder="Password"
      />
      <button
        type="submit"
        data-testid={generateTestId(
          TestIds.auth.loginForm.submitBtn,
          { variant: isLoading ? 'loading' : 'active' }
        )}
      >
        {isLoading ? 'Logging in...' : 'Login'}
      </button>
    </form>
  );
};

Advanced Patterns for Complex UIs

1. Dynamic Lists and Collections

// ProductList.tsx
const ProductList: React.FC<{ products: Product[] }> = ({ products }) => {
  return (
    <div data-testid="product.list.container">
      {products.map((product, index) => (
        <div
          key={product.id}
          data-testid={`product.list.item-${index}`}
          data-product-id={product.id} // Additional context
        >
          <h3 data-testid={`product.list.item-${index}.title`}>
            {product.name}
          </h3>
          <button
            data-testid={`product.list.item-${index}.add-to-cart-btn`}
            data-product-action="add-to-cart"
          >
            Add to Cart
          </button>
        </div>
      ))}
    </div>
  );
};

2. Conditional Rendering States

// LoadingButton.tsx
const LoadingButton: React.FC<ButtonProps> = ({ 
  isLoading, 
  disabled, 
  children,
  testId 
}) => {
  const getStateModifier = () => {
    if (isLoading) return '--loading';
    if (disabled) return '--disabled';
    return '--active';
  };

  return (
    <button
      data-testid={`${testId}${getStateModifier()}`}
      data-loading={isLoading}
      data-disabled={disabled}
      disabled={disabled || isLoading}
    >
      {isLoading ? <Spinner /> : children}
    </button>
  );
};

3. Multi-Step Forms and Wizards

// CheckoutWizard.tsx
const CheckoutWizard: React.FC = () => {
  const [currentStep, setCurrentStep] = useState(0);

  const steps = ['shipping', 'payment', 'review'];

  return (
    <div data-testid="checkout.wizard.container">
      <div data-testid="checkout.wizard.progress">
        {steps.map((step, index) => (
          <div
            key={step}
            data-testid={`checkout.wizard.step-${index}`}
            data-step-name={step}
            data-step-active={index === currentStep}
          >
            {step}
          </div>
        ))}
      </div>

      <div data-testid={`checkout.wizard.content-${steps[currentStep]}`}>
        {/* Step content */}
      </div>
    </div>
  );
};

Testing Library Integration

React Testing Library Best Practices

// LoginForm.test.tsx
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { LoginForm } from './LoginForm';
import { TestIds } from '../constants/testIds';

describe('LoginForm', () => {
  it('should handle login submission', async () => {
    const mockSubmit = jest.fn();

    render(<LoginForm onSubmit={mockSubmit} />);

    // Using semantic test IDs
    const emailInput = screen.getByTestId(TestIds.auth.loginForm.emailInput);
    const passwordInput = screen.getByTestId(TestIds.auth.loginForm.passwordInput);
    const submitBtn = screen.getByTestId(TestIds.auth.loginForm.submitBtn);

    fireEvent.change(emailInput, { target: { value: 'test@example.com' } });
    fireEvent.change(passwordInput, { target: { value: 'password123' } });
    fireEvent.click(submitBtn);

    await waitFor(() => {
      expect(mockSubmit).toHaveBeenCalledWith('test@example.com', 'password123');
    });
  });

  it('should show loading state', () => {
    render(<LoginForm onSubmit={jest.fn()} isLoading />);

    // Testing state variants
    expect(screen.getByTestId(
      TestIds.auth.loginForm.submitBtn + '--loading'
    )).toBeInTheDocument();
  });
});

Playwright/Cypress Integration

// login.spec.ts (Playwright)
import { test, expect } from '@playwright/test';
import { TestIds } from '../src/constants/testIds';

test('user can login successfully', async ({ page }) => {
  await page.goto('/login');

  // Using the same test IDs across unit and e2e tests
  await page.fill(
    `[data-testid="${TestIds.auth.loginForm.emailInput}"]`,
    'user@example.com'
  );

  await page.fill(
    `[data-testid="${TestIds.auth.loginForm.passwordInput}"]`,
    'password123'
  );

  await page.click(`[data-testid="${TestIds.auth.loginForm.submitBtn}"]`);

  // Assert navigation to dashboard
  await expect(page.locator(
    `[data-testid="${TestIds.dashboard.container}"]`
  )).toBeVisible();
});

ESLint Rules for Test ID Consistency

Create custom ESLint rules to enforce your conventions:

// .eslintrc.json
{
  "rules": {
    "@typescript-eslint/naming-convention": [
      "error",
      {
        "selector": "property",
        "filter": "data-testid",
        "format": ["kebab-case"],
        "custom": {
          "regex": "^[a-z]+\\.[a-z-]+\\.[a-z-]+$",
          "match": true
        }
      }
    ]
  }
}

Automated Test ID Generation

Consider using a build-time plugin to automatically generate test IDs:

// babel-plugin-auto-testid.js
module.exports = function({ types: t }) {
  return {
    visitor: {
      JSXElement(path) {
        const openingElement = path.node.openingElement;
        const name = openingElement.name.name;

        // Skip if data-testid already exists
        const hasTestId = openingElement.attributes.some(
          attr => attr.name && attr.name.name === 'data-testid'
        );

        if (!hasTestId && shouldAddTestId(name)) {
          const testId = generateTestId(path);
          openingElement.attributes.push(
            t.jsxAttribute(
              t.jsxIdentifier('data-testid'),
              t.stringLiteral(testId)
            )
          );
        }
      }
    }
  };
};

Team Adoption Guidelines

1. Documentation Strategy

Create a test ID style guide document
Maintain a living catalog of all test IDs
Include test ID patterns in code review checklists

2. Migration Approach

// Gradual migration utility
const LEGACY_TEST_IDS = {
  'submit-button': 'auth.login-form.submit-btn',
  'email-input': 'auth.login-form.email-input',
  // ... other mappings
};

export const getTestId = (legacyId: string): string => {
  return LEGACY_TEST_IDS[legacyId] || legacyId;
};

3. Team Training

Conduct workshops on the new conventions
Create reusable component templates
Set up automated checks in CI/CD pipeline

Common Pitfalls to Avoid

Over-nesting: Don't go beyond 3-4 levels deep

   // ❌ Too deep
   data-testid="app.dashboard.sidebar.navigation.menu.item.link.text"

   // ✅ Better
   data-testid="dashboard.nav-menu.item-link"

Inconsistent naming: Stick to your chosen convention

   // ❌ Mixed conventions
   data-testid="userProfile_avatar"
   data-testid="user-profile.settings"

   // ✅ Consistent
   data-testid="user.profile.avatar"
   data-testid="user.profile.settings"

Dynamic values without context: Always provide stable identifiers

   // ❌ Brittle
   data-testid={`item-${Math.random()}`}

   // ✅ Stable
   data-testid={`product.list.item-${product.id}`}

Conclusion

Modern test ID conventions are about more than just naming—they're about creating a sustainable testing ecosystem that grows with your application. By adopting these industry-proven patterns, you'll create tests that are more maintainable, readable, and reliable.

The key is to start with a solid foundation and gradually migrate your existing tests. Remember, the best test ID strategy is the one your team actually follows consistently.

Key Takeaways:

Use hierarchical dot notation for scalability
Implement TypeScript integration for type safety
Create centralized test ID management
Include state and context information
Establish team conventions and tooling
Plan for gradual migration from legacy approaches

Start implementing these patterns in your next React/TypeScript/Next.js project, and watch your testing experience transform from frustrating to delightful.

Complete NextJS Tutorial (with App router) - Modern App Development Guide

Rahul Giri — Thu, 07 Aug 2025 06:09:51 +0000

What is NextJS and How It Helps in App Development
NextJS with ReactJS Integration
Creating Projects via Command Line
Understanding next.config.js and next.config.ts
Problems NextJS Solves vs Manual React Setup
Webpack and Babel Under the Hood
App Router - Page Identification and Rendering
File Naming Conventions and Special Files
SSR, SSG, and ISG with NextJS 14+
Caching Strategies
Link Component and Dynamic Loading

1. What is NextJS and How It Helps in App Development

Think of NextJS like a pre-built house foundation for your React applications. Instead of building everything from scratch (like laying bricks, installing plumbing, wiring), NextJS gives you a solid foundation so you can focus on decorating and making it beautiful.

What NextJS Really Is:
NextJS is a framework built on top of React that handles all the complex setup and configuration automatically. It's like having a skilled contractor handle all the technical stuff while you focus on building your actual application.

Real-World Benefits:

Example: Building an E-commerce Website

Without NextJS: You'd need to manually configure routing, set up server-side rendering for SEO, configure webpack, set up image optimization, create API endpoints, etc. This could take weeks.
With NextJS: You get all of this automatically. You can focus on building your product pages, shopping cart, and user experience.

Key Advantages:

SEO-Ready: Your pages load faster and search engines can read them easily
Performance: Images load faster, pages split automatically for quicker loading
Developer-Friendly: Less configuration, more coding your actual features
Production-Ready: Big companies like Netflix and TikTok trust it

2. NextJS with ReactJS Integration

Important: NextJS doesn't replace React - it enhances it. Think of React as the engine of a car, and NextJS as the complete car with steering wheel, brakes, GPS, and air conditioning.

You write the same React code you're familiar with, but NextJS adds superpowers to it.

Simple Example - A Blog Post Component:

// This is regular React code that works perfectly in NextJS
function BlogPost({ title, content, author }) {
  return (
    <article>
      <h1>{title}</h1>
      <p>By: {author}</p>
      <div>{content}</div>
    </article>
  )
}

export default BlogPost

Using It in a NextJS Page:

// app/blog/page.jsx
import BlogPost from '../../components/BlogPost'

function BlogPage() {
  // This looks exactly like regular React
  const posts = [
    { 
      title: "Getting Started with NextJS", 
      content: "NextJS makes React development easier...", 
      author: "John Doe" 
    }
  ]

  return (
    <div>
      <h1>My Blog</h1>
      {posts.map((post, index) => (
        <BlogPost 
          key={index}
          title={post.title} 
          content={post.content} 
          author={post.author} 
        />
      ))}
    </div>
  )
}

export default BlogPage

The magic is that NextJS automatically makes this page available at /blog URL without any routing configuration!

3. Creating Projects via Command Line

Step-by-Step Project Creation:

Step 1: Make sure you have Node.js installed

node --version  # Should show version 18.0 or higher

Step 2: Create your NextJS project

# The easiest way - creates everything for you
npx create-next-app@latest my-awesome-website

# You'll be asked a few questions:
# ✔ Would you like to use TypeScript? › No / Yes
# ✔ Would you like to use ESLint? › No / Yes  
# ✔ Would you like to use Tailwind CSS? › No / Yes
# ✔ Would you like to use App Router? › Yes (recommended)

Step 3: Navigate and start your project

cd my-awesome-website
npm run dev

What You Get:

my-awesome-website/
├── app/                 # Your pages and layouts live here
│   ├── page.jsx        # Home page (shows at yoursite.com/)
│   ├── layout.jsx      # Wrapper that appears on every page
│   └── globals.css     # Global styles
├── public/             # Images, favicon, etc.
├── next.config.js      # NextJS configuration
└── package.json        # Project dependencies

Real Example: After running npm run dev, visit http://localhost:3000 and you'll see your website running immediately!

4. Understanding next.config.js and next.config.ts

Think of next.config.js (or next.config.ts for TypeScript) as the control panel for your NextJS application. It's like the settings app on your phone - it controls how everything works behind the scenes.

Why next.config is Important:

Real-World Scenario: Imagine you're building a restaurant website:

You need to load images from your chef's Instagram
You want old menu URLs to redirect to new ones
You need to connect to your payment API
You want to optimize images for faster loading

The config file handles ALL of this:

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  // Allow images from external sources (like Instagram, AWS, etc.)
  images: {
    domains: ['instagram.com', 'your-cdn.amazonaws.com'],
  },

  // Redirect old URLs to new ones automatically
  async redirects() {
    return [
      {
        source: '/old-menu',        // When someone visits /old-menu
        destination: '/menu',       // Send them to /menu instead
        permanent: true,
      },
    ]
  },

  // Add custom environment variables
  env: {
    RESTAURANT_NAME: 'Tony\'s Pizza',
    PAYMENT_API_URL: 'https://api.stripe.com',
  },
}

module.exports = nextConfig

How It Helps You:

Image Optimization: Instead of manually resizing images, NextJS does it automatically

images: {
  domains: ['your-image-host.com'],  // Trust this image source
}

Environment Management: Keep secrets safe and organized

env: {
  DATABASE_URL: process.env.DATABASE_URL,  // Use different databases for development/production
}

Performance Tuning: Make your site faster without complex webpack knowledge

experimental: {
  appDir: true,  // Use the new faster App Router
}

TypeScript Version (next.config.ts):

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  images: {
    domains: ['example.com'],
  },
  // TypeScript gives you autocomplete and error checking!
}

export default nextConfig

The config file is like having a personal assistant that handles all the technical stuff while you focus on building your actual website features.

5. Problems NextJS Solves vs Manual React Setup

Think of it like this: Building a React app from scratch is like building a car from individual parts. NextJS is like buying a fully-functional car that you can customize.

Real-World Comparison:

Building a Simple Blog Website:

Manual React Way (The Hard Way):

# You need to install and configure everything manually:
npm install react react-dom
npm install webpack webpack-cli webpack-dev-server
npm install babel-loader @babel/core @babel/preset-react
npm install html-webpack-plugin css-loader style-loader
npm install react-router-dom  # For navigation
npm install express  # For server-side rendering
# ... and 20+ more packages

# Then create complex configuration files:
# webpack.config.js (100+ lines)
# babel.config.js
# .babelrc
# Server setup for SEO
# Routing configuration
# Build scripts

NextJS Way (The Easy Way):

npx create-next-app@latest my-blog
cd my-blog
npm run dev
# Done! Everything works perfectly

Specific Problems NextJS Solves:

1. Routing Problem:

// Manual React - You have to set up routes manually
import { BrowserRouter, Routes, Route } from 'react-router-dom'

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/blog/:id" element={<BlogPost />} />
      </Routes>
    </BrowserRouter>
  )
}

// NextJS - Just create files in the right folders
// app/page.jsx → automatically becomes yoursite.com/
// app/about/page.jsx → automatically becomes yoursite.com/about
// app/blog/[id]/page.jsx → automatically becomes yoursite.com/blog/123

2. SEO Problem:

// Manual React - Search engines see empty pages
// Google sees: <div id="root"></div>  (Not good for SEO!)

// NextJS - Search engines see full content
// Google sees: <h1>Welcome to My Blog</h1><p>Great content here...</p>  (Perfect for SEO!)

3. Performance Problem:

// Manual React - Everything loads at once (slow)
import Home from './Home'
import About from './About'  
import Blog from './Blog'  // All components load immediately

// NextJS - Only loads what you need (fast)
// Each page loads only when visited, automatically!

6. Webpack and Babel Under the Hood

Simple Explanation: Webpack and Babel are like translators and organizers for your code. NextJS includes them automatically so you don't have to worry about them.

What They Do:

Webpack = The Organizer

Takes all your JavaScript files, CSS, images and bundles them efficiently
Splits code so pages load faster (you don't need to download the entire app at once)

Babel = The Translator

Converts modern JavaScript to work in older browsers
Translates JSX (React code) to regular JavaScript

Real Example:

Your Code (What You Write):

// You write modern, clean code
const MyComponent = () => {
  return <div className="fancy-button">Click Me!</div>
}

export default MyComponent

What Browsers Get (After NextJS Processing):

// NextJS automatically converts it to browser-friendly code
function MyComponent() {
  return React.createElement('div', {className: 'fancy-button'}, 'Click Me!')
}

When You Might Need Custom Configuration:

Example: Adding Support for Special File Types

// next.config.js
module.exports = {
  webpack: (config) => {
    // Add support for importing .svg files as components
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack']
    })
    return config
  }
}

// Now you can do: import Logo from './logo.svg'

The Beautiful Thing: 99% of the time, you never need to touch webpack or babel configuration. NextJS handles everything automatically!

7. App Router - Page Identification and Rendering

Think of App Router like organizing files on your computer. The folder structure directly becomes your website's URL structure.

How NextJS Identifies Pages:

Real Example - Building a Recipe Website:

app/
├── page.jsx                    # yoursite.com/ (Home page)
├── recipes/
│   ├── page.jsx               # yoursite.com/recipes (All recipes)
│   ├── italian/
│   │   └── page.jsx          # yoursite.com/recipes/italian
│   └── [recipe-name]/
│       └── page.jsx          # yoursite.com/recipes/pasta-carbonara
├── about/
│   └── page.jsx              # yoursite.com/about
└── contact/
    └── page.jsx              # yoursite.com/contact

Dynamic Routes Example:

// app/recipes/[recipe-name]/page.jsx
// This single file handles ALL recipe pages!

export default function RecipePage({ params }) {
  // params.recipeName will be "pasta-carbonara" for /recipes/pasta-carbonara
  // params.recipeName will be "pizza-margherita" for /recipes/pizza-margherita

  return (
    <div>
      <h1>Recipe: {params['recipe-name']}</h1>
      <p>Loading recipe for {params['recipe-name']}...</p>
    </div>
  )
}

Catch-All Routes for Complex URLs:

// app/shop/[...categories]/page.jsx
// Handles: /shop/food/italian/pasta OR /shop/electronics/phones

export default function ShopPage({ params }) {
  // For /shop/food/italian/pasta
  // params.categories = ['food', 'italian', 'pasta']

  return (
    <div>
      <h1>Shopping in: {params.categories.join(' → ')}</h1>
      {/* Shows: Shopping in: food → italian → pasta */}
    </div>
  )
}

Parallel Routes - Advanced Feature:

Imagine you want to show different content in different sections of the same page:

app/dashboard/
├── page.jsx              # Main dashboard content
├── @stats/
│   └── page.jsx         # Statistics section  
└── @notifications/
    └── page.jsx         # Notifications section

// app/dashboard/layout.jsx
export default function DashboardLayout({ children, stats, notifications }) {
  return (
    <div className="dashboard">
      <main>{children}</main>          {/* Main content */}
      <aside>{stats}</aside>           {/* Statistics */}
      <div>{notifications}</div>       {/* Notifications */}
    </div>
  )
}

This lets you load different data for each section independently!

8. File Naming Conventions and Special Files

Think of these special files as different rooms in a house, each with a specific purpose.

Core Files Everyone Should Know:

1. page.jsx - The Main Room

// app/blog/page.jsx
// This is what visitors see when they go to yoursite.com/blog

export default function BlogPage() {
  return (
    <div>
      <h1>Welcome to My Blog</h1>
      <p>Here are my latest posts...</p>
    </div>
  )
}

2. layout.jsx - The Frame of the House

// app/blog/layout.jsx  
// This wraps around ALL pages in the /blog section

export default function BlogLayout({ children }) {
  return (
    <div>
      <nav>
        <a href="/blog">All Posts</a>
        <a href="/blog/categories">Categories</a>
      </nav>

      <main>
        {children}  {/* This is where page.jsx content appears */}
      </main>

      <footer>© 2024 My Blog</footer>
    </div>
  )
}

3. loading.jsx - The "Please Wait" Sign

// app/blog/loading.jsx
// Shows while the blog page is loading

export default function Loading() {
  return (
    <div>
      <p>Loading awesome blog posts...</p>
      <div className="spinner"></div>
    </div>
  )
}

4. error.jsx - The "Something Went Wrong" Handler

// app/blog/error.jsx
'use client'  // This line is important for error pages

export default function Error({ error, reset }) {
  return (
    <div>
      <h2>Oops! Something went wrong</h2>
      <p>Error: {error.message}</p>
      <button onClick={() => reset()}>
        Try Again
      </button>
    </div>
  )
}

5. not-found.jsx - The "Page Doesn't Exist" Page

// app/not-found.jsx
// Shows when someone visits a page that doesn't exist

export default function NotFound() {
  return (
    <div>
      <h1>404 - Page Not Found</h1>
      <p>Sorry, we couldn't find the page you're looking for.</p>
      <a href="/">Go back home</a>
    </div>
  )
}

API Routes - Your Backend in the Same Project:

// app/api/contact/route.js
// Handles POST requests to yoursite.com/api/contact

export async function POST(request) {
  const { name, email, message } = await request.json()

  // Send email, save to database, etc.
  console.log(`New contact from ${name}: ${message}`)

  return Response.json({ success: true })
}

Metadata for SEO:

// app/blog/[slug]/page.jsx
export async function generateMetadata({ params }) {
  // This runs before the page loads to set the <title> and description
  const post = await fetchBlogPost(params.slug)

  return {
    title: `${post.title} - My Blog`,
    description: post.summary,
    openGraph: {
      title: post.title,
      description: post.summary,
      images: [post.coverImage],
    },
  }
}

export default function BlogPost({ params }) {
  // Your blog post component
}

9. SSR, SSG, and ISG with NextJS 14+

Think of these like different ways to prepare a meal:

SSR (Server-Side Rendering): Like a restaurant - food is cooked fresh when you order
SSG (Static Site Generation): Like a frozen dinner - prepared ahead of time, reheated when needed
ISR (Incremental Static Regeneration): Like a buffet - prepared ahead but refreshed periodically

SSR - Fresh Content Every Time:

Use Case: News website, user dashboards, real-time data

// app/news/page.jsx
async function getLatestNews() {
  const response = await fetch('https://api.news.com/latest', {
    cache: 'no-store'  // This makes it Server-Side Rendered
  })
  return response.json()
}

export default async function NewsPage() {
  const news = await getLatestNews()  // Fetches fresh data on every visit

  return (
    <div>
      <h1>Latest News</h1>
      {news.map(article => (
        <div key={article.id}>
          <h2>{article.title}</h2>
          <p>Published: {article.publishedAt}</p>
          <p>{article.summary}</p>
        </div>
      ))}
    </div>
  )
}

SSG - Pre-built for Speed:

Use Case: Documentation, blogs, marketing pages

// app/docs/page.jsx
async function getDocs() {
  const response = await fetch('https://api.docs.com/all', {
    cache: 'force-cache'  // This makes it Static Site Generated
  })
  return response.json()
}

export default async function DocsPage() {
  const docs = await getDocs()  // This runs at BUILD time, not when users visit

  return (
    <div>
      <h1>Documentation</h1>
      {docs.map(doc => (
        <div key={doc.id}>
          <h2>{doc.title}</h2>
          <p>{doc.description}</p>
        </div>
      ))}
    </div>
  )
}

// Pre-generate specific pages
export async function generateStaticParams() {
  const docs = await fetch('https://api.docs.com/all').then(res => res.json())

  return docs.map((doc) => ({
    slug: doc.slug,  // Creates /docs/getting-started, /docs/api-reference, etc.
  }))
}

ISR - Best of Both Worlds:

Use Case: E-commerce products, blog posts, any content that changes occasionally

// app/products/page.jsx
async function getProducts() {
  const response = await fetch('https://api.store.com/products', {
    next: { revalidate: 3600 }  // Rebuild page every hour (3600 seconds)
  })
  return response.json()
}

export default async function ProductsPage() {
  const products = await getProducts()

  return (
    <div>
      <h1>Our Products</h1>
      {products.map(product => (
        <div key={product.id}>
          <h2>{product.name}</h2>
          <p>${product.price}</p>
          <p>In stock: {product.inventory}</p>
        </div>
      ))}
    </div>
  )
}

When to Use Which:

Scenario	Use	Why
User dashboard with personal data	SSR	Data is different for each user
Company about page	SSG	Content rarely changes, should be fast
Product catalog	ISR	Products change occasionally, but speed matters
News feed	SSR	Content changes constantly
Blog posts	ISR	New posts added occasionally

10. Caching Strategies

Think of caching like keeping snacks in your kitchen instead of going to the store every time you're hungry.

Automatic Caching - NextJS Does This For You:

// NextJS automatically caches identical requests
async function getUser(id) {
  const response = await fetch(`/api/users/${id}`)
  return response.json()
}

export default async function UserProfile({ userId }) {
  const user = await getUser(userId)        // First API call
  const userAgain = await getUser(userId)   // NextJS uses cached result automatically

  return <div>Hello, {user.name}!</div>
}

Manual Cache Control:

// Cache for 1 hour - good for product prices
const products = await fetch('/api/products', {
  next: { revalidate: 3600 }  // 3600 seconds = 1 hour
})

// Never cache - good for user-specific data
const userDashboard = await fetch('/api/dashboard', {
  cache: 'no-store'
})

// Cache forever - good for static content
const companyInfo = await fetch('/api/company', {
  cache: 'force-cache'
})

Real-World Example - E-commerce Site:

// app/products/[id]/page.jsx
async function getProduct(id) {
  // Product details don't change often - cache for 24 hours
  const product = await fetch(`/api/products/${id}`, {
    next: { revalidate: 86400 }  // 24 hours
  })
  return product.json()
}

async function getProductReviews(id) {
  // Reviews change frequently - always get fresh data
  const reviews = await fetch(`/api/products/${id}/reviews`, {
    cache: 'no-store'
  })
  return reviews.json()
}

export default async function ProductPage({ params }) {
  const [product, reviews] = await Promise.all([
    getProduct(params.id),     // Cached
    getProductReviews(params.id)  // Always fresh
  ])

  return (
    <div>
      <h1>{product.name}</h1>
      <p>Price: ${product.price}</p>

      <div>
        <h2>Customer Reviews</h2>
        {reviews.map(review => (
          <div key={review.id}>
            <p>{review.comment}</p>
            <span>Rating: {review.rating}/5</span>
          </div>
        ))}
      </div>
    </div>
  )
}

Cache Tags for Precise Control:

// Tag your cache entries
const posts = await fetch('/api/posts', {
  next: { tags: ['posts'] }
})

// Later, invalidate just the posts cache when you add a new post
// This can be done in your API route:
// revalidateTag('posts')

11. Link Component and Dynamic Loading

Link Component - Navigation Made Right:

Think of Link like a smart GPS that preloads the destination before you even click.

import Link from 'next/link'

export default function Navigation() {
  return (
    <nav>
      {/* Regular HTML link - causes full page reload */}
      <a href="/about">About (Slow)</a>

      {/* NextJS Link - instant navigation */}
      <Link href="/about">About (Fast)</Link>

      {/* Dynamic links */}
      <Link href={`/products/${productId}`}>
        View Product
      </Link>

      {/* External links - automatically detected */}
      <Link href="https://google.com">
        Google (opens normally)
      </Link>
    </nav>
  )
}

Advanced Link Features:

import Link from 'next/link'

export default function BlogList({ posts }) {
  return (
    <div>
      {posts.map(post => (
        <Link 
          key={post.id}
          href={`/blog/${post.slug}`}
          className="blog-link"
          prefetch={false}  // Don't preload unless hovered
        >
          <div>
            <h2>{post.title}</h2>
            <p>{post.excerpt}</p>
          </div>
        </Link>
      ))}
    </div>
  )
}

Dynamic Loading - Load Components When Needed:

Use Case: You have a heavy component that not all users will see.

import { useState } from 'react'
import dynamic from 'next/dynamic'

// Load the chart component only when needed
const HeavyChart = dynamic(() => import('../components/Chart'), {
  loading: () => <p>Loading chart...</p>,
  ssr: false  // Don't render on server (good for charts that need browser APIs)
})

export default function Dashboard() {
  const [showChart, setShowChart] = useState(false)

  return (
    <div>
      <h1>Dashboard</h1>
      <button onClick={() => setShowChart(true)}>
        Show Analytics Chart
      </button>

      {showChart && <HeavyChart />}
      {/* Chart code only downloads when user clicks the button! */}
    </div>
  )
}

Dynamic Imports for Different Scenarios:

// Load component with custom loading
const VideoPlayer = dynamic(() => import('../components/VideoPlayer'), {
  loading: () => <div>Loading video player...</div>
})

// Load specific export from a file
const SpecialButton = dynamic(() => import('../components/Buttons').then(mod => mod.SpecialButton))

// Conditional loading based on user permissions
const AdminPanel = dynamic(() => import('../components/AdminPanel'), {
  ssr: false  // Only load in browser, not on server
})

export default function UserProfile({ user }) {
  return (
    <div>
      <h1>Welcome, {user.name}</h1>

      <VideoPlayer src="/welcome-video.mp4" />

      {user.isAdmin && <AdminPanel />}
    </div>
  )
}

Real-World Performance Example:

// app/blog/[slug]/page.jsx
import dynamic from 'next/dynamic'

// Load comments only when user scrolls down
const CommentSection = dynamic(() => import('../../../components/CommentSection'), {
  loading: () => <div>Loading comments...</div>
})

// Load share buttons only when article is fully read
const ShareButtons = dynamic(() => import('../../../components/ShareButtons'))

export default function BlogPost({ params }) {
  return (
    <article>
      <h1>My Blog Post</h1>
      <p>Article content here...</p>

      {/* These load instantly */}
      <div className="article-content">
        {/* Main content */}
      </div>

      {/* These load when needed, keeping initial page fast */}
      <ShareButtons />
      <CommentSection postId={params.slug} />
    </article>
  )
}

This approach makes your initial page load much faster because heavy components only download when they're actually needed!

Conclusion

NextJS transforms React development from a complex setup process into a smooth, production-ready experience. By handling routing, optimization, SEO, and performance automatically, it lets you focus on building great user experiences rather than wrestling with configuration.

The key is to start simple - create pages by adding files to the app directory, use the built-in Link component for navigation, and gradually explore advanced features like SSR, caching, and dynamic loading as your application grows.

Remember: NextJS is React with superpowers, not a replacement for React. Everything you know about React still applies - NextJS just makes it better.

Modern ReactJS Tutorial

Rahul Giri — Wed, 06 Aug 2025 21:00:02 +0000

What is React?
Virtual DOM and React Fiber
Modern Build Tools
JSX and TSX
Keys in JSX Elements
Function Components
React Hooks
Suspense and Lazy Loading
React Router
React Testing
Best Practices
React 18+ Features

What is React?

React is a JavaScript library for building user interfaces, particularly web applications. It was created by Facebook (now Meta) and is widely used in production by companies worldwide.

Key Benefits:

Component-based: Build encapsulated components that manage their own state
Declarative: Describe what the UI should look like for any given state
Efficient: Virtual DOM ensures optimal performance
Flexible: Can be integrated into existing projects gradually

Virtual DOM and React Fiber

Understanding the Real DOM First

Before we understand Virtual DOM, let's understand what the Real DOM (Document Object Model) is:

The Real DOM is the actual structure of your webpage that the browser creates. When you write HTML like this:

<div>
  <h1>Hello World</h1>
  <p>This is a paragraph</p>
</div>

The browser creates a tree structure in memory that looks like this:

div
├── h1 (text: "Hello World")
└── p (text: "This is a paragraph")

The Problem with Real DOM

The Real DOM is slow when you need to update it frequently. Here's why:

// Every time you do this, the browser has to:
// 1. Find the element
// 2. Update its content  
// 3. Recalculate styles
// 4. Repaint the screen
document.getElementById('counter').innerHTML = newCount;

Imagine you have a shopping cart with 100 items, and when you add one item, the browser redraws the entire list - that's expensive!

What is Virtual DOM?

The Virtual DOM is like a "blueprint" or "draft" of the Real DOM, but it lives in JavaScript memory (not in the browser's DOM).

Think of it like this:

Real DOM: The actual house you live in (lives in browser memory)
Virtual DOM: The architectural blueprint/plan of the house (lives in JavaScript memory)

Here's how Virtual DOM looks in JavaScript:

// This is what Virtual DOM looks like (simplified)
const virtualDOM = {
  type: 'div',
  props: {
    className: 'container'
  },
  children: [
    {
      type: 'h1',
      props: {},
      children: 'Hello World'
    },
    {
      type: 'p', 
      props: {},
      children: 'This is a paragraph'
    }
  ]
};

Virtual DOM vs Real DOM Comparison

Virtual DOM	Real DOM
Lives in JavaScript memory	Lives in browser memory
Fast to create and update	Slow to update
Lightweight JavaScript object	Heavy browser element
Can't be seen by user	What user actually sees
Used for calculations	Used for display

How Virtual DOM Works - Step by Step

Let's say you have a counter app:

Step 1: Initial Render

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
};

React creates Virtual DOM:

// Virtual DOM Tree 1 (when count = 0)
{
  type: 'div',
  children: [
    { type: 'h1', children: 'Count: 0' },
    { type: 'button', children: '+' }
  ]
}

Step 2: State Changes
When you click the button, count becomes 1:

// Virtual DOM Tree 2 (when count = 1)
{
  type: 'div',
  children: [
    { type: 'h1', children: 'Count: 1' },  // This changed!
    { type: 'button', children: '+' }      // This stayed same
  ]
}

Step 3: Diffing (Comparing)
React compares Tree 1 vs Tree 2:

div: No change ✅
h1: Text changed from "Count: 0" to "Count: 1" ⚠️
button: No change ✅

Step 4: Update Real DOM
React only updates the Real DOM for what actually changed:

// Only this happens in Real DOM:
document.querySelector('h1').textContent = 'Count: 1';
// The div and button are left alone!

React Fiber - The Engine Behind Virtual DOM

React Fiber is like the "smart worker" that manages Virtual DOM updates. Think of it as a project manager who decides:

Which updates are urgent (like user typing)
Which can wait (like loading a big list)
How to break big tasks into smaller chunks

Key Fiber Features:

Incremental Rendering: Instead of updating everything at once, Fiber can pause and resume work
Priority-based Updates:
- 🔥 Immediate: User clicks, typing (can't wait)
- ⚡ High: Animations (should be smooth)
- 📝 Normal: Data updates (can wait a bit)
- 🐌 Low: Hidden content (wait until free time)
Time Slicing: Fiber breaks work into 5ms chunks

Practical Example:

const ProductCatalog = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [products, setProducts] = useState([]);

  // Without Fiber: Typing would freeze when filtering 10,000 products
  // With Fiber: Search box stays responsive while filtering happens in background

  return (
    <div>
      <input 
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Search products..."
      />
      <ProductGrid 
        products={products.filter(p => 
          p.name.toLowerCase().includes(searchTerm.toLowerCase())
        )}
      />
    </div>
  );
};

Key Takeaways:

Virtual DOM = Fast Draft: JavaScript copy of your webpage that's fast to update
Real DOM = Actual Website: What users see, but slow to update
Diffing = Smart Comparison: React only changes what actually changed
Fiber = Smart Manager: Keeps your app responsive by prioritizing important updates
You Don't Need to Manage This: React handles all of this automatically!

Modern Build Tools

Vite (Recommended for 2024+)

Vite is the fastest and most modern build tool for React applications.

# Create a new React project with Vite
npm create vite@latest my-react-app -- --template react-ts
cd my-react-app
npm install
npm run dev

Why Vite?

Lightning-fast hot module replacement (HMR)
Optimized production builds
TypeScript support out of the box
Modern ES modules support

Alternative: Create React App (Legacy)

# Still works but slower than Vite
npx create-react-app my-app --template typescript

JSX and TSX

JSX Basics

JSX allows you to write HTML-like syntax in JavaScript:

// Basic JSX
const greeting = <h1>Hello, World!</h1>;

// JSX with expressions
const name = "Alice";
const element = <h1>Hello, {name}!</h1>;

// JSX with attributes
const image = <img src="photo.jpg" alt="A photo" className="profile-pic" />;

TSX (TypeScript + JSX)

TSX is JSX with TypeScript support, providing better type safety:

// Define component props with TypeScript
interface ButtonProps {
  text: string;
  onClick: () => void;
  disabled?: boolean;
}

const Button: React.FC<ButtonProps> = ({ text, onClick, disabled = false }) => {
  return (
    <button onClick={onClick} disabled={disabled} className="btn">
      {text}
    </button>
  );
};

Key JSX Rules

Single Parent Element: JSX must return a single parent element (use Fragment <> if needed)
className not class: Use className instead of class
Closing Tags: All tags must be closed (<img />, <br />)
camelCase: Event handlers and attributes use camelCase (onClick, onChange)

// Good JSX
const MyComponent = () => {
  return (
    <>
      <div className="container">
        <input onChange={handleChange} />
        <img src="image.jpg" alt="description" />
      </div>
    </>
  );
};

Keys in JSX Elements

What are Keys?

Keys are special string attributes you need to include when creating lists of elements. Think of keys like unique ID badges that help React identify which items have changed, been added, or been removed.

// ❌ Without keys
const TodoList = ({ todos }) => (
  <ul>
    {todos.map(todo => (
      <li>{todo.text}</li>  // Missing key!
    ))}
  </ul>
);

// ✅ With keys
const TodoList = ({ todos }) => (
  <ul>
    {todos.map(todo => (
      <li key={todo.id}>{todo.text}</li>  // Unique key
    ))}
  </ul>
);

Why Keys are Important

1. Performance Optimization
Without keys, React has to guess which items changed:

// Without keys: React recreates ALL items when list changes
const ShoppingCart = ({ items }) => (
  <div>
    {items.map(item => (
      <div>{item.name} - ${item.price}</div>  // ❌ No key
    ))}
  </div>
);

// With keys: React only updates changed items
const ShoppingCart = ({ items }) => (
  <div>
    {items.map(item => (
      <div key={item.id}>{item.name} - ${item.price}</div>  // ✅ Has key
    ))}
  </div>
);

2. Maintaining Component State
Keys help preserve component state when list order changes:

const StudentList = ({ students }) => (
  <div>
    {students.map(student => (
      <StudentCard 
        key={student.id}  // ✅ Preserves each card's internal state
        name={student.name}
        isExpanded={false}  // This state won't get mixed up
      />
    ))}
  </div>
);

Problems Without Keys

1. Incorrect Updates

// Initial list: ["Apple", "Banana", "Cherry"]
// User removes "Banana"
// New list: ["Apple", "Cherry"] 

// ❌ Without keys: React might update wrong items
// React thinks: "First item still Apple ✓, Second item changed Banana→Cherry ❌"

// ✅ With keys: React knows exactly which item was removed

2. Lost Component State

const CommentList = ({ comments }) => (
  <div>
    {comments.map(comment => (
      <Comment 
        // ❌ Without key: expanding one comment might affect another
        text={comment.text}
        author={comment.author}
      />
    ))}
  </div>
);

3. Performance Issues

// ❌ Worst case: React recreates 1000 DOM elements
const BigList = ({ items }) => (
  <div>
    {items.map(item => <ExpensiveItem data={item} />)}  // No keys
  </div>
);

// ✅ Better: React only updates changed elements  
const BigList = ({ items }) => (
  <div>
    {items.map(item => <ExpensiveItem key={item.id} data={item} />)}
  </div>
);

Key Best Practices

1. Use Stable, Unique IDs

// ✅ Good: Stable database ID
<li key={user.id}>{user.name}</li>

// ❌ Bad: Array index (can cause bugs when reordering)
{users.map((user, index) => 
  <li key={index}>{user.name}</li>
)}

// ❌ Bad: Random values (causes unnecessary re-renders)
<li key={Math.random()}>{user.name}</li>

2. Combine Values for Unique Keys

// When you don't have unique IDs
const UserPosts = ({ userId, posts }) => (
  <div>
    {posts.map(post => (
      <Post key={`${userId}-${post.id}`} data={post} />
    ))}
  </div>
);

3. Keys Only Need to be Unique Among Siblings

// ✅ Same key can exist in different lists
const App = () => (
  <div>
    <TodoList todos={todos} />      {/* Can have key="1" */}
    <UserList users={users} />      {/* Can also have key="1" */}
  </div>
);

Real-world Example:

const ShoppingCart = ({ cartItems, onQuantityChange }) => {
  return (
    <div className="cart">
      {cartItems.map(item => (
        <div key={item.productId} className="cart-item">
          <img src={item.image} alt={item.name} />
          <span>{item.name}</span>
          <input 
            type="number"
            value={item.quantity}
            onChange={(e) => onQuantityChange(item.productId, e.target.value)}
          />
          <span>${item.price * item.quantity}</span>
        </div>
      ))}
    </div>
  );
};

Remember: Keys are React's way of tracking list items. Always use stable, unique keys for better performance and fewer bugs!

Function Components

Modern React uses function components exclusively. Class components are legacy.

Basic Function Component

// Simple function component
const Welcome = () => {
  return <h1>Welcome to React!</h1>;
};

// Component with props
interface UserProps {
  name: string;
  age: number;
}

const User: React.FC<UserProps> = ({ name, age }) => {
  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
    </div>
  );
};

Component Composition

const Header = () => <header><h1>My App</h1></header>;
const Footer = () => <footer><p>&copy; 2024</p></footer>;

const App = () => {
  return (
    <div>
      <Header />
      <main>
        <User name="John" age={30} />
      </main>
      <Footer />
    </div>
  );
};

React Hooks

useState Hook - Managing Component Memory

Think of useState as giving your component a "memory". Without it, every time your component runs, it forgets everything!

Basic useState Pattern:

import { useState } from 'react';

// useState returns 2 things:
// 1. Current value
// 2. Function to update that value
const [currentValue, setCurrentValue] = useState(initialValue);

Simple Counter Example:

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Current count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Add 1</button>
      <button onClick={() => setCount(count - 1)}>Subtract 1</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
};

useEffect Hook - Doing Things Outside of Rendering

Think of useEffect as a way to tell React: "After you finish drawing the component, also do this extra task."

Basic useEffect Pattern:

import { useState, useEffect } from 'react';

useEffect(() => {
  // Code that runs AFTER component renders
  console.log('Component just rendered!');
});

Fetching Data Example:

const UserProfile = ({ userId }) => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchUser = async () => {
      setLoading(true);
      try {
        const response = await fetch(`/api/users/${userId}`);
        const userData = await response.json();
        setUser(userData);
      } catch (error) {
        console.error('Error fetching user:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchUser();
  }, [userId]); // Only run when userId changes

  if (loading) return <div>Loading user...</div>;
  if (!user) return <div>User not found</div>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
};

useContext Hook - Sharing Data Without Passing Props

Create Context:

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

const ThemeContext = createContext({
  theme: 'light',
  toggleTheme: () => {}
});

Provider Component:

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

Use Context:

const ThemeButton = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <button 
      onClick={toggleTheme}
      style={{ 
        backgroundColor: theme === 'light' ? '#fff' : '#333',
        color: theme === 'light' ? '#333' : '#fff'
      }}
    >
      Current theme: {theme}
    </button>
  );
};

Custom Hooks

Create reusable stateful logic:

// Custom hook for API data fetching
const useApi = <T,>(url: string) => {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true);
        const response = await fetch(url);
        if (!response.ok) throw new Error('Failed to fetch');
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Unknown error');
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
};

// Using the custom hook
const ProductList = () => {
  const { data: products, loading, error } = useApi<Product[]>('/api/products');

  if (loading) return <div>Loading products...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <ul>
      {products?.map(product => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
};

Suspense and Lazy Loading

What is Suspense?

Suspense lets you "pause" component rendering until something is ready (like data or code). Think of it as a loading state manager that works at the component level.

Lazy Loading Components

Split your app into smaller chunks that load only when needed:

import { lazy, Suspense } from 'react';

// Instead of regular import
// import About from './About';

// Use lazy import - code splits automatically
const About = lazy(() => import('./About'));
const Dashboard = lazy(() => import('./Dashboard'));
const UserProfile = lazy(() => import('./UserProfile'));

Using Suspense with Lazy Components

const App = () => {
  const [currentPage, setCurrentPage] = useState('home');

  const renderPage = () => {
    switch (currentPage) {
      case 'about':
        return <About />;
      case 'dashboard':
        return <Dashboard />;
      case 'profile':
        return <UserProfile />;
      default:
        return <Home />;
    }
  };

  return (
    <div>
      <nav>
        <button onClick={() => setCurrentPage('home')}>Home</button>
        <button onClick={() => setCurrentPage('about')}>About</button>
        <button onClick={() => setCurrentPage('dashboard')}>Dashboard</button>
      </nav>

      {/* Suspense catches loading states of lazy components */}
      <Suspense fallback={<div>🔄 Loading page...</div>}>
        {renderPage()}
      </Suspense>
    </div>
  );
};

Practical Benefits

// ❌ Without lazy loading: All components load at once
import Dashboard from './Dashboard';        // 500KB
import Analytics from './Analytics';        // 300KB  
import Reports from './Reports';           // 400KB
// Total initial bundle: 1.2MB - slow initial load

// ✅ With lazy loading: Components load when needed
const Dashboard = lazy(() => import('./Dashboard'));   // Loads only when visited
const Analytics = lazy(() => import('./Analytics'));   // Loads only when visited
const Reports = lazy(() => import('./Reports'));       // Loads only when visited
// Initial bundle: Much smaller - faster initial load

Suspense with Router

import { BrowserRouter, Routes, Route } from 'react-router-dom';

const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));

const App = () => (
  <BrowserRouter>
    <Suspense fallback={<div>Loading page... ⏳</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Suspense>
  </BrowserRouter>
);

Multiple Loading States

const App = () => (
  <div>
    <Header />

    {/* Different loading messages for different sections */}
    <Suspense fallback={<div>Loading navigation...</div>}>
      <Navigation />
    </Suspense>

    <main>
      <Suspense fallback={<div>Loading main content...</div>}>
        <MainContent />
      </Suspense>
    </main>

    <Suspense fallback={<div>Loading sidebar...</div>}>
      <Sidebar />
    </Suspense>
  </div>
);

Key Benefits:

Faster Initial Load: Only load code that's immediately needed
Better UX: Show loading states instead of blank screens
Automatic Code Splitting: Vite/Webpack handles the heavy lifting
Progressive Loading: Load features as users navigate

React Router

React Router enables navigation in single-page applications:

npm install react-router-dom

Basic Routing Setup

import { BrowserRouter, Routes, Route, Link, useParams, useNavigate } from 'react-router-dom';

const Home = () => <h1>Home Page</h1>;
const About = () => <h1>About Page</h1>;

const UserProfile = () => {
  const { userId } = useParams<{ userId: string }>();
  return <h1>User Profile: {userId}</h1>;
};

const Navigation = () => (
  <nav>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>
    <Link to="/user/123">User 123</Link>
  </nav>
);

const App = () => {
  return (
    <BrowserRouter>
      <Navigation />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/user/:userId" element={<UserProfile />} />
        <Route path="*" element={<div>Page Not Found</div>} />
      </Routes>
    </BrowserRouter>
  );
};

Programmatic Navigation

const LoginForm = () => {
  const navigate = useNavigate();

  const handleSubmit = async (credentials: LoginData) => {
    try {
      await login(credentials);
      navigate('/dashboard'); // Redirect after login
    } catch (error) {
      console.error('Login failed:', error);
    }
  };

  return <form onSubmit={handleSubmit}>...</form>;
};

React Testing

Testing Setup (Jest + React Testing Library):

npm install --save-dev @testing-library/react @testing-library/jest-dom @testing-library/user-event

Basic Component Testing

// Button.test.tsx
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom';
import { Button } from './Button';

describe('Button Component', () => {
  test('renders button with text', () => {
    render(<Button text="Click me" onClick={() => {}} />);
    expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
  });

  test('calls onClick when clicked', async () => {
    const user = userEvent.setup();
    const handleClick = jest.fn();

    render(<Button text="Click me" onClick={handleClick} />);

    await user.click(screen.getByRole('button'));
    expect(handleClick).toHaveBeenCalledTimes(1);
  });

  test('is disabled when disabled prop is true', () => {
    render(<Button text="Click me" onClick={() => {}} disabled={true} />);
    expect(screen.getByRole('button')).toBeDisabled();
  });
});

Best Practices

1. Component Organization

// Good: Small, focused components
const UserCard = ({ user }: { user: User }) => (
  <div className="user-card">
    <UserAvatar src={user.avatar} />
    <UserInfo name={user.name} email={user.email} />
  </div>
);

2. State Management

// Keep state close to where it's used
const TodoApp = () => {
  const [todos, setTodos] = useState<Todo[]>([]);

  const addTodo = (text: string) => {
    setTodos(prev => [...prev, { id: Date.now(), text, completed: false }]);
  };

  return (
    <div>
      <TodoForm onSubmit={addTodo} />
      <TodoList todos={todos} />
    </div>
  );
};

3. Performance Optimization

import { memo, useMemo, useCallback } from 'react';

// Memoize expensive calculations
const ExpensiveComponent = ({ items }: { items: Item[] }) => {
  const expensiveValue = useMemo(() => {
    return items.reduce((sum, item) => sum + item.value, 0);
  }, [items]);

  return <div>Total: {expensiveValue}</div>;
};

// Memoize components
const TodoItem = memo(({ todo, onToggle }: TodoItemProps) => {
  return (
    <div onClick={() => onToggle(todo.id)}>
      {todo.text}
    </div>
  );
});

React 18+ Features

Automatic Batching

React 18 automatically groups multiple state updates for better performance:

const AutomaticBatching = () => {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  const handleClick = () => {
    // All these updates are batched together
    // Component only re-renders ONCE at the end
    setCount(c => c + 1);
    setFlag(f => !f);
    // Before React 18: 2 re-renders
    // React 18: 1 re-render ✨
  };

  return (
    <div>
      <p>Count: {count}</p>
      <p>Flag: {flag.toString()}</p>
      <button onClick={handleClick}>Update</button>
    </div>
  );
};

useTransition Hook

Mark updates as non-urgent to keep your app responsive:

import { useState, useTransition } from 'react';

const ProductSearch = ({ products }) => {
  const [searchTerm, setSearchTerm] = useState('');
  const [filteredProducts, setFilteredProducts] = useState(products);
  const [isPending, startTransition] = useTransition();

  const handleSearch = (value) => {
    setSearchTerm(value); // ⚡ Urgent update - input stays responsive

    startTransition(() => {
      // 🐌 Non-urgent update - can be interrupted
      const filtered = products.filter(p => 
        p.name.toLowerCase().includes(value.toLowerCase())
      );
      setFilteredProducts(filtered);
    });
  };

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => handleSearch(e.target.value)}
      />

      {isPending && <div>🔄 Filtering...</div>}

      <ProductList products={filteredProducts} />
    </div>
  );
};

Next Steps

After mastering these concepts, consider exploring:

State Management Libraries: Redux Toolkit, Zustand, or Jotai
Styling Solutions: Tailwind CSS, styled-components, or CSS Modules
Meta-Frameworks: Next.js for full-stack React applications
Component Libraries: Material-UI, Chakra UI, or Ant Design
Testing: Advanced testing patterns and E2E testing with Playwright
Performance: React DevTools Profiler and advanced optimization techniques

Conclusion

This tutorial covers the essential modern React concepts needed for product development. Focus on:

Function components with hooks
TypeScript for type safety
Modern build tools like Vite
Proper use of keys in lists
Suspense and lazy loading for performance
React 18+ concurrent features
Testing best practices
Performance optimization

Practice building small projects to solidify these concepts, and gradually work your way up to larger applications. The React ecosystem is vast, but mastering these fundamentals will give you a solid foundation for any React project.

How UI Engineers Can Use AI (GenAI + Agentic) to Work Faster and Smarter

Rahul Giri — Wed, 30 Jul 2025 05:17:49 +0000

As UI engineers, we spend too much time on repetitive tasks: boilerplate code, API wiring, design handoffs, tests, documentation…

The good news? AI (Generative + Agentic) can take a big chunk of that load if we use it the right way.

1. Use AI to Write Boilerplate Code in Seconds

Instead of building forms, validation, state logic, or layouts from scratch, let AI do it.

Recommended Tools:

Example:

Prompt:

“Generate a React form with TailwindCSS and Zod validation for name, email, and phone fields. Integrate it with React Hook Form.”

AI instantly gives you a working skeleton:

const schema = z.object({ name: z.string(), email: z.string().email(), phone: z.string() });

export default function MyForm() {
  const { register, handleSubmit } = useForm({ resolver: zodResolver(schema) });
  return (
    <form onSubmit={handleSubmit(console.log)} className="space-y-3">
      <input {...register("name")} placeholder="Name" />
      <input {...register("email")} placeholder="Email" />
      <input {...register("phone")} placeholder="Phone" />
      <button type="submit">Submit</button>
    </form>
  );
}

2. Skip Manual API Integration

Recommended Tools:

Example prompt:

“Read this OpenAPI spec and create a useProductsQuery React hook with React Query. Show me a product grid with skeleton loaders.”

Result: You get data fetching + UI + loading states in one go.

3. AI for Accessibility and Fixing Issues

Recommended Tools:

How:

Run Lighthouse or axe
Paste errors into AI tool: > “Here’s my Lighthouse report. Suggest minimal React code fixes for these ARIA issues.”
AI gives you exact code changes.

4. Turn Figma Designs Into React Code

Recommended Tools:

Pro Tip:

Name design system components correctly in Figma (Button, Card, Modal)
AI tools will map them automatically to your UI library

5. Use AI for Tests & Edge Cases

Recommended Tools:

Prompt:

“Write Playwright tests for login, search, add-to-cart flows. Include edge cases like network failure and empty API response.”

Result: Complete e2e test scripts ready to run.

6. Set Up AI Agents for Daily Repetitive Work

Recommended Tools:

These agents can chain tasks:

Check API changes → update generated clients
Run Lighthouse → fix obvious performance issues
Update design tokens nightly

7. Auto-Generate Documentation and Changelogs

Recommended Tools:

Prompt:

“Summarize this 200-line PR into 3 bullet points for UI engineers.”

Result: Clean release notes or documentation without manual effort.

8. How to Talk to AI (The Secret Sauce)

AI is only as good as your instructions.
Here’s the formula that works every time:

Context:

“I’m building a Next.js e-commerce app. We use Tailwind + React Query.”

Goal:

“Generate a product listing page with infinite scroll and skeleton loaders.”

Constraints:

“Code must be TypeScript, mobile-first, and reusable components only.”

Step-by-step:

“First generate the data fetching hook, then the UI component.”

💡 Pro tip: Show examples of what you like and don’t like. AI learns faster with references.

9. Guardrails: Don’t Blindly Trust AI

Run tests and code reviews
Watch for random dependencies
Ask AI to explain its output:

“Why did you add this state variable? What happens if I remove it?”

Wrap-Up

Build boilerplate in seconds
Wire up APIs without headaches
Catch accessibility & performance issues early
Automate testing, documentation, and releases

How Big E‑Commerce Apps Keep Their UI Fast: Practical Design Patterns

Rahul Giri — Wed, 30 Jul 2025 04:50:47 +0000

Big e‑commerce apps like Amazon, Flipkart, and Myntra handle millions of users daily. Their product listing pages load quickly, searches feel instant, and checkout flows rarely break—even on slower networks.

1. Progressive Data Fetching (Streaming + Partial Hydration)

Scenario:
You’re building a product listing page with filters, offers, banners, and 1000+ products. Showing a blank page until all data is ready will kill user experience.

Solution: Stream & hydrate parts of the UI in stages.

Code (Next.js 14 App Router):

export default function Page() {
  return (
    <>
      {/* Critical categories stream first */}
      <Categories />

      {/* Products stream later */}
      <Suspense fallback={<ProductSkeleton />}>
        <Products />
      </Suspense>
    </>
  );
}

Result: Users see categories and skeleton loaders in <1s, while products keep loading in the background.
Real‑world: Flipkart’s homepage shows banners & categories first, while product carousels stream later.

Prompt for ChatGPT:
"Show me a real-world example of Progressive Data Fetching using Next.js 14 with React Suspense and streaming. Include a product listing page where categories render first and products stream later."

2. Smart Caching at UI Level

Caching isn’t a single trick—it’s multiple layers working together.

a. In‑Memory Cache (Fastest)

Use React Query or SWR for automatic client‑side caching:

const { data: products } = useQuery('products', fetchProducts, {
  staleTime: 5 * 60 * 1000, // data is "fresh" for 5 mins
  cacheTime: 15 * 60 * 1000 // keep cache for 15 mins
});

Scenario: Flipkart's home page reloads instantly because it shows cached products while fetching fresh ones in the background (stale‑while‑revalidate).

b. Persistent Cache (Offline + Instant Reload)

Cache critical data in IndexedDB or LocalStorage using React Query’s persister:

import { persistQueryClient } from 'react-query/persistQueryClient-experimental';
import { createSyncStoragePersister } from 'react-query/createSyncStoragePersister-experimental';

const persister = createSyncStoragePersister({ storage: window.localStorage });
persistQueryClient({ queryClient, persister });

Result: Even after closing the tab, your app restores state in milliseconds.

c. API Caching with ETags or SWR

On the server, send proper headers:

Cache-Control: public, max-age=60
ETag: "hash"

Then fetch only when data changes:

fetch('/products', { headers: { 'If-None-Match': etag } });

Tip: Combine UI caching + CDN edge caching for best results.

Prompt for ChatGPT:
"Show me how to implement multi-layer caching in a React or Next.js e-commerce app:

In-memory cache using React Query or SWR,

Persistent cache with IndexedDB/LocalStorage, and

API caching using ETags and Cache-Control headers."

3. Debouncing & Throttling

Scenario:
Your search input is flooding the server with API calls: "i" → "ip" → "iph" → "iphone".

Debounce: Wait until user stops typing

import debounce from 'lodash.debounce';

const debouncedSearch = debounce((q) => fetchResults(q), 300);
<input onChange={(e) => debouncedSearch(e.target.value)} />

Throttle: Limit function calls (useful for scroll/resize events)

import throttle from 'lodash.throttle';

const handleScroll = throttle(() => {
  console.log('Do something on scroll...');
}, 200);

useEffect(() => {
  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
}, []);

Real‑world: Amazon’s search box fires exactly one request per user pause, not on every keystroke.

Prompt for ChatGPT:
"Show me examples of debounce (for a search bar) and throttle (for scroll or resize events) in React using lodash, with real-world e-commerce scenarios."

4. Intersection Observer for Infinite Scroll

Scenario:
You can’t load all 1000 products at once.

const observer = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) loadMoreProducts();
});

useEffect(() => {
  if (loadMoreRef.current) observer.observe(loadMoreRef.current);
}, []);

Result: Products load only when the user scrolls down, reducing network load.

Prompt for ChatGPT:
"Show me how to use Intersection Observer in React to implement infinite scroll for a product grid with 1000+ items, loading the next batch only when the user scrolls down."

5. Real‑Time Updates (SSE/WebSockets)

Scenario:
A seller dashboard should update order statuses without refresh.

useEffect(() => {
  const sse = new EventSource('/orders/live');
  sse.onmessage = (e) => updateOrders(JSON.parse(e.data));
  return () => sse.close();
}, []);

Tips:

Use Zustand/Redux so real‑time updates propagate across components.
Fallback to polling if SSE/WebSockets aren’t supported.

Real‑world: Flipkart Seller Hub updates live when buyers place orders.

Prompt for ChatGPT:
"Show me how to use Server-Sent Events (SSE) or WebSockets in a React seller dashboard to update order statuses in real time without refreshing the page."

6. Component Composition Over Hardcoding

Scenario:
The same ProductCard is used in the buyer’s app (with “Add to Cart”) and in the seller’s app (with “Inventory”).

Composable Component:

<ProductCard product={p}>
  <AddToCartButton /> {/* buyer */}
</ProductCard>

<ProductCard product={p}>
  <InventoryBadge /> {/* seller */}
</ProductCard>

Why?

Avoid role‑based if conditions everywhere
Components stay reusable across different apps

Prompt for ChatGPT:
"Show me how to design a reusable and composable ProductCard component in React that works differently for buyers (Add to Cart) and sellers (Inventory badge) without using role-based if conditions."

7. Bundle Optimization & CDN Strategy (Real Example)

Scenario:
Your checkout page JS is 1.5MB → it loads in 5s on 4G.

a. Code Split by Route

Don’t ship checkout code on the home page:

const CheckoutPage = dynamic(() => import('./CheckoutPage'));

b. Use CDN with Device‑Specific Assets

Serve WebP images for browsers that support it
Send different image sizes for mobile vs desktop

<picture>
  <source srcSet="/images/product-400.webp" type="image/webp" />
  <img src="/images/product-400.jpg" alt="Product" />
</picture>

Result: 60–70% bandwidth saved → faster FCP.

Prompt for ChatGPT:
"Show me how to reduce a 1.5MB checkout bundle size in a Next.js e-commerce app using code splitting, dynamic imports, optimized image formats (WebP/AVIF), and CDN caching for faster load times."

8. Micro‑Frontends (Break UI by Domain)

Scenario:
Checkout has 4 big modules: Cart, Address, Payment, Offers. One bug in Offers shouldn’t crash Cart.

<Route path="/checkout">
  <CartModule />    {/* cart-mf.js */}
  <PaymentModule /> {/* payment-mf.js */}
</Route>

Benefits:

Teams deploy independently
Smaller bundles → faster load
Fewer merge conflicts

Real‑world: Amazon’s checkout flow is actually multiple micro‑apps stitched together.

Prompt for ChatGPT:
"Show me how to split a checkout flow into micro-frontends (Cart, Address, Payment, Offers) in a Next.js or React app using Module Federation or similar architecture."

Wrap‑Up

Each of these patterns directly solves a performance/scalability problem:

Caching (in‑memory + persistent) → Faster reloads and offline UX
Debounce + Throttle + IntersectionObserver → Control expensive events and load less data
Micro‑frontends + bundle splitting → Smaller bundles, independent deploys
Real‑time updates → Fresh data without refresh

AI Is Still Useless at Solving Real UI Errors: A Brutally Honest Developer Rant

Rahul Giri — Tue, 29 Jul 2025 09:25:56 +0000

Let me save you hours: don’t blindly trust AI to fix real-world UI or TypeScript errors.
It will give you 5 “confident” answers — none of which work — and keep missing the obvious.

I just spent an hour debugging a simple MUI Grid + TypeScript error. And ChatGPT?
It failed spectacularly. Repeatedly. Here's proof, for this block i was getting TS error for child Grid inside map() function -

        <Grid container spacing={2} padding={20} justifyContent="center">
            {products?.map((product) => (
                <Grid item xs={12} sm={6} md={4} key={product.id} sx={{ width: 300 }}>

                    <Card sx={{ height: "100%" }}>
                        <Image
                            src={product.image_url}
                            alt={product.title}
                            width={300}
                            height={200}
                            style={{ objectFit: 'cover' }}
                        />
                        <CardContent>
                            <Typography variant="h6">{product.title}</Typography>
                            <Typography variant="body2" color="textSecondary">
                                {product.description}
                            </Typography>
                            <Typography variant="subtitle1" fontWeight="bold">
                                ₹{product.price}
                            </Typography>
                        </CardContent>
                    </Card>
                </Grid>

🚨 The Actual Error:

No overload matches this call.
  Overload 1 of 2, '(props: { component: ElementType<any, keyof IntrinsicElements>; } & GridBaseProps & { sx?: SxProps<Theme> | undefined; } & SystemProps<...> & Omit<...>): Element | null', gave the following error.
    Property 'component' is missing in type '{ children: Element; item: true; xs: number; sm: number; md: number; key: string; sx: { width: number; }; }' but required in type '{ component: ElementType<any, keyof IntrinsicElements>; }'.
  Overload 2 of 2, '(props: DefaultComponentProps<GridTypeMap<{}, "div">>): Element | null', gave the following error.
    Type '{ children: Element; item: true; xs: number; sm: number; md: number; key: string; sx: { width: number; }; }' is not assignable to type 'IntrinsicAttributes & GridBaseProps & { sx?: SxProps<Theme> | undefined; } & SystemProps<Theme> & Omit<...>'.
      Property 'item' does not exist on type 'IntrinsicAttributes & GridBaseProps & { sx?: SxProps<Theme> | undefined; } & SystemProps<Theme> & Omit<...>'.ts(2769)
index.d.ts(64, 5): 'component' is declared here.

🤖 Here’s What ChatGPT Told Me (Wrongly):
“Wrap your Grid in a Box”

🤦 Useless. Not related. The error clearly talks about a component prop, not layout.

“Add container or item correctly”

Already done. Didn’t read my code. Copied this from a generic Grid tutorial.

“Wrap Grid with a custom CustomGrid wrapper to ‘relax’ TypeScript”

type CustomGridProps = React.ComponentProps<typeof Grid>;
const CustomGrid = (props: CustomGridProps) => <Grid {...props} />;

🤡 This was a joke. Hides the error instead of fixing it. Just sweeps the problem under the carpet.

“Update your MUI version”

Bro. That’s like telling someone with a stomach ache to change their house. Stop it.

“Maybe it’s a hydration issue?”

That’s from another playbook entirely. Completely irrelevant to this error.

🧠 What AI Didn’t Do That Any Human Would:
Actually read the error message: it clearly said "component is missing".

Notice that MUI now expects component as a required prop in certain cases.

Observe that the type mismatch came from JSX element inference, not from MUI usage.

✅ My Fix (One-Line):
Just follow what error says, add component prop and remove all those props mentioned in array

<Grid component={"div"}   key={product.id} sx={{ width: 300 }}>

Yes. That’s it. Just that.Super simple.

🔥 Final Words
AI is a tool. Not a developer.

It pretends to help by vomiting 5 suggestions — all surface-level — but it can’t:

read an error like a real dev

understand modern TS + UI framework nuance

debug based on context

If you’re a working developer, you still need to think. Read. Analyze. Debug.
AI won't do that for you — at least not yet.

Hydration Errors in ReactJS and NextJS: What, Why, and How to Fix Them

Rahul Giri — Mon, 28 Jul 2025 05:12:15 +0000

Intro:
If your Next.js or React app has ever thrown an alarming warning like this in the console:

Warning: Text content did not match. Server: "Hello" Client: "Hello!"

Don’t worry — you didn’t break the internet.

Hydration errors are common (and often confusing) in server-rendered React apps like those built with Next.js. In this post, we'll walk through exactly what hydration is, why it breaks, how to intentionally reproduce a hydration error, and most importantly — how to avoid it.

What is Hydration?

When using Server-Side Rendering (SSR) or Static Site Generation (SSG), your React app first sends pre-rendered HTML from the server to the browser. Then, once the JavaScript bundle loads on the client, React “hydrates” the app by attaching event listeners, restoring state, and connecting to that HTML.

In simple terms:

The server sends a body (the HTML).
The browser installs the brain (React JS).
If the body and brain don’t match, React freaks out.

What Happens During Hydration?

Here’s the actual step-by-step breakdown of hydration:

Pre-rendered HTML from server arrives
This is visible in “View Page Source” — it lives in the real DOM.
React loads on the client
It rebuilds the virtual DOM based on components, props, and logic.
React compares real DOM (from server) with virtual DOM (from client)
If everything matches — success!
If not — hydration warning or full failure.
React attaches logic
Once matched, React wires up event listeners, useEffect, and more — without re-rendering.

Why Does Hydration Fail?

Hydration fails if the HTML structure or content rendered on the server differs from what React generates on the client during hydration.

Here are some common culprits:

Using Math.random() in JSX
Using new Date() or Date.now() directly in render
Accessing browser-only APIs like window or document during SSR
Conditional rendering based on client-only logic
Invalid HTML nesting like <p><h2></h2></p>

Let’s Reproduce a Hydration Error (on purpose)

Want to demo this in your own Next.js project? Here are three guaranteed ways to trigger a hydration error.

1. Using Math.random()

export default function Page() {
  return (
    <div>
      <h1>Random Number</h1>
      <p>{Math.random()}</p>
    </div>
  );
}

Why it fails: The server renders one random number, the client renders another. They don’t match → hydration warning.

2. Using new Date().toString()

export default function Page() {
  return (
    <div>
      <h1>Current Time</h1>
      <p>{new Date().toString()}</p>
    </div>
  );
}

Why it fails: The date string is different on server vs client → mismatch → hydration error.

3. Invalid HTML nesting

export default function Page() {
  return (
    <p>
      <h2>This will break</h2>
    </p>
  );
}

Why it fails: React’s DOM nesting rules prevent <h2> inside <p>. The browser may fix the HTML automatically, but React’s virtual DOM won’t know — and hydration fails.

How to Avoid Hydration Errors

Here’s your checklist:

Don’t use non-deterministic values like Math.random() or Date.now() directly in JSX
Don’t access browser-only variables like window or localStorage during SSR
Use useEffect() for browser-only logic (runs only on the client)
Wrap client-only components with 'use client' directive in Next.js App Router
Keep your JSX structurally valid (avoid illegal nesting)

Mental Model

Think of hydration like this:

The server gives you a human body (HTML). The client loads a brain (React). If a hand is where the ear should be, the brain can’t connect — it panics.

That’s a hydration error.

Bonus: Debugging Tips

Always check DevTools console — most hydration issues show up as warnings
Disable JavaScript and “View Page Source” to inspect server-rendered HTML
Use React DevTools to explore the component tree and spot mismatches

Conclusion

Hydration errors can be confusing at first, but once you get the mental model — HTML from server, JavaScript on client, both must match — it becomes much easier to debug and avoid them.

Stay hydrated, keep your body and brain in sync, and may your React apps always load in peace.

If you enjoyed this post, follow me for more practical React/Next.js tips and dev-friendly breakdowns. You can also reach out if you want me to turn this into a visual explainer or animation!

11 Front-End Best Practices for Building Scalable UIs in B2B2C SaaS E-Commerce Apps

Rahul Giri — Fri, 25 Jul 2025 07:40:47 +0000

🚀 11 Front-End Best Practices for Building Scalable UIs in B2B2C SaaS E-Commerce Apps

In the world of SaaS-based B2B2C e-commerce, you're not just building for one company — you're creating a platform that supports hundreds of tenants, each with their own branding, feature sets, and user flows.

Think of platforms like:

🛍️ Amazon Seller Central
📦 Flipkart Seller Hub
🧥 Myntra Partner Portal
🧾 Zoho Commerce, Shopify Plus

They all face the same front-end challenges: scale, modularity, performance, and multi-tenancy.

Here are 11 practical, field-tested strategies to help you build highly scalable and maintainable front-end architecture for such platforms:

1. 🧠 Domain-Driven UI Architecture (Vertical Slicing)

Problem: Teams working on different features (Orders, Catalog, Payments) start stepping on each other's toes.

Solution: Organize code by domain, not by layer.

Instead of:

/components
/pages
/hooks

Use:


/features
  └── orders/
  └── products/
  └── billing/

✅ Benefits:

Better team ownership
Easier code isolation
Natural fit for micro-frontends

💡 Flipkart structures its seller platform into feature-driven domains to manage parallel dev across large teams.

2. 🎨 Atomic Design System + Component-Driven Development

Problem: Every team builds their own version of UI components — buttons, modals, toasts.

Solution: Use Atomic Design + Storybook to isolate, reuse, and test components.

Structure:

/ui
  ├── atoms/
  ├── molecules/
  ├── organisms/

Tools:

Storybook for isolation + documentation
Tailwind/Figma Tokens for consistent theming
Jest + Chromatic for testing

💡 Myntra uses a central design system consumed across internal tools and consumer apps to maintain visual consistency.

3. ⚙️ Config-Driven UI (Per-Tenant Customization)

Problem: One client wants "GST Field", another doesn’t. Customizing per client causes code duplication.

Solution: Drive visibility & behavior via config.

const tenantConfig = {
  showGST: true,
  paymentModes: ['COD', 'UPI']
};

{tenantConfig.showGST && <GstInputField />}

✅ Enables:

One codebase for all clients
Dynamic UI driven by JSON or DB

💡 Flipkart Lite and Flipkart Pro use different configs to drive seller onboarding flows.

4. 🧩 Micro-Frontends (via Module Federation)

Problem: One faulty feature crashes the whole app. Teams are blocked on deployments.

Solution: Use Micro Frontends via Webpack Module Federation.

Orders, Cart, Checkout, Catalog as separate independently deployed apps
Load them dynamically via remoteEntry.js

💡 Flipkart isolates Checkout & PDP into separate micro frontends for stability during high-traffic sales.

5. 🎛 Multi-Tenant Theming via CSS Variables or Design Tokens

Problem: Each brand wants their own colours, logos, and typefaces.

Solution:

Use CSS Variables or Tailwind Theme Extensions
Inject brand tokens dynamically

:root {
  --primary-color: #0066ff;
  --font-family: 'Inter';
}

💡 Shopify Plus stores inject themes dynamically using server-rendered CSS variables per store.

6. 🔐 Role-Based UI Access

Problem: Admins, staff, sellers, and finance see different parts of the app.

Solution:

Centralize role logic in a usePermissions() hook
Gate UI conditionally

{hasPermission('pricing:edit') && <EditPricing />}

💡 Amazon Seller Central shows different navigation and workflows for vendors vs seller support.

7. 🧪 Feature Flags (Per Tenant or Environment)

Problem: You want to roll out a feature to 3 clients or premium plans first.

Solution:

Use LaunchDarkly, Unleash, or a simple homegrown feature flag system

if (flags.enableNewCheckout) {
  return <NewCheckout />;
}

✅ Enables:

AB testing
Controlled rollouts
Plan-based feature access

8. ⚡ Performance Optimization with Route Splitting

Problem: The bundle gets heavy as features grow. Slow time-to-interactive.

Solution:

Use React.lazy, Suspense, or loadable-components
Split per route and feature

const PDP = React.lazy(() => import('./ProductDetailsPage'));

💡 Flipkart lazy loads heavy parts like map widgets, payment SDKs, and rich media only when needed.

9. 📊 Smart Data Grids for Admin Dashboards

Problem: Large data tables (e.g. 10,000+ orders) freeze or crash the browser.

Solution:

Use react-window or TanStack Table for virtualization
Add saved views, bulk actions, filters

<VirtualizedTable
  columns={[...]}
  data={orders}
/>

💡 Swiggy and Flipkart Admin panels use virtualized tables to manage high-volume inventory/order systems.

10. 🔍 Real User Monitoring + Session Replay

Problem: Bug reports are vague. “It broke” isn't enough.

Solution:

Use tools like Sentry + Replay, LogRocket, or Datadog RUM

✅ Track:

JavaScript errors
Rage clicks
Checkout drop-offs

💡 Amazon tracks thousands of user sessions to debug real-time errors in Prime Day traffic.

11. ♻️ Reusable Component Libraries Across Teams

Problem: UI components are copied across domains with slight tweaks → tech debt & inconsistency.

Solution:

Build a shared UI library in a monorepo or publish it as a private NPM package

// @ui-library/Button.tsx
export const Button = ({ variant = 'primary', ...props }) => (
  <button className={`btn btn-${variant}`} {...props} />
);

Used by multiple apps (PDP, Cart, Checkout)
Version controlled
Themed via design tokens

💡 Flipkart and Amazon manage shared libraries consumed across multiple seller, admin, and buyer-facing apps.

🧠

Challenge	Strategy
Multi-team scale	Domain-driven + Shared component libraries
Custom branding	Design tokens + theme injection
Flexibility	Config-driven UI + feature flags
UI consistency	Atomic design + Storybook
Performance	Lazy loading + code splitting
Debugging	Session replay + monitoring tools

✅ Final Thought

In large-scale B2B2C SaaS e-commerce, your front-end isn't just UI — it's a platform that powers other businesses. Success depends on building a system that's modular, customizable, and maintainable by design.

Let me know what architecture patterns your team follows.
Happy scaling! 🧑‍💻⚙️

Why Skeleton Screens Matter: The Real Benefit Beyond Load Times

Rahul Giri — Fri, 25 Jul 2025 07:22:44 +0000

“Skeleton screens don’t actually reduce load times—so what real benefit do they offer?”

Here’s the short answer:

👉 Skeleton screens improve perceived performance, reduce bounce rates, and build user trust.

Let’s dig into why that matters—and why skeleton screens deserve a spot in your UI toolkit.

Perceived Performance > Actual Load Time Users are surprisingly patient—as long as they feel like something is happening.

Skeleton screens create a visual placeholder of what’s coming. They say:

"This is your content. It's loading."

Compare that to a spinner or (worse) a blank page, which gives no context. That often leads to frustration or uncertainty:

"Is this stuck? Should I refresh? Is this broken?"

🔬 Real-World Evidence
Google and UX research groups like Nielsen Norman Group have found:

Skeleton screens can reduce bounce rates by 9–20%

They improve perception of speed, even if actual load times stay the same

Layout Stability = Better User Experience (and SEO) One underrated win: skeletons help prevent layout shifts.

By reserving space for text, images, and buttons before they load, skeleton screens:

Stop product cards or headings from jumping around

Offer a smoother visual flow

Improve Cumulative Layout Shift (CLS) scores—critical for SEO

Bonus: a more predictable layout reduces cognitive load and helps accessibility.

Time to First Meaningful Paint—Psychologically Let’s play out two user flows:

Option A: Spinner

Blank screen + spinner

Wait 2 seconds

Boom—entire content appears at once

Option B: Skeleton Screen

Page instantly shows layout placeholders (images, titles, price tags)

Wait 2 seconds

Real content fades in seamlessly

Both load times are the same—but one feels faster and keeps the user engaged. That’s the power of perceived performance.

Metric	How Skeleton Screens Help
Bounce Rate ↓	Users feel progress and stay longer
Time on Page ↑	Visual layout keeps users engaged early
SEO Ranking ↑	Improved Core Web Vitals (LCP, CLS)
Conversion ↑	Trust builds earlier, leading to higher conversions

UX Factor	Spinner	Blank Page	Skeleton Screen
Visual Feedback	✅ (vague)	❌	✅ (clear layout)
Perceived Speed	❌	❌	✅
Layout Stability	❌	❌	✅
Trust Factor	❌	❌	✅
Actual Load Time	➖ Same	➖ Same	➖ Same

💡 Final Thoughts
Skeleton screens don’t speed up your backend. They do speed up your user’s experience of your app.

By bridging the gap between “nothing” and “everything,” skeleton screens create clarity, trust, and better engagement.

So no—they don’t shorten load times. But they make users feel like they do.

And that might be even more valuable.

The Rise of Agentic AI: Frontend Dev Tools That Act for You in 2025

Rahul Giri — Fri, 25 Jul 2025 06:04:46 +0000

Agentic AI Tools Every Frontend Developer Should Know in 2025

Agentic AI goes way beyond simple autocomplete — these smart tools actually think, plan, and act to help frontend developers ship faster, write cleaner code, and build smarter interfaces.

Here’s a curated list of must-try agentic AI tools for frontend devs, organized by their core capabilities:

1. Agentic AI Tools You Must Try Now

Cursor — The Agentic AI Dev Assistant

Cursor combines an advanced code editor with an AI that can understand your entire codebase, autonomously generate, edit, refactor, and debug code, and collaborate interactively. It’s tailor-made for React, JavaScript, TypeScript, and more. Unlike simple autocomplete tools, Cursor handles multi-step workflows and deep code context.

GitHub Copilot X — AI That’s Becoming More Agentic

The next-gen Copilot X is evolving with chat interfaces, voice commands, and pull request management. It can write code, explain logic, generate tests, and help you manage entire workflows right inside VSCode.

MutableAI — AI That Understands Your Whole Codebase

MutableAI reads your entire frontend project so you can query, edit, and update code at a high level. It intelligently applies fixes and refactors based on your intent, making it truly agentic beyond file-level suggestions.

Replit Ghostwriter — Collaborative AI Pair Programmer

Replit Ghostwriter is more than autocomplete — it helps you debug, write complex features, and generate full components or pages with contextual awareness across your project.

2. AI Tools for Design, Code Generation & UI Assistance

TeleportHQ AI

Agentic UI code generation platform that converts text prompts and design files into production-ready React or Vue components, helping you bootstrap frontend projects quickly.

Uizard

Turn wireframes, sketches, or plain text into frontend code and editable design systems automatically with this AI-powered design-to-code tool.

Builder.io

A visual builder with AI assistance that outputs production-ready frontend code — perfect for marketing sites and content-heavy applications.

3. AI for Testing, Debugging, & Quality Assurance

Snyk Code

AI-driven static code analysis that continuously scans your frontend codebase for bugs and security vulnerabilities, then helps you fix them before deployment.

Testim

An AI-powered testing platform that autonomously generates, runs, and maintains frontend UI tests, significantly reducing manual QA efforts.

4. AI for Content, Copywriting & Accessibility

Copy.ai and Jasper

Quickly generate UI microcopy, onboarding text, error messages, and other content to improve UX without spending hours writing.

axe DevTools

Automated accessibility testing integrated into your dev workflow, with AI-powered recommendations to fix issues efficiently.

Why Prioritize Agentic AI?

They understand your entire project context, not just single files.
Can autonomously generate, refactor, and debug complex code.
Automate multi-step workflows instead of just completing small snippets.
Enhance collaboration with AI that can truly “think” and act alongside you.

Agentic AI is revolutionizing frontend development workflows. If you haven’t tried tools like Cursor or MutableAI yet, now is the perfect time to explore what autonomous AI can do for your codebase.

Forem: Rahul Giri

🏗️ Backend for Frontend (BFF) — The Missing Layer Every Frontend Developer Should Know

🤔 What is Backend for Frontend (BFF)?

🚀 Why Do We Need BFF?

1. 🎯 Different devices need different data

2. 🔐 Security & Abstraction

3. 🏎️ Performance Optimization

4. ⚡ Faster Iteration for Frontend Teams

🛠️ Real-World Scenarios Where BFF Shines

📱 E-Commerce App

🎬 Streaming Platforms (like Netflix)

🏦 Banking App

⚖️ Pros & Cons of BFF

✅ Benefits

❌ Drawbacks

⚠️ Corner Cases & Gotchas

🧑‍💻 Example: A Simple BFF in Node.js (Express)

🔮 When NOT to Use BFF

📝 Key Takeaways

Test ID Best Practices Guide: React + TypeScript + Next.js

🎯 Core Objectives

1. When to Use data-testid vs Semantic Selectors

✅ Use data-testid when:

❌ Avoid data-testid when:

2. Naming Patterns & Recommendations

🔹 Pattern 1: Component-Scoped Kebab-Case (✅ Recommended)

🔹 Pattern 2: Hierarchical Dot Notation

🔹 Pattern 3: BEM-Style

3. Advanced Co-Location Strategies

Standard Component Layout

Example: Co-located Test IDs

4. Real-World Example: ProductCard

5. Conflict Prevention Strategies

6. Enforce data-testid in Your React + TypeScript Codebase with ESLint

Install the plugin

Update your eslint.config.js

Now ESLint warns 🚨

7. Production Optimization

Next.js next.config.js

Utility Function

8. Trends & Future Considerations

📊 Decision Matrix

Modern Test ID Conventions for React/TypeScript/Next.js Apps: Industry Best Practices for 2025

The Evolution: From Basic data-testid to Semantic Test IDs

Traditional Approach (What Most Teams Do)

Modern Approach (What Top Companies Use)

Industry-Standard Naming Conventions

1. Hierarchical Dot Notation (Recommended)

2. BEM-Style Convention (Alternative)

3. Kebab-Case with Prefixes (Simple Alternative)

TypeScript Integration: Type-Safe Test IDs

Enhanced Hook for Test ID Generation

Usage in Components

Advanced Patterns for Complex UIs

1. Dynamic Lists and Collections

2. Conditional Rendering States

3. Multi-Step Forms and Wizards

Testing Library Integration

React Testing Library Best Practices

Playwright/Cypress Integration

ESLint Rules for Test ID Consistency

Automated Test ID Generation

Team Adoption Guidelines

1. Documentation Strategy

2. Migration Approach

3. Team Training

Common Pitfalls to Avoid

Conclusion

Complete NextJS Tutorial (with App router) - Modern App Development Guide

Table of Contents

1. What is NextJS and How It Helps in App Development

2. NextJS with ReactJS Integration

3. Creating Projects via Command Line

4. Understanding next.config.js and next.config.ts

5. Problems NextJS Solves vs Manual React Setup

6. Webpack and Babel Under the Hood

7. App Router - Page Identification and Rendering

8. File Naming Conventions and Special Files

9. SSR, SSG, and ISG with NextJS 14+

10. Caching Strategies

1. When to Use `data-testid` vs Semantic Selectors

✅ Use `data-testid` when:

❌ Avoid `data-testid` when:

6. Enforce `data-testid` in Your React + TypeScript Codebase with ESLint

Update your `eslint.config.js`

Next.js `next.config.js`