By creating this app, you will learn:

1. How to set up Prisma 7 with the new Rust-free architecture

2. How to configure a database with Prisma's driver adapter

3. How to perform CRUD operations using Server Actions

4. How to use the Next.js App Router for building full-stack applications

5. How to create and run database migrations

6. How to structure a Next.js project with Prisma ORM

and much more.

Prisma 7 introduces a major architectural shift – it's now "Rust-free" and requires the use of driver adapters for all database connections. This makes Prisma lighter, faster, and more compatible with modern JavaScript runtimes.

Note: This tutorial uses Prisma 7, which has breaking changes from earlier versions. If you're upgrading from Prisma 6, be aware that the setup process is different.

Prerequisites

Before you begin, make sure you have:

• Node.js 20.9 or higher installed

• Basic knowledge of React and Next.js

• Familiarity with TypeScript (we'll use TypeScript throughout)

If you're new to Next.js and want to learn it from scratch from basics to advanced? Check out this course.

If you're new to TypeScript + React, check out my this article.

Initial Setup

Create a new Next.js project using create-next-app:

npx create-next-app@16.0.10 prisma-nextjs-task-management-app

Here, we're specifying the exact and latest version of Next.js (at the time of writing this tutorial), which is 16.0.10. Therefore, the code in this tutorial will always work, even if a newer version with breaking changes is released in the future.

So you will not have any issues following this tutorial.

You can also use:

npx create-next-app@latest prisma-nextjs-task-management-app

to always use the latest available Next.js version. However, for this tutorial, we will not use this command.

When prompted, type y to say yes to proceed with installation and press the enter key to go with recommended defaults, as can be seen below:

By going with the recommended default settings, we're going with these default settings:

✔ Would you like to use TypeScript? Yes
✔ Would you like to use ESLint? Yes
✔ Would you like to use Tailwind CSS? Yes
✔ Would you like your code inside a `src/` directory? No
✔ Would you like to use App Router? Yes
✔ Would you like to use Turbopack for `next dev`? Yes
✔ Would you like to customize the import alias? No

Now, navigate into the project directory:

cd prisma-nextjs-task-management-app

Now install the necessary dependencies for Prisma 7:

npm install prisma @types/better-sqlite3 --save-dev
npm install @prisma/client @prisma/adapter-better-sqlite3 dotenv

Let's understand what each package does:

• prisma – The Prisma CLI for migrations, schema management, and client generation

• @prisma/client – The Prisma Client library for querying your database

• @prisma/adapter-better-sqlite3 – The driver adapter that connects Prisma Client to SQLite (required in Prisma 7)

• @types/better-sqlite3 – TypeScript type definitions for better-sqlite3

• dotenv – Loads environment variables from your .env file

For this tutorial, we're using a SQLite database, so it's easier to understand the basics of Prisma and Next.js.

Note that the code you write to interact with the database and used in this tutorial will not change even if you use either SQLite/PostgreSQL/MySQL or any other database. That's the power of using an ORM like Prisma ORM.

However, if you want to learn how to work with a hosted PostgreSQL database, check out my course where we built a complete Event Management App From Scratch.

How to Initialize Prisma

Run the following command to initialize Prisma with SQLite:

npx prisma init --datasource-provider sqlite --output ../generated/prisma

This command creates:

1. A prisma folder with a schema.prisma file

2. A .env file with a DATABASE_URL environment variable

3. A prisma.config.ts file for Prisma configuration

How to Configure the Prisma Config File

Prisma 7 introduces a new configuration file called prisma.config.ts. This file separates your project configuration from your schema definition. Update or create the prisma.config.ts file in your project root with the following content:

import 'dotenv/config'
import { defineConfig } from 'prisma/config'

export default defineConfig({
  schema: 'prisma/schema.prisma',
  datasource: {
    url: process.env.DATABASE_URL || 'file:./prisma/dev.db',
  },
})

Here, we're importing dotenv/config to load environment variables and define the schema location and database URL.

Note that we're giving the path of ./prisma/ in the above file, because the dev.db file needs to be created inside the prisma folder, so everything will work as expected.

How to Set Up the Database Schema

Open the prisma/schema.prisma file and replace its contents with the following:

generator client {
  provider = "prisma-client"
  output   = "../generated/prisma"
}

datasource db {
  provider = "sqlite"
}

model Task {
  id          Int      @id @default(autoincrement())
  title       String
  description String?
  completed   Boolean  @default(false)
  priority    String   @default("medium")
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
}

Let's understand what we've defined here:

Generator block:

• provider = "prisma-client" – Uses the new Prisma 7 client generator (not prisma-client-js used in version 6 of Prisma)

• output = "../generated/prisma" – Specifies where the generated client files will be placed

Datasource block:

• provider = "sqlite" – Specifies SQLite as our database

• Note: In Prisma 7, the url is no longer in the schema file – it's in prisma.config.ts

Task model:

• id – Auto-incrementing primary key

• title – Required string for the task title

• description – Optional string for task description

• completed – Boolean flag with default value false

• priority – String field with default value "medium"

• createdAt – Timestamp set automatically when a task is created

• updatedAt – Timestamp updated automatically when a task is modified

How to Configure the Path Alias

Make sure your tsconfig.json has the proper path alias for imports. It should include:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}

This is usually set up by default with create-next-app.

How to Run Your First Migration

Now, let's create the database tables based on our schema. Run:

npx prisma migrate dev --name init

This command:

1. Creates the SQLite database file (dev.db) in the prisma folder

2. Creates a new migration in prisma/migrations/

3. Applies the migration to your database

4. Generates the Prisma Client

You should see output similar to:

Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma
Datasource "db": SQLite database "dev.db" at "file:./dev.db"

SQLite database dev.db created at file:./dev.db

Applying migration `20241215_init`

The following migration(s) have been created and applied from new schema changes:

migrations/
  └─ 20241215_init/
    └─ migration.sql

Now generate the Prisma Client:

npx prisma generate

Prisma Client is needed because that's the one that will interact with your database which can be SQLite/PostgreSQL/MySQL.

How to Create the Prisma Client Instance

In Prisma 7, you need to use a driver adapter to connect to your database. Create a new file called lib/prisma.ts:

mkdir lib

Then create lib/prisma.ts with the following content:

import 'dotenv/config'
import { PrismaBetterSqlite3 } from '@prisma/adapter-better-sqlite3'
import { PrismaClient } from '../generated/prisma/client'

const connectionString = process.env.DATABASE_URL || 'file:./prisma/dev.db'

const adapter = new PrismaBetterSqlite3({
  url: connectionString,
})

const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClient | undefined
}

export const prisma =
  globalForPrisma.prisma ??
  new PrismaClient({
    adapter,
  })

if (process.env.NODE_ENV !== 'production') {
  globalForPrisma.prisma = prisma
}

Let's break down what this code does:

1. Import the adapter: We import PrismaBetterSqlite3 from @prisma/adapter-better-sqlite3. This is required in Prisma 7 for all database connections.

2. Create the adapter instance: We instantiate the adapter with our database URL.

3. Singleton pattern: We use the global object to store a single Prisma Client instance. This prevents creating multiple connections during development when hot reloading occurs.

4. Pass the adapter: The adapter is passed to PrismaClient in the constructor.

How to Create Server Actions for CRUD Operations

Next.js Server Actions allow us to write server-side code that can be called directly from our components. Create a new file called app/actions.ts:

'use server'

import { prisma } from '@/lib/prisma'
import { revalidatePath } from 'next/cache'

export type TaskFormData = {
  title: string
  description?: string
  priority: string
}

// Create a new task
export async function createTask(formData: FormData) {
  const title = formData.get('title') as string
  const description = formData.get('description') as string
  const priority = formData.get('priority') as string

  if (!title || title.trim() === '') {
    return { error: 'Title is required' }
  }

  try {
    await prisma.task.create({
      data: {
        title: title.trim(),
        description: description?.trim() || null,
        priority: priority || 'medium',
      },
    })

    revalidatePath('/')
    return { success: true }
  } catch (error) {
    console.error('Failed to create task:', error)
    return { error: 'Failed to create task' }
  }
}

// Get all tasks
export async function getTasks() {
  try {
    const tasks = await prisma.task.findMany({
      orderBy: {
        createdAt: 'desc',
      },
    })
    return tasks
  } catch (error) {
    console.error('Failed to fetch tasks:', error)
    return []
  }
}

// Toggle task completion status
export async function toggleTaskComplete(id: number) {
  try {
    const task = await prisma.task.findUnique({
      where: { id },
    })

    if (!task) {
      return { error: 'Task not found' }
    }

    await prisma.task.update({
      where: { id },
      data: {
        completed: !task.completed,
      },
    })

    revalidatePath('/')
    return { success: true }
  } catch (error) {
    console.error('Failed to toggle task:', error)
    return { error: 'Failed to toggle task' }
  }
}

// Update a task
export async function updateTask(id: number, formData: FormData) {
  const title = formData.get('title') as string
  const description = formData.get('description') as string
  const priority = formData.get('priority') as string

  if (!title || title.trim() === '') {
    return { error: 'Title is required' }
  }

  try {
    await prisma.task.update({
      where: { id },
      data: {
        title: title.trim(),
        description: description?.trim() || null,
        priority: priority || 'medium',
      },
    })

    revalidatePath('/')
    return { success: true }
  } catch (error) {
    console.error('Failed to update task:', error)
    return { error: 'Failed to update task' }
  }
}

// Delete a task
export async function deleteTask(id: number) {
  try {
    await prisma.task.delete({
      where: { id },
    })

    revalidatePath('/')
    return { success: true }
  } catch (error) {
    console.error('Failed to delete task:', error)
    return { error: 'Failed to delete task' }
  }
}

Let's understand what each function does:

createTask: Uses prisma.task.create() to insert a new task into the database. We extract form data, validate the title, and return appropriate responses.

getTasks: Uses prisma.task.findMany() to retrieve all tasks, ordered by creation date in descending order.

toggleTaskComplete: First finds the task using prisma.task.findUnique(), then uses prisma.task.update() to toggle the completed field.

updateTask: Uses prisma.task.update() to modify an existing task's title, description, and priority.

deleteTask: Uses prisma.task.delete() to remove a task from the database.

Note that we call revalidatePath('/') after each mutation to automatically refresh the page data, so we don't need to reload the page to see the added/updated/deleted data.

How to Create the Task Components

Now let's create the UI components. First, create a components folder:

mkdir components

TaskForm Component

Create components/TaskForm.tsx:

'use client'

import { useState } from 'react'
import { createTask, updateTask } from '@/app/actions'

type TaskFormProps = {
  task?: {
    id: number
    title: string
    description: string | null
    priority: string
  }
  onSuccess?: () => void
}

export default function TaskForm({ task, onSuccess }: TaskFormProps) {
  const [error, setError] = useState<string | null>(null)
  const [isSubmitting, setIsSubmitting] = useState(false)

  const isEditing = !!task

  async function handleSubmit(formData: FormData) {
    setError(null)
    setIsSubmitting(true)

    try {
      const result = isEditing
        ? await updateTask(task.id, formData)
        : await createTask(formData)

      if (result.error) {
        setError(result.error)
      } else if (onSuccess) {
        onSuccess()
      }
    } catch (err) {
      setError('Something went wrong')
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    <form action={handleSubmit} className="space-y-4">
      {error && (
        <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
          {error}
        </div>
      )}

      <div>
        <label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">
          Title *
        </label>
        <input
          type="text"
          id="title"
          name="title"
          defaultValue={task?.title || ''}
          required
          className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
          placeholder="Enter task title"
        />
      </div>

      <div>
        <label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-1">
          Description
        </label>
        <textarea
          id="description"
          name="description"
          defaultValue={task?.description || ''}
          rows={3}
          className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
          placeholder="Enter task description (optional)"
        />
      </div>

      <div>
        <label htmlFor="priority" className="block text-sm font-medium text-gray-700 mb-1">
          Priority
        </label>
        <select
          id="priority"
          name="priority"
          defaultValue={task?.priority || 'medium'}
          className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
        >
          <option value="low">Low</option>
          <option value="medium">Medium</option>
          <option value="high">High</option>
        </select>
      </div>

      <button
        type="submit"
        disabled={isSubmitting}
        className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
      >
        {isSubmitting ? 'Saving...' : isEditing ? 'Update Task' : 'Add Task'}
      </button>
    </form>
  )
}

This component handles both creating new tasks and editing existing ones. If a task prop is passed, it pre-fills the form and uses the updateTask action. Otherwise, it uses the createTask action.

TaskItem Component

Create components/TaskItem.tsx:

"use client";

import { deleteTask, toggleTaskComplete } from "@/app/actions";
import { useState } from "react";
import TaskForm from "./TaskForm";

type Task = {
  id: number;
  title: string;
  description: string | null;
  completed: boolean;
  priority: string;
  createdAt: Date;
  updatedAt: Date;
};

type TaskItemProps = {
  task: Task;
};

const priorityColors = {
  low: "bg-green-100 text-green-800",
  medium: "bg-yellow-100 text-yellow-800",
  high: "bg-red-100 text-red-800",
};

export default function TaskItem({ task }: TaskItemProps) {
  const [isEditing, setIsEditing] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);

  async function handleToggle() {
    await toggleTaskComplete(task.id);
  }

  async function handleDelete() {
    if (confirm("Are you sure you want to delete this task?")) {
      setIsDeleting(true);
      await deleteTask(task.id);
    }
  }

  if (isEditing) {
    return (
      <div className="bg-white p-4 rounded-lg shadow-md border border-gray-200">
        <div className="flex justify-between items-center mb-4">
          <h3 className="text-lg font-medium">Edit Task</h3>
          <button
            onClick={() => setIsEditing(false)}
            className="text-gray-500 hover:text-gray-700"
          >
            Cancel
          </button>
        </div>
        <TaskForm task={task} onSuccess={() => setIsEditing(false)} />
      </div>
    );
  }

  return (
    <div
      className={`bg-white p-4 rounded-lg shadow-md border border-gray-200 transition-opacity ${
        task.completed ? "opacity-60" : ""
      }`}
    >
      <div className="flex items-start gap-3">
        <input
          type="checkbox"
          checked={task.completed}
          onChange={handleToggle}
          className="mt-1 h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"
        />

        <div className="flex-1">
          <div className="flex items-center gap-2 mb-1">
            <h3
              className={`font-medium ${
                task.completed ? "line-through text-gray-500" : "text-gray-900"
              }`}
            >
              {task.title}
            </h3>
            <span
              className={`px-2 py-0.5 text-xs font-medium rounded-full ${
                priorityColors[task.priority as keyof typeof priorityColors]
              }`}
            >
              {task.priority}
            </span>
          </div>

          {task.description && (
            <p className="text-gray-600 text-sm mb-2">{task.description}</p>
          )}

          <p className="text-xs text-gray-400">
            Created: {new Date(task.createdAt).toISOString().split("T")[0]}
          </p>
        </div>

        <div className="flex gap-2">
          <button
            onClick={() => setIsEditing(true)}
            className="text-blue-600 hover:text-blue-800 text-sm font-medium"
          >
            Edit
          </button>
          <button
            onClick={handleDelete}
            disabled={isDeleting}
            className="text-red-600 hover:text-red-800 text-sm font-medium disabled:opacity-50"
          >
            {isDeleting ? "Deleting..." : "Delete"}
          </button>
        </div>
      </div>
    </div>
  );
}

This component displays a single task with:

• A checkbox to toggle completion status

• The task title with strikethrough styling when completed

• A priority badge with color coding

• Optional description

• Creation date

• Edit and Delete buttons

When editing, it renders the TaskForm component with the current task data.

TaskList Component

Create components/TaskList.tsx:

import { getTasks } from '@/app/actions'
import TaskItem from './TaskItem'

export default async function TaskList() {
  const tasks = await getTasks()

  if (tasks.length === 0) {
    return (
      <div className="text-center py-12">
        <p className="text-gray-500 text-lg">No tasks yet. Add your first task above!</p>
      </div>
    )
  }

  const completedTasks = tasks.filter((task) => task.completed)
  const pendingTasks = tasks.filter((task) => !task.completed)

  return (
    <div className="space-y-6">
      {pendingTasks.length > 0 && (
        <div>
          <h2 className="text-lg font-semibold text-gray-700 mb-3">
            Pending Tasks ({pendingTasks.length})
          </h2>
          <div className="space-y-3">
            {pendingTasks.map((task) => (
              <TaskItem key={task.id} task={task} />
            ))}
          </div>
        </div>
      )}

      {completedTasks.length > 0 && (
        <div>
          <h2 className="text-lg font-semibold text-gray-700 mb-3">
            Completed Tasks ({completedTasks.length})
          </h2>
          <div className="space-y-3">
            {completedTasks.map((task) => (
              <TaskItem key={task.id} task={task} />
            ))}
          </div>
        </div>
      )}
    </div>
  )
}

This is a Server Component that fetches all tasks and renders them. It separates tasks into pending and completed sections for better organization.

AddTaskButton Component

Create components/AddTaskButton.tsx:

'use client'

import { useState } from 'react'
import TaskForm from './TaskForm'

export default function AddTaskButton() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <div>
      {!isOpen ? (
        <button
          onClick={() => setIsOpen(true)}
          className="w-full bg-blue-600 text-white py-3 px-4 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors font-medium"
        >
          + Add New Task
        </button>
      ) : (
        <div className="bg-white p-6 rounded-lg shadow-md border border-gray-200">
          <div className="flex justify-between items-center mb-4">
            <h2 className="text-xl font-semibold text-gray-800">Add New Task</h2>
            <button
              onClick={() => setIsOpen(false)}
              className="text-gray-500 hover:text-gray-700 text-2xl leading-none"
            >
              ×
            </button>
          </div>
          <TaskForm onSuccess={() => setIsOpen(false)} />
        </div>
      )}
    </div>
  )
}

This component toggles between showing an "Add New Task" button and the task form.

How to Create the Main Page

Now let's update the main page to display our task management interface. Replace the contents of app/page.tsx:

import { Suspense } from 'react'
import AddTaskButton from '@/components/AddTaskButton'
import TaskList from '@/components/TaskList'

export default function Home() {
  return (
    <main className="min-h-screen bg-gray-100 py-8">
      <div className="max-w-2xl mx-auto px-4">
        <header className="text-center mb-8">
          <h1 className="text-3xl font-bold text-gray-800 mb-2">Task Management</h1>
          <p className="text-gray-600">Organize your tasks efficiently with Prisma & Next.js</p>
        </header>

        <div className="space-y-6">
          <AddTaskButton />

          <Suspense
            fallback={
              <div className="text-center py-12">
                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
                <p className="text-gray-500 mt-2">Loading tasks...</p>
              </div>
            }
          >
            <TaskList />
          </Suspense>
        </div>
      </div>
    </main>
  )
}

We wrap TaskList in a Suspense boundary to show a loading state while the tasks are being fetched.

How to Run the Application

Now you're ready to run the application. Start the development server:

npm run dev

Open your browser and navigate to http://localhost:3000. You should see the task management application screen as shown below:

Try the following:

1. Click "Add New Task" to open the form

2. Enter a title like "Learn Prisma 7"

3. Add a description (optional)

4. Select a priority level

5. Click "Add Task"

Your task should appear in the list!

Now you can:

• Click "Edit" to modify a task

• Click the checkbox to mark tasks as complete

• Click "Delete" to delete a task

How to Explore Your Data with Prisma Studio

Prisma comes with a built-in GUI for exploring and editing your database. Run:

npx prisma studio

This opens Prisma Studio in your browser at http://localhost:51212. You can:

• View all your tasks in a table format

• Add new records directly

• Edit existing records

• Delete records

• Filter and sort data

Make sure to add some tasks from the application to see them in the studio, as we deleted the first task above.

Understanding Prisma 7's New Architecture

Prisma 7 introduces several important changes that you should understand:

Driver Adapters

In previous versions, Prisma used Rust-based engines for database connections. Prisma 7 moves to a "Rust-free" architecture that uses JavaScript driver adapters instead.

For SQLite, we use @prisma/adapter-better-sqlite3:

import { PrismaBetterSqlite3 } from '@prisma/adapter-better-sqlite3'

const adapter = new PrismaBetterSqlite3({
  url: 'file:./prisma/dev.db',
})

const prisma = new PrismaClient({ adapter })

This approach offers several benefits:

• Smaller package size (no Rust binaries)

• Better compatibility with edge runtimes

• Faster cold starts

• More flexible database driver options

New Generator Provider

The generator provider has changed from prisma-client-js to prisma-client:

generator client {
  provider = "prisma-client"  // New in Prisma 7
  output   = "../generated/prisma"
}

Configuration File

The new prisma.config.ts file centralizes the configuration that was previously spread across multiple files:

import { defineConfig } from 'prisma/config'

export default defineConfig({
  schema: 'prisma/schema.prisma',
  datasource: {
    url: process.env.DATABASE_URL,
  },
})

Adding More Features

Let's extend our application with a few more useful features.

Task Filtering

Add a filter component to show tasks by priority. Create components/TaskFilter.tsx:

'use client'

import { useRouter, useSearchParams } from 'next/navigation'

export default function TaskFilter() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const currentFilter = searchParams.get('priority') || 'all'

  function handleFilterChange(priority: string) {
    const params = new URLSearchParams(searchParams)
    if (priority === 'all') {
      params.delete('priority')
    } else {
      params.set('priority', priority)
    }
    router.push(`/?${params.toString()}`)
  }

  const filters = ['all', 'high', 'medium', 'low']

  return (
    <div className="flex gap-2 justify-center">
      {filters.map((filter) => (
        <button
          key={filter}
          onClick={() => handleFilterChange(filter)}
          className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
            currentFilter === filter
              ? 'bg-blue-600 text-white'
              : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
          }`}
        >
          {filter.charAt(0).toUpperCase() + filter.slice(1)}
        </button>
      ))}
    </div>
  )
}

Update the getTasks function in app/actions.ts to support filtering:

export async function getTasks(priority?: string) {
  try {
    const where = priority && priority !== 'all' ? { priority } : {}

    const tasks = await prisma.task.findMany({
      where,
      orderBy: {
        createdAt: 'desc',
      },
    })
    return tasks
  } catch (error) {
    console.error('Failed to fetch tasks:', error)
    return []
  }
}

Task Statistics

Create a component to display task statistics. Create components/TaskStats.tsx:

import { prisma } from '@/lib/prisma'

export default async function TaskStats() {
  const [total, completed, highPriority] = await Promise.all([
    prisma.task.count(),
    prisma.task.count({ where: { completed: true } }),
    prisma.task.count({ where: { priority: 'high', completed: false } }),
  ])

  const completionRate = total > 0 ? Math.round((completed / total) * 100) : 0

  return (
    <div className="grid grid-cols-3 gap-4 mb-6">
      <div className="bg-white p-4 rounded-lg shadow-sm text-center">
        <p className="text-2xl font-bold text-gray-800">{total}</p>
        <p className="text-sm text-gray-500">Total Tasks</p>
      </div>
      <div className="bg-white p-4 rounded-lg shadow-sm text-center">
        <p className="text-2xl font-bold text-green-600">{completionRate}%</p>
        <p className="text-sm text-gray-500">Completed</p>
      </div>
      <div className="bg-white p-4 rounded-lg shadow-sm text-center">
        <p className="text-2xl font-bold text-red-600">{highPriority}</p>
        <p className="text-sm text-gray-500">High Priority</p>
      </div>
    </div>
  )
}

Now, use this component in the app/page.tsx file after the header tag for a quick overview of your tasks:

import AddTaskButton from "@/components/AddTaskButton";
import TaskList from "@/components/TaskList";
import TaskStats from "@/components/TaskStats";
import { Suspense } from "react";

export default function Home() {
  return (
    <main className="min-h-screen bg-gray-100 py-8">
      <div className="max-w-2xl mx-auto px-4">
        <header className="text-center mb-8">
          <h1 className="text-3xl font-bold text-gray-800 mb-2">
            Task Management
          </h1>
          <p className="text-gray-600">
            Organize your tasks efficiently with Prisma & Next.js
          </p>
        </header>

        <TaskStats /> {/* show list of tasks */}

        <div className="space-y-6">
          <AddTaskButton />

          <Suspense
            fallback={
              <div className="text-center py-12">
                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
                <p className="text-gray-500 mt-2">Loading tasks...</p>
              </div>
            }
          >
            <TaskList />
          </Suspense>
        </div>
      </div>
    </main>
  );
}

If you add a couple of tasks with high priority and mark some of them as completed, you will see a screen with stats as shown below:

Database Migrations in Production

When you need to change your database schema, Prisma Migrate helps you manage those changes safely.

Adding a New Field

Let's say you want to add a dueDate field to tasks. First, update your schema from prisma/schema.prisma file:

model Task {
  id          Int       @id @default(autoincrement())
  title       String
  description String?
  completed   Boolean   @default(false)
  priority    String    @default("medium")
  dueDate     DateTime?  // New field
  createdAt   DateTime  @default(now())
  updatedAt   DateTime  @updatedAt
}

Then create and apply the migration by executing the following command from the terminal:

npx prisma migrate dev --name add-due-date

This creates a new migration file and updates your database.

Now, if you navigate to http://localhost:51212, you will see the new dueDate column added in the Prisma Studio.

If you’re not able to see it, make sure to execute the npx prisma studio command again in a separate terminal and then try it out.

Viewing Migration History

Check your migration history:

npx prisma migrate status

Resetting the Database

During development, you might want to reset your database:

npx prisma migrate reset

Warning: This deletes all data in your database. Only use this in development!

Best Practices for Production

Here are some best practices when using Prisma with Next.js in production:

1. Use Environment Variables

Never hardcode database URLs. Always use environment variables in .env file:

DATABASE_URL="file:./prisma/prod.db"

2. Add a Postinstall Script

Add this to your package.json to ensure Prisma Client is generated after installing dependencies:

{
  "scripts": {
    "postinstall": "prisma generate"
  }
}

3. Handle Connection Errors Gracefully

Wrap your database operations in try-catch blocks and provide meaningful error messages to users.

4. Use Transactions for Related Operations

When you need to perform multiple related database operations, use transactions:

await prisma.$transaction([
  prisma.task.update({ where: { id: 1 }, data: { completed: true } }),
  prisma.task.update({ where: { id: 2 }, data: { completed: true } }),
])

Conclusion

Congratulations! You've built a complete Task Management application using Next.js 15 and Prisma 7 with SQLite.

You can find the complete source code for this application in this repository.

As we cannot cover everything in this tutorial, If you want to learn Next.js from scratch and learn in detail about prisma step-by-step with table relationships, login authentication, multiple routes, server actions and more all while building a large application then, do check out the Mastering Next.js course.

In this tutorial, you learned how to:

• Set up Prisma 7 with the new Rust-free architecture

• Configure the new prisma.config.ts file

• Use driver adapters for database connections

• Create and run database migrations

• Build Server Actions for CRUD operations

• Create a responsive UI with React and Tailwind CSS

• Use Prisma Studio for database exploration

Prisma 7's new architecture makes it lighter and more compatible with modern JavaScript runtimes. The driver adapter pattern gives you more flexibility in how you connect to your database.

Next Steps

Here are some ways you can extend this application:

• Add user authentication with NextAuth.js

• Implement task categories or tags

• Add drag-and-drop for task reordering

• Set up due date reminders

• Deploy to Vercel or another hosting platform

• Migrate to PostgreSQL for a production-ready database

Resources

• Prisma Documentation

• Prisma 7 Upgrade Guide

• Next.js Documentation

Thanks for reading!

Access The Ultimate React Ebooks Collection By Clicking The Image Below👇

Download The Complete Redux Toolkit Ebook Here

Download The useReducer Hook Ebook Here

• Check Out All My Courses

• Follow Me On LinkedIn For Regular Updates

• GitHub

Security researchers, while probing the patches from last week's critical Remote Code Execution fix, discovered two additional vulnerabilities lurking in the same code paths.

The good news? These new vulnerabilities don't allow Remote Code Execution. The bad news? They're still serious enough to warrant immediate action.

What's New: Two More CVEs

1. Denial of Service (CVE-2025-55184) - High Severity

A malicious HTTP request can trigger an infinite loop when deserialized by React, hanging your server process and consuming CPU. Even if you don't explicitly implement Server Functions, your app may still be vulnerable if it supports React Server Components.

2. Source Code Exposure (CVE-2025-55183) - Medium Severity

A crafted request to a vulnerable Server Function can leak its source code, including any hardcoded secrets. If you've got database connection strings, API keys, or credentials directly in your 'use server' functions (instead of environment variables), they could be exposed.

Are You Affected?

You're safe if:

• Your React app is purely client-side (no server)

• You don't use a framework/bundler that supports React Server Components

You're vulnerable if you use these packages:

• react-server-dom-webpack

• react-server-dom-parcel

• react-server-dom-turbopack

Or these frameworks:

• Next.js

• React Router

• Waku

• @parcel/rsc

• @vitejs/plugin-rsc

• rwsdk (RedwoodJS)

Vulnerable versions:

19.0.0, 19.0.1, 19.0.2, 19.1.0, 19.1.1, 19.1.2, 19.1.2, 19.2.0, 19.2.1 and 19.2.2

Step-by-Step Fix

Next.js

All users should upgrade to the latest patched version in their release line:

npm install next@14.2.35  // for 13.3.x, 13.4.x, 13.5.x, 14.x
npm install next@15.0.7   // for 15.0.x
npm install next@15.1.11  // for 15.1.x
npm install next@15.2.8   // for 15.2.x
npm install next@15.3.8   // for 15.3.x
npm install next@15.4.10  // for 15.4.x
npm install next@15.5.9   // for 15.5.x
npm install next@16.0.10  // for 16.0.x

npm install next@15.6.0-canary.60   // for 15.x canary releases
npm install next@16.1.0-canary.19   // for 16.x canary releases

If you are on version 13.3 or later version of Next.js 13 (13.3.x, 13.4.x, or 13.5.x) please upgrade to version 14.2.35.

If you are on next@14.3.0-canary.77 or a later Canary release, downgrade to the latest stable 14.x release:

npm install next@14

React Router

If you are using React Router’s unstable RSC APIs, you should upgrade the following package.json dependencies if they exist:

npm install react@latest
npm install react-dom@latest
npm install react-server-dom-parcel@latest
npm install react-server-dom-webpack@latest
npm install @vitejs/plugin-rsc@latest

Key points to remember:

• The source code exposure vulnerability can leak secrets hardcoded in the source code. Audit any 'use server' functions and ensure you're using environment variables (process.env.SECRET) rather than inline secrets, runtime env vars are not exposed.

• If you updated last week for the critical RCE vulnerability, you need to update again

• Hosting providers like Vercel have temporary mitigations, but don't rely on them

• React Native users only need to update if using these specific RSC packages in a monorepo

Learn more about these vulnerabilities in detail here.

Access The Ultimate React Ebooks Collection By Clicking The Image Below👇

Download The Complete Redux Toolkit Ebook Here

Download The useReducer Hook Ebook He

• Check Out All My Courses

• Follow Me On LinkedIn For Regular Updates

• GitHub

You might think you’re following the best practices, but some common development patterns are actually degrading your app’s performance behind the scenes.

In this article, we’ll uncover 5 sneaky anti-patterns that are silently killing your React app’s speed, and show you how to fix them for a faster, smoother user experience.

So let’s get started.

1. Context Causing Mass Re-renders

The Problem: Adding everything in a single context.

The Solution: Split contexts by concern.

2. Inline Object/Array Creation in Props

The Problem: Passing inline objects/arrays as props to a component.

First Solution: Define constants outside the component.

Second Solution: Use useMemo for dynamic values.

3. Rendering Everything in a Huge List

The Problem: Displaying the entire list at once.

The Solution: Use React Window/React Virtualized library.

4. Not Memoizing Expensive Calculations

The Problem: Calculating values during rendering.

The Solution: Use the useMemo hook.

5. Anonymous Functions in JSX

The Problem: Creating new functions on every render.

The Solution: Use event delegation.

Found these tips useful? Download the complete ebook with 50+ such React tips from the React 50+ Pro Tips Ebook.

Access The Ultimate React Ebooks Collection By Clicking The Image Below👇

Download The Complete Redux Toolkit Ebook Here

Download The useReducer Hook Ebook Here

• Check Out All My Courses

• Follow Me On LinkedIn For Regular Updates

• GitHub

Managing multiple GitHub accounts is a common challenge for developers who juggle both personal and professional projects. It becomes even more complex when you want to use different accounts for AI tools like Lovable AI or Bolt AI to access free credits and keep your repositories synchronized.

Pushing code to the right account without mix-ups requires careful setup. Instead of generating a new SSH key and adding it to your GitHub account every time you switch from a personal project to a company project,

In this article, you will learn how to create separate SSH RSA keys and configure your system to match each key with the appropriate GitHub profile.

By following these steps, you’ll be able to switch seamlessly between accounts and streamline your workflow.

A best practice is to use separate SSH keys for each account. This not only improves security but also ensures your commits are correctly attributed and your repositories stay organized.

Step 1: Generate Two SSH Key Pairs

Open your terminal and run the following command to create two unique RSA key pairs - one for your company GitHub account and another for your personal GitHub account.

For your company account:

ssh-keygen -t rsa -b 4096 -C "your-company-email@example.com" -f ~/.ssh/id_rsa_company

For example,

ssh-keygen -t rsa -b 4096 -C "mike123@amazon.com" -f ~/.ssh/id_rsa_company

• -C adds a comment (usually your email) to identify the key.

• -f specifies the filename to avoid overwriting default keys.

You’ll be prompted to set a password - highly recommended for added security.

This creates two different files: ~/.ssh/id_rsa_company and ~/.ssh/id_rsa_company.pub

For your personal account:

ssh-keygen -t rsa -b 4096 -C "your-personal-email@example.com" -f ~/.ssh/id_rsa_personal

For example,

ssh-keygen -t rsa -b 4096 -C "mike123@gmail.com" -f ~/.ssh/id_rsa_personal

This creates two different files: ~/.ssh/id_rsa_personal and ~/.ssh/id_rsa_personal.pub

Step 2: Configure SSH to Use The Right Key

Create or edit the SSH config file to tell your system which key to use for which GitHub account.

Execute the following command from your terminal/command prompt:

vi ~/.ssh/config

and add the following configuration inside that file:

# Company GitHub Account
Host github-company
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_rsa_company
  IdentitiesOnly yes

# Personal GitHub Account
Host github-personal
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_rsa_personal
  IdentitiesOnly yes

Save the file and close it.

You can create as many SSH keys as you want depending on the number of GitHub accounts you want to manage.

Step 3: Add Public Keys to Your GitHub Account

Execute the following command to see the generated public key for your company's GitHub account:

cat ~/.ssh/id_rsa_company.pub

You will see output something like this:

ssh-rsa AAAAB3kXU3onx6Qp8J5LL0noFecbBPyGiTPk6KarqLGKl5MIZ2KDMA+UFMEQ== mike123@amazon.com

Now copy the complete text starting from ssh-rsa and ending with your email mike123@amazon.com.

Make sure to not select any extra space or extra character while copying the text.

Adding Copied Key To Company GitHub Account:

Now open your company GitHub account and navigate to https://github.com/settings/profile. You will see the following navigation menus:

• Now, click on the SSH and GPG keys submenu under Access menu.

• Click on the New SSH Key button displayed on the top right corner. You will see the following screen.

• Give any title you want and paste the copied key in the Key textarea, and click on the Add SSH key button.

Similarly, you can execute the following command to see the generated public key for your personal GitHub account:

cat ~/.ssh/id_rsa_personal.pub

Now copy the complete text starting from ssh-rsa and ending with your email mike123@gmail.com.

Now log in to your personal GitHub account and follow the same steps above of Adding Copied Key To Company GitHub Account to add this key to your GitHub account.

Congratulations! With this, we’re done with the setup.

Let's try to clone a repository to see if it works.

Go to any of your own GitHub repositories from your personal GitHub account and copy the SSH key from SSH tab by clicking on the green Code button as shown below:

Now, open your terminal and execute the following command to clone the repository:

git clone your_copied_url

For example,

git clone git@github.com:myogeshchavan97/unsplash_image_search.git

Note that, in the above copied URL, you need to replace git@github.com with git@github-personal keeping everything else as it is. If you want to clone your personal GitHub repository like this:

git clone git@github-personal:myogeshchavan97/unsplash_image_search.git

If you want to clone your company's GitHub repository code, you need to use git@github-company like this:

git clone git@github-company:myogeshchavan97/unsplash_image_search.git

This is because, if you remember, in step 2 above Step 2: Configure SSH to Use The Right Key, we have named it github-company as the Host inside the ~/.ssh/config file for the Company GitHub Account and github-personal as the Host for Personal GitHub Account.

Similarly, if you want to connect your local GitHub repository on your machine to your personal GitHub account, you need to execute the following command from the terminal:

git remote add origin your_remote_git_url

For example,

git remote add origin git@github-personal:myogeshchavan97/test_repo.git

Note that here, we have used git@github-personal instead of git@github.com.

Similarly, if you want to connect your local GitHub repository to your company's GitHub account, you need to execute the following command from the terminal:

git remote add origin git@github-company:myogeshchavan97/test_repo.git

Note that here, we have replaced git@github.com with git@github-company.

That’s it! You now have isolated SSH keys for company and personal GitHub accounts.

Access The Ultimate React Ebooks Collection By Clicking The Image Below👇

Download The Complete Redux Toolkit Ebook Here

Download The useReducer Hook Ebook He

• Check Out All My Courses

• Follow Me On LinkedIn For Regular Updates

• GitHub

In this tutorial, you'll learn how to build truly global React application using internationalization (i18n). You'll discover how to manage translations, handle date and number formatting for different locales, and implement language switching – all while maintaining a clean, scalable codebase.

What is Internationalization (i18n)?

Internationalization (i18n) is the process of designing and developing your application so it can be easily adapted to different languages and regions without requiring engineering changes.

The term "i18n" comes from the fact that there are 18 letters between the first "i" and the last "n" in "internationalization".

Key aspects of i18n include:

• Translation: Converting text strings to different languages

• Localization: Adapting content for specific regions (dates, numbers, currencies)

• Pluralization: Handling singular/plural forms correctly in each language

Why i18n Matters for Your React App

Here are several compelling reasons why you should internationalize your React application:

1. Global Reach: Reach users in their native language and expand to new markets

2. Better User Experience: Users prefer apps in their own language – studies show 75% of users prefer buying products in their native language

3. Competitive Advantage: Many apps lack proper internationalization, giving you an edge

4. Legal Requirements: Some countries require apps to be available in local languages

5. SEO Benefits: Multi-language content improves search rankings in different regions

6. Increased Conversions: Users are more likely to complete actions when content is in their language

Prerequisites

To follow along with this tutorial, you should have:

• Basic knowledge of React and React Hooks

• Node.js and npm installed on your machine

• A code editor like VS Code

Project Setup

Let's create a new React application using Vite:

npm create vite@latest react-i18n-demo -- --template react
cd react-i18n-demo

Next, install the required i18n packages:

npm install i18next react-i18next i18next-browser-languagedetector

Here's what each package does:

• i18next: Core internationalization framework

• react-i18next: React bindings for i18next

• i18next-browser-languagedetector: Automatically detects user's preferred language

Now start the development server:

npm run dev

Your app should now be running on http://localhost:5173/

Note that, in this tutorial we will not be using any styling library or framework like Tailwind CSS.

For simplicity, we will be defining styles inline however, in your real application, you should never define styles inline. Always separate out into their own CSS files or use CSS framework like Tailwind CSS.

So delete the src/App.css file and replace the content of src/index.css with the following content:

:root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
}

The Problem: Hardcoded Strings

Before we implement i18n, let's look at a typical React component with hardcoded strings:

import { useState } from 'react';

function ProductCard({ product }) {
  return (
    <div style={{
      padding: '20px',
      border: '1px solid #ddd',
      borderRadius: '8px'
    }}>
      {/* ❌ Hardcoded English strings */}
      <h3>{product.name}</h3>
      <p>Price: ${product.price}</p>
      <p>In stock: {product.stock} items</p>

      {product.stock === 0 && (
        <div style={{ color: 'red' }}>Out of stock</div>
      )}

      {product.stock === 1 && (
        <div style={{ color: 'orange' }}>Only 1 item left!</div>
      )}

      {product.stock > 1 && (
        <div style={{ color: 'green' }}>In stock</div>
      )}

      <button>Add to cart</button>
    </div>
  );
}

export default ProductCard;

This approach has several problems:

1. No Translation Support: All text is in English only

2. Maintenance Nightmare: Changing text requires editing multiple components

3. No Pluralization: Handling "1 item" vs "2 items" is hardcoded

4. No Localization: Date and number formats are fixed

5. Difficult Scaling: Adding new languages requires modifying every component

Let's fix these issues with proper internationalization.

The Solution: react-i18next

The most popular and powerful solution for React internationalization is react-i18next.

It provides:

• Simple API for translations

• Automatic language detection

• Pluralization support

• Nested translations

• Formatting for dates, numbers, and currencies

• Lazy loading of translation files

• TypeScript support

How to Create Translation Files

For larger applications, it's better to organize translations in separate JavaScript files.

So, create a new utils folder inside src folder and inside it create locales folder where translations will be stored like this:

utils/
  locales/
    en/
      translation.js
    es/
      translation.js
    fr/
      translation.js

Here's an example utils/locales/en/translation.js file for english translations with the following content:

export default {
  en: {
    translation: {
      "product.price": "Price",
      "product.inStock": "In stock: {{count}} items",
      "product.outOfStock": "Out of stock",
      "product.onlyOneLeft": "Only 1 item left!",
      "product.addToCart": "Add to cart",

      "profile.welcome": "Welcome, {{name}}!",
      "profile.memberSince": "Member since: {{date}}",
      "profile.loyaltyPoints": "You have {{points}} loyalty points",
      "profile.orders_zero": "You have no orders",
      "profile.orders_one": "You have 1 order",
      "profile.orders_other": "You have {{count}} orders",
      "profile.editProfile": "Edit profile",
    },
  },
};

Similarly, create utils/locales/es/translation.js file for spanish translations with the following content:

export default {
  es: {
    translation: {
      "product.price": "Precio",
      "product.inStock": "En stock: {{count}} artículos",
      "product.outOfStock": "Agotado",
      "product.onlyOneLeft": "¡Solo queda 1 artículo!",
      "product.addToCart": "Añadir al carrito",

      "profile.welcome": "¡Bienvenido, {{name}}!",
      "profile.memberSince": "Miembro desde: {{date}}",
      "profile.loyaltyPoints": "Tienes {{points}} puntos de fidelidad",
      "profile.orders_zero": "No tienes pedidos",
      "profile.orders_one": "Tienes 1 pedido",
      "profile.orders_other": "Tienes {{count}} pedidos",
      "profile.editProfile": "Editar perfil",
    },
  },
};

Similarly, create utils/locales/fr/translation.js file for french translations with the following content:

export default {
  fr: {
    translation: {
      "product.price": "Prix",
      "product.inStock": "En stock: {{count}} articles",
      "product.outOfStock": "Rupture de stock",
      "product.onlyOneLeft": "Plus qu'un article !",
      "product.addToCart": "Ajouter au panier",

      "profile.welcome": "Bienvenue, {{name}} !",
      "profile.memberSince": "Membre depuis : {{date}}",
      "profile.loyaltyPoints": "Vous avez {{points}} points de fidélité",
      "profile.orders_zero": "Vous n'avez aucune commande",
      "profile.orders_one": "Vous avez 1 commande",
      "profile.orders_other": "Vous avez {{count}} commandes",
      "profile.editProfile": "Modifier le profil",
    },
  },
};

How to Set Up react-i18next

Now, create a i18n.js file inside utils folder and add the following contents inside it:

import i18n from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import { initReactI18next } from "react-i18next";
import enTranslations from "./locales/en/translation";
import esTranslations from "./locales/es/translation";
import frTranslations from "./locales/fr/translation";

const resources = {
  // English translations
  ...enTranslations,
  // Spanish translations
  ...esTranslations,
  // French translations
  ...frTranslations,
};

// Initialize i18next
i18n
  .use(LanguageDetector) // Detect user language
  .use(initReactI18next) // Pass to react-i18next
  .init({
    resources,
    fallbackLng: "en", // Default language if detection fails

    interpolation: {
      escapeValue: false,

      // Custom formatter for dates and currencies
      format: (value, format, lng) => {
        if (format === "currency") {
          return new Intl.NumberFormat(lng, {
            style: "currency",
            currency: lng === "en" ? "USD" : lng === "es" ? "EUR" : "EUR",
          }).format(value);
        }

        if (format === "date") {
          return new Intl.DateTimeFormat(lng, {
            year: "numeric",
            month: "long",
            day: "numeric",
          }).format(value);
        }

        return value;
      },
    },
  });

export default i18n;

Here, we have imported all the translations files and added inside the resources object and passed it to init function of i18n.

Also, note that we’re using i18next-browser-languagedetector package which gives us LanguageDetector which we’re passing to use function so it automatically detects language of the user who’s browsing the application.

It’s important to know that we’re passing an object with resources property to init function. It has to be called resources as it’s predefined property which init function expects.

Now import this configuration in your src/main.jsx file:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import "./utils/i18n";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Understanding Translation Variables and Interpolation

Before diving into using translations in components, it's crucial to understand how variables and interpolation work in i18next. This will make it much easier to create dynamic, reusable translations.

What is Interpolation?

Interpolation is the process of inserting dynamic values into translation strings. Instead of having separate translations for every possible variation, you can use placeholders that get replaced with actual values at runtime.

For example, instead of creating separate translations like:

• "Welcome, John!"

• "Welcome, Sarah!"

• "Welcome, Michael!"

You create one translation with a placeholder:

• "Welcome, {{name}}!"

Basic Variable Interpolation

The most basic form of interpolation uses double curly braces {{variableName}} as placeholders:

// import useTranslation hook
import { useTranslation } from 'react-i18next';

// use it inside component 
const { t } = useTranslation();

// Translation string
"Welcome": "Welcome, {{name}}!"

// Usage in code
t('Welcome', { name: 'John' })
// Output: "Welcome, John!"

// Translation string
"product.inStock": "In stock: {{count}} items"

// Usage in code
t('product.inStock', { count: 10 })
// Output: "In stock: 10 items"

When you call the t function, you pass an object as the second argument containing the values you want to interpolate.

How to Use Translations in Components

Now let's update our code to use translations instead of hardcoded strings.

Using the useTranslation Hook

The useTranslation hook is the primary way to access translations in functional components.

So, create a componentsfolder inside src folder and create ProductCard.jsx file inside it and add the following contents inside it:

import { useTranslation } from "react-i18next";

function ProductCard({ product }) {
  const { t } = useTranslation();
  const zeroLeft = product.stock === 0;
  const oneLeft = product.stock === 1;

  return (
    <div>
      <h3>{product.name}</h3>

      <p>
        {t("product.price")}: ${product.price}
      </p>

      <p>{t("product.inStock", { count: product.stock })}</p>

      {zeroLeft && (
        <div style={{ color: "red" }}>{t("product.outOfStock")}</div>
      )}

      {oneLeft && (
        <div style={{ color: "orange" }}>{t("product.onlyOneLeft")}</div>
      )}

      <button disabled={zeroLeft}>{t("product.addToCart")}</button>
    </div>
  );
}

export default ProductCard;

As you can see in the above code, we’re using the properties from the translation.js file while calling the t function to get specific translation text.

Now, let’s use this component and display it on the UI.

Open src/App.jsx file and replace it with the following content:

import ProductCard from "./components/ProductCard";

const product = {
  id: 1,
  name: "Laptop",
  price: 999,
  stock: 5,
};

const App = () => {
  return <ProductCard product={product} />;
};

export default App;

Now, If you check the application, you will see the following output:

As you can see, we correctly see the translation and interpolated values from the translation.js file.

Multiple Variables in One String

You can use multiple variables in a single translation string:

// Translation string
"greeting": "Hello {{firstName}} {{lastName}}, you have {{count}} new messages."

// Usage in code
t('greeting', { 
  firstName: 'John', 
  lastName: 'Doe', 
  count: 5 
})
// Output: "Hello John Doe, you have 5 new messages."

Interpolation with Counts (Pluralization)

One of the most powerful features is combining interpolation with pluralization. i18next automatically handles plural forms based on the count:

{
  "items_zero": "You have no items",
  "items_one": "You have {{count}} item",
  "items_other": "You have {{count}} items"
}

When you use the count parameter, i18next automatically selects the correct plural form:

t('items', { count: 0 })  // "You have no items"
t('items', { count: 1 })  // "You have 1 item"
t('items', { count: 5 })  // "You have 5 items"

Different languages have different pluralization rules. For example:

• English: zero, one, other

• Polish: zero, one, few, many, other

• Arabic: zero, one, two, few, many, other

i18next handles these differences automatically!

Custom Formatting with Interpolation

You can also apply formatting to interpolated values. This is particularly useful for dates, currencies, and numbers:

"price": "Price: {{amount, currency}}"
"lastLogin": "Last login: {{date, date}}"

Usage:

t('price', { amount: 99.99 })
// Output with formatting: "Price: $99.99" (in English)
// Output with formatting: "Price: 99,99 €" (in French)

t('lastLogin', { date: new Date() })
// Output: "Last login: December 4, 2024" (in English)
// Output: "Last login: 4 décembre 2024" (in French)

If you remember, we added a format function inside the utils/i18n.js file because of which we see the $ in $99.99 and € in 99,99 € if the user’s language is french fr.

If you want to see that in action, open src/main.jsx file and add the following import at the top of the file:

import i18next from "i18next";

and call the changeLanguage method from i18next by passing fr as the value.

Here’s the complete code:

import i18next from "i18next"; // import i18next package
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import "./utils/i18n";

i18next.changeLanguage("fr"); // change language to french

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <App />
  </StrictMode>
);

And as a temporary code you can add the following JSX inside the ProductCard.jsx file:

 return (
    <div>
     {/*  your old JSX */}

      <p>{t("price", { amount: 99.99 })}</p>

      <p>{t("lastLogin", { date: new Date() })}</p>

      {/*  your new JSX */}
   </div>
);

Now, If you check the application, you will the following output:

Important Notes About Interpolation

1. Escaping: By default, i18next doesn't escape HTML in interpolated values because React already handles escaping. This is why we set escapeValue: false in the utils/i18n.js file.

2. Missing Variables: If you forget to pass a required variable, i18next will leave the placeholder as it is in the output so never forget to pass the value for placeholder

t('welcome', {})  // Output: "Welcome, {{name}}!"

3. Default Values: You can provide fallback values:

t('welcome', { name: userName || 'Guest' })

4. Performance: Interpolation is very fast, so don't worry about using it extensively in your app.

Now that you understand how variables and interpolation work, you're ready to use them effectively in your components!

Now, create a UserProfile.jsx file inside the componentsfolder and add the following contents inside it.

import { useTranslation } from "react-i18next";

function UserProfile({ user }) {
  const { t } = useTranslation();

  return (
    <div>
      <h2>{t("profile.welcome", { name: user.name })}</h2>

      <p>{t("profile.loyaltyPoints", { points: user.points })}</p>
    </div>
  );
}

export default UserProfile;

Now, let’s use this component inside the App.jsx file:

import ProductCard from "./components/ProductCard";
import UserProfile from "./components/UserProfile";

const product = {
  id: 1,
  name: "Laptop",
  price: 999,
  stock: 5,
};

const user = {
  name: "John",
  points: 150,
};

const App = () => {
  return (
    <>
      <ProductCard product={product} />
      <UserProfile user={user} />
    </>
  );
};

export default App;

If you check the application now, you will see the following output:

How to Build a Language Switcher

A language switcher allows users to change the application language. Here's how to build one.

Inside components folder create a new file with name LanguageSwitcher.jsx and add the following content inside it:

import { useTranslation } from "react-i18next";

const languages = [
  { code: "en", name: "English", flag: "🇺🇸" },
  { code: "es", name: "Español", flag: "🇪🇸" },
  { code: "fr", name: "Français", flag: "🇫🇷" },
];

function LanguageSwitcher() {
  const { i18n } = useTranslation();

  const changeLanguage = (languageCode) => {
    i18n.changeLanguage(languageCode);
  };

  return (
    <div
      style={{
        display: "flex",
        gap: "10px",
        padding: "10px",
        background: "#f5f5f5",
        borderRadius: "8px",
      }}
    >
      {languages.map((lang) => (
        <button
          key={lang.code}
          onClick={() => changeLanguage(lang.code)}
          style={{
            padding: "8px 16px",
            background: i18n.language === lang.code ? "#2196f3" : "#fff",
            color: i18n.language === lang.code ? "#fff" : "#000",
            border: "1px solid #ddd",
            borderRadius: "4px",
            cursor: "pointer",
            display: "flex",
            alignItems: "center",
            gap: "8px",
            fontSize: "14px",
            fontWeight: i18n.language === lang.code ? "bold" : "normal",
            transition: "all 0.2s ease",
          }}
        >
          <span>{lang.flag}</span>
          <span>{lang.name}</span>
        </button>
      ))}
    </div>
  );
}

export default LanguageSwitcher;

Complete App with Language Switcher

Here's a complete example showing the language switcher in action:

import LanguageSwitcher from "./components/LanguageSwitcher";
import ProductCard from "./components/ProductCard";
import UserProfile from "./components/UserProfile";

const product = {
  id: 1,
  name: "Laptop",
  price: 999,
  stock: 5,
};

const user = {
  name: "John",
  points: 150,
};

const App = () => {
  return (
    <>
      <header
        style={{
          padding: "20px",
          background: "#fff",
          boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
          marginBottom: "20px",
        }}
      >
        <LanguageSwitcher />
      </header>
      <ProductCard product={product} />
      <UserProfile user={user} />
    </>
  );
};

export default App;

If you check the application you can see the working language switcher as shown below:

Access The Ultimate React Ebooks Collection By Clicking The Image Below 👇

Download The Complete Redux Toolkit Ebook Here

Conclusion

Congratulations! You've learned how to build a fully internationalized React application.

You can find the complete source code for this application in this repository.

In this tutorial, you learned:

• What internationalization (i18n) is and why it matters

• How to set up react-i18next in your React app

• How to organize translations in different files

• How variables and interpolation work in translations

• How to use the useTranslation hook for translations

• How to handle pluralization automatically

• How to format dates, numbers, and currencies for different locales

• How to build a language switcher component

Your bundle is 2MB and users wait 8 seconds for first paint!

Code splitting with React.lazy() can cut that to 200KB and 1 second. This is non-negotiable for production apps.

The Problem:

You're shipping EVERYTHING in one bundle. Users download code for routes they never visit.

❌ Everything in single Bundle:

// App.js - imports EVERYTHING upfront
import Dashboard from './pages/Dashboard';  // 300 KB
import Analytics from './pages/Analytics';  // 450 KB
import Reports from './pages/Reports';      // 380 KB
import Settings from './pages/Settings';    // 250 KB
import AdminPanel from './pages/AdminPanel'; // 520 KB
import UserManagement from './pages/UserManagement'; // 400 KB

function App() {
  return (
    <Routes>
      <Route path="/" element={<Dashboard />} />
      <Route path="/analytics" element={<Analytics />} />
      <Route path="/reports" element={<Reports />} />
      <Route path="/settings" element={<Settings />} />
      <Route path="/admin" element={<AdminPanel />} />
      <Route path="/users" element={<UserManagement />} />
    </Routes>
  );
}

// 🚨 Problem: User visits "/" → Downloads 2.3 MB!
// 😱 But only needs Dashboard (300 KB)!
// Wasted: 2 MB downloaded
// User waits: 8 seconds on 3G

✅ Code Splitting with React.lazy():

import { lazy, Suspense } from 'react';

// ✨ Only import what you need, when you need it!
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Analytics = lazy(() => import('./pages/Analytics'));
const Reports = lazy(() => import('./pages/Reports'));
const Settings = lazy(() => import('./pages/Settings'));
const AdminPanel = lazy(() => import('./pages/AdminPanel'));
const UserManagement = lazy(() => import('./pages/UserManagement'));

function App() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <Routes>
        <Route path="/" element={<Dashboard />} />
        <Route path="/analytics" element={<Analytics />} />
        <Route path="/reports" element={<Reports />} />
        <Route path="/settings" element={<Settings />} />
        <Route path="/admin" element={<AdminPanel />} />
        <Route path="/users" element={<UserManagement />} />
      </Routes>
    </Suspense>
  );
}

// ✨ User visits "/" → Downloads 300 KB only!
// Other routes load on-demand
// Initial load: 1 second on 3G! 🎉

🔥 Real Bundle Analysis:

✨Before Code Splitting:

npm run build

# Output:
File sizes after gzip:
  2.31 MB  build/static/js/main.chunk.js  😱

# Lighthouse Score:
First Contentful Paint: 8.2s
Time to Interactive: 12.4s
Performance Score: 34/100 🔴

✨After Code Splitting:

npm run build

# Output:
File sizes after gzip:
  187 KB  build/static/js/main.chunk.js  ✨
  310 KB  build/static/js/1.chunk.js (Dashboard)
  445 KB  build/static/js/2.chunk.js (Analytics)
  375 KB  build/static/js/3.chunk.js (Reports)

# Lighthouse Score:
First Contentful Paint: 1.2s ⚡
Time to Interactive: 2.1s
Performance Score: 94/100 🟢

12x faster initial load!

💪 Component-Level Code Splitting:

// Don't just split routes - split heavy components!

import { lazy, Suspense } from 'react';

// ✨ Lazy load heavy chart library only when needed
const Chart = lazy(() => import('./components/HeavyChart'));
const DataTable = lazy(() => import('./components/DataTable'));
const PdfViewer = lazy(() => import('./components/PdfViewer'));

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

  return (
    <div>
      <h1>Dashboard</h1>

      <button onClick={() => setShowChart(true)}>
        Show Chart
      </button>

      {showChart && (
        <Suspense fallback={<ChartSkeleton />}>
          <Chart data={chartData} />
        </Suspense>
      )}
    </div>
  );
}

// Chart only loads when user clicks button! 🎉
// Saves 450 KB on initial load

🎯 Modal/Dialog Lazy Loading:

// ❌ BAD - Modal code loaded even if never opened
import EditUserModal from './EditUserModal';

function UserList() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div>
      <UserTable />
      {isModalOpen && <EditUserModal onClose={() => setIsModalOpen(false)} />}
    </div>
  );
}

// ✅ GOOD - Modal loads only when opened
const EditUserModal = lazy(() => import('./EditUserModal'));

function UserList() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div>
      <UserTable />

      {isModalOpen && (
        <Suspense fallback={<ModalSkeleton />}>
          <EditUserModal onClose={() => setIsModalOpen(false)} />
        </Suspense>
      )}
    </div>
  );
}

// Modal code only downloaded when user clicks "Edit"! ✨

🔥 Tab Content Lazy Loading:

const OverviewTab = lazy(() => import('./tabs/OverviewTab'));
const AnalyticsTab = lazy(() => import('./tabs/AnalyticsTab'));
const SettingsTab = lazy(() => import('./tabs/SettingsTab'));

function Dashboard() {
  const [activeTab, setActiveTab] = useState('overview');

  return (
    <div>
      <Tabs value={activeTab} onChange={setActiveTab}>
        <Tab value="overview">Overview</Tab>
        <Tab value="analytics">Analytics</Tab>
        <Tab value="settings">Settings</Tab>
      </Tabs>

      <Suspense fallback={<TabSkeleton />}>
        {activeTab === 'overview' && <OverviewTab />}
        {activeTab === 'analytics' && <AnalyticsTab />}
        {activeTab === 'settings' && <SettingsTab />}
      </Suspense>
    </div>
  );
}

// Each tab loads only when clicked! 🎉
// Initial load: Only active tab

💎 Library Lazy Loading:

// ❌ BAD - Huge library loaded upfront
import Moment from 'moment';  // 288 KB!
import Lodash from 'lodash';  // 71 KB!
import ChartJS from 'chart.js';  // 210 KB!

// ✅ GOOD - Lazy load heavy libraries
function DatePicker() {
  const [moment, setMoment] = useState(null);

  useEffect(() => {
    // ✨ Load moment only when component mounts
    import('moment').then(mod => setMoment(() => mod.default));
  }, []);

  if (!moment) return <div>Loading...</div>;

  return <div>{moment().format('MMMM Do YYYY')}</div>;
}

// Even better: Use smaller alternatives
// moment (288 KB) → date-fns (13 KB)
// lodash (71 KB) → lodash-es with tree-shaking

✨ Preloading Strategy:

// ✨ Preload routes user is likely to visit
function App() {
  const preloadAnalytics = () => {
    import('./pages/Analytics');  // Start loading in background
  };

  return (
    <div>
      <nav>
        <Link 
          to="/" 
          onMouseEnter={preloadAnalytics}  // ✨ Preload on hover!
        >
          Dashboard
        </Link>
        <Link to="/analytics">Analytics</Link>
      </nav>

      <Suspense fallback={<PageLoader />}>
        <Routes>
          <Route path="/" element={<Dashboard />} />
          <Route path="/analytics" element={<Analytics />} />
        </Routes>
      </Suspense>
    </div>
  );
}

// Hover over link → Starts loading
// Click link → Already loaded! Instant! ⚡️

🎯 Progressive Loading Pattern:

function DashboardPage() {
  return (
    <div>
      {/* ✨ Load critical content first */}
      <Header />
      <MainStats />

      {/* Load secondary content lazily */}
      <Suspense fallback={<ChartSkeleton />}>
        <LazyChart />
      </Suspense>

      <Suspense fallback={<TableSkeleton />}>
        <LazyDataTable />
      </Suspense>

      <Suspense fallback={<WidgetSkeleton />}>
        <LazyWidgets />
      </Suspense>
    </div>
  );
}

// Page appears instantly with skeletons
// Content loads progressively as chunks arrive! 🎨

🔥 Nested Suspense Boundaries:

function App() {
  return (
    // ✨ Outer Suspense for route-level loading
    <Suspense fallback={<AppLoader />}>
      <Routes>
        <Route path="/" element={<Dashboard />} />
      </Routes>
    </Suspense>
  );
}

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>

      {/* ✨ Inner Suspense for component-level loading */}
      <Suspense fallback={<Skeleton />}>
        <HeavyChart />
      </Suspense>

      <Suspense fallback={<Skeleton />}>
        <DataTable />
      </Suspense>
    </div>
  );
}

// Route switches → Show AppLoader
// Components load → Show individual Skeletons
// Better UX! ✨

🚨 Common Mistakes:

// ❌ MISTAKE #1: Forgetting Suspense
const Dashboard = lazy(() => import('./Dashboard'));
<Dashboard />  // ERROR! Must wrap in Suspense

// ✅ FIX:
<Suspense fallback={<Loading />}>
  <Dashboard />
</Suspense>

// ❌ MISTAKE #2: Lazy loading tiny components
const Button = lazy(() => import('./Button'));  // 2 KB component
// Overhead of loading > component size!

// ✅ FIX: Only lazy load components > 20 KB

// ❌ MISTAKE #3: No loading state
<Suspense fallback={null}>  // Blank screen during load!
  <HeavyComponent />
</Suspense>

// ✅ FIX: Always show loading UI
<Suspense fallback={<Skeleton />}>
  <HeavyComponent />
</Suspense>

📊 Real Results:

E-commerce App (Before):
├─ Bundle size: 2.8 MB
├─ Load time (3G): 11 seconds
├─ Bounce rate: 53%
└─ Lighthouse: 28/100

E-commerce App (After lazy loading):
├─ Initial bundle: 340 KB
├─ Load time (3G): 1.4 seconds
├─ Bounce rate: 19%
└─ Lighthouse: 92/100

Result:
├─ 8x smaller initial bundle
├─ 8x faster load time
├─ 64% reduction in bounce rate
└─ Revenue increased 34%! 💰

2. React Performance Secret: The "Bail Out" Optimization Pattern

This ONE weird trick makes React skip re-rendering entirely.

The Hidden React Behavior:

If you return the EXACT same state object, React bails out of rendering. Not just memo() - this works at the state level. Your component AND its children won't re-render.

💡 The Magic:

❌ This ALWAYS Re-renders:

function UserList() {
  const [users, setUsers] = useState([]);

  const addUser = (newUser) => {
    // Even if user already exists, this triggers re-render!
    setUsers([...users, newUser]);
  };

  return <ExpensiveList users={users} />;
}

✅ Smart Bail Out Pattern:

function UserList() {
  const [users, setUsers] = useState([]);

  const addUser = (newUser) => {
    setUsers(prevUsers => {
      // If user exists, return SAME array reference
      if (prevUsers.some(u => u.id === newUser.id)) {
        return prevUsers;  // 🚀 React skips render!
      }
      return [...prevUsers, newUser];
    });
  };

  return <ExpensiveList users={users} />;
}

🔥 Advanced: Conditional Updates Only:

function FilteredProducts() {
  const [filters, setFilters] = useState({
    category: 'all',
    priceRange: [0, 1000],
    inStock: false
  });

  const updateFilter = (key, value) => {
    setFilters(prev => {
      // Bail out if value hasn't actually changed
      if (prev[key] === value) {
        return prev;  // ✨ No render if nothing changed!
      }
      return { ...prev, [key]: value };
    });
  };

  return <ProductGrid filters={filters} />;
}

💪 Real-World: Smart Form State:

function useSmartForm(initialValues) {
  const [values, setValues] = useState(initialValues);
  const [errors, setErrors] = useState({});

  const updateField = useCallback((name, value) => {
    setValues(prev => {
      // Deep equality check - bail if truly unchanged
      if (JSON.stringify(prev[name]) === JSON.stringify(value)) {
        return prev;  // 🎯 Skip unnecessary validations!
      }

      return { ...prev, [name]: value };
    });
  }, []);

  return { values, updateField, errors };
}

// Usage:
function ProfileForm() {
  const { values, updateField } = useSmartForm({
    name: 'John',
    email: 'john@example.com'
  });

  // Typing same value won't trigger re-render! 🎉
  return (
    <input 
      value={values.name}
      onChange={(e) => updateField('name', e.target.value)}
    />
  );
}

🔥 Bonus: API Calls With Bail Out:

function useDataFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);

  const fetchData = useCallback(async () => {
    setLoading(true);

    const result = await fetch(url);
    const json = await result.json();

    setData(prevData => {
      // Don't update if data is identical
      if (JSON.stringify(prevData) === JSON.stringify(json)) {
        return prevData;  // 🎯 Skip render + child updates!
      }
      return json;
    });

    setLoading(false);
  }, [url]);

  return { data, loading, fetchData };
}

📊 The Performance Impact:

🚀 Eliminates 30-50% of unnecessary renders
⚡ Fewer child component updates
💰 Reduced React reconciliation work
🎮 Smoother UI, especially in forms and lists

PS: Don't add bail-out condition using JSON.stringify initially itself while writing code as comparing using JSON.stringify is slower for larger objects. Use this as an optimization step.

3. React Anti-Pattern: "useState for Derived Data" Mistake

If you can calculate it from existing state/props, DON'T put it in useState.

This bug pattern creates sync issues that haunt production.

The Problem:

Storing calculated/derived values in state creates two sources of truth. They get out of sync, causing difficult-to-debug issues.

❌ The Anti-Pattern (Double State):

function ShoppingCart({ items }) {
  const [cartItems, setCartItems] = useState(items);
  const [totalPrice, setTotalPrice] = useState(0);  // 🚨 Derived!
  const [itemCount, setItemCount] = useState(0);    // 🚨 Derived!
  const [hasDiscount, setHasDiscount] = useState(false);  // 🚨 Derived!

  // 🚨 Must remember to update ALL state together
  const addItem = (item) => {
    const newItems = [...cartItems, item];
    setCartItems(newItems);
    setTotalPrice(calculateTotal(newItems));  // Easy to forget!
    setItemCount(newItems.length);
    setHasDiscount(calculateTotal(newItems) > 100);
  };

  // 😱 BUG: What if you forget to update one?
  // totalPrice and itemCount are now OUT OF SYNC!

  return (
    <div>
      <p>Items: {itemCount}</p>
      <p>Total: ${totalPrice}</p>
      {hasDiscount && <p>Discount applied!</p>}
    </div>
  );
}

✅ The Correct Way (Single Source of Truth):

function ShoppingCart({ items }) {
 const [cartItems, setCartItems] = useState(items);

  // ✨ Calculate derived values - always in sync!
 const totalPrice = cartItems.reduce((sum, item) => sum + item.price, 0);
 const itemCount = cartItems.length;
 const hasDiscount = totalPrice > 100;

 // ✨ Only update ONE state - everything else auto-updates!
 const addItem = (item) => {
   setCartItems([...cartItems, item]);
   // That's it! No need to update anything else! 🎉
 };

 return (
   <div>
     <p>Items: {itemCount}</p>
     <p>Total: ${totalPrice}</p>
      {hasDiscount && <p>Discount applied!</p>}
   </div>
  );
}

✨ Common Derived State Examples:

1. Filtered Lists:

// ❌ BAD - Double state
function ProductList({ products }) {
  const [searchTerm, setSearchTerm] = useState('');
  const [filteredProducts, setFilteredProducts] = useState(products);  // 🚨 Derived!

  const handleSearch = (term) => {
    setSearchTerm(term);
    setFilteredProducts(products.filter(p => p.name.includes(term)));  // Can get out of sync!
  };

  return <div>...</div>;
}

// ✅ GOOD - Single source
function ProductList({ products }) {
  const [searchTerm, setSearchTerm] = useState('');

  // ✨ Always calculated from current values
  const filteredProducts = products.filter(p =>
    p.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return <div>...</div>;
}

✨ Common Derived State Examples:

2. Form Validation:

// ❌ BAD - Validation state separate
function SignupForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [isValid, setIsValid] = useState(false);  // 🚨 Derived!

  const handleEmailChange = (e) => {
    setEmail(e.target.value);
    // 😱 Forgot to update isValid!
  };

  const handlePasswordChange = (e) => {
    setPassword(e.target.value);
    setIsValid(password.length >= 8 && email.includes('@'));  // Out of sync!
  };

  return <button disabled={!isValid}>Sign Up</button>;
}

// ✅ GOOD - Validation derived
function SignupForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  // ✨ Always accurate
  const isEmailValid = email.includes('@');
  const isPasswordValid = password.length >= 8;
  const isFormValid = isEmailValid && isPasswordValid;

  return <button disabled={!isFormValid}>Sign Up</button>;
}

✨ Common Derived State Examples:

3. Totals & Calculations:

// ❌ BAD - Sync nightmare
function Invoice({ items }) {
  const [invoiceItems, setInvoiceItems] = useState(items);
  const [subtotal, setSubtotal] = useState(0);  // 🚨 Derived!
  const [tax, setTax] = useState(0);            // 🚨 Derived!
  const [total, setTotal] = useState(0);        // 🚨 Derived!

  const addItem = (item) => {
    const newItems = [...invoiceItems, item];
    const newSubtotal = calculateSubtotal(newItems);
    const newTax = newSubtotal * 0.1;

    setInvoiceItems(newItems);
    setSubtotal(newSubtotal);
    setTax(newTax);
    setTotal(newSubtotal + newTax);

    // 😱 So many places to make mistakes!
  };

  return <div>Total: ${total}</div>;
}

// ✅ GOOD - Single calculation
function Invoice({ items }) {
  const [invoiceItems, setInvoiceItems] = useState(items);

  // ✨ All calculated from ONE source
  const subtotal = invoiceItems.reduce((sum, item) => sum + item.price, 0);
  const tax = subtotal * 0.1;
  const total = subtotal + tax;

  const addItem = (item) => {
    setInvoiceItems([...invoiceItems, item]);
    // ✨ Done! Everything else updates automatically!
  };

  return <div>Total: ${total.toFixed(2)}</div>;
}

🎯 Performance Concern? Use useMemo:

function DataDashboard({ transactions }) {
  const [dateRange, setDateRange] = useState('month');
  const [category, setCategory] = useState('all');

  // ✨ Expensive calculation? Memoize it!
  const filteredTransactions = useMemo(() => {
    return transactions
      .filter(t => matchesDateRange(t, dateRange))
      .filter(t => category === 'all' || t.category === category);
  }, [transactions, dateRange, category]);

  const totalAmount = useMemo(() => 
    filteredTransactions.reduce((sum, t) => sum + t.amount, 0),
    [filteredTransactions]
  );

  const averageAmount = totalAmount / filteredTransactions.length || 0;

  return (
    <div>
      <p>Total: ${totalAmount}</p>
      <p>Average: ${averageAmount.toFixed(2)}</p>
      <p>Count: {filteredTransactions.length}</p>
    </div>
  );
}

💎 The Golden Rules:

// Ask yourself: "Can I calculate this from other state/props?"

// If YES → Don't use useState!
const fullName = `${firstName} ${lastName}`;  // ✅ Derived
const isValid = email.includes('@');          // ✅ Derived
const total = items.reduce(...);              // ✅ Derived

// If NO → Use useState
const [firstName, setFirstName] = useState('');  // ✅ User input
const [isModalOpen, setIsModalOpen] = useState(false);  // ✅ UI state
const [data, setData] = useState(null);  // ✅ Fetched data

🚨 Red Flags - You Probably Have Derived State:

// 🚨 Red Flag #1: Multiple setState calls together
const handleChange = () => {
  setState1(newValue);
  setState2(calculateFromNewValue);  // Derived!
  setState3(calculateOther);  // Derived!
};

// 🚨 Red Flag #2: useEffect to sync states
useEffect(() => {
  setDerivedValue(calculate(sourceValue));
}, [sourceValue]);  // Just calculate it directly!

// 🚨 Red Flag #3: State that depends on other state
const [total, setTotal] = useState(0);
const [count, setCount] = useState(0);
const [average, setAverage] = useState(0);  // total / count = derived!

📊 Comparison:

// With Derived State (useState):
✖ 4 useState calls
✖ Must update 4 states together
✖ Easy to forget one → bugs!
✖ Hard to maintain
✖ Out of sync bugs in production

// Without Derived State (calculate):
✅ 1 useState call
✅ Update 1 state, rest auto-updates
✅ Impossible to get out of sync
✅ Easy to maintain
✅ No sync bugs possible

🎯 Real Production Bug - Fixed:

// The Bug
function CheckoutForm() {
  const [items, setItems] = useState([]);
  const [total, setTotal] = useState(0);

  const addItem = (item) => {
    setItems([...items, item]);
    // 😱 Forgot to update total!
  };

  // User sees $0 total, thinks checkout is broken!
}

// The Fix:
function CheckoutForm() {
  const [items, setItems] = useState([]);
  const total = items.reduce((sum, item) => sum + item.price, 0);

  const addItem = (item) => {
    setItems([...items, item]);
    // ✨ Total automatically updates!
  };
}

4. Best React/Next.js Tool: The "Knip" Dead Code Eliminator

Your codebase has 1000+ unused files and imports you don't even know about!

Knip finds them ALL in 10 seconds. This tool is a game-changer!

The Problem:

Dead code accumulates over time. Unused files, unused exports, orphaned components - they slow builds, confuse developers, and waste time!

❌ Manual Cleanup (Impossible):

# Your project:
src/
├── components/
│   ├── Button.jsx           # Used? 🤔
│   ├── OldButton.jsx        # Used? 🤔
│   ├── LegacyModal.jsx      # Used? 🤔
│   ├── DeprecatedForm.jsx   # Used? 🤔
│   └── ... 500 more files

# Manually checking each file? 😱
# Takes weeks, error-prone, nobody does it!

✅ Knip to the Rescue (Automated!):

# Install Knip
npm install -D knip

# Run it
npx knip

# Output - BOOM! 💥
✖ Unused files (47)
  src/components/OldButton.jsx
  src/components/LegacyModal.jsx
  src/components/DeprecatedForm.jsx
  src/utils/oldHelpers.js
  ... 43 more files

✖ Unused dependencies (12)
  lodash-es (in package.json)
  moment (in package.json)
  ... 10 more

✖ Unused exports (156)
  export const oldFunction (src/utils/helpers.js)
  export const deprecatedHook (src/hooks/useOldApi.js)
  ... 154 more

Total wasted: 47 files, 12 dependencies, 156 exports
Potential savings: 2.3 MB bundle size 🚀

🔥 Real Example - Before/After:

Before Running Knip:

My React project:
- 1,247 files
- 89 npm packages
- 15.2 MB node_modules
- 487 KB production bundle
- Build time: 45 seconds
- "Which components are actually used?" 🤷‍♂️

After Running Knip:

npx knip

# Found:
# - 47 unused files
# - 12 unused dependencies
# - 156 unused exports
# - 23 duplicate exports

# Cleaned up:
✅ Deleted 47 unused files
✅ Removed 12 unused packages
✅ Removed 156 unused exports
✅ Fixed 23 duplicates

My React project now:
- 1,200 files (47 less!)
- 77 npm packages (12 less!)
- 12.8 MB node_modules (2.4 MB saved!)
- 412 KB production bundle (75 KB saved!)
- Build time: 38 seconds (7s faster!)
- Clean, confident codebase! ✨

✅ What Knip Finds:

1. Unused Files:

✖ src/components/OldButton.jsx
  → Not imported anywhere
  → Safe to delete! 🗑️

✖ src/pages/BetaFeature.jsx
  → Not in routes
  → Remove or add to router

✖ src/utils/deprecatedHelpers.js
  → No imports found
  → Delete it!

2. Unused Dependencies:

✖ lodash (in package.json)
  → Never imported
  → npm uninstall lodash
  → Save 72 KB!

✖ moment (in package.json)
  → Replaced with date-fns
  → npm uninstall moment
  → Save 231 KB!

✖ react-router-dom v5 (in package.json)
  → Upgraded to v6, forgot to remove
  → npm uninstall react-router-dom@5

3. Unused Exports:

// src/utils/helpers.ts
export const oldFunction = () => {};  // ✖ Never imported
export const deprecatedUtil = () => {};  // ✖ Never imported
export const usedFunction = () => {};  // ✅ Used in 12 places

// Knip tells you: Remove first two exports!

4. Duplicate Exports:

// ✖ src/components/Button/index.ts
export { Button } from './Button';

// ✖ src/components/index.ts  
export { Button } from './Button';  // Duplicate!

// Knip warns: Same export in multiple places!

5. Unlisted Dependencies:

// src/App.tsx
import axios from 'axios';  // ✖ Not in package.json!

// Knip says: Add axios to dependencies!

📦 Knip Works With:

✅ React
✅ Next.js
✅ Remix
✅ Vite
✅ TypeScript
✅ JavaScript
✅ Turborepo/Nx (monorepos)
✅ Webpack/Rollup/esbuild

Enjoying these tips? Download the complete collection of 50+ React Pro Tips Ebook.

5. React Security Disaster: The "ENV Variables"

Your .env file is leaking API keys into the frontend bundle!

Every user can see your secrets in 10 seconds. This mistake costs companies MILLIONS in stolen API credits.

The Problem:

React embeds ALL env variables starting with REACT_APP_ or VITE_ directly into your JavaScript bundle. Anyone can read them!

❌ The Security Nightmare:

# .env file
REACT_APP_API_KEY=sk_live_51HxT8fhj3k2l...  # 🚨 EXPOSED!
REACT_APP_STRIPE_SECRET=sk_test_xyz123...    # 🚨 EXPOSED!
REACT_APP_DATABASE_URL=mongodb://admin:pass@... # 🚨 EXPOSED!
REACT_APP_AWS_SECRET_KEY=AKIAI...            # 🚨 EXPOSED!

// Your React code
function App() {
  const apiKey = process.env.REACT_APP_API_KEY;  // 🚨 In bundle!

  fetch('https://api.stripe.com/charges', {
    headers: {
      'Authorization': `Bearer ${apiKey}`
    }
  });
}

// What users see in browser DevTools → Sources → main.js:
// const apiKey = "sk_live_51HxT8fhj3k2l...";  😱
// Copy → Paste → FREE API ACCESS!
// Your keys are PUBLIC! 💀

🔥 How Hackers Find Your Keys:

# Method 1: View source
# Right-click → View Page Source
# Search for: "api", "key", "secret", "token"
# Found in 3 seconds! 😱

# Method 2: Check bundle files
# DevTools → Sources → static/js/main.chunk.js
# Search for: "REACT_APP_"
# All your env variables visible! 💀

# Method 3: Automated scanning
# Hackers run scripts that:
# 1. Download your main.js
# 2. Search for patterns (sk_live_, api_key, etc.)
# 3. Extract all secrets
# 4. Use your API for free!

# Result:
# - $50K Stripe bill from unauthorized charges
# - AWS account compromised
# - Database exposed
# - Company bankrupt! 🔥

✅ What's Safe vs Unsafe:

# SAFE - Public information (goes in .env)

REACT_APP_API_URL=https://api.myapp.com  # Public endpoint ✅
REACT_APP_APP_VERSION=1.2.3              # Version number ✅
REACT_APP_FEATURE_FLAG_X=true            # Feature flag ✅
REACT_APP_GOOGLE_MAPS_KEY=AIza...        # Public API key* ✅
REACT_APP_SENTRY_DSN=https://...         # Public DSN ✅

# UNSAFE - Secrets (NEVER in frontend!)

REACT_APP_STRIPE_SECRET_KEY=sk_live_...  # SECRET! 🚨
REACT_APP_DATABASE_PASSWORD=mysecret123  # SECRET! 🚨
REACT_APP_JWT_SECRET=supersecret         # SECRET! 🚨
REACT_APP_OPENAI_API_KEY=sk-proj-...     # SECRET! 🚨
REACT_APP_AWS_SECRET=AKIAI...            # SECRET! 🚨

💪 The Correct Architecture:

// ❌ WRONG - Secret in frontend
function Payment({ amount }) {
  const stripeSecret = process.env.REACT_APP_STRIPE_SECRET;  // 🚨 EXPOSED!

  fetch('https://api.stripe.com/v1/charges', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${stripeSecret}` // 💀 Anyone can charge!
    },
    body: JSON.stringify({ amount })
  });
}

// ✅ CORRECT - Secret on backend
// Frontend:
function Payment({ amount }) {
  // ✨ No secrets! Only public API URL
  fetch('/api/create-charge', {  // Your backend endpoint
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${userToken}`  // User's session token
    },
    body: JSON.stringify({ amount })
  });
}

// Backend (Node.js example):
app.post('/api/create-charge', authenticateUser, async (req, res) => {
  // ✨ Secret stays on server, never sent to client!
  const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

  try {
    const charge = await stripe.charges.create({
      amount: req.body.amount,
      currency: 'usd',
      source: req.body.token
    });

    res.json({ success: true, chargeId: charge.id });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

😱 Real Attack Example:

// Your code:
const openaiKey = process.env.REACT_APP_OPENAI_KEY;

fetch('https://api.openai.com/v1/chat/completions', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${openaiKey}`
  },
  body: JSON.stringify({
    model: 'gpt-4',
    messages: [{ role: 'user', content: userInput }]
  })
});

// What happens:
// 1. Hacker opens your site
// 2. Checks main.js bundle
// 3. Finds: "sk-proj-abc123xyz..."
// 4. Copies key
// 5. Makes 10,000 GPT-4 requests
// 6. Your bill: $15,000! 💀
// 7. OpenAI suspends your account
// 8. Your app breaks
// 9. Company loses customers

// This happens DAILY to startups! 🚨

🔥 The Correct Pattern:

// ✅ Frontend - No secrets
function ChatBot() {
  const [message, setMessage] = useState('');
  const [response, setResponse] = useState('');

  const sendMessage = async () => {
    // ✨ Call YOUR backend, not OpenAI directly!
    const res = await fetch('/api/chat', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${getUserToken()}`  // User's session
      },
      body: JSON.stringify({ message })
    });

    const data = await res.json();
    setResponse(data.reply);
  };

  return (
    ....
  );
}

// ✅ Backend - Secrets safe here
app.post('/api/chat', authenticateUser, async (req, res) => {
  // ✨ Secret only exists on server!
  const openai = new OpenAI({
    apiKey: process.env.OPENAI_API_KEY  // Never sent to client!
  });

  // Rate limiting per user
  const userRequests = await checkUserRateLimit(req.user.id);
  if (userRequests > 100) {
    return res.status(429).json({ error: 'Rate limit exceeded' });
  }

  const completion = await openai.chat.completions.create({
    model: 'gpt-3.5-turbo',  // Cheaper model for users
    messages: [{ role: 'user', content: req.body.message }],
    max_tokens: 150  // Limit cost per request
  });

  res.json({ reply: completion.choices[0].message.content });
});

6. React Object Mutation Trap: The "Mutate State Directly" Silent Bug

You mutate state objects/arrays directly and React doesn't re-render! Changes happen in memory but UI stays frozen.

Users see stale data, clicks don't work, forms don't update. This invisible mutation bug corrupts apps silently.

The Problem:

React detects changes by comparing references.

Mutate object in place = same reference = React thinks nothing changed = no re-render!

❌ Direct Mutation (React Misses It):

function TodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: 'Buy milk', done: false },
    { id: 2, text: 'Walk dog', done: false },
    { id: 3, text: 'Write code', done: false }
  ]);

  const toggleTodo = (id) => {
    const todo = todos.find(t => t.id === id);
    // 🚨 MUTATING the object directly!
    todo.done = !todo.done;

    // 🚨 Setting same array reference!
    setTodos(todos);  // 💀 React sees: old array === new array → no re-render!
  };

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>
          <input 
            type="checkbox"
            checked={todo.done}
            onChange={() => toggleTodo(todo.id)}
          />
          {todo.text}
        </li>
      ))}
    </ul>
  );
}

✅ Create New Reference (Immutable Update):

function TodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: 'Buy milk', done: false },
    { id: 2, text: 'Walk dog', done: false },
    { id: 3, text: 'Write code', done: false }
  ]);

  const toggleTodo = (id) => {
    // ✨ Create NEW array with NEW objects!
    setTodos(todos.map(todo =>
      todo.id === id
        ? { ...todo, done: !todo.done }  // ✨ New object!
        : todo  // Keep existing objects unchanged
    ));
  };

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>
          <input 
            type="checkbox"
            checked={todo.done}
            onChange={() => toggleTodo(todo.id)}
          />
          {todo.text}
        </li>
      ))}
    </ul>
  );
}

// Now:
// 1. User clicks checkbox for "Buy milk"
// 2. toggleTodo(1) called
// 3. ✨ .map creates NEW array
// 4. ✨ For id=1: { ...todo, done: !todo.done } creates NEW object
// 5. ✨ For id=2,3: returns existing objects (no change)
// 6. setTodos([newObj1, oldObj2, oldObj3])
// 7. ✅ React compares: oldArray !== newArray → TRUE!
// 8. ✅ React thinks: "Different reference, state changed!"
// 9. ✅ RE-RENDER triggered!
// 10. ✅ Checkbox updates on screen!
// 11. User happy! ✨

// React's comparison:
// prevState !== nextState → Re-render! ✅
// [1,2,3] !== [1,2,3]  // Different array objects!

🔥 Real Mutation Bugs:

Bug 1: Nested Object Mutation

function UserSettings() {
  const [user, setUser] = useState({
    name: 'John',
    settings: {
      theme: 'light',
      notifications: {
        email: true,
        push: false
      }
    }
  });

  const toggleEmail = () => {
    // 🚨 DEEP mutation!
    user.settings.notifications.email = !user.settings.notifications.email;
    setUser(user);  // 💀 Same reference!
  };

  return (
    <div>
      <h1>{user.name}</h1>
      <label>
        <input 
          type="checkbox"
          checked={user.settings.notifications.email}
          onChange={toggleEmail}
        />
        Email Notifications
      </label>
    </div>
  );
}

// Bug:
// 1. User clicks checkbox
// 2. toggleEmail() called
// 3. 💀 Mutates deep nested property
// 4. setUser(user) - same object reference
// 5. 💀 React doesn't re-render!
// 6. Checkbox doesn't update
// 7. User clicks 5 more times
// 8. 💀 Still no visual change!
// 9. Data in memory: true → false → true → false...
// 10. UI shows: true (frozen) 💀

// ✅ Fix: Immutable deep update
const toggleEmail = () => {
  setUser({
    ...user,  // ✨ Copy top level
    settings: {
      ...user.settings,  // ✨ Copy second level
      notifications: {
        ...user.settings.notifications,  // ✨ Copy third level
        email: !user.settings.notifications.email  // ✨ Change value
      }
    }
  });
};

// Or use immer for easier deep updates:
import { produce } from 'immer';

const toggleEmail = () => {
  setUser(produce(draft => {
    draft.settings.notifications.email = !draft.settings.notifications.email;
    // ✨ Immer creates new object behind the scenes!
  }));
};

Bug 2: Array Push/Splice Mutation

function ShoppingCart() {
  const [items, setItems] = useState([]);

  const addItem = (product) => {
    // 🚨 MUTATING array!
    items.push(product);  // 💀 Modifies original array!
    setItems(items);  // 💀 Same reference!
  };

  const removeItem = (index) => {
    // 🚨 MUTATING array!
    items.splice(index, 1);  // 💀 Modifies original array!
    setItems(items);  // 💀 Same reference!
  };

  return (
    <div>
      <p>Cart: {items.length} items</p>
      {items.map((item, index) => (
        <div key={index}>
          {item.name} - ${item.price}
          <button onClick={() => removeItem(index)}>Remove</button>
        </div>
      ))}
      <button onClick={() => addItem({ name: 'Widget', price: 10 })}>
        Add Widget
      </button>
    </div>
  );
}

// Bug:
// 1. User clicks "Add Widget"
// 2. addItem() called
// 3. items.push() mutates array: [] → [widget]
// 4. setItems(items) - same array reference
// 5. 💀 React doesn't re-render!
// 6. UI still shows: "Cart: 0 items" 💀
// 7. User clicks "Add" 5 more times
// 8. Array in memory: [w, w, w, w, w, w]
// 9. UI still shows: "Cart: 0 items" 💀
// 10. User refreshes page
// 11. Cart data lost (wasn't persisted)
// 12. User: "I added 6 items! Where are they?!" 😡

// ✅ Fix: Immutable operations
const addItem = (product) => {
  setItems([...items, product]);  // ✨ New array!
};

const removeItem = (index) => {
  setItems(items.filter((_, i) => i !== index));  // ✨ New array!
};

// Or:
const addItem = (product) => {
  setItems(prevItems => [...prevItems, product]);
};

const removeItem = (index) => {
  setItems(prevItems => prevItems.filter((_, i) => i !== index));
};

Bug 3: Sort Mutation

function ProductList({ products }) {
  const [sortedProducts, setSortedProducts] = useState(products);
  const [sortOrder, setSortOrder] = useState('asc');

  const handleSort = () => {
    // 🚨 MUTATING array!
    sortedProducts.sort((a, b) => {
      return sortOrder === 'asc' 
        ? a.price - b.price 
        : b.price - a.price;
    });

    setSortedProducts(sortedProducts);  // 💀 Same reference!
    setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
  };

  return (
    <div>
      <button onClick={handleSort}>
        Sort by Price ({sortOrder})
      </button>
      {sortedProducts.map(product => (
        <div key={product.id}>
          {product.name} - ${product.price}
        </div>
      ))}
    </div>
  );
}

// Bug:
// 1. User clicks "Sort by Price (asc)"
// 2. handleSort() called
// 3. sortedProducts.sort() mutates array in place
// 4. setSortedProducts(sortedProducts) - same reference
// 5. 💀 React doesn't re-render sortedProducts!
// 6. setSortOrder('desc') triggers re-render
// 7. ✅ Button text updates: "(desc)"
// 8. 💀 But product list DOESN'T re-sort!
// 9. User sees: Button says "desc" but list is still "asc" order
// 10. Clicks again
// 11. 💀 Still no visual change to list!
// 12. UI state inconsistent! 💀

// ✅ Fix: Create new sorted array
const handleSort = () => {
  const newOrder = sortOrder === 'asc' ? 'desc' : 'asc';

  const sorted = [...sortedProducts].sort((a, b) => {  // ✨ Copy first!
    return newOrder === 'asc' 
      ? a.price - b.price 
      : b.price - a.price;
  });

  setSortedProducts(sorted);  // ✨ New array!
  setSortOrder(newOrder);
};

💪 Mutation Methods to AVOID:

// ❌ Array mutations (modify original)
array.push(item)           // Use: [...array, item]
array.pop()                // Use: array.slice(0, -1)
array.shift()              // Use: array.slice(1)
array.unshift(item)        // Use: [item, ...array]
array.splice(i, 1)         // Use: array.filter((_, index) => index !== i)
array.sort()               // Use: [...array].sort()
array.reverse()            // Use: [...array].reverse()
array[i] = value           // Use: array.map((item, index) => index === i ? value : item)

// ❌ Object mutations (modify original)
object.property = value    // Use: { ...object, property: value }
delete object.property     // Use: const { property, ...rest } = object; return rest;
Object.assign(object, {})  // Use: { ...object, ...newProps }

// ✅ Immutable alternatives
// Arrays:
[...array, newItem]                    // Add to end
[newItem, ...array]                    // Add to start
array.filter(item => item.id !== id)   // Remove
array.map(item => item.id === id ? newItem : item)  // Update
[...array].sort()                      // Sort
array.slice(0, index).concat(array.slice(index + 1))  // Remove at index

// Objects:
{ ...object, key: newValue }           // Update property
{ ...object, nested: { ...object.nested, key: value } }  // Deep update
const { removeThis, ...keep } = object; keep;  // Remove property

📊 Mutation Detection:

// React's state comparison:

// Primitives (compared by value):
const [count, setCount] = useState(0);
setCount(0);  // 0 === 0 → No re-render ✅
setCount(1);  // 0 !== 1 → Re-render ✅

// Objects/Arrays (compared by reference):
const [obj, setObj] = useState({ a: 1 });

// ❌ Mutation (same reference):
obj.a = 2;
setObj(obj);  // obj === obj → No re-render 💀

// ✅ New object (different reference):
setObj({ ...obj, a: 2 });  // oldObj !== newObj → Re-render ✅

// Why mutation fails:
const array1 = [1, 2, 3];
array1.push(4);  // Mutates array1
array1 === array1  // Still TRUE! Same reference!

const array2 = [1, 2, 3];
const array3 = [...array2, 4];  // New array
array2 === array3  // FALSE! Different references!

// React uses Object.is() for comparison:
Object.is(oldState, newState)
// If TRUE → Skip re-render
// If FALSE → Trigger re-render

✨ Immutable Update Patterns:

// Pattern 1: Array - Add item
setArray([...array, newItem]);
setArray(prev => [...prev, newItem]);

// Pattern 2: Array - Remove item
setArray(array.filter(item => item.id !== id));
setArray(prev => prev.filter(item => item.id !== id));

// Pattern 3: Array - Update item
setArray(array.map(item => 
  item.id === id ? { ...item, name: 'New' } : item
));

// Pattern 4: Array - Replace at index
setArray(array.map((item, i) => 
  i === index ? newItem : item
));

// Pattern 5: Object - Update property
setObject({ ...object, key: value });
setObject(prev => ({ ...prev, key: value }));

// Pattern 6: Object - Update nested
setObject({
  ...object,
  nested: {
    ...object.nested,
    deepKey: value
  }
});

// Pattern 7: Object - Remove property
const { removeKey, ...rest } = object;
setObject(rest);

// Pattern 8: Object - Merge
setObject({ ...object, ...updates });

// Pattern 9: Array of objects - Update one
setArray(array.map(obj =>
  obj.id === id ? { ...obj, done: !obj.done } : obj
));

// Pattern 10: Complex nested update (use immer)
import { produce } from 'immer';

setData(produce(draft => {
  draft.users[0].profile.settings.theme = 'dark';
  // ✨ Immer handles immutability!
}));

7. React Accessibility Trap: The "div onClick" Keyboard Trap

Your clickable divs are INVISIBLE to keyboard users! 15% of users can't use your app because you used onClick on div instead of button.

This is a lawsuit waiting to happen. This pattern destroys production performance.

The Problem:

Divs aren't keyboard accessible. Screen readers skip them. Tab key ignores them. You just blocked millions of users!

❌ The Accessibility Disaster:

function ProductCard({ product, onAddToCart }) {
  return (
    <div className="product-card">
      <img src={product.image} alt={product.name} />
      <h3>{product.name}</h3>
      <p>${product.price}</p>

      {/* 🚨 ACCESSIBILITY NIGHTMARE! */}
      <div 
        className="add-to-cart-button"
        onClick={() => onAddToCart(product.id)}
      >
        Add to Cart
      </div>
    </div>
  );
}

// What happens for keyboard users:
// 1. User presses Tab key
// 2. ❌ Focus skips the "button" (it's a div!)
// 3. User can't reach "Add to Cart"
// 4. User can't buy product
// 5. You lost a customer! 💀

// What happens for screen reader users:
// 1. Screen reader reads page
// 2. ❌ Announces "Add to Cart" as text, not a button
// 3. User doesn't know it's clickable
// 4. No way to activate it with voice commands
// 5. User leaves frustrated! 😡

// What happens legally:
// 1. User files ADA complaint
// 2. Company faces lawsuit
// 3. Settlement: $50,000-$500,000
// 4. Mandatory accessibility audit: $30,000
// 5. Remediation work: $100,000+
// Total cost: $180,000+ for using <div> instead of <button>! 💀

✅ Accessible Button (Correct):

function ProductCard({ product, onAddToCart }) {
  return (
    <div className="product-card">
      <img src={product.image} alt={product.name} />
      <h3>{product.name}</h3>
      <p>${product.price}</p>

      {/* ✨ ACCESSIBLE! */}
      <button 
        className="add-to-cart-button"
        onClick={() => onAddToCart(product.id)}
      >
        Add to Cart
      </button>
    </div>
  );
}

// What happens now:
// Keyboard users:
// 1. Tab key focuses the button
// 2. Enter/Space activates it
// 3. Can add to cart!

// Screen reader users:
// 1. Announces "Add to Cart, button"
// 2. User knows it's interactive
// 3. Voice commands work: "Click Add to Cart button"
// 4. Can buy product!

// Legal compliance:
// ✅ WCAG 2.1 compliant
// ✅ ADA compliant
// ✅ Section 508 compliant
// ✅ No lawsuits!

🔥 Real Accessibility Issues:

Issue 1: Modal Close Button

// ❌ BAD - Keyboard trap!
function Modal({ isOpen, onClose, children }) {
  if (!isOpen) return null;

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal">
        {/* 🚨 Not keyboard accessible! */}
        <div className="close-button" onClick={onClose}>
          ×
        </div>
        {children}
      </div>
    </div>
  );
}

// Keyboard user:
// 1. Opens modal
// 2. Presses Tab to close
// 3. ❌ Can't focus on × button
// 4. Presses Esc key
// 5. ❌ Nothing happens (no keyboard handler!)
// 6. 💀 TRAPPED IN MODAL FOREVER!

// ✅ GOOD - Fully accessible
function Modal({ isOpen, onClose, children }) {
  if (!isOpen) return null;

  // ✨ Close on Escape key
  useEffect(() => {
    const handleEscape = (e) => {
      if (e.key === 'Escape') onClose();
    };

    document.addEventListener('keydown', handleEscape);
    return () => document.removeEventListener('keydown', handleEscape);
  }, [onClose]);

  return (
    <div 
      className="modal-overlay" 
      onClick={onClose}
      role="dialog"  // ✨ Semantic role
      aria-modal="true"  // ✨ Tells screen readers it's a modal
    >
      <div className="modal">
        {/* ✨ Real button! */}
        <button 
          className="close-button" 
          onClick={onClose}
          aria-label="Close modal"  // ✨ Screen reader text
        >
          ×
        </button>
        {children}
      </div>
    </div>
  );
}

// Now:
// 1. Tab focuses close button
// 2. Enter/Space closes modal
// 3. Escape key closes modal
// 4. Screen reader announces "Close modal, button"
// 5. No one trapped!

Issue 2: Card Click

// ❌ BAD - Entire card clickable with div
function ProductCard({ product }) {
  const navigate = useNavigate();

  return (
    <div 
      className="product-card"
      onClick={() => navigate(`/products/${product.id}`)}
      style={{ cursor: 'pointer' }}  // 🚨 Looks clickable, but...
    >
      <img src={product.image} alt={product.name} />
      <h3>{product.name}</h3>
      <p>${product.price}</p>
    </div>
  );
}

// Problems:
// ❌ Can't Tab to card
// ❌ Can't activate with keyboard
// ❌ Screen reader doesn't know it's clickable
// ❌ Can't use with voice commands

// ✅ GOOD - Semantic link
function ProductCard({ product }) {
  return (
    <article className="product-card">
      {/* ✨ Wrap in link for navigation */}
      <Link 
        to={`/products/${product.id}`}
        className="product-link"
      >
        <img src={product.image} alt={product.name} />
        <h3>{product.name}</h3>
        <p>${product.price}</p>
      </Link>
    </article>
  );
}

// Or if it's an action, not navigation:
function ProductCard({ product, onQuickView }) {
  return (
    <article className="product-card">
      <img src={product.image} alt={product.name} />
      <h3>{product.name}</h3>
      <p>${product.price}</p>

      {/* ✨ Button for action */}
      <button onClick={() => onQuickView(product)}>
        Quick View
      </button>
    </article>
  );
}

// Now:
// 1. Tab to focus
// 2. Enter to activate
// 3. Screen reader: "Link, {product.name}" or "Button, Quick View"
// 4. Voice commands work

💪 The Keyboard Navigation Rules:

// Rule 1: Navigation = <Link> or <a>
// ✅ CORRECT
<Link to="/dashboard">Dashboard</Link>
<a href="/dashboard">Dashboard</a>

// ❌ WRONG
<div onClick={() => navigate('/dashboard')}>Dashboard</div>

// Rule 2: Actions = <button>
// ✅ CORRECT
<button onClick={handleSubmit}>Submit</button>
<button onClick={handleDelete}>Delete</button>

// ❌ WRONG
<div onClick={handleSubmit}>Submit</div>
<span onClick={handleDelete}>Delete</span>

// Rule 3: If it looks clickable, make it focusable
// ✅ CORRECT
<button className="icon-button">
  <Icon name="trash" />
</button>

// ❌ WRONG
<div className="icon-button" onClick={handleClick}>
  <Icon name="trash" />
</div>

// Rule 4: Custom interactive elements need tabIndex and role
// ✅ ONLY if you absolutely can't use button/link
<div
  role="button"
  tabIndex={0}
  onClick={handleClick}
  onKeyDown={(e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      handleClick();
    }
  }}
>
  Custom Button
</div>

// But seriously, just use <button>! ✨

📊 Accessibility Impact:

Your e-commerce site with div buttons:

Users affected:
├─ Keyboard-only users: 5-10% of all users
├─ Screen reader users: 1-2%
├─ Voice control users: 2-3%
├─ Motor disability users: 3-5%
├─ Temporary disability (broken mouse): 5%
└─ Total: 15-20% of potential customers! 💀

If you have 100,000 monthly visitors:
├─ 15,000-20,000 can't use your site
├─ Average order value: $50
├─ Conversion rate: 2%
├─ Lost revenue: $15,000-$20,000/month
└─ Annual: $180,000-$240,000 lost! 💸

Plus legal risk:
├─ ADA lawsuit settlements: $50K-$500K
├─ Remediation costs: $50K-$200K
└─ Reputation damage: Priceless 💀

Fix: Replace <div onClick> with <button>
Cost: 5 minutes
Savings: Hundreds of thousands of dollars!

🔥 ESLint Rules:

// .eslintrc.js
{
  "plugins": ["jsx-a11y"],
  "rules": {
    // ✨ Catches clickable divs!
    "jsx-a11y/no-static-element-interactions": "error",
    "jsx-a11y/click-events-have-key-events": "error",
    "jsx-a11y/no-noninteractive-element-interactions": "error",

    // ✨ Enforces proper roles
    "jsx-a11y/role-has-required-aria-props": "error",

    // ✨ Requires alt text on images
    "jsx-a11y/alt-text": "error"
  }
}

// Install:
npm install --save-dev eslint-plugin-jsx-a11y

// Now ESLint will catch:
<div onClick={handleClick}>  // ❌ Error!
// ⚠️ Visible, non-interactive elements with click handlers
//    must have at least one keyboard listener

<button onClick={handleClick}>  // ✅ No error!

💡 Testing Accessibility:

Manual test (takes 2 minutes):
1. Unplug your mouse
2. Use only Tab key to navigate
3. Can you reach every interactive element?
4. Can you activate them with Enter/Space?

If NO to any → You have accessibility issues!

Automated tools:
├─ axe DevTools (Chrome extension)
├─ Lighthouse (Chrome DevTools)
├─ WAVE (Browser extension)
└─ React axe (in development)

Screen reader test:
├─ Mac: Turn on VoiceOver (Cmd+F5)
├─ Windows: Turn on Narrator (Ctrl+Win+Enter)
├─ Navigate your site
└─ Do interactive elements announce correctly?

🎯 The Checklist:

For every interactive element:

☑️ Can you Tab to it?
☑️ Can you activate with Enter/Space?
☑️ Does screen reader announce it correctly?
☑️ Does it have visible focus indicator?
☑️ Can you use it without a mouse?

If NO to any:
✅ Use <button> for actions
✅ Use <a> or <Link> for navigation
✅ Add proper ARIA labels
✅ Add keyboard event handlers
✅ Test with keyboard only

🚨 Legal Reality:

Recent accessibility lawsuits:

Domino's Pizza: $4,000 + legal fees + remediation
Winn-Dixie: $100,000 settlement
Target: $6 million settlement
Bank of America: $3.5 million

Common violation: Clickable divs without keyboard access

Your risk:
├─ Anyone can file ADA complaint
├─ No warning required
├─ Settlements average $50K-$500K
└─ Plus your legal fees and remediation

Prevention cost: Use <button> instead of <div onClick>
Literally free! Just better HTML! ✨

8. React Async Trap: The "Promise Race Condition" Bug That Corrupts Data

Your async code shows wrong data and you have NO IDEA why! Fast clicks create race conditions that display stale responses. This bug is invisible until production.

The Problem:

Multiple async requests racing - the last one to START wins, but the last one to FINISH displays!

❌ The Race Condition:

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // 🚨 No cleanup! Race condition waiting to happen!
    fetchUser(userId).then(data => {
      setUser(data);
    });
  }, [userId]);

  return <div>{user?.name}</div>;
}

// Bug scenario:
// 1. User clicks Profile #1 (slow server, takes 3 seconds)
// 2. User quickly clicks Profile #2 (fast server, takes 0.5 seconds)
// 3. Profile #2 loads: ✅ Shows User #2 (correct)
// 4. Profile #1 finishes: 😱 Shows User #1 (WRONG!)
// 5. URL says "profile/2" but shows User #1 data!
// Data corruption! User confused! 💀

// Timeline:
// 0.0s: Request User #1 (start)
// 0.1s: Request User #2 (start)  ← Should cancel #1!
// 0.6s: User #2 arrives, setUser(#2)  ✅
// 3.0s: User #1 arrives, setUser(#1)  😱 OVERWRITES!
// Result: Shows User #1 in User #2's profile!

✅ Fix #1 - Abort Controller:

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // ✨ Create abort controller
    const controller = new AbortController();

    fetchUser(userId, { signal: controller.signal })
      .then(data => {
        setUser(data);
      })
      .catch(error => {
        if (error.name !== 'AbortError') {
          console.error('Fetch error:', error);
        }
        // AbortError is expected when switching users
      });

    // ✨ Cleanup: Cancel previous request!
    return () => {
      controller.abort();
    };
  }, [userId]);

  return <div>{user?.name}</div>;
}

// Now:
// 1. Request User #1 starts
// 2. User clicks User #2
// 3. ✨ useEffect cleanup runs → abort Request #1
// 4. Request #2 starts
// 5. Only User #2 data displays!
// No race condition! ✨

✅ Fix #2 - Ignore Stale Responses:

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    let isCurrent = true;  // ✨ Track if this effect is still relevant

    fetchUser(userId).then(data => {
      // ✨ Only update if this is still the current userId
      if (isCurrent) {
        setUser(data);
      } else {
        console.log('Ignoring stale response for userId:', userId);
      }
    });

    // ✨ Cleanup: Mark as stale
    return () => {
      isCurrent = false;
    };
  }, [userId]);

  return <div>{user?.name}</div>;
}

// Now:
// 1. Request User #1, isCurrent = true
// 2. User clicks User #2
// 3. ✨ Cleanup runs: isCurrent (for #1) = false
// 4. Request User #2, new isCurrent = true
// 5. User #2 arrives: isCurrent = true → setUser ✅
// 6. User #1 arrives late: isCurrent = false → ignored! ✨

🔥 Real Bug Examples:

Bug 1: Search Results

function SearchResults({ query }) {
  const [results, setResults] = useState([]);

  useEffect(() => {
    // 🚨 Race condition!
    searchAPI(query).then(data => {
      setResults(data);
    });
  }, [query]);

  return results.map(r => <Result key={r.id} {...r} />);
}

// User types fast: "r" → "re" → "rea" → "reac" → "react"
// 5 requests fired!
// 😱 Results arrive in random order!
// 😱 Shows results for "rea" even though query is "react"!
// User confused: "Why am I seeing results for 'rea'?"

// ✅ Fix with AbortController:
useEffect(() => {
  const controller = new AbortController();

  searchAPI(query, { signal: controller.signal })
    .then(data => setResults(data))
    .catch(err => {
      if (err.name !== 'AbortError') console.error(err);
    });

  return () => controller.abort();
}, [query]);

// Now only the last search completes! ✨

🔥 Real Bug Examples:

Bug 2: Product Page

function ProductPage({ productId }) {
  const [product, setProduct] = useState(null);
  const [reviews, setReviews] = useState([]);

  useEffect(() => {
    // 🚨 Two independent race conditions!
    fetchProduct(productId).then(setProduct);
    fetchReviews(productId).then(setReviews);
  }, [productId]);

  return (
    <div>
      <h1>{product?.name}</h1>
      <Reviews reviews={reviews} />
    </div>
  );
}

// Bug:
// 1. User on Product #1
// 2. Clicks Product #2
// 3. Product #2 data loads fast ✅
// 4. Product #1 reviews load slow
// 5. 😱 Shows Product #2 details with Product #1 reviews!
// Mismatch! Wrong reviews displayed!

// ✅ Fix: Abort both requests
useEffect(() => {
  const controller = new AbortController();

  Promise.all([
    fetchProduct(productId, { signal: controller.signal }),
    fetchReviews(productId, { signal: controller.signal })
  ])
    .then(([productData, reviewsData]) => {
      setProduct(productData);
      setReviews(reviewsData);
    })
    .catch(err => {
      if (err.name !== 'AbortError') console.error(err);
    });

  return () => controller.abort();
}, [productId]);

💪 Axios with Cancellation:

import axios from 'axios';

function DataFetcher({ id }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    // ✨ Create cancel token
    const source = axios.CancelToken.source();

    axios.get(`/api/data/${id}`, {
      cancelToken: source.token
    })
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        if (!axios.isCancel(error)) {
          console.error('Error:', error);
        }
      });

    // ✨ Cancel on cleanup
    return () => {
      source.cancel('Component unmounted or id changed');
    };
  }, [id]);

  return <div>{data?.name}</div>;
}

🔥 React Query - Built-in Cancellation:

import { useQuery } from '@tanstack/react-query';

function UserProfile({ userId }) {
  // ✨ React Query handles race conditions automatically!
  const { data: user, isLoading, error } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetchUser(userId)
  });

  if (isLoading) return <Spinner />;
  if (error) return <Error error={error} />;

  return <div>{user.name}</div>;
}

// React Query automatically:
// 1. Cancels old requests
// 2. Deduplicates requests
// 3. Caches results
// 4. Handles race conditions
// No manual cleanup needed! 🎉

😍 SWR Alternative:

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then(res => res.json());

function UserProfile({ userId }) {
  // ✨ SWR handles race conditions too!
  const { data: user, error, isLoading } = useSWR(
    `/api/users/${userId}`,
    fetcher
  );

  if (isLoading) return <Spinner />;
  if (error) return <Error error={error} />;

  return <div>{user.name}</div>;
}

// SWR benefits:
// - Automatic race condition handling
// - Caching
// - Revalidation
// - Focus revalidation

🚨 Common Mistakes:

// ❌ MISTAKE #1: Aborting but not handling the error
useEffect(() => {
  const controller = new AbortController();

  fetch(url, { signal: controller.signal })
    .then(res => res.json())
    .then(setData);
    // 🚨 No .catch! AbortError will be unhandled!

  return () => controller.abort();
}, [url]);

// ✅ FIX: Always catch AbortError
.catch(err => {
  if (err.name !== 'AbortError') {
    console.error(err);
  }
});

// ❌ MISTAKE #2: Forgetting to pass signal
useEffect(() => {
  const controller = new AbortController();

  fetch(url);  // 🚨 Missing { signal: controller.signal }!

  return () => controller.abort();  // Does nothing!
}, [url]);

// ✅ FIX: Pass signal to fetch
fetch(url, { signal: controller.signal });

🚨 Common Mistakes:

// ❌ MISTAKE #3: Creating new controller on every render
const controller = new AbortController();  // 🚨 Outside useEffect!

useEffect(() => {
  fetch(url, { signal: controller.signal });
  return () => controller.abort();
}, [url]);

// ✅ FIX: Create inside useEffect
useEffect(() => {
  const controller = new AbortController();
  // ...
}, [url]);

😍 Ways To Fix:

1. Add AbortController (manual)
2. Add isCurrent flag (manual)
3. Use React Query (automatic)
4. Use SWR (automatic)

9. React's Anti-Pattern: Using Index As a Key

Using array index as key? You're creating silent bugs that corrupt user data! This mistake breaks forms, loses selections, and causes weird UI glitches.

The Problem:

Using index as key seems to work, but causes subtle bugs that are IMPOSSIBLE to debug!

❌ The Index Key Disaster:

function TodoList({ todos }) {
  return todos.map((todo, index) => (
    <TodoItem 
      key={index}  // 🚨 DANGEROUS!
      todo={todo}
    />
  ));
}

// Looks fine, but watch what happens...

// Initial list:
// [0] Buy milk
// [1] Walk dog
// [2] Code review

// User deletes "Walk dog" (index 1)
// React sees keys: 0, 1
// Old keys were: 0, 1, 2

// React thinks:
// - Key 0: Still there ✓
// - Key 1: Still there, but CONTENT changed (was "Walk dog", now "Code review")
// - Key 2: Removed

// 😱 React re-renders key 1 with NEW content!
// 😱 If TodoItem has internal state (checkbox, input), it's PRESERVED!
// 😱 User checked "Walk dog", but now "Code review" is checked!

🔥 Real Bug Example - Checkbox Corruption:

function TodoItem({ todo }) {
  const [isEditing, setIsEditing] = useState(false);
  const [inputValue, setInputValue] = useState(todo.text);

  return (
    <div>
      <input type="checkbox" defaultChecked={todo.completed} />

      {isEditing ? (
        <input 
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
        />
      ) : (
        <span>{todo.text}</span>
      )}

      <button onClick={() => setIsEditing(!isEditing)}>Edit</button>
    </div>
  );
}

function TodoList({ todos }) {
  return todos.map((todo, index) => (
    <TodoItem key={index} todo={todo} />  // 🚨 BUG!
  ));
}

// Bug reproduction:
// 1. User checks "Buy milk" (index 0)
// 2. User starts editing "Walk dog" (index 1)
// 3. User deletes "Buy milk" (index 0)
// 4. 😱 "Walk dog" moves to index 0
// 5. 😱 But React preserves state for index 0!
// 6. 😱 "Walk dog" now shows as checked (was "Buy milk")
// 7. 😱 Edit mode is lost!
// User data corrupted! 💀

✅ The Correct Way - Stable ID:

function TodoList({ todos }) {
  return todos.map((todo) => (
    <TodoItem 
      key={todo.id}  // ✨ Use unique, stable ID!
      todo={todo}
    />
  ));
}

// Now when "Walk dog" is deleted:
// React sees keys: "abc123", "xyz789"
// Old keys were: "abc123", "def456", "xyz789"

// React thinks:
// - "abc123": Still there ✓
// - "def456": Removed! Unmount it
// - "xyz789": Still there ✓

// ✨ React correctly removes the middle item!
// ✨ No state confusion!
// ✨ Checkboxes stay with correct items!

💪 When You Don't Have IDs:

// ❌ DON'T: Use index
todos.map((todo, index) => <Item key={index} />)

// ❌ DON'T: Generate random keys
todos.map((todo) => <Item key={Math.random()} />)
// Random keys remount components every render!

// ✅ DO: Generate stable IDs once
const todosWithIds = todos.map((todo) => ({
  ...todo,
  id: todo.id || `${todo.text}-${Date.now()}-${Math.random()}`
}));

// ✅ DO: Use UUID library
import { v4 as uuidv4 } from 'uuid';

const addTodo = (text) => {
  const newTodo = {
    id: uuidv4(),  // Generates unique ID
    text,
    completed: false
  };
  setTodos([...todos, newTodo]);
};

// ✅ DO: Use crypto.randomUUID (modern browsers)
const newTodo = {
  id: crypto.randomUUID(),  // Native browser API!
  text: 'New task'
};

⚡️When Index IS Okay:

// ✅ ONLY use index when ALL these are true:

// 1. List never reorders
// 2. List never filters
// 3. List never adds/removes items
// 4. Items have no internal state
// 5. List is purely static display

// Example - Static display list:
const FEATURES = ['Fast', 'Secure', 'Reliable'];

function FeatureList() {
  return FEATURES.map((feature, index) => (
    <li key={index}>  {/* ✅ OK here - list never changes */}
      {feature}
    </li>
  ));
}

// But if list CAN change → use IDs!

✅ Generating Keys - The Right Way:

// ✅ Option 1: Backend provides IDs
const todos = [
  { id: 1, text: 'Buy milk' },
  { id: 2, text: 'Walk dog' }
];

// ✅ Option 2: Generate when adding
const [todos, setTodos] = useState([]);

const addTodo = (text) => {
  setTodos([
    ...todos,
    {
      id: Date.now(),  // Timestamp as ID (good for local state)
      text
    }
  ]);
};

// ✅ Option 3: UUID library
import { v4 as uuidv4 } from 'uuid';

const addTodo = (text) => {
  setTodos([
    ...todos,
    {
      id: uuidv4(),  // Universally unique
      text
    }
  ]);
};

// ✅ Option 4: Crypto API (no dependencies!)
const addTodo = (text) => {
  setTodos([
    ...todos,
    {
      id: crypto.randomUUID(),  // Browser native!
      text
    }
  ]);
};

// ✅ Option 5: Compound key for nested lists
<TodoItem 
  key={`${todoId}-${subtaskId}`}  // Combine parent + child ID
  task={subtask}
/>

📊 The Performance Impact:

Scenario: List of 1000 items, delete one from middle

❌ With index keys:
 - React re-renders ALL 999 remaining items
 - Each item's state potentially corrupted
 - Time: 450ms
 - Bugs: Many! 🐛🐛🐛

✅ With proper IDs:
 - React removes exactly 1 item
 - Other 999 items unchanged
 - Time: 5ms
 - Bugs: None! ✨

 90x faster + zero bugs!

10. React Pro Secret: The "Data Fetching in Parallel" Pattern

Stop waiting for API calls one-by-one! Fetch in parallel and cut your loading time by 70%. This is how the pros do it!

The Problem:

Sequential API calls make users wait unnecessarily. Each request blocks the next one!

❌ Slow Sequential Fetching:

function Dashboard() {
  const [user, setUser] = useState(null);
  const [posts, setPosts] = useState([]);
  const [comments, setComments] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      // 🚨 Waits at-least 1s for user
      const userData = await fetch('/api/user').then(r => r.json());
      setUser(userData);

      // 🚨 Waits at-least 1s for posts
      const postsData = await fetch('/api/posts').then(r => r.json());
      setPosts(postsData);

      // 🚨 Waits at-least 1s for comments
      const commentsData = await fetch('/api/comments').then(r => r.json());
      setComments(commentsData);

      setLoading(false);
    };

    fetchData();
  }, []);

  // Total time: at-least 3 seconds! 😱

  if (loading) return <Spinner />;
  return <div>...</div>;
}

✅ Fast Parallel Fetching:

function Dashboard() {
  const [user, setUser] = useState(null);
  const [posts, setPosts] = useState([]);
  const [comments, setComments] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      // ✨ All requests fire at once!
      const [userData, postsData, commentsData] = await Promise.all([
        fetch('/api/user').then(r => r.json()),
        fetch('/api/posts').then(r => r.json()),
        fetch('/api/comments').then(r => r.json())
      ]);

      setUser(userData);
      setPosts(postsData);
      setComments(commentsData);
      setLoading(false);
    };

    fetchData();
  }, []);

  // Total time: 1 second (fastest request)! 🎉

  if (loading) return <Spinner />;
  return <div>...</div>;
}

🔥 Better - Show Data as It Arrives:

function Dashboard() {
  const [user, setUser] = useState(null);
  const [posts, setPosts] = useState(null);
  const [comments, setComments] = useState(null);

  useEffect(() => {
    // ✨ Fire all requests, update as each completes
    fetch('/api/user')
      .then(r => r.json())
      .then(setUser);

    fetch('/api/posts')
      .then(r => r.json())
      .then(setPosts);

    fetch('/api/comments')
      .then(r => r.json())
      .then(setComments);
  }, []);

  // ✨ Show each section as data arrives!
  return (
    <div>
      {user ? <UserProfile user={user} /> : <UserSkeleton />}
      {posts ? <PostsList posts={posts} /> : <PostsSkeleton />}
      {comments ? <CommentsFeed comments={comments} /> : <CommentsSkeleton />}
    </div>
  );
}

// User sees content progressively - much better UX! 🎨

✨ Key Methods:

// Promise.all - Wait for all, fail if any fails
const results = await Promise.all([fetch1, fetch2, fetch3]);

// Promise.allSettled - Wait for all, never fails
const results = await Promise.allSettled([fetch1, fetch2, fetch3]);

// Promise.race - Use first to complete
const result = await Promise.race([fetch1, fetch2, fetch3]);

// Promise.any - Use first success, fail only if all fail
const result = await Promise.any([fetch1, fetch2, fetch3]);

💡 When to Use Each:

Promise.all: All requests must succeed (default choice)
Promise.allSettled: Some can fail, show partial data
Promise.race: Use fastest response (redundant APIs)
Promise.any: Fallback APIs (use first working one)

Found these tips useful? Download the complete ebook with 50+ such React tips from React 50+ Pro Tips Ebook.

Connect With Me

• Check out my all courses

• GitHub

Zustand vs Redux Toolkit Usage

Weekly Downloads Zustand vs Redux Toolkit

Many industry projects are nowadays preferrring Zustand for creating applications. So in this article you will learn how to get started with Zustand in a React application.

So let’s get started.

Zustand is a simple and fast state management library for React applications. It is easy to use, especially for beginners, and a great alternative to more complex libraries like Redux and Redux Toolkit.

Why Use Zustand?

• Very easy to learn: Minimal API surface and very little setup required.

• Small and fast: Less bundle size and efficient updates.

• Works with hooks: Feels native to modern React development.

• No provider needed: Just one function and you're set!

Why Zustand over Redux?

• Less boilerplate

• Simple and un-opinionated

• Makes hooks the primary means of consuming state

Why Zustand over Context?

• Less boilerplate

• Renders components only on store data used in component changes

• Centralized, action-based state management

Want to learn through video? click the link below for a preview video from my Zustand Course.

For more such FREE previews, check out the course page.

Installing Zustand

To add Zustand to your React project, execute the following command in your terminal:

npm install zustand

Core Concepts

• Store: Central place to keep your state and the functions (actions) to change it.

• State: The data you want to keep track of.

• Actions: Functions that update the state.

• Hooks: Functions you use inside your components to read and update the state.

Basic Example: Counter App

Let's go through a simple example, a counter app:

1. Create the Store

First, make a new file (for example, store/counterStore.js):

import { create } from 'zustand'

const useCounterStore = create((set, get) => ({
  count: 0,
  increment: () => set({ count: get().count + 1 }),
  decrement: () => set({ count: get().count - 1 })
}));

export default useCounterStore;

This store defines:

• count: the state variable

• increment and decrement: actions (functions) to update the count

Note that, we have given useCounterStore as the name for the store, because every store created with Zustand is a custom which which we can directly access in any of the functional component.

2. Use the Store in a Component

In your React component (e.g., Counter.js):

import React from 'react'
import useCounterStore from './store/counterStore'

function Counter() {
  const count = useCounterStore(state => state.count);
  const increment = useCounterStore(state => state.increment);
  const decrement = useCounterStore(state => state.decrement);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  )
}

export default Counter

That’s it!

This way you can create as many stores as you want, one for storing profile information, another for storing authentication information and so on.

Also, as you can see, to use Zustand store, you don’t need to write a lot of boilerplate code like Redux or Redux Toolkit.

You also don’t need to wrap your entire application with the Provider component from react-redux.

So using Zustand, makes it to really easy to manage state of your entire application.

How Zustand Works

• Direct store usage: Components call the useCounterStore hook directly.

• Automatic updates: Zustand ensures your components re-render only when the part of the state they use changes.

• No boilerplate or provider: Just create the store and use it; no extra setup needed.

When Should You Use Zustand?

• Managing shared or global state (e.g., theme, authentication, shopping cart).

• When useState and useContext become hard to manage.

• In both small and large applications - Zustand scales easily.

Extra Features

• Selectors: Access only parts of the state to avoid unnecessary re-renders.

• Middleware support: Add features like logging or persistence easily.

• Multiple stores: Split state into smaller stores for bigger apps.

• Works with TypeScript: Define types for safety and better developer experience.

Summary Table: Key Concepts

Learn Zustand Basics and Build 2 large applications using React + TypeScript + Zustand + React Hook Form + Zod Validation in this video course. Bonus Offer Available Only For Today.

Build Ecommerce App Using Zustand - Application Demo

Connect With Me

• Check out my other courses

• GitHub

One of the most noticeable differences is the absence of a tailwind.config.js file when creating a new Next.js application. This has left many developers confused, especially when trying to follow tutorials or videos that use Tailwind CSS v3.

While mentoring on Codementor, I have seen many developers struggling with this issue.

If you're one of them, don't worry! Here's a step-by-step guide on how to use Tailwind CSS v3 in your Next.js and React.js project.

Why Downgrade to Tailwind CSS v3?

While Tailwind CSS v4 offers many exciting features, some developers might prefer to stick with v3 for various reasons, such as compatibility issues or familiarity with existing projects. Whatever your reason, downgrading is straightforward.

Steps to Downgrade to Tailwind CSS v3

Step 1: Uninstall Tailwind CSS v4

First, you need to uninstall the installed Tailwind CSS v4. You can do this by running the following command in your terminal:

npm uninstall tailwindcss

Step 2: Install Tailwind CSS v3

Next, install Tailwind CSS v3 along with other necessary dependencies using the following command:

npm install -D tailwindcss@3.4.17 postcss autoprefixer

Step 3: Create a Tailwind Config File

Now, create a tailwind.config.js file by executing this command:

npx tailwindcss init -p

Step 4: Configure the Content Array

Open the newly created tailwind.config.js file and update the content array to include your project's paths.

• For Next.js Projects:
  Replace the existing content with the following code:

content: [
  "./pages/**/*.{js,ts,jsx,tsx,mdx}",
  "./components/**/*.{js,ts,jsx,tsx,mdx}",
  "./app/**/*.{js,ts,jsx,tsx,mdx}",
],

• For Vite + React.js Projects:
  Use the following configuration instead:

content: [
  "./pages/**/*.{js,ts,jsx,tsx,mdx}",
  "./components/**/*.{js,ts,jsx,tsx,mdx}",
  "./app/**/*.{js,ts,jsx,tsx,mdx}",
],

Step 5: Update Your Global CSS File

Finally, add the following lines to your main global.css/index.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

You're Done!

By following these steps, you should now have Tailwind CSS v3 up and running in your Next.js and React.js project.

This setup will allow you to continue using the features and configurations you're familiar with from v3, making it easier to follow older tutorials or maintain existing projects.

Happy coding!

Connect With Me

• 🔥 Master React In 20 Days Training Application Source Code

• 🚀 Master Next.js 15: From Basics to Advanced

• 📹 Connect With Me

• 🔗 GitHub

Why Should You Care About Next.js 15?

Next.js isn’t just another framework; it’s the gold standard for building modern web applications. With features like:

• Dynamic Routing for seamless navigation

• Server and Client Components for optimal performance

• Server Actions for API handling

• SEO & Image Optimization for search engine dominance

… mastering Next.js isn’t just a skill, it’s a superpower in today’s tech landscape.

But where do you start? How do you go from beginner to expert without feeling overwhelmed? That’s where "Mastering Next.js 15: From Basics to Advanced" comes in!

Course Launch Offer Price - $10 / ₹800 ( Regular Price $19 / ₹1520)

Check out the FREE preview of video content from the course by visiting the course page.

What’s Inside the Course?

In "Mastering Next.js 15: From Basics to Advanced", you’ll learn everything you need to know, whether you’re just starting or looking to refine your skills.

🎓 This Is NOT Your Typical Next.js Course! 🚀

When it comes to learning, I believe the best way to master something is by making mistakes and learning from them — and that’s exactly what sets "Mastering Next.js 15: From Basics to Advanced" apart.

In this course, we’re not just writing clean, error-free code. Instead, you’ll dive into real-world scenarios where errors happen, just like in actual development.

Here’s what makes this course different.

🔥 Learn Through Errors
I’ll walk you through:

• Understanding the error messages and their root causes.

• Debugging effectively to pinpoint issues.

• Fixing errors step by step, ensuring you gain the skills and confidence to handle challenges in any project.

💡 By the end of this course, you won’t just know how to build with Next.js—you’ll know how to troubleshoot, debug, and solve problems, making you a more resilient and resourceful developer.

Whether you're just starting out or a seasoned developer, this course will help you master Next.js 15’s newest features:

→ Server Actions

→ Advanced Error Handling

→ React 19 Form Hooks

→ React Hook Form With Zod Validation

→ Auth.js (NextAuth v5)

→ Prisma Integration

🔑 What You’ll Gain:

✅ Master Next.js 15 fundamentals.

✅ Build real-world, production-ready projects.

✅ Learn advanced server-side rendering, server actions, and optimizations.

✅ Manage security issues in server actions and learn how to fix them.

✅ Master Prisma for modern database workflows.

🛠 What You’ll Learn Inside the Course:

🔹 Server Actions: Simplify backend logic by writing server-side operations directly in React components.

🔹 Error Handling: Build resilient apps with route-specific error boundaries and customizable error pages.

🔹 Forms Made Easy: Learn React 19’s useActionState and useFormStatus and other hooks.

Use react-hook-form with zod validation for user-friendly, scalable forms.

Learn to validate forms at both frontend and backend without duplicating the same logic using zod schema.

🔹 Prisma Integration: Manage your database effortlessly with schema design, efficient queries, and smooth migrations.

🔹 Auth.js (NextAuth v5): Set up secure, scalable authentication flows for your app using GitHub and Google Authentication.

This course is hands-on, with interactive coding exercises, downloadable resources, and real-world projects that you can showcase in your portfolio.

Who Is This Course For?

Whether you’re:

• A beginner looking to learn Next.js from scratch

• A React developer eager to expand your skillset

• A professional developer wanting to stay ahead in the industry

… this course is designed to meet you where you are and take you to the next level.

Why Choose This Course?

Here’s why "Mastering Next.js 15: From Basics to Advanced" stands out:

1. Up-to-date content covering the latest features of Next.js 15.

2. Project-based learning — you’ll walk away with project you can show off.

3. Clear, engaging explanations

4. Access to an exclusive discord community for ongoing support, and to clear your doubts

Don’t Just Take My Word For It…

Here’s what past students have to say about my courses:

Enroll Now and Start Building the Future!

Don’t let the world of modern web development pass you by. Take control of your career and master Next.js 15 with this all-encompassing course.

🎯 Enroll Now to take the first step toward becoming a Next.js expert!

🕒 Limited-Time Offer: Course launch discounts offer is ending in 2 days(22nd January).

Let’s turn your dreams into code and your code into impact. See you in the course!

Connect With Me

• Get All Current + Future Courses/Ebooks At Just $25 / ₹2000 (Offer Ends On 22nd January)

• 📹 Subscribe on YouTube

• 🔗 GitHub

💰 $20 / ₹1600 (originally $132 / ₹10,560)

🎓 Included Courses & Ebooks:

• Getting Started With Redux, Redux Toolkit And Becoming Pro (2024 Edition)

• Build Book Management App with React + Firebase + Google Books API + Tailwind CSS

• Build Library Management System Using React, Shadcn/ui, Supabase, and React Query

• MERN Stack Masterclass

• Build Expense Manager App Using React And TypeScript

• React Router 6 Course

• Learn React In 30 Days

• Mastering Redux Course

• Learn React — 3 Hours Live Masterclass

• React Router 5 Course

• Mastering Modern JavaScript Ebook

• 130+ Tips, Tricks & Resources Ebook

👉 Grab This Deal Now

🎉 Why Choose This Offer?

• Pay Once, Access Forever: No monthly or yearly subscriptions.

• Future-Proof: Get lifetime access to all current and upcoming content.

📚 Coming Soon: Next.js 15 Masterclass!

Releasing 1st December 2024, this course will help you master Next.js 15 with hands-on projects:

1️⃣ Event Management App

Key Features:

• 🔐 NextAuth v5: Secure login.

• 🗂️ Prisma ORM: Database operations with PostgreSQL.

• 🎟️ Event Workflows: Seamlessly manage events.
  👉 Watch the Preview

2️⃣ Online Quiz Management System

Key Features:

• 🧠 Dynamic topic-based quizzes.

• ⏱️ Timers, progress tracking, and post-quiz insights.

• 🗒️ Quiz history and score reviews.
  Tech Stack: Next.js 15, MongoDB, Express.js
  👉 Check the Demo

🚨 Act Now!

This is the biggest discount of the year, and it ends today. Don’t miss out on leveling up your skills at this unbeatable price!

👉 Get Lifetime Access for $20 / ₹1600 Now

Connect With Me

• 💻 Follow on LinkedIn

• 📹 Subscribe on YouTube

• 🔗 GitHub

Black Friday Sale: 85% Off — Don’t Miss It!
👉 Master JavaScript, React, and Node.js

In this 1+ hour video tutorial, you will learn to build a library management system application from scratch using React, Supabase, Shadcn/ui, and React Query.

What's Included

This application includes the following screens:

1. Dashboard - To see a list of all books with filter and pagination functionality

2. Add Book - A way to add a new book

3. Students List - To see a list of all students with filter and pagination functionality

4. Add Student - A way to add a new student

5. Issue Book - A way to assign a new book to a student (a maximum of 10 books can be issued to each student)

6. Return Book - A way to return an already issued book from a student

7. Student Analytics - A way to see a list of all books assigned to students searchable by student ID

8. Books Chart - A bar chart showing books assigned to students that are searchable by student ID. The chart shows how many books are issued per month and the list of books issued, on click on each bar from the bar chart

9. Forgot password. - A way to reset the password if ever forgotten

Technologies Used

For this application, we're using:

1. React for building Frontend

2. Supabase is a database for storage and authentication - available for free

3. Shadcn/ui library which is the most popular and highly customizable component library that uses Tailwind CSS for styling

4. TanStack Query ( React Query ) - The most popular React library for implementing caching to avoid fetching data on every page visit

As we're using React, we don't have to worry about hosting as we can host on any hosting provider like Netlify, Vercel, AWS or any of your favorite hosting providers.

As we're using the Shadcn/ui library, we can also easily customize the application to the theme or colors of our choice.

Thanks for Reading!

Want to stay up to date with regular content regarding JavaScript, React, and Node.js? Follow me on LinkedIn.

• My Courses: https://courses.yogeshchavan.dev/

• My Blog: https://blog.yogeshchavan.dev/

• My LinkedIn: https://www.linkedin.com/in/yogesh-chavan97/

• My GitHub: https://github.com/myogeshchavan97/

Check out the video above to see a demo of the library management system application built using React.

What's Included

This application includes the following screens:

1. Dashboard - To see a list of all books with filter and pagination functionality

2. Add Book - A way to add a new book

3. Students List - To see a list of all students with filter and pagination functionality

4. Add Student - A way to add a new student

5. Issue Book - A way to assign a new book to a student (a maximum of 10 books can be issued to each student)

6. Return Book - A way to return an already issued book from a student

7. Student Analytics - A way to see a list of all books assigned to students searchable by student ID

8. Books Chart - A bar chart showing books assigned to students that are searchable by student ID. The chart shows how many books are issued per month and the list of books issued, on click on each bar from the bar chart

9. Forgot password. - A way to reset the password if ever forgotten

Technologies Used

For this application, we're using:

1. React for building Frontend

2. Supabase is a database for storage and authentication - available for free

3. Shadcn/ui library which is the most popular and highly customizable component library that uses Tailwind CSS for styling

4. TanStack Query ( React Query ) - The most popular React library for implementing caching to avoid fetching data on every page visit

As we're using React, we don't have to worry about hosting as we can host on any hosting provider like Netlify, Vercel, AWS or any of your favorite hosting providers.

As we're using the Shadcn/ui library, we can also easily customize the application to the theme or colors of our choice.

Thanks for Reading!

Want to learn more about the application or want to see a live demo of the application? connect me on yogesh@yogeshchavan.dev

Want to stay up to date with regular content regarding JavaScript, React, and Node.js? Follow me on LinkedIn.

• My Courses: https://courses.yogeshchavan.dev/

• My Blog: https://blog.yogeshchavan.dev/

• My LinkedIn: https://www.linkedin.com/in/yogesh-chavan97/

• My GitHub: https://github.com/myogeshchavan97/

So let's get started.

Want to watch the video version of this tutorial? You can check out the video below:

How We Usually Debug Node.js Application

If we want to debug any Node.js application, usually we add a console.log statement in the code that we want to debug to find out the value of any variable.

It works but you need to keep checking the console log to see the value that you're trying to print.

But If the data printed in the console contains nested objects or if it's a lot of data then using console.log is not feasible.

So there is a better way.

Adding Debugger To Debug The Code

Instead, we can add a debugger; statement in the code that we want to debug.

So let's say we have an Express.js API route for registering a user as shown in the code below:

// controllers/auth.js

const register = async (req, res) => {
  try {
    const { email, password } = req.body;
    const existingUser = await User.findOne({
      email,
    });
    if (existingUser) {
      return res.status(400).send('User with the provided email already exist');
    }
    // some more code
    return res.status(201).send();
  } catch (error) {
    console.log(error);
    return res
      .status(500)
      .send('Error while registering a new user. Try again later.');
  }
};

module.exports = { register };

// routes/auth.js
const { register } = require('../controllers/auth');

const Router = express.Router();

Router.post('/api/register', register);

And there is some issue while registering a user so we want to debug the register function code.

In that case, you can just add a debugger; statement inside the register function code like this:

const register = async (req, res) => {
  try {
    const { email, password } = req.body;
    debugger;
    const existingUser = await User.findOne({
      email,
    });
    if (existingUser) {
      return res.status(400).send('User with the provided email already exist');
    }
    // some more code
    return res.status(201).send();
  } catch (error) {
    console.log(error);
    return res
      .status(500)
      .send('Error while registering a new user. Try again later.');
  }
};

How To Run The Application For Debugging

Normally, we start our Node.js application by executing the following command:

node index.js

but instead, you can execute the following command:

node inspect index.js

Here, we just added an inspect keyword in between.

If your main application file name is server.js you can execute node inspect server.js command

Once you execute the above command, you will see the output displayed as shown below:

As you can see from the output, the debugger is attached, so now we can start debugging the code.

To do that, open the Chrome browser and enter chrome://inspect in the browser URL.

You will see the output as shown below:

as we have executed node inspect index.js command to start inspecting, you can see a new target entry displayed under the Remote Target section.

Now, If you click on the displayed blue inspect link, then you will see a new browser dev tool opened as shown below:

As you can see in the right panel in the above image, Debugger paused message is displayed, and the debugging control is at the first line of code as you can see from the highlighted yellow line.

But we don't want to start debugging from the first line of code, instead, we want to just debug the registration code, so click on the blue triangle icon which is displayed just above the Debugger paused message as shown below:

Now don't close this window, instead try registering a user from the application or by making an API call using Postman, so the /register route handler code that we added previously will be executed.

As you can see above, when we click on create new account button, we're automatically redirected to the code where we added the debugger; statement.

Now, we can debug the code line by line and see the values of each variable during debugging to find out and fix the issue.

Accessing Variables During Debugging

Sometimes when we mouse over any variable while debugging to see its actual value, the value might be too long because it might be an object with many properties, so we can't see it easily by doing mouseover.

In that case, while the debugger is still active, we can open the console tab and type the name of the variable whose value we want to see as you can see in the below Gif:

So that's how we can easily debug any of the Node.js application code.

Creating Script To Debug

If you don't want to manually type the node inspect index.js command every time in the terminal, you can create a new debug script inside the package.json file like this:

"scripts": {
    "start": "node index.js",
    "debug": "node inspect index.js",
    "dev": "nodemon index.js"
},

So now, you can execute npm run debug command to start your application in debug mode.

Quick Recap

To debug a Node.js application, you need to follow the below steps:

• Add a debugger statement inside the code that you want to debug

• Run node inspect index.js or node inspect server.js command to start the application in debug mode

• Access the URL chrome://inspect in your Chrome browser

• Click on the inspect link under the Remote Target section

• Click on the blue triangle icon to skip debugging, If you don't want to start debugging your application from the first line of index.js or server.js file

• Make an API call or do something that will trigger the code, where you added the debugger; statement

• This way you can debug the code line by line and find out the issue

Thanks for Reading

That's it for this tutorial. I hope you learned something new.

Want to watch the video version of this tutorial? You can check out this video.

If you want to master JavaScript, ES6+, React, and Node.js with easy-to-understand content, check out my YouTube channel. Don't forget to subscribe.

Want to stay up to date with regular content on JavaScript, React, and Node.js? Follow me on LinkedIn.

In this 6+ hours video course, you will learn the basics of MERN Stack From Scratch and then build and deploy a complete full-stack Link sharing App.

In this MERN Stack course, you will learn:

✅ how to implement secure cookie-based authentication
✅ how to use redux toolkit for managing application state
✅ how to allow uploading image of specific dimension and type
✅ how to upload images to Cloudinary
✅ how to create protected routes
✅ how to implement copy to clipboard functionality
✅ how to implement lazy loading in react
✅ how to use react context API to share data between components
✅ how to maintain logged in user session
✅ how to implement smooth animation with drag-and-drop functionality
✅ how to add skeleton loading effect
✅ how to properly display backend unhandled errors on frontend
✅ how to deploy this fullstack application on production

and much more...

Thanks for Reading!

If you want to master JavaScript, ES6+, React and Node.js with easy-to-understand content, do check out my YouTube channel and don't forget to subscribe.

Want to stay up to date with regular content regarding JavaScript, React, Node.js? Follow me on LinkedIn.

The following are some of the reasons for making the course FREE.

✅ The ongoing layoffs and to support professionals in upskilling during these challenging times

✅ Received numerous messages requesting a reduction in the course price, as it was not affordable for many students

Now you can access my high-quality React course content and master React for FREE.

I have uploaded my entire React course content on my YouTube channel in a new playlist.

In this course, you will learn React from scratch and you will be building a total of 6 applications including 4 challenge Applications to get hands-on experience with React.

In this course, you will learn React from scratch and you will be building a total of 6 applications including 4 challenge Applications to get hands-on experience with React.

If you have any query/doubt while going through the course, you can join the discord link from the from the description of the video and get your doubt cleared.

𝗡𝗼𝘁𝗲: If you need a course certificate, you need to enroll in my paid React course, as the course completion progress cannot be tracked on YouTube. (At just $10 instead of the previous $13 price)

Your money is not wasted for those who have already purchased the course.

I will soon be uploading many new sections including a section exclusively in my paid React course about Testing React applications using Jest + React Testing Library.

Access the React course for FREE by clicking this link.

Thanks for Reading!

If you want to master JavaScript, ES6+, React and Node.js with easy-to-understand content, do check out my YouTube channel and don't forget to subscribe.

Want to stay up to date with regular content regarding JavaScript, React, Node.js? Follow me on LinkedIn.

In this 2 hour video, you will learn:

✅ How to use TMDB API to fetch the list of movies by search keyword

✅ How to mock API to avoid facing rate limiting issue

✅ How to use Debouncing to avoid extra API calls

✅ How to properly display the movies list on the screen

✅ How to implement routing to display movie details page when clicked on the individual movie

✅ How to debug application in various scenarios

✅ How to do data manipulation to get the response in the correct format using array map, filter and reduce method

and much more...

This video is the final challenge video to practice React skills from my React course: https://bit.ly/41SosrP

Thanks for Reading!

If you want to master JavaScript, ES6+, React and Node.js with easy-to-understand content, do check out my YouTube channel and don't forget to subscribe.

Want to stay up to date with regular content regarding JavaScript, React, Node.js? Follow me on LinkedIn.

I'm excited to share that my most awaited and requested Learn React in 30 Days course is finally live now! 🎉💻

🌐 Course Features:

Instant Access to All Videos: No need to wait anymore! Just dive right in and start your React journey immediately.

Structured Learning Path: 30 days of well-guided learning, absolutely perfect for beginners and those who are looking forward to mastering React.

Hands-On Projects: Give your skills practical touch with real-world projects.

Don't just take my word. See what others are saying!

With this course, you will also get access to my popular Mastering Modern JavaScript ebook for 𝗙𝗥𝗘𝗘.

You will be writing every line of CSS yourself while building applications in this course, so you will get hands-on experience of designing web applications.

React has become the backbone of modern web development, favored for its flexibility, efficiency, and robustness. 🌐

With Next.js popularity, React has become a mandatory technology to get a high-salary and your dream job.

It's the tool of choice for crafting dynamic, lightning-fast user interfaces. ⚡

This course isn't a mere walkthrough of React concepts. It's a deep dive into the core principles, combined with practical, hands-on learning 🛠️

Here's what you can expect:

👩‍💻 Real-World Project: It's not just theory! We'll build real-world project together, giving you the confidence and portfolio pieces to showcase your skills to potential employers or clients.

🚀 Performance Optimization: Learn how to write efficient code that doesn't just work but excels in terms of speed, performance, and maintainability.

What Sets This Course Apart?🤔

This isn't just about learning React basics but React and its associated libraries in detail with every concept explained from scratch.

In addition to that, you will also be learning:

✅ React Basic Concepts

✅ JSX Fundamentals

✅ Class components And Functional Components

✅ Styling React App

✅ Handling State and Props

✅ Working With Forms

✅ Event Handling

✅ React Hooks

✅ Custom Hooks

✅ How To Write Maintainable CSS

✅ Making Web Application Responsive

✅ React Context API

✅ Using useReducer Hook

✅ Handling Routing Using React Router

✅ How To Improve Application Performance Using Lazy Loading

✅ Core Redux

✅ Redux Toolkit

✅ Many Videos Showing Debugging In Various Scenarios

✅ How To Write Code Like A Senior React Developer

✅ Coding Tips And Best Practices

and a lot more. 🎓💡

Get Access to the Discord community to get your doubts cleared.

🏆 You will also get a course completion certificate that validates your expertise in React development, a valuable asset in your portfolio.

As a part of the launch offer, get the course at just $8 / ₹640 instead of the regular price of $13 / ₹1040.

This discount is valid only till 15th January.

🎓 Who's it for?

Beginners, who are extremely eager to embark on their coding journey.

Professionals, who are looking to level up their skills.

Passionate developers, who have a strong desire to become React masters.

Don't miss this opportunity to immensely accelerate your React skills! 🚀 Enroll right away and instantly access all the videos.

Let's code something truly extraordinary together! 💡💻

📅 Course Details:

Start Learning Today: https://learn-react.yogeshchavan.dev/

Thanks for Reading!

If you want to master JavaScript, ES6+, React and Node.js with easy-to-understand content, do check out my YouTube channel and don't forget to subscribe.

Want to stay up to date with regular content regarding JavaScript, React, Node.js? Follow me on LinkedIn.

So by the end of this article, you will have a solid understanding of how to write React code with TypeScript.

Want to watch the video version of this tutorial? You can check out the video below:

Prerequisites

To follow along with this tutorial, there are some prerequisites. You should:

• Have basic knowledge of working with React

• Basic understanding of writing TypeScript code

Getting Started

To get started with TypeScript, you first need to install TypeScript on your machine which you can do by executing npm install -g typescript from the terminal or command prompt.

Now, we will create a Vite project using TypeScript.

npm create vite

Once executed, you will be asked some questions.

For the project name, enter react-typescript-demo.

For framework, select React and for variant select TypeScript.

Once the project is created, open the project in VS Code and execute the following commands from the terminal:

cd react-typescript-demo
npm install

Now, let's do some code cleanup.

Remove the src/App.css file and replace the content of src/App.tsx file with the following content:

const App = () => {
  return <div>App</div>;
};

export default App;

After saving the file, you might see the red underlines in the file as shown below:

If you get that error, just press Cmd + Shift + P(Mac) or Ctrl + Shift + P(Windows/Linux)to open the VS Code command palette and enter TypeScript text in the search box and select the option TypeScript: Select TypeScript Version...

Once selected, you will see options to select between the VS Code version and the workspace version as shown below:

From these options, you need to select Use Workspace Version option and once you select that option, the error from the App.tsx file will be gone.

Now, open src/index.css file and replace its contents with the following content:

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

Now, let's start the application, by executing npm run dev command.

Now, click on the displayed URL and access the application, you will see the following initial screen with text App displayed in the browser.

React and TypeScript Basics

When using React with TypeScript, the first thing you should know is the file extension.

Every React + TypesSript file needs to have a .tsx extension.

If the file does not contain any JSX-specific code, then you can use the .ts extension instead of the .tsx extension.

To create a component in React with TypeScript, you can use the FC type from the react package and use it after the component name.

So open src/App.tsx file and replace it with the following contents:

import { FC } from 'react';

const App: FC = () => {
  return <div>App</div>;
};

export default App;

Now, let's pass some props to this App component.

Open src/main.tsx and pass a title prop to the App component as shown below:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App title='TypeScript Demo' />
  </React.StrictMode>
);

However, with the added title prop, we now have a TypeScript error as you can see below:

Three Ways of Defining Prop Types

We can fix the above TypeScript error in three different ways.

• Declaring Types Using Interface

The error is coming because we have added a title prop as a mandatory prop for the App component so we need to mention this inside the App component.

So open src/App.tsx file and replace its contents with the following content:

import { FC } from 'react';

interface AppProps {
  title: string;
}

const App: FC<AppProps> = () => {
  return <div>App</div>;
};

export default App;

As you can see above, we have added an extra interface AppProps to specify which props the component is accepting and we used the AppProps interface after the FC in angle brackets.

It's a good practice and recommended to start the interface name with a capital letter like AppProps in our case.

Now, with this change, the TypeScript error will be gone as you can see below:

This is how we specify what props a particular component accepts.

• Declaring Types Using type

We can also declare the props type using type keyword.

So open App.tsx file and change the below code:

import { FC } from 'react';

interface AppProps {
  title: string;
}

const App: FC<AppProps> = () => {
  return <div>App</div>;
};

export default App;

to this code:

import { FC } from 'react';

type AppProps = {
  title: string;
};

const App: FC<AppProps> = () => {
  return <div>App</div>;
};

export default App;

Here, instead of interface declaration we used type declaration and the code will work without any TypeScript error.

It's up to you, which way to use, I always like to use an interface for declaring component types.

• Using inline type declaration

The third way of declaring type is by defining inline types as shown below:

const App = ({ title }: { title: string }) => {
  return <div>App</div>;
};

export default App;

As you can see above, we have removed the use of FC as it's not needed, and while destructuring the title prop we defined the type of it.

So out of these three ways, you can use whichever way you want. I always prefer to use an interface with FC so if later I want to add more props, the code will not look complicated which will happen if you define inline types.

Now, let's use the title prop and display it on the UI.

Now, replace the contents of the App.tsx file with the following content:

import { FC } from 'react';

interface AppProps {
  title: string;
}

const App: FC<AppProps> = ({ title }) => {
  return <h1>{title}</h1>;
};

export default App;

As you can see, we're using an interface with FC and we're destructuring the title prop and displaying it on the screen.

Now, open src/index.css file and add the following CSS inside it:

h1 {
  text-align: center;
}

If you check the application in the browser, you will see that the title with text TypeScript Demo is correctly getting displayed.

How to Create a Random Users List Application

Now, that you have a basic idea of how to declare component props, let's create a simple Random Users List Application that will display a list of 10 random users on the screen.

For that, we will be using Random User Generator API.

And the API URL we will be using is this:

https://randomuser.me/api/?results=10

So let's first install the axios npm library, so we can make an API call using it.

Execute the following command to install the axios library:

npm install axios

Once installed, restart the application by executing npm run dev command.

Now, replace the contents of App.tsx file with the following content:

import axios from 'axios';
import { FC, useEffect } from 'react';

interface AppProps {
  title: string;
}

const App: FC<AppProps> = ({ title }) => {
  useEffect(() => {
    const getUsers = async () => {
      try {
        const { data } = await axios.get(
          'https://randomuser.me/api/?results=10'
        );
        console.log(data);
      } catch (error) {
        console.log(error);
      }
    };
    getUsers();
  }, []);

  return <h1>{title}</h1>;
};

export default App;

As you can see above, we have added an useEffect hook where we're making API call to get the the list of users.

Now, If you open the console in the browser, you will be able to see the API response displayed in the console.

As you can see, we're correctly getting a list of 10 random users and the actual users list is coming in the results property of the response.

How to Store the Users List in State

Now, let's store those users in the state so we can display them on the screen.

So inside the App component, declare a new state with an initial value of an empty array like this:

const [users, setUsers ] = useState([]);

And call the setUsers function to store the users in the useEffect hook after the API call.

So your App component will look like this now:

import axios from 'axios';
import { FC, useEffect, useState } from 'react';

interface AppProps {
  title: string;
}

const App: FC<AppProps> = ({ title }) => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const getUsers = async () => {
      try {
        const { data } = await axios.get(
          'https://randomuser.me/api/?results=10'
        );
        console.log(data);
        setUsers(data.results);
      } catch (error) {
        console.log(error);
      }
    };
    getUsers();
  }, []);

  return <h1>{title}</h1>;
};

export default App;

As you can see here, we're calling setUsers function with the value of data.results.

How to Display the Users on the UI

Now, let's display the name and email of the individual user on the screen.

If you check the console output, you can see that there is a name property for each object that contains the first and last name of the user. So we can combine them to display the complete name.

Also, we have a direct email property for each user object which we can use to display email.

So replace the contents of App.tsx file with the following content:

import axios from 'axios';
import { FC, useEffect, useState } from 'react';

interface AppProps {
  title: string;
}

const App: FC<AppProps> = ({ title }) => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const getUsers = async () => {
      try {
        const { data } = await axios.get(
          'https://randomuser.me/api/?results=10'
        );
        console.log(data);
        setUsers(data.results);
      } catch (error) {
        console.log(error);
      }
    };
    getUsers();
  }, []);

  return (
    <div>
      <h1>{title}</h1>
      <ul>
        {users.map(({ login, name, email }) => {
          return (
            <li key={login.uuid}>
              <div>
                Name: {name.first} {name.last}
              </div>
              <div>Email: {email}</div>
              <hr />
            </li>
          );
        })}
      </ul>
    </div>
  );
};

export default App;

As you can see, we're using the array map method to loop over the users array, and we're using object destructuring to destructure the login, name and email properties of individual user object, and as an un-ordered list we're displaying the name and email of the user.

However, you will see some TypeScript errors in the file as can be seen below: