DEV Community: Preyum Kumar

Mastering DVC and MLflow for MLOps: A Practical Guide

Preyum Kumar — Tue, 21 Apr 2026 11:57:49 +0000

In this AI-driven world, managing experiments and data versions is just as important as the model architecture itself. This guide covers the essentials of Data Version Control (DVC) and MLflow, the industry-standard tools for reproducible machine learning.

Index

Introduction to DVC and MLflow
DVC Installation and Initialization
Versioning Data with DVC
DVC Maintenance: Status and Cleanup
DVC Pipelines and Automation
Integrating DVC with AWS S3
MLflow Installation and Tracking UI
Logging Experiments and Artifacts
MLflow Model Registry
Remote Tracking with DagsHub and AWS
Unified Workflow: Putting it All Together

Introduction to DVC and MLflow

MLOps is the practice of applying DevOps principles to Machine Learning. Two critical pillars of MLOps are:

Data Versioning (DVC): Git is great for code but fails with large datasets. DVC allows you to version data, models, and pipelines just like you version code.
Experiment Tracking (MLflow): Keeping track of hyperparameters, metrics, and model versions across hundreds of runs.

DVC Installation and Initialization

DVC is built on top of Git and works seamlessly with it.

Installation:

pip install dvc

Initialization:
Run this in the root of your git repository:

dvc init

This creates a .dvc/ directory to store internal configurations. You should commit the changes made by dvc init to your git repository.

Versioning Data with DVC

DVC does not store the data itself in Git. Instead, it creates small .dvc files that act as placeholders/pointers to the actual data.

1. Adding Data:

dvc add data/raw_data.csv

This moves the actual file to DVC's cache and creates a data/raw_data.csv.dvc file.

2. Tracking changes in Git:

git add data/raw_data.csv.dvc .gitignore
git commit -m "Add raw data tracking"

3. Pushing to Remote:
Similar to git push, you can push your data to a remote storage (S3, GCS, Azure, or local).

dvc push

DVC Maintenance: Status and Cleanup

As your project grows, you need to manage your local data workspace and the DVC cache.

1. Checking Status:
To see if your data has changed or if you need to push/pull:

dvc status

2. Cleaning the Cache:
DVC stores versions of your data in a hidden .dvc/cache folder. If you run out of disk space, you can remove old, unused versions:

dvc gc --workspace # Garbage Collect: removes items not used by current branch

DVC Pipelines and Automation

DVC allows you to define "stages" of your ML pipeline in a dvc.yaml file. This ensures that if you change a script or a dataset, only the affected parts of the pipeline are rerun.

Adding a Stage:

dvc stage add -n data_ingestion \
                -d src/data_ingestion.py -d data/raw \
                -o data/processed \
                python src/data_ingestion.py

How does DVC 'know' what is produced?

DVC does not magically know what your script does. You define the Contract using the -o (outputs) flag.

You tell DVC: "If I run python train.py, it will produce model.pkl."
DVC stores this "contract" in dvc.yaml.
After the script runs, DVC checks if model.pkl exists. If it does, DVC calculates its hash and starts versioning it.

dvc repro vs. python script.py

Feature	`python src/train.py`	`dvc repro`
Execution	Runs the script immediately.	Runs only if dependencies have changed.
Tracking	MLflow logs results, but DVC doesn't track files.	MLflow logs results AND DVC tracks data/models.
Efficiency	Always runs (wastes time if data is same).	Skips work if results are already cached.
Automation	Manual.	Can run an entire 10-step pipeline with one command.

Running the Pipeline:

dvc repro

This command checks the dependencies and only runs the stages that have changed.

Integrating DVC with AWS S3

For professional projects, data is usually stored in the cloud.

1. Setup AWS Credentials:

pip install dvc[s3] awscli
aws configure

2. Add S3 Remote:

dvc remote add -d myremote s3://my-mlops-bucket/dvcstore

3. Push and Pull:

dvc push  # Uploads data to S3
dvc pull  # Downloads data from S3 (on a new machine)

MLflow Installation and Tracking UI

MLflow is used to track the "metadata" of your experiments.

Installation:

pip install mlflow

Starting the UI:

mlflow ui

By default, this opens at http://127.0.0.1:5000.

Tip: If the default database is deprecated, use a SQLite backend:

mlflow ui --backend-store-uri sqlite:///mlflow.db

Logging Experiments and Artifacts

Within your Python code, you can log everything from parameters to the final model pickle file.

Example Code:

import mlflow

# Set the experiment name
mlflow.set_experiment("Heart_Disease_Classification")

with mlflow.start_run():
    # Log Parameters (Hyperparameters)
    mlflow.log_param("n_estimators", 100)

    # Log Metrics (Results)
    mlflow.log_metric("accuracy", 0.95)

    # Log Artifacts (Plots, JSONs, code)
    mlflow.log_artifact("plots/confusion_matrix.png")

    # Log the Model itself
    mlflow.log_model(my_model, "random_forest_model")

Autologging:
For many libraries (Scikit-Learn, TensorFlow, XGBoost), you can log everything automatically with one line:

mlflow.sklearn.autolog()

MLflow Model Registry

The Model Registry is a centralized model store where you can manage the lifecycle of your models.

Note for MLflow 2.9+: MLflow is moving away from fixed Stages (Staging, Production) in favor of Aliases and Tags. This provides more flexibility for complex deployment workflows.

1. Registering a Model:
In your code, you can register a model after logging it:

mlflow.log_model(my_model, "artifact_path", registered_model_name="MyBestModel")

2. Managing with Aliases (The New Way):
Instead of transitioning to "Production", you now assign an Alias like @champion or @prod to a specific version.

from mlflow import MlflowClient
client = MlflowClient()

# Assign the 'prod' alias to version 1
client.set_registered_model_alias("MyBestModel", "prod", "1")

This allows your deployment scripts to fetch the model via models:/MyBestModel@prod without worrying about the version number.

3. Using Tags:
Tags are key-value pairs used to store metadata about a model version (e.g., validation_status: "passed").

Remote Tracking with DagsHub and AWS

Running MLflow locally is fine for individual work, but teams need a remote tracking server.

Using DagsHub:
DagsHub provides a hosted MLflow server for every repository.

Connect your GitHub repo to DagsHub.
Install the library: pip install dagshub.
Add this to your script:

import dagshub
import mlflow

dagshub.init(repo_owner='username', repo_name='my-repo', mlflow=True)

Using AWS (EC2 + S3):

EC2: Hosts the MLflow tracking server (metadata).
S3: Acts as the "artifact store" for models and plots.
Command to start server on EC2:

mlflow server --host 0.0.0.0 --default-artifact-root s3://my-bucket/artifacts

Unified Workflow: Putting it All Together

In a professional MLOps project, you use both tools in tandem:

DVC: Fetch the specific data version (dvc pull).
Code: Run training script with MLflow logging parameters and metrics.
MLflow UI: Compare runs and find the best hyperparameters.
DVC: Version the resulting best_model.pkl (dvc add best_model.pkl).
Git: Commit the .dvc files and training code (git commit).
MLflow Registry: Assign the @prod or @champion alias to the best model version.
CI/CD: Deploy the model by referencing its alias (e.g., models:/MyBestModel@prod).

The MLOps Ecosystem Flowchart

Modern Next.js Essentials: Building Scalable Full-Stack Applications

Preyum Kumar — Thu, 16 Apr 2026 18:22:55 +0000

In an AI-driven world, we should keep our basics sharp at all times. This is the final post in my next.js learning series where we'll go over the fundamentals of Next.js.

Index

Fundamentals
The Legacy Page Router
The App Router
Client Components and 'use client'
Advanced Routing and Navigation
Layouts and UI Shells
UI and Styling with shadcn/ui
Theming with next-themes
Schema Validation with Zod
Form Validation with React Hook Form and Zod
Server-Side Logic: Route Handlers vs. Server Actions
The 'Proxy' Concept (formerly Middleware)
Real-time Data and Communication
Authentication with Better Auth
Toasts with Sonner
Handling UI States: Loading, Errors, and Not Found
Built-in Optimizations and SEO
Data Fetching, Caching, and Revalidation
Identifying Static vs. Dynamic Routes

Fundamentals

Next.js is a powerful React framework used to build full-stack web applications. It provides several out-of-the-box features that simplify the development process and improve performance.

Server-Side Rendering (SSR): Next.js pre-renders pages on the server for each request. This is great for Search Engine Optimization (SEO) as crawlers can see the full content of the page immediately.
Production Ready: It includes automatic code splitting, optimized image loading, and built-in CSS (Cascading Style Sheets) / SASS (Syntactically Awesome Style Sheets) support.
Easy Setup: You can start a new project instantly using:
```
npx create-next-app@latest
```

Next.js and TypeScript (Generics)

If you see syntax like GetServerSideProps<PageProps> or useState<string>() in a Next.js project, those are Generics.

Origin: Generics are a feature of TypeScript, not JavaScript or React.
Purpose: They allow you to pass a "type" as a variable to another type. This is what makes Next.js so powerful when combined with TypeScript; it ensures that the data you fetch on the server matches the data your component expects on the client.

Example:

// The <User> part is a Generic. 
// It tells the function exactly what shape the response will have.
const user = await fetchUser<User>(id);

For a deep dive into how they work in React and Next.js, see: Generics in React and Next.js.

Rendering Patterns: SPA, SSR, and Next.js Hybrid

Understanding the difference between Single Page Applications (SPA) and Server-Side Rendering (SSR) is key to mastering Next.js. Next.js is unique because it allows you to use both individually or combine them seamlessly.

1. The SPA "Feel" (Client-Side Navigation)

In a pure React SPA, you have smooth transitions because the browser never reloads. Next.js keeps this "feel" by using the <Link> component. When you click a link, only the necessary data is fetched, and the URL changes without a full browser refresh.

2. The SSR "Foundation" (Server Components)

Unlike a pure SPA (which sends an empty HTML file), Next.js pre-renders every page on the server.

Initial Load: The server sends a fully populated HTML file (Great for SEO and "First Paint").
Default Behavior: This is the default for Server Components.

3. The Next.js Hybrid: The Best of Both Worlds

Next.js is unique because it combines these patterns into a "Hybrid SPA":

Server side: On the first request, the page is SSR-ed for speed and SEO.
Browser side: Once the page loads, the Next.js router takes over. Every subsequent navigation via <Link> is handled on the client side (like an SPA), meaning no full page reloads, even for Server Components!

Detailed Example: Mixing Both

Imagine a Product Page. The product details are fetched via SSR (Server Component), but the "Add to Cart" button is interactive (Client Component).

// app/products/[id]/page.tsx (Server Component - SSR)
import AddToCartButton from './AddToCartButton';

export default async function ProductPage({ params }: { params: { id: string } }) {
  // This fetch happens on the server during the initial load
  const product = await fetchProduct(params.id);

  return (
    <main>
      <h1>{product.name}</h1>
      <p>{product.description}</p>

      {/* This component hydrates and becomes interactive in the browser */}
      <AddToCartButton productId={product.id} />
    </main>
  );
}

Why this is powerful:

Search Engines see your content immediately because of SSR.
Users get a near-instant first view.
Navigating between products feels like a mobile app because Next.js only swaps the data, not the whole page.

The Legacy Page Router

The Page Router was the original way to handle routing in Next.js. In this system, every file created inside the pages directory automatically became a route.

pages/index.js -> /
pages/about.js -> /about

While simple, it lacked advanced features like native nested layouts and React Server Components, leading to the introduction of the App Router.

The App Router

Introduced in Next.js 13, the App Router is the modern standard. It is built on React Server Components and uses a file-system-based router where folders define routes.

Folders as Routes: A folder inside the app directory represents a URL segment.
page.tsx: To make a route publicly accessible, you must include a page.tsx file inside that folder.
Default Export: Every page.tsx must have an export default function to render the UI.

Example:

// app/contact/page.tsx
export default function ContactPage() {
  return (
    <main>
      <h1>Contact Us</h1>
      <p>Feel free to reach out via email.</p>
    </main>
  );
}

Client Components and 'use client'

In the App Router, all components are Server Components by default. To enable interactivity, you must use the 'use client' directive.

What happens when you add 'use client'?

When you mark a file with 'use client', several things happen behind the scenes:

Client-Side Rendering: The component (and all its imported dependencies) is added to the Client-Side JavaScript Bundle.
Hydration: The component is still pre-rendered into static HTML on the server for SEO, but it then "hydrates" in the browser to become interactive.
Client Boundary: It establishes a "Client Boundary." Any component imported into a Client Component automatically becomes a Client Component as well.
Enables Interactivity: You gain access to event handlers (onClick), React Hooks (useState, useEffect), and Browser APIs (window, localStorage).

When to Use It: You need 'use client' whenever your component requires:
- Interactivity: Event listeners like onClick, onChange, or onSubmit.
- React Hooks: State (useState), effects (useEffect), or context (useContext).
- Browser APIs: Access to window, document, or localStorage.
Placement: The 'use client' directive must be placed at the very top of the file, before any imports.

The Client Boundary Effect (Implicit Client Components)

A common misconception is that every interactive component needs its own 'use client' tag. In reality, the directive establishes a Client Boundary that "infects" the entire dependency tree below it.

Implicit Conversion: If a component is imported into a file that has the 'use client' directive, it is implicitly converted into a Client Component. It will be included in the client-side JavaScript bundle and rendered on the client.
No Directive Needed: Child components imported into a Client Component do not need their own 'use client' tag to use hooks or interactivity, as they are already executing within the client runtime.
Module Dependency: Because the parent needs to render the child in the browser, the build tool must include the child's code in the client bundle.

Example: Parent vs. Child

// app/components/ParentComponent.tsx
'use client'; // This establishes the Client Boundary

import { useState } from 'react';
import ChildComponent from './ChildComponent';

export default function ParentComponent() {
  const [count, setCount] = useState(0);

  return (
    <div className="p-4 border">
      <h2>Parent (Client Component)</h2>
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>

      {/* The Child is imported and rendered here */}
      <ChildComponent />
    </div>
  );
}

// app/components/ChildComponent.tsx
// Note: NO 'use client' directive here!

export default function ChildComponent() {
  // This will still render on the client because it's imported into ParentComponent.
  console.log("I am rendering in the browser!"); 

  return (
    <div className="mt-4 p-2 bg-gray-100">
      <h3>Child Component</h3>
      <p>I don't have 'use client', but I'm part of the client bundle!</p>
    </div>
  );
}

Why this matters: To keep your client bundle small, you should move 'use client' as far down the component tree as possible (to the "leaf" components) to avoid accidentally pulling static components into the client-side JavaScript.

The Payload Secret: JS vs. Data

A crucial performance optimization in Next.js is how it delivers code to the browser. It uses two different "packages":

1. The RSC (React Server Components) Payload (The "Data")

This is a compact, text-based representation of your UI.

Used by: Both Server and Client Components.
Contents: The rendered HTML-like structure, props, and "placeholders" for client components.
The Benefit: It tells React what to show on the screen without sending any JavaScript logic for Server Components.

2. The JS Bundle (The "Code")

This is the actual executable JavaScript file.

Used by: Client Components ONLY.
Contents: The logic (useState, useEffect), event handlers, and imported libraries.
The Difference: Server Components NEVER send their JavaScript to the browser. Their JS stays on the server to fetch data and render, then it is "stripped away." Only Client Components pay the "JavaScript tax" of being downloaded and executed by the user's browser.

Next.js 16 Pro Tip: Version 16 introduces Layout Deduplication. When you navigate between pages that share a layout, Next.js only fetches the RSC payload for the new page content, not the shared layout, making navigations up to 50% lighter.

Next.js provides a powerful file-system-based router. Beyond basic page creation, it supports advanced routing patterns to handle complex application structures.

Dynamic Routing

Next.js allows you to create routes that match multiple URL patterns using dynamic segments.

Note for Next.js 15+: The params and searchParams props are now Promises and must be awaited (or handled with React's use() hook) before access.

[id] Paths: By wrapping a folder name in square brackets, you create a dynamic route (e.g., app/posts/[id]/page.tsx).
Mixed Combinations: You can nest dynamic segments to create complex paths like /categories/[category]/[id].

Example (Next.js 15+):

// app/blog/[blogId]/page.tsx
interface BlogIdPageProps {
  params: Promise<{ blogId: string }>;
}

export default async function BlogIdPage({ params }: BlogIdPageProps) {
  const { blogId } = await params;

  return (
    <main>
      <h1>Hello from the blog id page</h1>
      <p>Viewing blog post ID: {blogId}</p>
    </main>
  );
}

Route Groups

Route Groups allow you to organize your files and group related routes without affecting the URL structure. You can create a route group by wrapping a folder name in parentheses: (folderName).

URL Impact: The folder name in parentheses is ignored by the router. For example, app/(auth)/login/page.tsx is accessible at /login, not /(auth)/login.
Shared Layouts: You can add a layout.tsx inside a route group to apply a specific UI (like an auth header or sidebar) only to the routes within that group.
Organization: They are excellent for organizing large projects by feature, team, or intent (e.g., (admin), (marketing)) without cluttering the URL.

Sub-navigation is used to create persistent UI elements (like sidebars or tabs) that only exist within a specific part of your application. This is achieved using Nested Layouts.

How it works: A layout in a sub-folder (e.g., app/dashboard/layout.tsx) wraps all pages and sub-folders within that directory.
Benefits: The sub-navigation component remains mounted during navigation between sub-pages, preserving state and preventing un-necessary re-renders.

Example:

// app/dashboard/layout.tsx
import Link from 'next/link';

export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex">
      <nav className="w-64 border-r">
        {/* Persistent Sub-Navigation */}
        <Link href="/dashboard">Overview</Link>
        <Link href="/dashboard/settings">Settings</Link>
      </nav>
      <main className="flex-1 p-4">
        {children}
      </main>
    </div>
  );
}

Parallel Routes

Parallel Routes allow you to simultaneously or conditionally render one or more pages within the same layout. They are created using named slots, e.g., @folder.

Usage: Useful for highly dynamic sections like dashboards or social media feeds where you want multiple independent views (e.g., a team view and an analytics view on the same dashboard).
Independent Error/Loading States: Each parallel route can have its own loading.tsx and error.tsx, meaning one slow section won't block the rest of the page.
Slot Props: Slots are passed as props to the shared parent layout.

Example File Structure:

app/dashboard/
├── layout.tsx
├── @analytics/
│   └── page.tsx
└── @team/
    └── page.tsx

Handling Unmatched Routes (The default.tsx Fix)

A common issue with Parallel Routes occurs when you navigate to a sub-page that only exists in one of your slots.

The Problem (404 on Refresh): If you navigate from /dashboard to /dashboard/settings, and only the @analytics slot has a settings/page.tsx file, Next.js will keep the "previous" content for the @team slot. However, if you refresh the browser on /dashboard/settings, Next.js doesn't know what to show in the @team slot and will return a 404 error.
The Fix: You must provide a default.tsx file in each slot directory. This file acts as a fallback UI when the current URL does not match any page within that specific slot.

Example Fix:

app/dashboard/
├── @analytics/
│   ├── page.tsx
│   └── settings/page.tsx
└── @team/
    ├── page.tsx
    └── default.tsx  <-- This prevents 404 on /dashboard/settings refresh

What to put in default.tsx?
To avoid the "empty box" issue on refresh, the common fix is to make default.tsx an exact copy of your main page.tsx for that slot. This ensures the UI remains identical whether you arrive via a link or a refresh.

// app/dashboard/@team/default.tsx
// This code is a copy of @team/page.tsx
export default function Default() {
  return <div>Team Dashboard Content</div>;
}

Soft Navigation (Clicking Links): Next.js will preserve the slot's previously active state, even if it doesn't match the new URL.
Hard Navigation (Browser Refresh): Next.js cannot preserve state. It must find a default.tsx file for every unmatched slot, or it will render a 404. Making default.tsx a copy of page.tsx ensures the user sees the same content regardless of how they arrived at the URL.

Example Layout Usage:

// app/dashboard/layout.tsx
export default function DashboardLayout({
  children, // The main page.tsx content
  analytics, // Content from @analytics
  team,      // Content from @team
}: {
  children: React.ReactNode;
  analytics: React.ReactNode;
  team: React.ReactNode;
}) {
  return (
    <div>
      {children}
      <div className="flex gap-4">
        {analytics}
        {team}
      </div>
    </div>
  );
}

Intercepting routes allow you to load a new route from another part of your application within the current layout. This is best understood through the Instagram Analogy:

The Interception (Soft Navigation): You are scrolling through your feed (/feed). You click a photo. Instead of taking you to a whole new page, the photo pops up in a Modal (overlay). The URL changes to /photo/123, but you are still looking at your feed in the background.
The Standalone (Hard Navigation): If you copy that URL (/photo/123) and send it to a friend, or if you refresh the browser, you don't want a modal over an empty feed. You want a full-page view of just the photo.

1. Why use them?

Context Preservation: The user doesn't lose their scroll position or "place" in the app while viewing a sub-item.
Shareable URLs: Every item has its own URL that works as a standalone page.

2. The Naming Conventions

The symbols refer to the relative path from the current folder to the folder you want to intercept:

(.): Intercepts a route at the same level.
(..): Intercepts a route one level up.
(..)(..): Intercepts a route two levels up.
(...): Intercepts a route from the root app directory.

To make this work, you usually combine Intercepting Routes with Parallel Routes (to define where the modal should appear).

File Structure:

app/
├── layout.tsx         <-- Contains {children} and {modal} slots
├── @modal/            <-- Parallel Route slot
│   └── (.)photo/      <-- Intercepts '/photo' from the root app level
│       └── [id]/
│           └── page.tsx  <-- UI for the MODAL version
└── photo/
    └── [id]/
        └── page.tsx      <-- UI for the FULL PAGE version

How it works in practice:

When a user clicks <Link href="/photo/5"> from anywhere in the app:
- Next.js sees the (.)photo folder.
- Instead of navigating away, it renders app/@modal/(.)photo/[id]/page.tsx inside the {modal} slot of your layout.
When a user refreshes the page at /photo/5:
- Next.js ignores the interception.
- It renders the standard app/photo/[id]/page.tsx as a full page.

Layouts and UI Shells

Layouts allow you to share UI across multiple pages, such as navigation bars or footers.

layout.tsx: A layout file wraps the page.tsx (and any child segments).
Layered Shells: Layouts are loaded from top to bottom in layers. A root layout wraps the entire application, while nested layouts wrap specific sub-sections.
State Preservation: On navigation, layouts preserve their state and do not re-render, making the app feel faster.

Example:

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  return (
    <section className="dashboard-container">
      <aside>Sidebar Navigation</aside>
      <div className="content">
        {children} {/* This is where the page content is injected */}
      </div>
    </section>
  );
}

UI and Styling with shadcn/ui

shadcn/ui is a collection of beautifully designed, accessible, and customizable components that you can copy and paste into your apps. Unlike a component library, it is a collection of reusable components that you own and can fully customize.

Initialization: Start by initializing the CLI in your Next.js project:
```
npx shadcn@latest init
```
This command is interactive and will ask you several configuration questions (style, base color, CSS variables, etc.). Upon completion, it creates a components.json file in your root directory to track your preferences.
Adding Components: Add only the components you need (e.g., Button, Card, Dialog):
```
npx shadcn@latest add button
```
Usage: Components are added directly to your @/components/ui folder, giving you full control over the code.

Example:

import { Button } from "@/components/ui/button"

export default function Home() {
  return (
    <div>
      <Button variant="outline">Click Me</Button>
    </div>
  )
}

Theming with next-themes

When using shadcn/ui, it's common to use next-themes to handle light, dark, and system theme switching.

ThemeProvider: This component provides a context for the current theme across your entire application.
Why 'use client'?: The ThemeProvider wrapper must be a Client Component because it manages state (using React Context and hooks like useState or useEffect) and interacts with browser APIs like localStorage to persist the user's theme preference.
suppressHydrationWarning: You must add suppressHydrationWarning to your root <html> tag in layout.tsx.
- Reason: On the server, Next.js doesn't know the user's client-side theme preference (e.g., from localStorage). When next-themes updates the class or data-theme on the <html> tag on the client to match the saved preference, it causes a mismatch with the server-rendered HTML. Adding this flag tells React to ignore that specific mismatch during hydration.

Example (layout.tsx):

// app/layout.tsx
import { ThemeProvider } from "@/components/theme-provider"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

Schema Validation with Zod

Zod is a TypeScript-first schema declaration and validation library. It is widely used in Next.js projects to bridge the gap between runtime data validation and compile-time type safety.

Runtime Validation: Use Zod to define a schema for your data (e.g., API responses, form data, environment variables). This ensures that the data your app receives actually matches what you expect.
Type Inference with z.infer: One of Zod's most powerful features is Type Inference. Instead of manually defining an interface or type that mirrors your validation logic, Zod can automatically generate a TypeScript type from your schema.
Single Source of Truth: This eliminates redundancy and ensures that your static type definitions are always perfectly synchronized with your runtime validation rules.

Example:

import { z } from "zod";

// 1. Define the schema (Runtime validation)
const UserSchema = z.object({
  id: z.string().uuid(),
  username: z.string().min(3, "Username must be at least 3 characters"),
  email: z.string().email("Invalid email address"),
  age: z.number().int().positive().optional(),
});

// 2. Infer the type (Compile-time type)
// This 'User' type is automatically kept in sync with the schema above.
type User = z.infer<typeof UserSchema>;

// 3. Use the inferred type in your code
const processUser = (user: User) => {
  console.log(`Processing user: ${user.username}`);
};

// 4. Validate data at runtime (e.g., from an API call or form)
const result = UserSchema.safeParse({
  id: "550e8400-e29b-41d4-a716-446655440000",
  username: "johndoe",
  email: "john@example.com",
});

if (result.success) {
  // result.data is automatically typed as 'User'
  processUser(result.data);
} else {
  // Detailed error information if validation fails
  console.error(result.error.format());
}

Form Validation with React Hook Form and Zod

React Hook Form (RHF) is the standard for managing form state in React. When combined with Zod via the @hookform/resolvers package, it provides a powerful, type-safe validation layer.

Installation:

npm install react-hook-form zod @hookform/resolvers

The Validation Bridge: @hookform/resolvers is a library that allows you to use external validation libraries (like Zod, Yup, Joi, or Superstruct) with React Hook Form. By default, RHF uses HTML-standard validation (like required, minLength), but the resolvers package allows you to use a single, powerful schema for all your validation logic.
zodResolver: This specific resolver function takes your Zod schema and converts it into a format that React Hook Form understands. It handles the mapping of Zod errors to RHF's errors object automatically.
Benefits:
- Type Safety: Use z.infer to ensure your form data types are always in sync with your validation rules.
- Clean Code: Keeps validation logic out of your JSX and centralized in a reusable schema.
- Automatic Errors: RHF automatically populates the errors object based on your Zod schema's messages.

Example:

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";

// 1. Define the schema
const schema = z.object({
  username: z.string().min(3, "Username must be at least 3 characters"),
  email: z.string().email("Invalid email address"),
});

// 2. Infer the type from the schema
type FormData = z.infer<typeof schema>;

export default function MyForm() {
  // 3. Initialize the form with the Zod resolver
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormData>({
    resolver: zodResolver(schema),
  });

  const onSubmit = (data: FormData) => {
    console.log("Validated Data:", data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>Username</label>
        <input {...register("username")} />
        {errors.username && <p className="error">{errors.username.message}</p>}
      </div>

      <div>
        <label>Email</label>
        <input {...register("email")} />
        {errors.email && <p className="error">{errors.email.message}</p>}
      </div>

      <button type="submit">Submit</button>
    </form>
  );
}

Server-Side Logic: Route Handlers vs. Server Actions

Next.js provides two primary ways to run server-side code in response to client interactions: Route Handlers and Server Actions. Understanding when to use each is crucial for building efficient, secure, and maintainable applications.

1. Route Handlers (route.ts)

Route Handlers allow you to create custom request handlers for a given route using the Web Request and Response APIs. They are the App Router equivalent of API Routes from the Page Router.

When to Use:
- External APIs: When you need to provide an API endpoint for external clients (mobile apps, 3rd party services).
- Webhooks: Handling incoming requests from services like Stripe, GitHub, or Clerk.
- Custom Responses: When you need to return non-HTML content like JSON, XML, or binary data (PDFs, images).
- Specific HTTP Methods: When you need full control over GET, POST, PUT, DELETE, etc.

Example: A Simple JSON API

// app/api/hello/route.ts
import { NextResponse } from 'next/server';

export async function GET() {
  return NextResponse.json({ message: 'Hello from the Route Handler!' });
}

export async function POST(request: Request) {
  const data = await request.json();
  return NextResponse.json({ received: data }, { status: 201 });
}

2. Server Actions

Server Actions are asynchronous functions that are executed on the server. They can be defined in Server Components or called from Client Components. They are the modern standard for handling data mutations (POST, PUT, DELETE) in Next.js.

When to Use:
- Form Submissions: Handling user input from forms.
- Data Mutations: Creating, updating, or deleting records in a database.
- Seamless Integration: When you want to trigger server-side logic from a button click or form submit without managing a separate API route.
- Progressive Enhancement: They work even if JavaScript is disabled in the browser (when used with <form action={...}>).

Example: Handling a Form Submission

// app/actions.ts
'use server';

import { revalidatePath } from 'next/cache';

export async function createPost(formData: FormData) {
  const title = formData.get('title');

  // 1. Validate data (e.g., using Zod)
  // 2. Save to database (e.g., Prisma, Drizzle)
  console.log(`Creating post: ${title}`);

  // 3. Revalidate the cache to show new data
  revalidatePath('/blog');
}

Route Handlers vs. Server Actions: A Quick Comparison

Feature	Route Handlers (`route.ts`)	Server Actions
Primary Use	REST APIs, Webhooks, External clients	Data mutations, Form submissions
Call Method	HTTP Request (`fetch('/api/...')`)	Direct function call (`await action()`)
HTTP Methods	Full control (GET, POST, etc.)	Always uses POST under the hood
Response Type	Any (JSON, XML, PDF, etc.)	Data or Action result
Progressive Enhancement	No	Yes (works without JS)
Caching	Can be cached (GET requests)	Never cached

The 'Proxy' Concept (formerly Middleware)

In Next.js 16, the file previously known as middleware.ts has been renamed to proxy.ts. This change more accurately reflects its role as a network boundary and request gateway.

Why the Change to 'Proxy'?

Clarified Role: It acts as a "Reverse Proxy" for all incoming traffic before it reaches your application logic.
Node.js Runtime: Unlike the old middleware, proxy.ts runs on the Node.js runtime by default, giving you access to the full suite of Node.js APIs.
Performance: It remains optimized for the edge but provides a more predictable environment for complex logic.

How it Works

The proxy.ts file must be located at the root of your project. It exports a function named proxy that intercepts every incoming request.

Key Capabilities:

Rewriting: Changing the internal destination (the actual proxying) using NextResponse.rewrite().
Redirecting: Sending users to a different URL.
Header/Cookie Injection: Modifying requests before they reach your pages or APIs.

Example Implementation (proxy.ts)

// proxy.ts (at the root of your project)
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

// The function MUST be named 'proxy' in Next.js 16+
export function proxy(request: NextRequest) {
  const { pathname } = request.nextUrl;
  const token = request.cookies.get('session-token');

  // 1. Authentication Boundary
  if (pathname.startsWith('/dashboard') && !token) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  // 2. Reverse Proxying
  if (pathname.startsWith('/old-api')) {
    // Internally routes to a legacy server while keeping the URL the same
    const legacyUrl = new URL(pathname.replace('/old-api', ''), 'https://api.legacy-system.com');
    return NextResponse.rewrite(legacyUrl);
  }

  return NextResponse.next();
}

// Matcher config to limit where the proxy runs
export const config = {
  matcher: ['/dashboard/:path*', '/old-api/:path*'],
};

Migration Note

If you are moving from an older version of Next.js:

Rename middleware.ts to proxy.ts.
Rename the exported function middleware to proxy.
middleware.ts is still supported for backwards compatibility but is considered deprecated.

Security Warning: The 'Two-Layer' Auth Pattern

A common mistake is relying only on the proxy.ts (middleware) for authentication. While it is great for User Experience, it is insecure if used as your only line of defense.

1. Why Proxy-only Checks are Insecure

Surface Level: The proxy usually only checks if a cookie exists. It rarely performs a deep database check (to see if the user is banned or the session is revoked) because doing so would slow down every single request to your site.
Bypass Risks: Depending on your deployment configuration (e.g., using certain CDNs or split-routing), it is sometimes possible to craft requests that bypass the proxy layer and hit your internal APIs directly.
Stale Data: If a user is deleted from your database, their browser might still have a "valid-looking" cookie. The proxy will let them in because it doesn't want to hit the DB on every click.

2. The Solution: Two-Layer Validation

Professional Next.js applications use a Defense in Depth strategy.

Layer 1: The Proxy (UX Layer)
- Goal: Speed.
- Action: Do a quick check for a session cookie. If it's missing, redirect to /login.
- Result: The user doesn't see a "flash" of protected content before being redirected.
Layer 2: The Server Component/Action (Security Layer)
- Goal: Absolute Security.
- Action: Perform a rigorous database check. Verify permissions, roles, and session validity.
- Result: Even if someone bypasses the proxy, they cannot fetch any sensitive data because the actual data-fetching function will block them.

Detailed Example: Two-Layer Check

// 1. THE UX LAYER (proxy.ts)
export function proxy(request: NextRequest) {
  const session = request.cookies.get('auth-session');
  if (!session && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  return NextResponse.next();
}

// 2. THE SECURITY LAYER (app/dashboard/page.tsx)
export default async function DashboardPage() {
  // Authoritative check: Hit the DB to verify the user is actually active
  const user = await getAuthenticatedUser(); 

  if (!user) {
    // This handles cases where the session was revoked but the cookie still exists
    redirect('/login'); 
  }

  const data = await db.privateData.findMany({ where: { userId: user.id } });
  return <Dashboard data={data} />;
}

Rule of Thumb: Use the Proxy for Redirects (UX), but use Server-side logic for Access Control (Security).

Real-time Data and Communication

Next.js is primarily built on a request-response model (HTTP). While it handles standard data fetching perfectly, it does not natively provide a persistent, bi-directional connection (like WebSockets) out of the box—especially in serverless environments (like Vercel). For real-time requirements, developers use specialized tools and frameworks.

1. Convex: The Reactive Full-Stack Backend

Convex is a modern, reactive backend-as-a-service. It combines a database, server functions, and real-time synchronization into a single tool.

Reactive Queries: Instead of manual fetching, you use useQuery. If the data in the database changes, the UI updates automatically across all connected clients.
Why it's powerful: It eliminates the need for complex WebSocket management or state synchronization libraries. It acts as your database and your real-time engine simultaneously.

2. Pusher: Managed WebSockets

Pusher is a hosted WebSocket service. It allows you to "trigger" events from your Next.js server (API routes/Server Actions) and "listen" for them on the client.

Infrastructure-less: You don't have to maintain a WebSocket server (like Socket.io), which is difficult to scale in serverless environments.
Bi-directional: It enables instant features like chat notifications, live dashboards, and "typing" indicators.

3. WebRTC and Signaling

For high-performance real-time applications involving Audio and Video calls, we use WebRTC (Web Real-Time Communication).

P2P Tunnels: WebRTC allows two browsers to connect directly to each other (Peer-to-Peer) to exchange large amounts of data with very low latency.
The Signaling Problem: Two peers cannot connect "out of the blue." They need to know each other's IP addresses and media capabilities. However, most devices are hidden behind firewalls.
The Solution (Signaling): Peers need a "handshake" server to exchange information (SDP and ICE Candidates). This is where Convex or Pusher come in:
- Pusher can broadcast the "Offer" and "Answer" messages between peers.
- Convex can store the signaling data in a reactive table that both peers are "watching."

Example: Real-time Messaging & Video App

In a professional app:

Messaging: Use Convex to store messages. Since it's reactive, the chat UI updates instantly for both users.
Calling: When a user clicks "Call," a signaling message is sent via Pusher or Convex to the other user.
Video Stream: Once the "handshake" is complete via the signaling server, WebRTC takes over to create a direct P2P tunnel for the actual video and audio stream.

Authentication with Better Auth

Better Auth is a modern, type-safe authentication framework designed specifically for TypeScript and frameworks like Next.js. It provides a modular architecture where features (like MFA, Organizations, or Passkeys) are added via plugins.

Modular Architecture: You only add the features you need (e.g., social login, email/password, organizations) through a plugin-based system.
Database Agnostic: It works with any database using adapters (Drizzle, Prisma, etc.).
Type Safety: It provides end-to-end type safety for your user sessions and auth state.

Example Setup:

// lib/auth.ts
import { betterAuth } from "better-auth";
import { drizzleAdapter } from "better-auth/adapters/drizzle";
import { db } from "@/db";

export const auth = betterAuth({
    database: drizzleAdapter(db, { provider: "pg" }),
    emailAndPassword: { enabled: true },
    socialProviders: {
        github: {
            clientId: process.env.GITHUB_CLIENT_ID!,
            clientSecret: process.env.GITHUB_CLIENT_SECRET!,
        },
    },
});

// app/api/auth/[...all]/route.ts
import { auth } from "@/lib/auth";
import { toNextJsHandler } from "better-auth/next-js";

export const { GET, POST } = toNextJsHandler(auth);

Usage Example:

To use Better Auth in your application, you interact with the auth object on the server and the authClient on the client.

1. Client-Side Usage (Sign In & Session)

"use client";
import { createAuthClient } from "better-auth/react";

const authClient = createAuthClient();

export function LoginButton() {
  const signIn = async () => {
    // This action CREATES the token/session and sets the cookie
    await authClient.signIn.social({
      provider: "github",
      callbackURL: "/dashboard",
    });
  };

  return <button onClick={signIn}>Sign in with GitHub</button>;
}

2. Server-Side Usage (Protecting Routes)

// app/dashboard/page.tsx
import { auth } from "@/lib/auth";
import { headers } from "next/headers";
import { redirect } from "next/navigation";

export default async function DashboardPage() {
  // Get the session on the server
  const session = await auth.api.getSession({
    headers: await headers(),
  });

  if (!session) {
    redirect("/login");
  }

  return <h1>Welcome back, {session.user.name}</h1>;
}

Token Lifecycle: Creation vs. Validation

It is important to distinguish where tokens live:

Creation (Login): Tokens are created in the Auth Flow (Client-side signIn or Server-side Actions). The server generates a unique session ID, saves it to the database, and sends it to the browser as an encrypted cookie.
Validation (Middleware/Proxy): As seen in the The 'Proxy' Concept (formerly Middleware) section, the proxy checks for the existence of this cookie on every request to decide if it should allow the user to proceed.

Toasts with Sonner

Sonner is an opinionated, lightweight toast component for React, created by Emil Kowalski. It is the default recommendation for shadcn/ui due to its sleek design and stacking behavior.

Small & Fast: Extremely lightweight (less than 1kb gzipped).
Opinionated Design: Looks great out of the box with minimal configuration.
Stacking: Toasts elegantly stack on top of each other, allowing users to see multiple notifications at once.

Installation via shadcn:

npx shadcn@latest add sonner

Usage Example:

// app/layout.tsx
import { Toaster } from "@/components/ui/sonner"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        {/* 
          We place the Toaster in the Root Layout so it stays mounted 
          across all pages. This allows notifications to remain visible 
          even when the user navigates between different routes.
        */}
        <Toaster />
      </body>
    </html>
  )
}

// Any Client Component
"use client"
import { toast } from "sonner"

export function MyComponent() {
  return (
    <button onClick={() => toast("Operation Successful!")}>
      Show Toast
    </button>
  )
}

Handling UI States: Loading, Errors, and Not Found

Next.js provides special file conventions to handle different states of your application's UI gracefully.

Streaming and Suspense (loading.tsx)

Streaming is a powerful data transfer technique that allows you to break down a page's HTML into smaller chunks and progressively send them from the server to the client. This is a game-changer for performance, especially on slow internet connections.

How Streaming Helps:

Reduces Time to First Byte (TTFB): Instead of waiting for the entire page to be generated on the server, Next.js starts sending the UI as soon as it's ready.
Partial Data Delivery: Users can see and interact with parts of the page (like a header or sidebar) while slower data-heavy components (like a product list or user profile) are still loading.
Better Perceived Performance: The app feels "snappy" because the user isn't staring at a blank screen or a full-page spinner.

Method 1: Page-Level Streaming with loading.tsx

The simplest way to implement streaming is by creating a loading.tsx file in your route folder. This automatically wraps the page.tsx and any nested children in a React Suspense boundary.

Behavior: While the data in page.tsx is being fetched on the server, the UI defined in loading.tsx (e.g., a skeleton loader) is shown immediately.

Example:

// app/dashboard/loading.tsx
export default function DashboardLoading() {
  return (
    <div className="animate-pulse">
      <div className="h-8 bg-gray-200 rounded w-1/4 mb-4"></div>
      <div className="h-64 bg-gray-100 rounded"></div>
    </div>
  );
}

Method 2: Component-Level Streaming with

For more granular control, you can use the <Suspense> component. This allows you to "stream" specific components independently, so one slow API call doesn't block the rest of the page.

Behavior: The "static" parts of the page render immediately, while the "dynamic" component shows a fallback UI until its data is ready.

Example:

import { Suspense } from 'react';
import { SlowProfileComponent, FastWeatherComponent } from './components';

export default function Page() {
  return (
    <main>
      <h1>My Dashboard</h1>

      {/* This renders immediately */}
      <FastWeatherComponent />

      {/* This streams in later without blocking the page */}
      <Suspense fallback={<p>Loading profile...</p>}>
        <SlowProfileComponent />
      </Suspense>
    </main>
  );
}

Comparison: loading.tsx vs. Granular Suspense

While both methods use React Suspense under the hood, they serve different purposes and offer different levels of control.

Feature	`loading.tsx` (File-based)	`<Suspense>` (Component-based)
Scope	Entire Route: Wraps the whole page or layout.	Granular: Wraps a specific component or section.
Ease of Use	Zero Config: Just create the file and Next.js handles it.	Manual: You decide exactly where to put the boundary.
User Experience	Best for "full-page" transitions and skeleton shells.	Best for keeping the "static" page visible while parts load.
TTFB	Lowest: Browser gets the "loading" shell almost instantly.	Low (Fast) for the static part, while dynamic parts stream later.
Control	"All or nothing" for that specific route segment.	High: Can have multiple boundaries with different fallbacks.

Rule of Thumb:

Use loading.tsx to show a main skeleton for a new page as it loads (UX: "I am going to a new section").
Use granular <Suspense> for secondary data within an already loaded page (UX: "I am on the page, and the dashboard widgets are popping in one by one").

Summary: Why it matters for Slow Internet

On a slow 3G or 4G connection, downloading a massive HTML file takes time. Streaming allows the browser to start parsing and rendering the "Shell" of your app immediately. By the time the slow data arrives, the user has already read the title and navigation, making the wait for the main content feel much shorter.

Modern Loading UI: Skeletons

While a simple "Loading..." text works, modern applications use Skeletons to provide a better user experience. Skeletons are placeholder versions of your UI that mimic the final layout (shape, size, and position) using grey blocks and subtle animations (like a "pulse" effect).

Why use Skeletons?

Eliminate Layout Shift: By reserving the exact space a component will occupy, you prevent the page from "jumping" when the data finally arrives.
Visual Continuity: It gives users a clear idea of what kind of content is loading (e.g., an image vs. a list of links).

Instead of one big spinner, you can stream individual sections of your page with their own custom skeletons.

// components/skeletons.tsx
export function BlogTileSkeleton() {
  return (
    <div className="border p-4 rounded-lg space-y-3 animate-pulse">
      <div className="h-48 bg-gray-200 rounded-md" /> {/* Image placeholder */}
      <div className="h-6 bg-gray-200 rounded w-3/4" /> {/* Title placeholder */}
      <div className="h-4 bg-gray-200 rounded w-full" /> {/* Description line 1 */}
      <div className="h-4 bg-gray-200 rounded w-2/3" /> {/* Description line 2 */}
    </div>
  );
}

export function SidebarTileSkeleton() {
  return (
    <div className="flex items-center space-x-4 p-2 animate-pulse">
      <div className="h-10 w-10 bg-gray-200 rounded-full" /> {/* Avatar/Icon */}
      <div className="flex-1 space-y-2">
        <div className="h-4 bg-gray-200 rounded w-3/4" />
        <div className="h-3 bg-gray-200 rounded w-1/2" />
      </div>
    </div>
  );
}

Usage with Suspense

import { Suspense } from 'react';
import { BlogList, SidebarLinks } from './components';
import { BlogTileSkeleton, SidebarTileSkeleton } from './components/skeletons';

export default function BlogPage() {
  return (
    <div className="flex gap-8">
      {/* Main Content: Blog Tiles */}
      <section className="flex-1">
        <Suspense fallback={<div className="grid grid-cols-3 gap-4">
          {[...Array(6)].map((_, i) => <BlogTileSkeleton key={i} />)}
        </div>}>
          <BlogList />
        </Suspense>
      </section>

      {/* Sidebar Tiles */}
      <aside className="w-64">
        <Suspense fallback={<div className="space-y-4">
          {[...Array(5)].map((_, i) => <SidebarTileSkeleton key={i} />)}
        </div>}>
          <SidebarLinks />
        </Suspense>
      </aside>
    </div>
  );
}

Error Boundaries (error.tsx)

The error.tsx file convention allows you to gracefully handle runtime errors in nested routes. It automatically wraps a route segment and its nested children in a React Error Boundary.

Client Component Requirement: error.tsx must be a Client Component ('use client').
Isolation: Errors are isolated to the segment where they occur. The rest of the application (like a navigation bar or sidebar) remains functional.
Recovery: It provides a reset function to allow users to attempt to recover from the error (e.g., re-trying a failed data fetch).
Global Errors: For catching errors in the root layout or template, use global-error.tsx.

Example:

// app/dashboard/error.tsx
'use client';

import { useEffect } from 'react';

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    // Optionally log the error to an error reporting service like Sentry
    console.error(error);
  }, [error]);

  return (
    <div className="flex flex-col items-center justify-center p-8 bg-red-50 text-red-900 rounded-md">
      <h2>Something went wrong!</h2>
      <p>{error.message}</p>
      <button
        onClick={() => reset()}
        className="mt-4 px-4 py-2 bg-red-600 text-white rounded"
      >
        Try again
      </button>
    </div>
  );
}

Not Found Pages (not-found.tsx)

The not-found.tsx file is used to render UI when a route cannot be found, or when the notFound() function is explicitly called.

Triggering: It renders automatically for unmatched URLs, or programmatically when you call notFound() in a Server Component or Route Handler (e.g., if a database query for an ID returns null).
Scope: Like error.tsx, it's scoped to its segment. A not-found.tsx in app/dashboard only applies to unmatched routes within the dashboard.

Example:

// app/blog/[id]/page.tsx
import { notFound } from 'next/navigation';

export default async function BlogPost({ params }: { params: { id: string } }) {
  const post = await db.post.findUnique(params.id);

  if (!post) {
    // This will trigger the closest not-found.tsx boundary
    notFound(); 
  }

  return <article>{post.content}</article>;
}

Example 2 (UI):

// app/blog/not-found.tsx
import Link from 'next/link';

export default function NotFound() {
  return (
    <div className="text-center py-20">
      <h2>Blog Post Not Found</h2>
      <p>Could not find requested resource</p>
      <Link href="/blog" className="text-blue-500 underline">Return to Blog</Link>
    </div>
  );
}

Built-in Optimizations and SEO

Next.js provides built-in components and APIs designed to drastically improve performance (Core Web Vitals) and SEO out of the box.

Image Optimization (next/image)

The <Image> component extends the standard HTML <img> element with powerful automatic optimizations.

Size Optimization: Automatically serves correctly sized images for each device, using modern formats like WebP and AVIF.
Visual Stability: Prevents Cumulative Layout Shift (CLS) automatically when images load.
Faster Page Loads: Images are lazily loaded by default (only loaded when they enter the viewport) with optional blur-up placeholders.
Asset Flexibility: Can optimize remote images (if configured in next.config.ts) as well as local assets.

Example:

import Image from 'next/image';
import profilePic from './me.png'; // Local image

export default function Profile() {
  return (
    <div>
      {/* Local Image (width/height automatically determined) */}
      <Image
        src={profilePic}
        alt="Picture of the author"
        placeholder="blur" // Optional blur-up while loading
      />

      {/* Remote Image (requires width, height, and config) */}
      <Image
        src="https://example.com/hero.jpg"
        alt="Hero image"
        width={500}
        height={500}
        priority // Use 'priority' for images above the fold (LCP)
      />
    </div>
  );
}

Font Optimization (next/font)

next/font automatically optimizes your fonts (including custom fonts) and removes external network requests for improved privacy and performance.

Self-Hosting: It downloads Google Fonts at build time and serves them locally, so there are no requests to Google servers from the browser.
No Layout Shift: It uses a CSS size-adjust property fallback to ensure there is zero layout shift when the font swaps.

Example:

// app/layout.tsx
import { Inter } from 'next/font/google';

// Configure the font subset
const inter = Inter({ subsets: ['latin'] });

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    // Apply the font class to the body
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

Metadata and SEO API

Next.js has a built-in Metadata API that allows you to easily define SEO metadata (like meta tags, title, description, Open Graph images) for improved search engine rankings and social sharing.

Static Metadata: Export a metadata object from a layout.tsx or page.tsx.
Dynamic Metadata: Export a generateMetadata function to fetch data and dynamically set titles (e.g., for a blog post).
File-Based Metadata: You can add special files like favicon.ico, opengraph-image.png, robots.txt, and sitemap.ts directly in the app directory.

Example (Static & Dynamic):

// app/layout.tsx (Static)
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: {
    template: '%s | My Site',
    default: 'My Site - Home',
  },
  description: 'The best site ever.',
};

// app/products/[id]/page.tsx (Dynamic)
import type { Metadata, ResolvingMetadata } from 'next';

export async function generateMetadata(
  { params }: { params: { id: string } },
  parent: ResolvingMetadata
): Promise<Metadata> {
  const product = await fetchProduct(params.id);

  return {
    title: product.title,
    description: product.summary,
    openGraph: {
      images: [product.imageUrl],
    },
  };
}

Data Fetching, Caching, and Revalidation

In Next.js 16, the caching model has shifted from "cache by default" to an explicit opt-in model. This gives you more control over what data is stored and for how long.

1. Default Caching Behavior (Next.js 16+)

Unlike previous versions (13/14), Next.js 16 does not cache fetch requests or components by default. Every request is considered dynamic unless you explicitly tell Next.js to cache it.

Standard Fetch: fetch('...') is equivalent to cache: 'no-store'.
Opt-in Required: You must use the 'use cache' directive to enable caching.

2. The 'use cache' Directive (Next.js 16+)

The 'use cache' directive is the modern way to cache data in Next.js. It can be applied at the file, component, or function level.

Function Level: Caches the return value of a specific asynchronous function.
Component Level: Caches the fully rendered HTML of a Server Component.
File Level: When placed at the top of a file, everything exported from that file is cached.

cacheLife: Controlling Duration

To control how long data stays in the cache, use the cacheLife function inside a 'use cache' scope. Next.js provides built-in profiles:

Profile	Revalidate (Fresh)	Expire (Stale)	Use Case
`seconds`	1 second	1 minute	Stock prices, scores
`minutes`	1 minute	1 hour	Social media feeds
`hours`	1 hour	1 day	Inventory, weather
`days`	1 day	1 week	Blog posts, documentation
`max`	30 days	1 year	Static assets, legal pages

Example: Caching with cacheLife

import { cacheLife } from 'next/cache';

async function getStockPrice(symbol: string) {
  'use cache';
  cacheLife('seconds'); // Revalidate every second

  const res = await fetch(`https://api.stocks.com/${symbol}`);
  return res.json();
}

cacheTag: On-Demand Invalidation

To purge the cache when data changes (e.g., after a database update), use cacheTag to label your data and revalidateTag to clear it.

Example: Tagging and Updating

// 1. Tag the cached data
import { cacheTag, revalidateTag } from 'next/cache';

async function getPosts() {
  'use cache';
  cacheTag('posts-list'); // Assign a unique tag
  return db.posts.findMany();
}

// 2. Invalidate the tag in a Server Action
async function addPost(formData: FormData) {
  'use server';
  await db.posts.create({ data: { ... } });

  // This immediately purges all caches labeled 'posts-list'
  revalidateTag('posts-list'); 
}

3. Migration and Summary Table

Next.js 16 provides a clear path for moving from the old model to the new one.

Method	Execution Environment	Use Case
`'use cache'`	Server (Component/Function)	Explicitly opt-in to caching
`cacheLife('days')`	Server (within 'use cache')	Set the lifetime of a cache entry
`cacheTag('tag')`	Server (within 'use cache')	Group related cache entries
`revalidateTag('tag')`	Server Only (Actions/Handlers)	Manually purge a group of caches
`revalidatePath('/')`	Server Only (Actions/Handlers)	Manually purge a specific route
`router.refresh()`	Client Only (useRouter)	Refresh the UI without losing state

4. Configuration

To use these features, enable them in your next.config.ts:

const nextConfig = {
  cacheComponents: true, // Enables 'use cache' and related APIs
};

Identifying Static vs. Dynamic Routes

When you build your Next.js application, the framework provides a clear summary of which routes are static and which are dynamic. This is essential for understanding your app's performance and caching strategy.

How to Check:

Run the build command in your terminal:

npm run build
# OR
npx next build

Understanding the Output:

At the end of the build process, you'll see a list of all your routes with a specific symbol next to them:

○ (Empty Circle) - Static: This route is rendered into a static HTML file at build time. It is extremely fast and can be cached by a CDN (Content Delivery Network).
ƒ (Lambda/Function) - Dynamic: This route is rendered at request time (SSR). It runs on the server for every user request. This happens when you use dynamic functions (like cookies() or headers()) or fetch data with cache: 'no-store'.

Why it matters:

Static routes are served as pre-rendered HTML, providing the best performance and lowest server cost.
Dynamic routes allow you to show personalized or real-time data but require server resources for every visit.
If a route you expected to be static (circle) shows up as dynamic (lambda), check if you accidentally opted out of caching or used a dynamic function.

Thank you for reading! I hope this deep dive into Next.js helps you build amazing, high-performance applications. If you found this helpful or have any questions, feel free to reach out in the comments!

Modern React Essentials: From Component Architecture to Advanced Hooks

Preyum Kumar — Thu, 09 Apr 2026 17:55:27 +0000

In an AI-driven world, we should keep our basics clear at all times. This is the second post in my next.js learning series where we will learn about React as it's a fundamental part of Next.js. In the future, I may also add an optional HTML & CSS post, but since I'm already familiar with their fundamentals, I'm not creating one just now.

Index

Modern React Development with Vite
Core React Concepts
React with TypeScript
Building UIs with Components
State Management and Hooks
Advanced Hooks and Patterns
Working with APIs: Loading and Error States
Navigation (React Router)
Performance and Optimization
Professional Testing with Vitest

Modern React Development with Vite

While you can use React by adding script tags to an HTML file, the industry standard for building real-world applications is using a build tool. Currently, Vite is the most popular and recommended tool for creating new React projects.

Prerequisites: Node.js

Before using modern tools like Vite, you must have Node.js installed. Node.js is a JavaScript runtime that allows you to run JavaScript outside of a browser.

npm (Node Package Manager): Used to download and manage libraries (like React).
npx (Node Package Execute): Allows you to run a package without installing it globally. For example, npx create-vite runs the creator tool once and then cleans up.

Why Vite?

Vite is significantly faster than older tools like create-react-app because of its modern architecture:

Native ESM: It serves code as native ES modules, which browsers can parse directly, skipping the slow bundling step during development.
Hot Module Replacement (HMR): Updates only the specific module you changed, keeping the application state intact.

Strict Mode: Why useEffect runs twice

In a new Vite project, you'll see your code wrapped in <React.StrictMode>.

The Behavior: In Development Mode, React intentionally mounts every component, unmounts it, and mounts it again. This causes useEffect to run twice.
The Why: This helps catch bugs where you've forgotten cleanup logic, but more importantly, it identifies Stale Closures and ensures your logic is Idempotent.

Idempotency Visualization:

Run 1 (Mount) → Effect Setup (e.g., Subscribe)
Run 2 (Unmount) → Effect Cleanup (e.g., Unsubscribe)
Run 3 (Re-mount) → Effect Setup (e.g., Subscribe)
Result: App remains stable. If step 2 is missing, step 3 creates a DUPLICATE subscription.

Production: This behavior is stripped away in the final build.

Environment Variables (.env)

In real applications, you never hardcode API keys or secret URLs. You store them in a .env file at the root of your project.

Definition (.env file):

# Variables MUST start with VITE_ to be visible to your React code
VITE_API_URL=https://api.myapp.com
VITE_ANALYTICS_KEY=abc123secret

Usage (in your JS code):

const apiUrl = import.meta.env.VITE_API_URL;
console.log("Connecting to:", apiUrl);

Using npm (Node Package Manager)

Local Install (npm install <package> or npm i): Adds the package to package.json under dependencies. Used for libraries your app needs to run (like React or Axios).
Development Install (npm install -D <package>): Adds to devDependencies. Used for tools needed only during coding (like Tailwind or Vite) and removed in production.
Global Install (npm install -g <package> or npm i -g): Installs the package system-wide. Typically used for CLIs (e.g., firebase-tools, nodemon).

Dev vs. Prod: Different Commands

Modern development distinguishes between "writing code" and "shipping code."

Command	Usage	Result
`npm run dev`	Development	Starts a local server with HMR.
`npm run build`	Production	Minifies JS/CSS, optimizes images into a `dist/` folder.
`npm run preview`	Production Test	Locally serves the optimized `dist/` folder for final checking.

Proxying API Requests (vite.config.js)

To avoid CORS (Cross-Origin Resource Sharing) errors, where the browser blocks requests between different ports (e.g., 5173 to 3000).

The Scenario:
Imagine your backend has an endpoint http://localhost:3000/api/users.

Before Proxy (CORS Error): axios.get('http://localhost:3000/api/users') ❌ Blocked by browser.
After Proxy (Success): axios.get('/api/users') ✅ Vite forwards this to localhost:3000.

Config (vite.config.js):

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      }
    }
  }
})

Core React Concepts

React Fundamentals

To see how React works "under the hood," you can run it in a single HTML file.

Definition:

<!DOCTYPE html>
<html>
  <head>
    <title>React Fundamentals</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      function App() {
        return <h1>Hello from fundamental React!</h1>;
      }
      const root = ReactDOM.createRoot(document.getElementById('root'));
      root.render(<App />);
    </script>
  </body>
</html>

The Virtual DOM and Reconciliation

One of the main reasons React is so fast is how it handles updates.

Visualization of the flow:

State Change → New Virtual DOM → Diffing (Compare with Old VDOM) → Patch Real DOM

Virtual DOM: Instead of changing the real browser HTML (which is slow) every time data changes, React creates a lightweight "copy" of the UI in memory.
Diffing: When state changes, React compares the new Virtual DOM with the old one to see exactly what changed.
Reconciliation: React then updates only the parts of the real DOM that actually changed.

The Immutability Principle: Why Spread?

React only re-renders if it detects a new reference in state. Direct mutation fails to trigger re-renders.

Definition:

const [user, setUser] = useState({ name: 'Preyum', age: 25 });

// ❌ WRONG: Mutation (React won't re-render)
user.age = 26;
setUser(user);

// ✅ CORRECT: Create a NEW object (React re-renders)
setUser({ ...user, age: 26 });

Technical Insight: If asked why we use the spread operator, mention Referential Equality. React uses shallow comparison (Object.is) to check if state has changed. If you mutate the object, the reference remains the same, and React assumes nothing has changed.

Babel and JSX

JSX is a syntax extension for JavaScript. Babel compiles it into React.createElement calls.

Key Rules and Why They Exist:

Strict Tag Closing: Every tag must be closed. If an element doesn't have children, you must use a self-closing tag.
```
<input type="text" /> // ✅ Correct
```
className instead of class: In JS, class is a reserved keyword for ES6 classes. React uses className to avoid conflicts.
One Root Element: A component must return a single element because a function can only return one value. Use Fragments <> </> if you don't want a wrapper div.

The .render() Method

The .render() call is the entry point where your React tree is injected into the real browser DOM.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

React with TypeScript

TSX vs. JSX: The Power of Types

In .tsx, your code won't even compile if types don't match, catching errors before they reach the browser.

Before (JSX - Dangerous):

const User = ({ name }) => <h1>{name.toUpperCase()}</h1>;
<User name={123} /> // ❌ Crash: .toUpperCase() is not a function for numbers

After (TSX - Safe):

interface UserProps { name: string; }
const User = ({ name }: UserProps) => <h1>{name.toUpperCase()}</h1>;
// <User name={123} /> // ❌ TypeScript Error: 123 is not a string!

Interface vs. Type

For 90% of React work, they are interchangeable. The key difference is extensibility:

Interfaces are "Open": They support Declaration Merging.

interface User { name: string; }
interface User { age?: number; } // ✅ Merged: User now has both

Types are "Closed": They are aliases. To combine them, you must use Intersections (&).

type Name = { name: string; };
type Age = { age: number; };
type User = Name & Age;

Required vs. Optional Properties

By default, every property is Required. Use the question mark (?) to make them optional.

Definition:

interface UserProps {
  name: string;   // Required
  age?: number;  // Optional
}

Usage:

const Greet = ({ name, age }: UserProps) => (
  <h1>Hello {name} {age ? `(${age})` : ""}</h1>
);

const App = () => (
  <>
    <Greet name="Preyum" />          {/* ✅ Works (age omitted) */}
    <Greet name="Kumar" age={25} /> {/* ✅ Works (age provided) */}
  </>
);

Typing Events in TypeScript

A major pain point is knowing how to type function arguments for events.

Definition:

const Input = () => {
  // Use React.ChangeEvent for inputs
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value);
  };

  // Use React.FormEvent for form submissions
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" onChange={handleChange} />
    </form>
  );
};

Type Inference: Implicit vs. Explicit

1. Implicit Type Inference

TypeScript "guesses" the type based on the initial value.

Example:

const [count, setCount] = useState(0); 
// TypeScript automatically knows 'count' is a number.

2. Explicit Type Definition

Necessary when the initial value is empty (like null) or complex.

Example:

interface Task { id: number; text: string; }
const [tasks, setTasks] = useState<Task[]>([]);
const [user, setUser] = useState<User | null>(null);

Generics in React and Next.js

Generics are not a feature of JavaScript or React. They are a core feature of TypeScript. Think of them as "variables for types"—they allow you to create components, hooks, or functions that are flexible enough to work with many types while still being completely safe.

1. Why do we need them?

Without generics, if you wanted a component to handle different types of data, you might be tempted to use any. But any turns off TypeScript's safety features. Generics allow you to pass a type as an argument to another type or function.

2. Usage in React

You'll see generics most commonly in:

useState: const [val, setVal] = useState<number>(0)
useRef: const inputRef = useRef<HTMLInputElement>(null)
Defining Props: If a component needs to handle a list of items where the item type varies.

Example: A Generic List Component

interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
}

function List<T>({ items, renderItem }: ListProps<T>) {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{renderItem(item)}</li>
      ))}
    </ul>
  );
}

3. Usage in Next.js

In Next.js, generics are used to define the types for page props and API responses, especially in the Page Router:

import { GetServerSideProps } from 'next';

interface PageProps {
  data: string;
}

// GetServerSideProps<T> tells Next.js what type 'props' will be
export const getServerSideProps: GetServerSideProps<PageProps> = async () => {
  return { props: { data: "Hello World" } };
};

In the App Router, while components are mostly Server Components by default, you still use generics for:

Zod Schemas: z.infer<typeof schema> uses generics under the hood.
API Client Responses: e.g., using axios.get<User>('/api/user').

Building UIs with Components

Note on File Structure: In real-world projects, every component is typically defined in its own file (e.g., Button.jsx) and then imported where needed. For clarity in these examples, we show the Definition and the Usage together.

Components

Definition:

const Button = ({ text, color, handleClick }) => (
  <button 
    onClick={handleClick}
    style={{ backgroundColor: color, color: 'white', padding: '10px' }}
  >
    {text}
  </button>
);

Usage:

const App = () => (
  <Button text="Save Changes" color="green" handleClick={() => alert("Saved!")} />
);

Event Handling: Passing Arguments

A common mistake is calling a function directly in the onClick.

Definition:

const List = () => {
  const deleteItem = (id) => console.log("Deleting", id);

  return (
    <ul>
      {/* ❌ WRONG: Runs immediately on render because of (5) */}
      <button onClick={deleteItem(5)}>Delete 5</button>

      {/* ✅ CORRECT: Wrapped in an arrow function */}
      <button onClick={() => deleteItem(5)}>Delete 5</button>

      {/* ✅ CORRECT: If no arguments, pass by reference */}
      <button onClick={console.log}>Log Event</button>
    </ul>
  );
};

Props (Properties)

Props are read-only data passed from parent to child.

Definition (Destructuring with Default Values):

const Card = ({ title = "Untitled", children, category = "General" }) => (
  <div className="card">
    <small>{category}</small>
    <h2>{title}</h2>
    <div className="content">{children}</div>
  </div>
);

The Magic "children" Prop

The children prop automatically passes whatever you put between the opening and closing tags.

Usage:

const App = () => (
  <Card title="React Basics">
    <p>This paragraph is passed as the children prop!</p>
  </Card>
);

Component Composition: Avoiding Prop Drilling

Before reaching for useContext, you can often avoid prop drilling by passing components as props. This is a sign of clean architecture.

Definition:

const Layout = ({ sidebar, content }) => (
  <div className="layout">
    <aside>{sidebar}</aside>
    <main>{content}</main>
  </div>
);

Usage:

const App = () => (
  <Layout 
    sidebar={<nav>Menu</nav>} 
    content={<h1>Dashboard</h1>} 
  />
);

Portals: Rendering Outside the Tree

Sometimes you need a component (like a Modal or Tooltip) to render at the top level of the HTML hierarchy (near <body>), even if the component is deep inside your React tree.

1. Setup (in your index.html)

<body>
  <div id="root"></div>
  <div id="portal-root"></div> <!-- Add this for Portals -->
</body>

2. Definition (in JS)

import ReactDOM from 'react-dom';

const Modal = ({ children }) => {
  return ReactDOM.createPortal(
    <div className="modal-overlay">{children}</div>,
    document.getElementById('portal-root')
  );
};

Usage:

const App = () => (
  <div style={{ overflow: 'hidden' }}>
    <p>I am deep in the tree.</p>
    <Modal>I am rendering outside this hidden div!</Modal>
  </div>
);

Lifting State Up: Sibling Communication

When two sibling components need to share data, you move the state to their closest common parent.

Definition:

const Parent = () => {
  const [text, setText] = useState("");
  return (
    <>
      <InputComponent value={text} onType={setText} />
      <DisplayComponent content={text} />
    </>
  );
};

This pattern is the foundation of React architecture because of the One-Way Data Flow principle. Data in React can only flow down from parent to child via props.

By "lifting" the state to the Parent:

The InputComponent can update the state using the onType function.
The Parent re-renders with the new value.
The new value is automatically passed down to the DisplayComponent as a prop.

Rendering Lists: The "No Index" Rule

Definition:

const Navbar = ({ items }) => (
  <ul>
    {items.map(item => (
      <li key={item.id}>{item.label}</li>
    ))}
  </ul>
);

Rule of Thumb: Avoid using the array index as a key if the list is dynamic (sortable, filterable, or removable).
The Nuance: React uses the key to identify which items have changed, been added, or removed. When the index is used, shifting an item changes the index of every subsequent item, forcing a full re-render of the entire list instead of just one targeted move.
Static Lists: If your list is strictly static (like a fixed footer menu), using index is perfectly fine and performant.

Conditional Rendering

Definition:

const AuthPanel = ({ user, error }) => (
  <div className="auth">
    {user ? (
      <button>Logout ({user.name})</button>
    ) : (
      <>
        {error && <p style={{ color: 'red' }}>{error}</p>}
        <button>Login</button>
      </>
    )}
  </div>
);

In React, we use standard JavaScript logic to decide which UI to show:

Ternary Operator (? :): Best for "If-Else" scenarios, like switching between a Login and Logout button.
Logical AND (&&): Best for "Show-Hide" scenarios, where you only want to render an element (like an error message) if a specific condition is met.

Usage:

const App = () => {
  const currentUser = { name: "Preyum" };
  const loginError = "Session Expired";

  return (
    <AuthPanel user={null} error={loginError} />
  );
};

Fragments and Keyed Fragments

Fragments <> </> allow you to group multiple elements without adding an extra <div> to the real DOM, which prevents breaking CSS layouts like Flexbox or Grid.

Keyed Fragments: If you are in a loop and need to use a fragment with a key, you cannot use the shorthand. You must use the full name.

Definition & Usage:

const Glossary = ({ items }) => (
  <dl>
    {items.map(item => (
      <React.Fragment key={item.id}>
        <dt>{item.term}</dt>
        <dd>{item.desc}</dd>
      </React.Fragment>
    ))}
  </dl>
);

Error Boundaries: The App Safety Net

A JavaScript error in a component shouldn't crash the whole app. Error Boundaries are Class Components that catch errors in their child tree.

Definition:

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  render() {
    if (this.state.hasError) return <h1>Something went wrong.</h1>;
    return this.props.children;
  }
}

Usage:

const App = () => (
  <ErrorBoundary>
    <MyBuggyComponent />
  </ErrorBoundary>
);

Styling in React: Inline vs CSS Modules vs Tailwind

1. Inline Styles (JavaScript Objects)
Styles are written as objects using camelCase instead of kebab-case.

const style = { color: 'blue', fontSize: '20px' };
const Header = () => <h1 style={style}>Styled Header</h1>;

2. CSS Modules (The Vite Standard)
Prevents global naming conflicts. Styles only apply to the component that imports them.

// Button.module.css
// .btn { background: green; }

import styles from './Button.module.css';
const Button = () => <button className={styles.btn}>Module Button</button>;

3. Tailwind CSS (The Modern Standard)
Utility-first CSS. This is the go-to for modern developers.

const Button = () => (
  <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Tailwind Button
  </button>
);

State Management and Hooks

The Rules of Hooks

To keep React stable, Hooks must follow two strict rules:

Only at the Top Level: Don't call Hooks inside loops, conditions, or nested functions.
Only in React Functions: Only call Hooks from Functional Components or Custom Hooks.

Why the "Top Level" Rule?
React keeps track of your state by the order in which Hooks are called.

Internal Visualization:

Render 1: [Hook 1 (useState), Hook 2 (useEffect), Hook 3 (useState)]
Render 2: [Hook 1 (useState), Hook 2 (useEffect), Hook 3 (useState)]

If you put a Hook inside an if statement, the order breaks, and React loses track of which state belongs to which variable!

Example: Why the "Top Level" rule matters

// ❌ WRONG: Hook inside a condition
if (user) {
  useEffect(() => {
    console.log("Logged in!");
  }, []);
}

// ✅ CORRECT: Condition inside the Hook
useEffect(() => {
  if (user) {
    console.log("Logged in!");
  }
}, [user]);

State vs. Props vs. Refs: Which one to use?

Data Flow Visualization:

Parent (Owner of State) --[Passes Props]--→ Child (Receiver)
Ref (Side Channel) ----------------------→ Target DOM Element

Tool	Trigger Render?	Mutable?	Best For...
Props	Yes (Parent re-renders)	No	Receiving data from parent.
State	Yes (Instant)	No	Data that changes over time & affects UI.
Refs	No	Yes	Accessing DOM or storing "silent" values.

useState: Controlled vs Uncontrolled

Controlled (Recommended): React state handles the input value.
Uncontrolled: The DOM handles the input value (using useRef).

Definition (Controlled Input):

const Input = () => {
  const [val, setVal] = useState("");
  return <input value={val} onChange={(e) => setVal(e.target.value)} />;
};

Definition (Uncontrolled Input):

const UncontrolledInput = () => {
  const inputRef = useRef(null);
  const getValue = () => console.log(inputRef.current.value);

  return (
    <>
      <input ref={inputRef} type="text" />
      <button onClick={getValue}>Get Value</button>
    </>
  );
};

useState: Handling Multiple Inputs

Instead of multiple state calls, use a single object.

Definition:

const Form = () => {
  const [data, setData] = useState({ name: "", email: "" });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setData(prev => ({ ...prev, [name]: value })); // Spread operator is KEY
  };

  return (
    <form>
      <input name="name" value={data.name} onChange={handleChange} />
      <input name="email" value={data.email} onChange={handleChange} />
    </form>
  );
};

useState: Asynchronous Updates and Batching

React "batches" updates together for performance.

Definition:

const Profile = () => {
  const [profile, setProfile] = useState({ name: 'Preyum', role: 'Dev' });

  const promote = () => {
    setProfile(prev => ({ ...prev, role: 'Senior Dev' }));
    // Note: profile.role will STILL be 'Dev' on this line because state updates are scheduled, not immediate.
  };

  return <button onClick={promote}>Promote {profile.name}</button>;
};

Technical Insight: React 18+ uses Automatic Batching. Even if you update state inside a setTimeout or a fetch call, React will now group them into one single render to ensure high responsiveness.

useEffect: The Dependency Array

Determines when the effect should re-run.

1. No Dependency Array

Runs after every render. This is rarely used and can lead to performance issues or infinite loops if you update state inside the effect.

useEffect(() => {
  console.log("I run on every single render!");
});

2. Empty Dependency Array ([])

Runs only once, immediately after the component is mounted. This is the ideal place for API calls or setting up subscriptions.

useEffect(() => {
  console.log("I run only once on mount (componentDidMount)");
  fetchData();
}, []);

3. Dependency Array with Values ([count])

Runs on mount and then re-runs whenever any value in the array changes. This is used to sync your effect with specific state or props.

useEffect(() => {
  console.log("I run on mount and whenever 'count' changes");
}, [count]);

useEffect: The Lifecycle Mental Model

Dependency Array	Lifecycle Phase
`[]` (Empty)	Mount
`[var]` (Populated)	Update
`return () => ...`	Unmount

useEffect Cleanup: AbortController

To prevent memory leaks or "state updates on unmounted components," always clean up API calls.

Definition & Usage:

useEffect(() => {
  const controller = new AbortController();

  const fetchData = async () => {
    try {
      const res = await axios.get('/api/data', { signal: controller.signal });
      setData(res.data);
    } catch (err) {
      // Bulletproof: Handle both native fetch and Axios abort patterns
      if (err.name === 'AbortError' || axios.isCancel(err)) return;
      console.error(err);
    }
  };

  fetchData();

  // 🧹 CLEANUP: Runs when component is destroyed
  return () => controller.abort();
}, []);

useLayoutEffect vs useEffect

useEffect: Runs after the screen is painted. Best for most tasks.
useLayoutEffect: Runs before the screen is painted. Use for measuring DOM elements to prevent UI flickering.

useRef and forwardRef

While useRef lets you access a DOM node inside your component, forwardRef allows you to pass that access to a custom child component.

Definition (forwardRef):

import { forwardRef } from 'react';

const MyInput = forwardRef((props, ref) => (
  <input ref={ref} className="fancy-input" {...props} />
));

Usage:

const Parent = () => {
  const inputRef = useRef(null);
  const handleFocus = () => inputRef.current.focus();

  return (
    <>
      <MyInput ref={inputRef} placeholder="Focus me!" />
      <button onClick={handleFocus}>Focus the Input</button>
    </>
  );
};

useImperativeHandle

Used together with forwardRef. It allows you to "expose" only specific functions or properties of a child component to its parent, rather than giving the parent full access to the underlying DOM node. This is often used for animations or manual focus management in reusable UI libraries.

Definition:

import { forwardRef, useImperativeHandle, useRef } from 'react';

const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
    shake: () => {
      console.log("Shaking the input!");
    }
  }));

  return <input ref={inputRef} {...props} />;
});

Usage:

const App = () => {
  const customRef = useRef();

  return (
    <>
      <FancyInput ref={customRef} />
      <button onClick={() => customRef.current.focus()}>Focus Child</button>
      <button onClick={() => customRef.current.shake()}>Shake Child</button>
    </>
  );
};

Advanced Hooks

useReducer: Managing Complex State with Payloads

useReducer is better than useState when you have complex data logic.

Definition:

const cartReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_ITEM': 
      // 'action.payload' is the extra data passed
      return [...state, action.payload];
    case 'REMOVE_ID':
      return state.filter(item => item.id !== action.payload);
    default: 
      return state;
  }
};

Usage:

const ShoppingCart = () => {
  const [cart, dispatch] = useReducer(cartReducer, []);

  const addToCart = (product) => {
    dispatch({ type: 'ADD_ITEM', payload: product });
  };

  return <button onClick={() => addToCart({ id: 1, name: 'Laptop' })}>Buy</button>;
};

useContext: The Provider Pattern

Professional apps refactor the context into a dedicated Provider component.

Definition (UserContext.jsx):

const UserContext = React.createContext();

export const UserProvider = ({ children }) => {
  const [user, setUser] = useState({ name: "Preyum" });
  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
};

Usage:

// 1. Wrap your app (usually in App.js or main.js)
<UserProvider>
  <Dashboard />
</UserProvider>

// 2. Consume in any child component
const Dashboard = () => {
  const { user } = useContext(UserContext);
  return <h1>Welcome, {user.name}</h1>;
};

Technical Insight: When does Context become a problem? Context is great for static-ish data (Theme, User). If the data changes every second, Context causes the entire child tree to re-render. For high-frequency state, reach for a global manager like Zustand.

Global State Alternatives (Zustand & Redux)

When Context isn't enough, developers move to dedicated state management libraries.

Redux: The traditional industry standard. It uses a "Flux" architecture with a strict unidirectional data flow. However, it is famous for requiring a lot of "boilerplate" code (Actions, Reducers, Store, Dispatch).
Zustand: A modern, lightweight alternative that is much simpler than Redux and doesn't require wrapping your whole app in Providers.

Definition (Zustand):

import { create } from 'zustand';

const useStore = create((set) => ({
  count: 0,
  inc: () => set((state) => ({ count: state.count + 1 })),
}));

Custom Hooks: Reusing Logic

Custom hooks allow you to extract component logic into reusable functions. They must start with the word use.

Definition:

const useFetch = (url) => {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch(url).then(res => res.json()).then(setData);
  }, [url]);
  return data;
};

Usage:

const UserProfile = () => {
  const userData = useFetch('/api/user/1');
  return <div>{userData?.name}</div>;
};

useId (Accessibility)

The useId hook generates unique, stable IDs that work correctly on both the server and the client. This is the professional standard for linking <label> elements to <input> fields, ensuring your forms are accessible to screen readers without risk of "ID collisions" (where two elements accidentally share the same ID).

Definition & Usage:

import { useId } from 'react';

const PasswordField = () => {
  const id = useId();
  return (
    <>
      <label htmlFor={id}>Password</label>
      <input id={id} type="password" />
    </>
  );
};

Working with APIs: Loading and Error States

Real-world API calls are not instant. You must handle three states: Idle/Loading, Success, and Error.

Definition:

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

  useEffect(() => {
    const loadData = async () => {
      try {
        setLoading(true);
        const res = await axios.get(`/api/users/${userId}`);
        setUser(res.data);
      } catch (err) {
        setError("Failed to load user profile.");
      } finally {
        setLoading(false);
      }
    };
    loadData();
  }, [userId]);

  if (loading) return <p>Loading...</p>;
  if (error) return <p style={{ color: 'red' }}>{error}</p>;
  return <h1>{user.name}</h1>;
};

Next.js Bridge: While we use useEffect + axios here (Client-side fetching), Next.js 14+ often handles data fetching on the Server (Server Components). This eliminates Loading states entirely for the user!

For Single Page Applications (SPAs), we swap components based on the URL without refreshing the page (using React Router v6 syntax).

Definition (Dynamic Routes):

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

const UserPage = () => {
  const { id } = useParams(); // Extracts '123' from /user/123
  return <h1>Profile of ID: {id}</h1>;
};

const RouterApp = () => (
  <BrowserRouter>
    <nav>
      <Link to="/">Home</Link>
      <Link to="/user/123">My Profile</Link>
    </nav>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/user/:id" element={<UserPage />} />
    </Routes>
  </BrowserRouter>
);

Performance and Optimization

React.memo

Wraps a component to prevent re-renders if its props haven't changed.

Definition:

const PureChild = React.memo(({ name }) => {
  console.log("Child render");
  return <div>{name}</div>;
});

useMemo and useCallback

useMemo: Caches a calculated Value.
useCallback: Caches a Function instance.

Fundamental Rule: Referential Equality
In JavaScript, objects and functions are compared by reference, not by value.

{} === {} // false
() => {} === () => {} // false

Because of this, React will often re-render child components even if the "data" looks the same, simply because the reference changed. This is exactly what useMemo and useCallback prevent.

The Danger of Over-Optimization:
Don't wrap everything in useMemo. The overhead of dependency checking and memory allocation for the cache can be more expensive than the calculation itself.

Only use them for:

Truly Expensive Calculations: (e.g., sorting 10,000 items).
Referential Equality: When passing functions/objects to React.memo children.

useTransition (React 18)

Allows you to mark state updates as "non-urgent" to keep the UI responsive. It returns [isPending, startTransition].

Definition:

const [isPending, startTransition] = useTransition();

// Marking an update as non-urgent
startTransition(() => {
  setNonUrgentState(newValue);
});

Usage:

import { useState, useTransition } from 'react';

function ListFilter({ names }) {
  const [query, setQuery] = useState('');
  const [highlight, setHighlight] = useState('');
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    // Urgent update (input field)
    setQuery(e.target.value);

    // Non-urgent update (list filtering)
    startTransition(() => {
      setHighlight(e.target.value);
    });
  };

  return (
    <div>
      <input type="text" value={query} onChange={handleChange} />
      {isPending && <p>Filtering...</p>}
      <ul>
        {names.map(name => (
          <li key={name} style={{ color: name.includes(highlight) ? 'red' : 'black' }}>
            {name}
          </li>
        ))}
      </ul>
    </div>
  );
}

useDeferredValue

Defers updating a value until the main UI thread is free. This is perfect for expensive filtering or rendering that doesn't need to be immediate.

Definition:

const deferredValue = useDeferredValue(originalValue);

Usage:

import { useState, useDeferredValue, useMemo } from 'react';

function SearchResults({ query, items }) {
  // Defer the query value itself
  const deferredQuery = useDeferredValue(query);

  // Use the deferred value for expensive filtering
  const filteredItems = useMemo(() => {
    return items.filter(item => item.includes(deferredQuery));
  }, [deferredQuery]);

  return (
    <ul style={{ opacity: query !== deferredQuery ? 0.5 : 1 }}>
      {filteredItems.map(item => <li key={item}>{item}</li>)}
    </ul>
  );
}

Lazy Loading and Suspense

This splits your application into smaller chunks. Instead of loading the entire app on the first visit, React only loads the parts the user actually navigates to.

Definition:

import { lazy, Suspense } from 'react';

// This component is loaded only when needed
const HeavyDashboard = lazy(() => import('./Dashboard'));

const App = () => (
  <Suspense fallback={<div>Loading Page Chunks...</div>}>
    <HeavyDashboard />
  </Suspense>
);

Professional Testing with Vitest

Testing ensures your components don't break when you add new features.

Definition (Install):

npm install -D vitest @testing-library/react @testing-library/jest-dom jsdom

Usage (Simple Test):

import { render, screen } from '@testing-library/react';
import { test, expect } from 'vitest';
import Button from './Button';

test('renders button with correct text', () => {
  render(<Button text="Click Me" />);
  const btnElement = screen.getByText(/Click Me/i);
  expect(btnElement).toBeInTheDocument();
});

Stay tuned for my next post, where we'll be exploring Next.js Fundamentals! While this covers the essentials of React, if there’s anything you feel I should have included, let me know in the comments below and I'll gladly add it!

Modern JavaScript Essentials: From Basics to Asynchronous Programming

Preyum Kumar — Mon, 23 Mar 2026 15:19:44 +0000

In an AI-driven world, a strong foundation in core technologies is essential. To keep my skills sharp, I'm starting a regular blog series covering the tech stack I use. Welcome to the first post in my Next.js journey, where we'll start by mastering the JavaScript fundamentals.

JavaScript

Index

Index
Foundations
Operators and Logic
Strings
Control Flow
Arrays
Functions and Scope
Modern ES6+ Features
Objects
Classes and OOP
Built-in Objects and Web APIs
Document Object Model (DOM)
Asynchronous JavaScript
Modules (Import and Export)

Foundations

How to Install JavaScript

We don't install javascript. If we have any internet browser, there is support for JavaScript there.
Chrome/Safari/Firefox all have javascript support.
Along with browsers we can also use platforms like codepen.io or platforms like scrimba.com

Putting Comments in the Code

To put comment in the code we use //

let val = "apple" // It is a comment

For multiline comment we can use /* */

let fruit = "apple"
/* This is a 
    Multiline
    Comment
*/
let number = 9

The Variables

JavaScript has three types of variables var, let and const.
var can be used to define a variable and the values can be redefined. It was used mainly in the past as it was the only option but now a days it is not intended to be used normally. It is because it has issues like ignoring block scope, and getting attached to the window scope in global scope. var has function scope meaning if defined inside a function it will be remembered only inside that function. var variables can also be redeclared which can cause silent bugs.

var fruitName = "Apple";
var fruitName = "Mango"; // Redeclaration is allowed (can cause bugs)
fruitName = "Banana"; // Reassignment is allowed
console.log(fruitName); // "Banana"

if (true) {
    var blockVar = "I ignore block scope!";
}
console.log(blockVar); // "I ignore block scope!" (Accessible outside the block)

Implicit global variable creation - Recipe for bugs: If you assign a value to a variable without declaring it with var, let, or const, JavaScript automatically makes it a global variable (attached to the window object). This can lead to unexpected overwrites and hard-to-trace bugs.

function createBug() {
    // Implicit global variable creation
    rogueFruit = "Mango"; 
}
createBug();
console.log(rogueFruit); // Outputs "Mango" even outside the function!

let is similar as var but with block scoping. Also in case of hoisting var is set as undefined while let and const can go to TDZ (Temporal Dead Zone) meaning they will have no value and get Reference Error if accessed. let does not allow redeclaration of the same variable and so does const.

let myName = "Preyum Kumar";
myName = "Preyum"; // Allowed: Reassignment
// let myName = "Kumar"; // Error: Cannot redeclare block-scoped variable

const is used when we want to define a variable only once and freeze its reference. Strings and numbers defined as const are locked in while arrays can be inserted with more values as only their reference is constant. const needs to be defined at the time of declaration unlike the other two variables.

const favoriteFruit = "Apple";
// favoriteFruit = "Banana"; // TypeError: Assignment to constant variable.

const fruitBasket = ["Apple"];
fruitBasket.push("Orange"); // Allowed: We are modifying the array, not the reference.
console.log(fruitBasket); // ["Apple", "Orange"]

The DataTypes

undefined: Represents a variable that has been declared but not yet assigned a value.
number: Represents both integer and floating-point numbers.
boolean: Represents a logical entity and can have two values: true or false.
string: Represents a sequence of characters used to represent text.
null: Represents the intentional absence of any object value.
object: Represents a collection of properties (key-value pairs) or complex data structures (like arrays, functions).
symbol: Represents a unique and immutable primitive value, often used as object property keys.
bigint: Represents whole numbers larger than the maximum safe integer (Number.MAX_SAFE_INTEGER, which is 9007199254740991 or 2^53 - 1).

let notAssigned;
console.log(typeof notAssigned); // "undefined"

let age = 25;
console.log(typeof age); // "number"

let isComputerScienceExpert = true;
console.log(typeof isComputerScienceExpert); // "boolean"

let name = "Preyum Kumar";
console.log(typeof name); // "string"

let emptyValue = null;
console.log(typeof emptyValue); // "object" (This is a known quirk in JavaScript!)

let person = { name: "Preyum", domain: "Computer Science" };
console.log(typeof person); // "object"

let uniqueId = Symbol("id");
console.log(typeof uniqueId); // "symbol"

// The 'n' at the end tells JavaScript to treat this as a BigInt
let largeNumber = 9007199254740992n; // 1 larger than MAX_SAFE_INTEGER
console.log(typeof largeNumber); // "bigint"

Auto-Boxing

Auto-boxing is a process where JavaScript automatically wraps primitive data types (like strings, numbers, and booleans) in their corresponding object wrappers (String, Number, Boolean) behind the scenes when you try to access properties or methods on them.
Primitives themselves don't have properties or methods. However, thanks to auto-boxing, you can use methods as if they were objects. JavaScript creates a temporary object, calls the method, and then immediately discards the temporary object.

let myString = "hello world";

// "myString" is a primitive string, not an object. 
// But when we access .length, JavaScript temporarily wraps it in a String object.
console.log(myString.length); // 11

// Same happens when we call methods like .toUpperCase()
console.log(myString.toUpperCase()); // "HELLO WORLD"

let myNum = 123.456;
// Number primitive temporarily boxed to use .toFixed()
console.log(myNum.toFixed(1)); // "123.5"

Operators and Logic

Operators, Shorthand and Semicolon

The lines are recognizable with or without semicolon. Semicolons are optional but recommended for clarity.

let fruit1 = "Apple"
let fruit2 = "Orange"; // Both lines are valid

Operators +, -, /, %, <, >, <=, >=, *, &&, || etc and their shorthand use:

let total = 10 + 5; // 15
let diff = 10 - 5; // 5
let mult = 10 * 5; // 50
let div = 10 / 5; // 2
let remainder = 10 % 3; // 1

// Comparison
console.log(10 > 5); // true
console.log(10 <= 10); // true

// Logical
console.log(true && false); // false
console.log(true || false); // true

// Shorthand assignments
let count = 5;
count += 5; // Equivalent to: count = count + 5 (Result: 10)
count *= 2; // Equivalent to: count = count * 2 (Result: 20)

Operators like == and === also != and !==:
- == checks for value equality (with type coercion).
- === checks for strict equality (both value and type must match).

console.log(5 == "5"); // true (Type coercion happens)
console.log(5 === "5"); // false (Different types: Number vs String)
console.log(5 != "5"); // false
console.log(5 !== "5"); // true

Object.is(): A static method that determines whether two values are the same value. It is similar to === but has two important differences: it considers NaN to be equal to NaN, and it considers +0 and -0 to be different.

console.log(Object.is(5, 5)); // true
console.log(Object.is("5", 5)); // false

// Differences from ===
console.log(NaN === NaN); // false
console.log(Object.is(NaN, NaN)); // true

console.log(+0 === -0); // true
console.log(Object.is(+0, -0)); // false

Also incrementing and decrementing shorthand like ++, --:

let step = 1;
step++; // Increments step by 1 (Result: 2)
step--; // Decrements step by 1 (Result: 1)

Operator Precedence

Operator precedence determines the order in which operators are evaluated. Operators with higher precedence are evaluated first.
Multiplication (*) and division (/) have higher precedence than addition (+) and subtraction (-).
You can use parentheses () to override the default precedence and force a specific order of evaluation.

let result1 = 10 + 5 * 2; // 20 (Multiplication first)
let result2 = (10 + 5) * 2; // 30 (Parentheses evaluated first)

console.log(result1);
console.log(result2);

Type Coercion and Conversion

Type Coercion is the implicit (automatic) conversion of values from one data type to another by JavaScript. Because JavaScript is a weakly-typed language, it will often try to "help" you by converting types on the fly to complete an operation. This can lead to unexpected bugs.

// --- Implicit Type Coercion ---
// 1. String Coercion: Happens when using the + operator with a string
let strCoercion = "5" + 2; // "52" (The number 2 is coerced into a string)
let boolCoercion = "Hello " + true; // "Hello true"

// 2. Number Coercion: Happens with math operators like -, *, / (but NOT +)
let numCoercion1 = "5" - 2; // 3 (The string "5" is coerced into a number)
let numCoercion2 = "10" * "2"; // 20 

// 3. Boolean Coercion: Happens in if-statements or logical operators
if ("hello") {
    console.log("This runs because 'hello' is truthy!");
}

Type Conversion (Explicit Casting)

To avoid bugs caused by implicit coercion, you should use Type Conversion (explicitly forcing a value to be a specific type).
You can do this using the built-in functions: Number(), String(), and Boolean().

// --- Explicit Type Conversion ---
// 1. Convert to Number (Prevents the "52" concatenation bug)
let userInput = "5";
let total = Number(userInput) + 2; 
console.log(total); // 7 (Correct math, not "52")

// 2. Convert to String
let myNum = 100;
let explicitString = String(myNum); // "100"
// Alternatively, using the auto-boxed .toString() method:
// let explicitString = myNum.toString();

// 3. Convert to Boolean
// Often used to quickly force a truthy/falsy value into an actual true/false boolean
let hasData = Boolean("Some User Data"); // true
let hasEmptyData = Boolean(""); // false

// A common shorthand for converting to boolean is using double negation (!!)
let quickBool = !!"Some Data"; // true

Truthy and Falsy Values

In JavaScript, a truthy value is a value that is considered true when encountered in a Boolean context (like an if statement). A falsy value is a value that is considered false.
Everything in JavaScript is truthy except for a specific list of falsy values.
The Falsy values are exactly these:
- false
- 0 (zero)
- -0 (minus zero)
- 0n (BigInt zero)
- "", '', (empty strings) * null * undefined * NaN (Not-a-Number) * Truthy values are everything else, including empty arrays ([]), empty objects ({}), and strings with just a space (" ").

if ("") {
    console.log("This won't run because an empty string is falsy.");
}

if (" ") {
    console.log("This WILL run because a string with a space is truthy.");
}

if ([]) {
    console.log("This WILL run because an empty array is truthy.");
}

Ternary Operator and Short-Circuit Evaluation

Ternary Operator: A concise way to write an if-else statement. It takes three operands: a condition followed by a question mark (?), an expression to execute if truthy, and a colon (:), followed by an expression to execute if falsy. Heavily used in React for conditional rendering.

let age = 20;
// Condition ? exprIfTrue : exprIfFalse
let canVote = age >= 18 ? "Yes" : "No";
console.log(canVote); // "Yes"

Short-Circuit Evaluation (&& and ||):
- && (Logical AND): Returns the first falsy value, or the last truthy value if all are truthy. Very commonly used in React to render components conditionally (e.g., isLoggedIn && <Dashboard />).
- || (Logical OR): Returns the first truthy value, or the last falsy value if all are falsy. Useful for assigning default values.

let isLoggedIn = true;
// The second part only executes if the first part is true
isLoggedIn && console.log("User dashboard rendered");

let userTheme = null;
let defaultTheme = "dark";
// If userTheme is falsy (like null), it falls back to "dark"
let activeTheme = userTheme || defaultTheme;
console.log(activeTheme); // "dark"

Optional Chaining and Nullish Coalescing

Optional Chaining (?.): Enables reading the value of a property located deep within a chain of connected objects without having to check that each reference in the chain is valid. It returns undefined if the reference is nullish (null or undefined) instead of throwing an error. Very helpful when dealing with API data in Next.js.

let userProfile = {
    name: "Preyum Kumar",
    // address is missing here
};

// Trying to access userProfile.address.city directly would throw an error.
// Using ?. safely handles it:
let city = userProfile?.address?.city;
console.log(city); // undefined

Nullish Coalescing Operator (??): A logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.
- Why use ?? instead of ||? The Logical OR (||) operator falls back to the right side if the left side is any falsy value (like 0, "", false, null, undefined). This causes bugs when 0 or "" are actually valid, intended values (e.g., a video with 0 views). The ?? operator fixes this by only falling back if the value is explicitly missing (null or undefined).

// Scenario: A video has exactly 0 views.
let videoViews = 0; 
let defaultViews = 10;

// Bug with OR operator (||): 
// JavaScript sees 0 as "falsy" and thinks the value is missing, so it applies the default.
console.log(videoViews || defaultViews); // Output: 10 (Incorrect: it overwrote our valid 0 views!)

// Fix with Nullish Coalescing (??):
// JavaScript checks if videoViews is exactly `null` or `undefined`. Since it's a valid 0, it keeps it.
console.log(videoViews ?? defaultViews); // Output: 0 (Correct!)

// If the value was actually missing:
let missingViews = null;
console.log(missingViews ?? defaultViews); // Output: 10 (Correctly applies default)

Strings

The Escape Character and Strings

Example of string with "" and inside also double quotes:

let quote = "Preyum Kumar said, \"Computer Vision is fascinating!\"";

Other ways like using single quote to cover double quotes:

let singleQuoteStr = 'Preyum Kumar said, "NLP is amazing!"';

Other way to use back ticks `` to put both single and double quotes inside:

let backtickStr = `Preyum's favorite subject is "Computer Science".`;

To put backslash itself we use two backslashes:

let path = "C:\\Users\\PreyumKumar\\Documents";

Backtick for Strings with values

Backticks () are used to create Template Literals, allowing for string interpolation (embedding variables/expressions inside strings).
Example with backtick strings with values:

let author = "Preyum Kumar";
let topic = "NLP";
let message = `${author} is an expert in ${topic}.`;
console.log(message);

Also if we want $ sign also to be printed use escape character for the same:

let price = 500;
let costMessage = `The total cost is \$${price}.`;
console.log(costMessage); // "The total cost is $500."

Control Flow

For, While, Do While and Switch

For Loop: Repeats a block of code a specific number of times.

let fruits = ["Apple", "Mango", "Banana"];
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

While Loop: Executes a block of code as long as a specified condition is true.

let count = 0;
while (count < 3) {
    console.log("Count is: " + count);
    count++;
}

Do...While Loop: Similar to a while loop, but it executes the block of code at least once before checking the condition.

let runs = 0;
do {
    console.log("This runs at least once!");
    runs++;
} while (runs < 0);

Switch Statement: Evaluates an expression, matching the expression's value to a case clause, and executes statements associated with that case.

let chosenFruit = "Apple";

switch (chosenFruit) {
    case "Banana":
        console.log("You chose Banana.");
        break;
    case "Apple":
        console.log("You chose Apple.");
        break;
    default:
        console.log("Unknown fruit.");
}

Break and Continue

Control flow statements like loops can be altered using break and continue.
break: Immediately exits the entire loop (or switch statement). Execution continues with the code that follows the loop.
continue: Skips the current iteration of the loop and immediately jumps to the next iteration.

// Using 'break' to stop the loop early
for (let i = 1; i <= 5; i++) {
    if (i === 3) {
        console.log("Found 3! Breaking out of the loop.");
        break; // Loop stops completely here
    }
    console.log("Iteration: " + i);
}
/* Output:
Iteration: 1
Iteration: 2
Found 3! Breaking out of the loop.
*/

// Using 'continue' to skip a specific iteration
for (let j = 1; j <= 5; j++) {
    if (j === 3) {
        console.log("Skipping 3!");
        continue; // Skips to j = 4
    }
    console.log("Iteration: " + j);
}
/* Output:
Iteration: 1
Iteration: 2
Skipping 3!
Iteration: 4
Iteration: 5
*/

Error Handling (try...catch and throw)

try...catch: Allows you to test a block of code for errors (try) and handle the error if one occurs (catch). This prevents the entire script from crashing.
throw: Used to create custom errors. You can "throw" an exception (an object, string, or number).
finally: A block that runs regardless of whether an error was thrown or caught.

function checkAge(age) {
    if (age < 18) {
        // Throwing a custom error
        throw new Error("You must be at least 18 years old.");
    }
    return "Access granted.";
}

try {
    console.log(checkAge(15));
} catch (error) {
    // Handling the error
    console.error("Caught an error:", error.message);
} finally {
    console.log("Age check process completed.");
}

Synchronous Limitation of throw: A standard throw statement is synchronous. It only works within the current execution stack. If you try to use throw inside an asynchronous callback (like setTimeout), it cannot be caught by a try...catch block that surrounds the async call. This is why reject is used for future (asynchronous) errors.

// --- 1. The PROBLEM: throw fails in Async ---
try {
    setTimeout(() => {
        // throw new Error("Async Error!"); 
        // ^ This would crash the program because the 'try...catch' 
        // block below has already finished executing!
    }, 1000);
} catch (e) {
    console.log("This will NEVER run:", e); 
}

// --- 2. The SOLUTION: reject() in a Promise ---
const asyncTask = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject("Async Error caught via Promise!"); 
        }, 1000);
    });
};

asyncTask()
    .then(msg => console.log(msg))
    .catch(err => console.log("SUCCESSFULLY caught:", err));

Arrays

Array Methods

push() and pop(): push() adds one or more elements to the end of an array and returns the new length. pop() removes the last element from an array and returns that element.

let fruits = ["Apple", "Mango"];
fruits.push("Banana"); // ["Apple", "Mango", "Banana"]
let last = fruits.pop(); // Removes "Banana". Array is back to ["Apple", "Mango"]

splice(): Changes the contents of an array by removing or replacing existing elements and/or adding new elements in place. It mutates the original array.
- Syntax: array.splice(startIndex, deleteCount, item1, item2, ...)

let colors = ["Red", "Green", "Blue", "Yellow"];
// Start at index 1, delete 2 elements ("Green", "Blue"), and insert "Purple"
colors.splice(1, 2, "Purple"); 
console.log(colors); // ["Red", "Purple", "Yellow"]

forEach(): Executes a provided function once for each array element. It is used purely for executing side-effects (like logging or modifying external variables) and always returns undefined, unlike map() which returns a new array.

let techStack = ["JavaScript", "React", "Next.js"];
techStack.forEach((tech, index) => {
    console.log(index + ": " + tech);
});
// Output:
// 0: JavaScript
// 1: React
// 2: Next.js

map(): Creates a new array populated with the results of calling a provided function on every element in the calling array. This is the primary way to render lists of elements in React.

let numbers = [1, 2, 3];
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

filter(): Creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided function. Constantly used for manipulating state arrays, like deleting an item from a list.

let ages = [15, 21, 18, 12, 30];
let adults = ages.filter(age => age >= 18);
console.log(adults); // [21, 18, 30]

reduce(): Executes a user-supplied "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.

let prices = [10, 20, 30];
let totalCost = prices.reduce((acc, current) => acc + current, 0);
console.log(totalCost); // 60

Typed Arrays

Typed Arrays are array-like objects that provide a mechanism for reading and writing raw binary data in memory buffers. While standard arrays can grow dynamically and hold any data type, Typed Arrays have a fixed length and only store a specific numeric type (like integers or floats).
They are heavily used in performance-critical applications, WebGL, and when handling binary data from APIs or files.
Common types: Int8Array, Uint8Array, Int32Array, Float64Array, etc.

// Create a buffer of 16 bytes
let buffer = new ArrayBuffer(16);

// Create a view that treats the buffer as an array of 32-bit signed integers
let int32View = new Int32Array(buffer);

int32View[0] = 42;
int32View[1] = 100;

console.log(int32View.length); // 4 (Since 16 bytes / 4 bytes per Int32 = 4)
console.log(int32View[0]); // 42

// You can also initialize directly with an array
let uint8 = new Uint8Array([10, 20, 30]);
console.log(uint8[1]); // 20

Functions and Scope

Regular, Anonymous and Arrow Functions

Regular Functions: Declared using the function keyword. They have their own this context.

function greet(name) {
    return "Hello, " + name;
}
console.log(greet("Preyum Kumar"));

Anonymous Functions: Functions without a name, often assigned to variables or passed as callbacks (discussed in detail later).

let sayGoodbye = function(name) {
    return "Goodbye, " + name;
};

Arrow Functions: A concise syntax for writing functions. They do not have their own this binding (they inherit it from the parent scope).
- Explicit Return: When using curly braces {}, you must explicitly use the return keyword to return a value.
- Implicit Return: If you omit the curly braces, the arrow function implicitly returns the single evaluated expression. You can wrap the expression in parentheses () for multi-line implicit returns, which is very common in React JSX.

// Explicit Return (uses {})
const greetArrow = (name) => {
    return "Hello, " + name;
};

// Implicit Return (no {}, evaluates the expression on the same line)
const greetShort = name => "Hello, " + name;

// Implicit Return with Parentheses (useful for returning objects)
const getUser = (name) => ({
    name: name,
    role: "Admin"
});

Closures

A Closure is a feature in JavaScript where an inner function has access to the outer (enclosing) function's variables—a scope chain. Closures are a fundamental concept that explains how React Hooks (like useState and useEffect) "remember" values between renders.

function makeCounter() {
    let count = 0; // count is a local variable created by makeCounter

    return function() { // The inner function is a closure
        count++; // It has access to count from the outer function
        return count;
    };
}

let myCounter = makeCounter();
console.log(myCounter()); // 1
console.log(myCounter()); // 2
console.log(myCounter()); // 3

The this Keyword

The this keyword refers to the context in which a function is executed. Its value depends on how the function is called, not where it's defined (except for arrow functions).

1. Global Context

In the global scope (outside any function), this refers to the global object (window in browsers).

console.log(this === window); // true

2. Inside a Regular Function

Non-strict mode: this defaults to the global object (window).
Strict mode ('use strict'): this is undefined. This is a safety feature to prevent accidental modification of the global object.

function showThis() {
    "use strict";
    console.log(this); 
}
showThis(); // undefined

3. Inside a Method (Object Context)

When a function is called as a method of an object, this refers to the object itself.

const user = {
    name: "Preyum",
    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
};
user.greet(); // "Hello, my name is Preyum"

4. Arrow Functions (Lexical this)

Arrow functions do not have their own this. Instead, they inherit this from the surrounding (lexical) scope at the time they are created. This makes them ideal for callbacks (like in setTimeout or array methods) where you want to keep the original context.

const group = {
    title: "Our Team",
    members: ["Preyum", "John"],
    showList() {
        // Regular function inside forEach would have 'this' as undefined (in strict)
        this.members.forEach((member) => {
            // Arrow function inherits 'this' from showList()
            console.log(`${this.title}: ${member}`);
        });
    }
};
group.showList(); 
// "Our Team: Preyum"
// "Our Team: John"

5. Changing this Context (call, apply, bind)

JavaScript provides three methods to explicitly set the value of this.
.call(thisArg, arg1, arg2, ...): Invokes the function immediately with the specified this and arguments passed individually.
.apply(thisArg, [argsArray]): Invokes the function immediately with the specified this and arguments passed as an array.
.bind(thisArg, arg1, ...): Returns a new function with this permanently bound to the specified object. It does not invoke the function immediately.

const person1 = { name: "Preyum" };
const person2 = { name: "Alice" };

function introduce(skill, hobby) {
    console.log(`I'm ${this.name}. I'm good at ${skill} and I like ${hobby}.`);
}

// .call() - Arguments passed individually
introduce.call(person1, "NLP", "Chess");

// .apply() - Arguments passed as an array
introduce.apply(person2, ["Computer Vision", "Gaming"]);

// .bind() - Creates a new function
const boundIntro = introduce.bind(person1, "Next.js", "Blogging");
boundIntro(); // Can be called later

Function Arguments

Default Arguments use case: We can assign default values to parameters to ensure the function works even if some arguments are missing.

function makeJuice(fruit1, fruit2 = "Water") {
    return `Making juice with ${fruit1} and ${fruit2}`;
}
console.log(makeJuice("Apple")); // "Making juice with Apple and Water"

Order in which default arguments must be: Default arguments must be placed at the end of the parameter list. If they are placed first, JavaScript won't know which arguments to skip when fewer arguments are passed.

// WRONG: function wrongOrder(fruit1 = "Apple", fruit2) { ... }
// CORRECT:
function correctOrder(fruit1, fruit2 = "Banana") {
    console.log(fruit1, fruit2);
}

Modern ES6+ Features

Spread Operator

The spread operator (...) allows an iterable (like an array or string) to be expanded in places where zero or more arguments or elements are expected, or an object expression to be expanded.
How spread operator is used to actually copy array:

let originalFruits = ["Apple", "Mango"];
// let badCopy = originalFruits; // This just copies the reference!

let goodCopy = [...originalFruits]; // Creates a true, independent copy
goodCopy.push("Banana");

console.log(originalFruits); // ["Apple", "Mango"]
console.log(goodCopy); // ["Apple", "Mango", "Banana"]

Rest Parameters

The Rest Parameter syntax (...args) allows a function to accept an indefinite number of arguments as an array. While the spread operator expands iterables into individual elements, the rest parameter collects multiple elements and condenses them into a single array.

function calculateSum(...numbers) {
    // numbers is an array containing all passed arguments
    return numbers.reduce((total, num) => total + num, 0);
}

console.log(calculateSum(1, 2, 3)); // 6
console.log(calculateSum(10, 20, 30, 40, 50)); // 150

Destructuring object values for assignment

Destructuring makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
Destructing single layer example:

let user = {
    name: "Preyum Kumar",
    domain: "Computer Science"
};

let { name, domain } = user;
console.log(name); // "Preyum Kumar"

Destructuring nested object for assignment:

let expertUser = {
    profile: {
        firstName: "Preyum",
        expertise: "Computer Vision"
    }
};

let { profile: { firstName, expertise } } = expertUser;
console.log(expertise); // "Computer Vision"

Objects

Objects: Dot and Bracket Notation

Objects store data in key-value pairs. You can access these values using either dot notation or bracket notation.
Dot Notation (object.property): The most common and readable way to access properties. The property name must be a valid JavaScript identifier (no spaces, doesn't start with a number).
Bracket Notation (object["property"]): Required when the property name contains spaces, special characters, or when you are accessing a property dynamically using a variable.

let car = {
    make: "Toyota",
    "model year": 2022,
    color: "blue"
};

// Dot notation
console.log(car.make); // "Toyota"

// Bracket notation required for strings with spaces
console.log(car["model year"]); // 2022

// Bracket notation for dynamic property access
let propName = "color";
console.log(car[propName]); // "blue"

Object Shorthand Syntax

ES6 introduced concise ways to define properties and methods inside objects, reducing boilerplate code.
Shorthand Property Names: If the key and the variable name you want to assign to it are the exact same, you can just write the variable name once instead of key: value.
Shorthand Method Names: You can omit the function keyword and the colon : when defining methods inside an object.

let name = "Preyum";
let role = "Admin";

// Traditional ES5 way
let oldUser = {
    name: name,
    role: role,
    greet: function() {
        return "Hello " + this.name;
    }
};

// ES6 Shorthand Syntax (Cleaner and more common in React/Next.js)
let modernUser = {
    name, // Shorthand property
    role, // Shorthand property
    greet() { // Shorthand method
        return "Hello " + this.name;
    }
};

console.log(modernUser.greet()); // "Hello Preyum"

Object Methods

JavaScript provides several built-in methods to work with objects, returning arrays of their keys, values, or entries (key-value pairs).
Object.keys(): Returns an array of a given object's own enumerable string-keyed property names.
Object.values(): Returns an array of a given object's own enumerable string-keyed property values.
Object.entries(): Returns an array of a given object's own enumerable string-keyed property [key, value] pairs.

let user = {
    name: "Preyum Kumar",
    domain: "Computer Science",
    expertise: "Computer Vision"
};

console.log(Object.keys(user)); 
// ["name", "domain", "expertise"]

console.log(Object.values(user)); 
// ["Preyum Kumar", "Computer Science", "Computer Vision"]

console.log(Object.entries(user)); 
// [["name", "Preyum Kumar"], ["domain", "Computer Science"], ["expertise", "Computer Vision"]]

Shallow and Deep Copy

In JavaScript, primitive types (like numbers and strings) are passed by value, but objects and arrays are passed by reference. This means if you assign an object to a new variable and modify it, you are modifying the original object. To prevent this, we need to create copies.

Shallow Copy

A shallow copy creates a new object and copies over the top-level properties. However, if the object contains nested objects or arrays, the nested structures are still passed by reference.
Ways to create a shallow copy:
- Spread Operator (...) for both objects and arrays.
- Object.assign() for objects.
- .slice() specifically for arrays. It returns a shallow copy of a portion of an array into a new array object. If used without arguments, it copies the entire array.

const originalArray = ["Apple", "Mango", "Banana"];

// Direct assignment just copies the reference (BAD!)
// const badCopy = originalArray; 

// Using .slice() to create a true shallow copy (GOOD!)
const copiedArray = originalArray.slice();

copiedArray.push("Orange"); // Modifies only the copy

console.log(originalArray); // ["Apple", "Mango", "Banana"]
console.log(copiedArray); // ["Apple", "Mango", "Banana", "Orange"]

let originalObj = { 
    name: "Preyum", 
    details: { age: 25 } 
};

// Shallow copy using Spread Operator
let shallowCopy = { ...originalObj };

shallowCopy.name = "Preyum Kumar"; // Only changes the copy (top-level)
shallowCopy.details.age = 30;      // Changes BOTH original and copy! (nested)

console.log(originalObj.name); // "Preyum"
console.log(originalObj.details.age); // 30 (Oops, original was mutated)

Deep Copy

A deep copy creates a completely independent clone of the original object, including all nested objects and arrays. Modifying the deep copy will never affect the original.
Ways to create a deep copy:
- JSON.parse(JSON.stringify(object)): The traditional, hacky way. It works for most simple objects but fails if the object contains functions, undefined, Date objects, or circular references.
- structuredClone(object): The modern, native JavaScript way (introduced recently in browsers/Node.js). It perfectly clones complex objects, including Dates, Sets, Maps, and more.

let user = { 
    name: "Preyum", 
    details: { age: 25 },
    joined: new Date()
};

// Deep copy using structuredClone (Modern native method)
let deepCopy = structuredClone(user);

deepCopy.details.age = 30; // Modifies ONLY the copy

console.log(user.details.age); // 25 (Original remains completely untouched)

Getters and Setters

Getters (get) bind an object property to a function that will be called when that property is looked up.
Setters (set) bind an object property to a function to be called when there is an attempt to set that property.

let person = {
    firstName: "Preyum",
    lastName: "Kumar",

    get fullName() {
        return `${this.firstName} ${this.lastName}`;
    },

    set updateFirstName(newName) {
        if(newName.length > 0) {
            this.firstName = newName;
        } else {
            console.log("Name cannot be empty");
        }
    }
};

console.log(person.fullName); // "Preyum Kumar"
person.updateFirstName = "PreyumK";
console.log(person.fullName); // "PreyumK Kumar"

Classes and OOP

Classes and Private Fields (#)

Classes are a blueprint for creating objects. They encapsulate data with code that works on that data.
Private Fields (#): By default, class properties and methods are public. To make them private, prefix their name with a hash #. Private fields cannot be accessed or called from outside the class or from its subclasses.
Benefits of Private Fields: Encapsulation, preventing unintended access to internal state, and reducing potential for bugs.

class User {
    // 1. Private fields declaration (must be declared at the top)
    #id;
    #password;

    constructor(name, id, password) {
        this.name = name;      // Public property
        this.#id = id;        // Private property
        this.#password = password;
    }

    // 2. Public method
    displayInfo() {
        console.log(`User: ${this.name}, ID: ${this.#getId()}`);
    }

    // 3. Private method
    #getId() {
        return this.#id;
    }

    // 4. Getter for private field (can add validation)
    get userId() {
        return this.#id;
    }
}

const myUser = new User("Preyum", 12345, "securePass123");

console.log(myUser.name); // "Preyum"
// console.log(myUser.#id); // Syntax Error: Private field '#id' must be declared in an enclosing class

myUser.displayInfo(); // "User: Preyum, ID: 12345"

// Using getter to access private field
console.log(myUser.userId); // 12345

Inheritance (extends and super())

Inheritance allows a class to inherit properties and methods from another class. This promotes code reuse and hierarchical organization.
extends: Keyword used to create a child class from a parent class.
super(): This keyword is used to call the constructor of the parent class. It must be called before using this in the child class constructor.
super.methodName(): It can also be used to call methods from the parent class, which is useful when overriding a method but still wanting to include the parent's logic.

// Parent Class
class Animal {
    constructor(name) {
        this.name = name;
    }

    eat() {
        console.log(`${this.name} is eating.`);
    }
}

// Child Class using extends
class Dog extends Animal {
    constructor(name, breed) {
        // Call the parent constructor using super()
        super(name);
        this.breed = breed;
    }

    // Overriding a parent method and calling it using super.methodName()
    eat() {
        super.eat(); // Call the parent's eat method
        console.log(`${this.name} the ${this.breed} is still hungry!`);
    }

    bark() {
        console.log("Woof! Woof!");
    }

    displayInfo() {
        console.log(`I am a ${this.breed} named ${this.name}.`);
    }
}

const myDog = new Dog("Buddy", "Golden Retriever");

myDog.eat();        
/* Output:
Buddy is eating.
Buddy the Golden Retriever is still hungry!
*/

myDog.bark();       // "Woof! Woof!"
myDog.displayInfo(); // "I am a Golden Retriever named Buddy."

Built-in Objects and Web APIs

JavaScript provides several globally available built-in objects and functions to perform common tasks without needing to write custom logic.
Global Functions: Functions like parseInt(), parseFloat(), and isNaN() can be called directly from anywhere.
Static Objects: Objects like Math, JSON, and Array (when used for its static methods) are static. This means you do not use the new keyword with them; you call their properties and methods directly (e.g., Math.max(), JSON.stringify()).

Array.isArray()

In JavaScript, arrays are technically objects. If you use the typeof operator on an array, it returns "object", which isn't very helpful when you need to know if a variable is specifically a list.
To solve this, the Array built-in object provides a static method called Array.isArray() which reliably returns true if a value is an array, and false otherwise.

let myData = [1, 2, 3];
let myObj = { name: "Preyum" };

console.log(typeof myData); // "object" (Not very helpful!)
console.log(Array.isArray(myData)); // true (Reliable check)
console.log(Array.isArray(myObj)); // false

Instantiable Objects: Objects like Date are constructors. You must use the new keyword to create an instance before you can use most of their methods.

// Global Functions: Parsing strings and checking values
console.log(parseInt("10.5")); // 10
console.log(parseFloat("10.5")); // 10.5
console.log(isNaN("Hello")); // true

// Static Object: Math (No 'new' keyword)
console.log(Math.round(4.7)); // 5
console.log(Math.floor(4.9)); // 4
console.log(Math.max(10, 20, 5)); // 20

// Instantiable Object: Date (Requires 'new' keyword)
let now = new Date();
console.log(now.getFullYear()); // Gets current year

// Instantiable Object: Error
// Used to create custom error objects, usually to be 'thrown'
let myError = new Error("Something went wrong!");
console.log(myError.message); // "Something went wrong!"

// Instantiable Object: Function
// Every JavaScript function is actually a Function object.
// While you can create them dynamically like this, standard declaration is preferred.
let sum = new Function('a', 'b', 'return a + b');
console.log(sum(2, 6)); // 8

// Primitive Wrapper Objects: String, Number, Boolean
// These are the objects that JavaScript uses behind the scenes for Auto-Boxing.
// WARNING: Do NOT use the 'new' keyword with them in modern code, as it creates an object instead of a primitive, leading to strict equality (===) bugs.
// They should only be used without 'new' for Type Conversion (e.g., Number("5")).
let badString = new String("Hello");
console.log(typeof badString); // "object" (This is bad!)
let goodString = String("Hello");
console.log(typeof goodString); // "string" (This is good!)

JSON Object (Static): The JSON object contains methods for parsing JavaScript Object Notation (JSON) and converting values to JSON. This is crucial when sending or receiving data from APIs.
- JSON.stringify(): Converts a JavaScript object or value to a JSON string.
- JSON.parse(): Parses a JSON string, constructing the JavaScript value or object described by the string.

let user = { name: "Preyum", domain: "CS" };

// Converting an object to a string (e.g., to send to an API or save in local storage)
let jsonString = JSON.stringify(user);
console.log(jsonString); // '{"name":"Preyum","domain":"CS"}'
console.log(typeof jsonString); // "string"

// Parsing a string back into a JavaScript object
let parsedUser = JSON.parse(jsonString);
console.log(parsedUser.name); // "Preyum"
console.log(typeof parsedUser); // "object"

Web Storage API (localStorage): While not technically part of the core JavaScript language (it's part of the browser's Web API), localStorage is an incredibly common built-in object used to store key-value pairs in the web browser. The data survives even after the browser window is closed.
- Note: localStorage only stores strings. If you want to store an object, you MUST use JSON.stringify() before saving, and JSON.parse() when retrieving.

// Saving data (key, value)
localStorage.setItem("theme", "dark");

// Retrieving data
let currentTheme = localStorage.getItem("theme");
console.log(currentTheme); // "dark"

// Saving an object requires JSON.stringify
let sessionUser = { name: "Preyum", isLoggedIn: true };
localStorage.setItem("userSession", JSON.stringify(sessionUser));

// Retrieving an object requires JSON.parse
let retrievedSession = JSON.parse(localStorage.getItem("userSession"));
console.log(retrievedSession.isLoggedIn); // true

Console Object: The console object provides access to the browser's debugging console (or the terminal in Node.js). It is incredibly useful for logging information, warnings, and errors during development.
- console.log(): Prints general informational messages.
- console.error(): Prints an error message (usually styled in red with a stack trace in browsers).
- console.warn(): Prints a warning message (usually styled in yellow).
- console.table(): Displays tabular data (like an array of objects) as a neat table.
- console.time() and console.timeEnd(): Starts and stops a timer, useful for measuring how long an operation takes.

console.log("This is a standard log message.");
console.error("This is an error message!");
console.warn("This is a warning.");

// Displaying data nicely
let users = [
    { name: "Preyum", role: "Admin" },
    { name: "John", role: "User" }
];
console.table(users);

// Measuring performance
console.time("Loop Time");
for(let i = 0; i < 1000000; i++) {} // Some heavy operation
console.timeEnd("Loop Time"); // e.g., "Loop Time: 2.5ms"

Document Object Model (DOM)

The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content.
When a web page is loaded, the browser creates a Document Object Model of the page, structured as a tree of objects.
The document itself is a built-in object provided by the browser that models the entire webpage. Because it represents the HTML document, it acts as the entry point to the DOM tree.
JavaScript can manipulate the DOM to create dynamic and interactive web experiences.
Note: In modern frameworks like React and Next.js, you rarely manipulate the DOM directly. Instead, you manipulate the "Virtual DOM" through state, and React handles the actual DOM updates. However, understanding the real DOM is essential.

The window Object (The Global Object)

While the DOM represents the document (the webpage content), the BOM (Browser Object Model) represents the browser window itself.
The core of the BOM is the window object. It is the global object in a browser environment.
Because it is the global object, every globally scoped variable, function, and built-in object is implicitly attached to it.
This means that objects like document, console, and functions like alert(), setTimeout(), or setInterval() are actually properties and methods of the window object. Because it is the global scope, you can usually omit typing window..

// The following two lines do the exact same thing:
window.console.log("Hello from the window!");
console.log("Hello from the window!");

// The 'document' is actually a property of the window:
// window.document.getElementById(...)

// Alert dialogs are window methods:
// window.alert("Warning!");
// alert("Warning!");

// Getting the inner width and height of the browser window itself
console.log("Window width:", window.innerWidth);
console.log("Window height:", window.innerHeight);

The document Object Properties

You can directly access high-level parts of the webpage using built-in properties on the document object:
- document.title: Gets or sets the title of the document (the text shown in the browser tab).
- document.body: Returns the <body> element of the document, allowing you to manipulate the main content area directly.

// Reading the current page title
console.log(document.title); 

// Changing the page title dynamically
document.title = "New Page Title!";

// Changing the background color of the entire webpage body
document.body.style.backgroundColor = "lightblue";

Common DOM Methods

Selecting Elements:
- document.getElementById(id): Selects a single element by its ID.
- document.querySelector(selector): Returns the first element that matches a CSS selector.
- document.querySelectorAll(selector): Returns a NodeList of all elements that match a CSS selector.
Modifying Elements:
- element.textContent: Gets or sets the text content of a node and its descendants.
- element.innerHTML: Gets or sets the HTML markup contained within the element.
- element.style.property: Modifies the inline CSS style of an element.
- element.classList.add(className) / .remove() / .toggle(): Modifies the classes on an element.
Event Listeners and Handlers:
- Event Handlers (e.g., onclick, onmouseover): Properties on DOM elements that allow you to assign a single function to an event. It's an older method but still widely used for simple interactions.
- addEventListener(event, function): The modern, preferred way to attach events. It allows attaching multiple functions to the same event on the same element without overwriting them.

// --- Selecting an element ---
// Let's assume there is a <button id="myBtn" class="btn primary">Click Me!</button> in the HTML
let btn = document.getElementById("myBtn");
let sameBtn = document.querySelector(".btn.primary");

// --- Modifying the element ---
// Change the text inside the button
btn.textContent = "Processing...";

// Add a new CSS class
btn.classList.add("loading");

// Change a specific style directly
btn.style.backgroundColor = "blue";

// --- Adding interactivity (Events) ---

// Method 1: Using the event handler property (onclick)
// Note: If you assign another function to btn.onclick later, it will overwrite this one.
btn.onclick = function() {
    console.log("Button clicked using onclick!");
};

// Method 2: Using addEventListener (Preferred)
btn.addEventListener("click", function(event) {
    console.log("Button clicked using addEventListener!");
    // 'event' object contains details about the action (e.g., mouse coordinates)
    console.log("Mouse X:", event.clientX, "Mouse Y:", event.clientY);
});

Asynchronous JavaScript

JavaScript is single-threaded and synchronous by default. Asynchronous JavaScript allows the code to continue running other tasks while waiting for long-running operations (like fetching data, reading files) to complete, preventing the browser or server from freezing.

console.log("1. Start");

// This mimics a long-running task
setTimeout(() => {
    console.log("2. Async Operation Finished");
}, 1000);

console.log("3. End");
// Output order will be: 1, 3, 2

setTimeout() and setInterval()

Both are built-in methods of the window object used to schedule the execution of functions.

setTimeout()

setTimeout() executes a block of code once after a specified delay (in milliseconds).

console.log("Waiting for my Apple...");
let timeoutId = setTimeout(() => {
    console.log("Apple is served!");
}, 2000); // Delays execution by 2000 milliseconds (2 seconds)

// You can cancel the timeout before it executes using clearTimeout()
// clearTimeout(timeoutId);

setInterval()

setInterval() executes a block of code repeatedly, with a fixed time delay between each call.
It will continue running indefinitely until you explicitly stop it using clearInterval().

let count = 1;
console.log("Starting timer...");

// Runs every 1 second (1000 ms)
let intervalId = setInterval(() => {
    console.log("Tick: " + count);

    // Stop the interval after 3 ticks
    if (count === 3) {
        clearInterval(intervalId);
        console.log("Timer stopped.");
    }
    count++;
}, 1000);

Callbacks

A callback is a function passed as an argument to another function, which is then invoked inside the outer function to complete some kind of routine or action.
Example of order and production (without order, production cannot start):

let order = (call_production) => {
    console.log("Order placed, please call production.");
    // We execute the callback function here
    call_production();
};

let production = () => {
    console.log("Order received, starting production of Apple Juice.");
};

order(production);

Issues with callbacks, the callback hell: Callback hell (or Pyramid of Doom) happens when multiple asynchronous operations are chained together using nested callbacks, making the code hard to read and maintain. Promises (discussed next) solve this.

// Callback Hell Example
step1(function() {
    step2(function() {
        step3(function() {
            step4(function() {
                console.log("All steps finished!");
            });
        });
    });
});

Promises

A Promise represents the eventual completion (or failure) of an asynchronous operation and its resulting value. It solves the callback hell problem by allowing chaining.
reject() vs throw:
- throw is for immediate, synchronous errors. It pauses execution and looks for the nearest catch block in the current stack.
- reject() is for future, asynchronous errors. It signals that an async operation failed. Since the original try...catch might have already finished executing while waiting for the async task, reject() allows the error to be handled later via .catch() or an async/await try...catch.

function makeOrder() {
    return new Promise((resolve, reject) => {
        let isStockAvailable = false;

        setTimeout(() => {
            if (isStockAvailable) {
                resolve("Order placed successfully");
            } else {
                // Signals failure for an ASYNC operation
                reject("Error: Out of stock"); 
            }
        }, 1000);
    });
}

makeOrder()
    .then(msg => console.log(msg))
    .catch(err => console.error("Caught async error:", err));

Change example to use promises:

function makeOrder() {
    return new Promise((resolve, reject) => {
        let isStockAvailable = true;

        if (isStockAvailable) {
            resolve("Order placed successfully"); // This goes to the first .then()
        } else {
            reject("Error: Out of stock"); // This skips directly to .catch()
        }
    });
}

makeOrder()
    // No semicolons between then, catch, finally so the code can cascade
    .then((message) => {
        // Step 1: Receives the resolved value from makeOrder
        console.log(message); // Output: "Order placed successfully"
        return "Starting production"; // This returned value is passed to the NEXT .then()
    })
    .then((nextStep) => {
        // Step 2: Receives the returned value from the previous .then()
        console.log(nextStep); // Output: "Starting production"
    })
    .catch((error) => {
        // Step 3: Only runs if reject() was called, or if an error was thrown above
        console.log(error); 
    })
    .finally(() => {
        // Step 4: Always runs at the very end, whether it was resolved or rejected
        console.log("Operation closed (runs regardless of success or failure).");
    });

Async and Await

async and await are syntactic sugar on top of Promises, making asynchronous code look and behave more like synchronous code, which is much easier to read.
An async function always returns a Promise. The await keyword pauses the execution of the async function until the Promise settles (resolves or rejects).

function fetchFruit() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("Mango");
        }, 1500);
    });
}

async function prepareSmoothie() {
    console.log("2. Starting prep inside async function...");

    try {
        // Execution inside this function pauses here until fetchFruit is done.
        // However, the rest of the synchronous code outside this function keeps running!
        let fruit = await fetchFruit(); 
        console.log(`4. Smoothie made with ${fruit}!`);
    } catch (error) {
        console.log("Failed to get fruit.");
    }
}

console.log("1. Ordering Smoothie...");

// Calling the async function. It starts running synchronously until it hits 'await'.
prepareSmoothie();

console.log("3. Doing other tasks while waiting for the smoothie...");

/* 
Output Order:
1. Ordering Smoothie...
2. Starting prep inside async function...
3. Doing other tasks while waiting for the smoothie...
(After 1.5 seconds delay)
4. Smoothie made with Mango!
*/

Modules (Import and Export)

Modules allow you to break your code into separate files. This makes it easier to maintain the code base. React and Next.js are entirely built around importing and exporting components and functions.
Important Note on Usage: To actually use ES6 modules natively in a browser, the HTML script tag importing the main JavaScript file MUST include the type="module"\ attribute (e.g., <script type="module" src="app.js"></script>\). In modern frameworks like React/Next.js, the build tools handle this for you automatically.

Named Exports

You can create named exports two ways: individually or all at once at the bottom. You can have multiple named exports per file.
When importing, you must use the exact same name inside curly braces {}\. You can also rename (alias) imports using the as\ keyword to avoid naming conflicts.

// mathUtils.js (Exporting)

// 1. Exporting individually on the same line
export const add = (a, b) => a + b;

// 2. Declaring first, exporting at the bottom
const subtract = (a, b) => a - b;
const multiply = (a, b) => a * b;

export { subtract, multiply }; 

// app.js (Importing)
// Using 'as' to alias 'add' to 'addNumbers'
import { add as addNumbers, subtract, multiply } from './mathUtils.js';

console.log(addNumbers(5, 3)); // 8
console.log(multiply(2, 4)); // 8

Default Exports

You can only have one default export per file. It is often used for exporting the main component in a file.
When importing, you can name it anything you want and you do not use curly braces.

// Greeting.js (Exporting)
const Greeting = () => "Hello, Preyum!";
export default Greeting;

// app.js (Importing)
// We can name it whatever we want, let's call it GreetComp
import GreetComp from './Greeting.js';
console.log(GreetComp()); // "Hello, Preyum!"

Stay tuned for my next post, where we'll be exploring React! While this covers the essentials, If there’s anything you feel I should have included, let me know in the comments below and I'll gladly add it!

DEV Community: Preyum Kumar

Mastering DVC and MLflow for MLOps: A Practical Guide

Index

Introduction to DVC and MLflow

DVC Installation and Initialization

Versioning Data with DVC

DVC Maintenance: Status and Cleanup

DVC Pipelines and Automation

How does DVC 'know' what is produced?

dvc repro vs. python script.py

Integrating DVC with AWS S3

MLflow Installation and Tracking UI

Logging Experiments and Artifacts

MLflow Model Registry

Remote Tracking with DagsHub and AWS

Unified Workflow: Putting it All Together

The MLOps Ecosystem Flowchart

Modern Next.js Essentials: Building Scalable Full-Stack Applications

Index

Fundamentals

Next.js and TypeScript (Generics)

Rendering Patterns: SPA, SSR, and Next.js Hybrid

1. The SPA "Feel" (Client-Side Navigation)

2. The SSR "Foundation" (Server Components)

3. The Next.js Hybrid: The Best of Both Worlds

Detailed Example: Mixing Both

The Legacy Page Router

The App Router

Client Components and 'use client'

What happens when you add 'use client'?

The Client Boundary Effect (Implicit Client Components)

The Payload Secret: JS vs. Data

1. The RSC (React Server Components) Payload (The "Data")

2. The JS Bundle (The "Code")

Advanced Routing and Navigation

Dynamic Routing

Route Groups

Sub-Navigation (Nested Layouts)

Parallel Routes

Handling Unmatched Routes (The default.tsx Fix)

Soft vs. Hard Navigation in Parallel Routes

Intercepting Routes (The "Modal" Pattern)

1. Why use them?

2. The Naming Conventions

3. Complete Example: Photo Modal

Layouts and UI Shells

UI and Styling with shadcn/ui

Theming with next-themes

Schema Validation with Zod

Form Validation with React Hook Form and Zod

Server-Side Logic: Route Handlers vs. Server Actions

1. Route Handlers (route.ts)

2. Server Actions

Route Handlers vs. Server Actions: A Quick Comparison

The 'Proxy' Concept (formerly Middleware)

Why the Change to 'Proxy'?

How it Works

Example Implementation (proxy.ts)

Migration Note

Security Warning: The 'Two-Layer' Auth Pattern

1. Why Proxy-only Checks are Insecure

2. The Solution: Two-Layer Validation

Detailed Example: Two-Layer Check

Real-time Data and Communication

1. Convex: The Reactive Full-Stack Backend

2. Pusher: Managed WebSockets

3. WebRTC and Signaling

Example: Real-time Messaging & Video App

Authentication with Better Auth

Example Setup:

1. Client-Side Usage (Sign In & Session)

2. Server-Side Usage (Protecting Routes)

Token Lifecycle: Creation vs. Validation

Toasts with Sonner

Installation via shadcn:

Usage Example:

Handling UI States: Loading, Errors, and Not Found

Streaming and Suspense (loading.tsx)

How Streaming Helps:

Method 1: Page-Level Streaming with loading.tsx