Forem: Kathirvel S

Mastering useParams in React Router: Dynamic Routing, URL Parameters

Kathirvel S — Tue, 19 May 2026 15:59:07 +0000

Modern web applications are no longer static websites with a few pages. Today’s React applications are dynamic, intelligent, and deeply connected to routing systems that change content instantly based on the URL.

Think about applications like:

E-commerce platforms displaying thousands of products
Blogging websites loading unique articles dynamically
Social media platforms opening different user profiles
Dashboard systems handling personalized data routes

All of these applications rely heavily on one core concept:

Dynamic Routing

And one of the most important tools React provides for handling dynamic routes is useParams.

Without useParams, applications would struggle to understand:

which product the user clicked
which blog post should open
which profile should load
which data belongs to which route

This hook acts as the connection between the URL and your component logic, allowing React applications to build scalable and reusable page systems with ease.

In this 10th episode of the “Let’s Master React Hooks Together” series, we’ll deeply explore everything about useParams, including:

what it is
why it exists
the problems it solves
where and when to use it
how it works internally
real-world practical examples
common mistakes
best practices used in production applications

By the end of this guide, you’ll have a complete understanding of how dynamic routing works in React and why useParams is one of the most essential hooks in modern React development.

What is `useParams`?

useParams is a hook provided by React Router that allows you to access dynamic values from the URL.

It helps React extract route parameters directly from the current route.

For example:

/product/15

Here:

product → static route
15 → dynamic value

Using useParams, we can read that 15 inside the component.

Definition of `useParams`

useParams is a React Router hook used to retrieve dynamic route parameters from the URL inside a component.

It returns an object containing key-value pairs of the URL parameters.

Why Do We Need `useParams`?

Imagine an e-commerce application.

You have 100 products.

Creating separate routes like this would be impossible:

/product1
/product2
/product3
/product4

Instead, React Router allows dynamic routes:

/product/:id

Now:

/product/1
/product/2
/product/99

all use the same component.

The component simply reads the id using useParams.

This makes applications:

scalable
reusable
dynamic
easier to maintain

Which Problem Does `useParams` Solve?

Without useParams, your component would not know:

which user is being viewed
which product was clicked
which blog post should load
which order details to fetch

useParams solves the problem of:

Passing dynamic data through the URL.

It acts as a bridge between:

the URL
and the component logic

Where is `useParams` Used?

useParams is commonly used in:

Application Type	Example
E-commerce	`/product/45`
Blogging Platforms	`/blog/react-hooks`
Social Media Apps	`/profile/john`
Learning Platforms	`/course/react`
Admin Dashboards	`/user/101/edit`

When Should You Use `useParams`?

Use useParams when:

data changes based on URL
pages are dynamic
IDs are required from route
fetching specific data
creating reusable pages

Installing React Router

Before using useParams, install React Router.

npm install react-router-dom

Basic Setup of React Router

Step 1: Wrap Application

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

import {
  BrowserRouter
} from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

Creating Dynamic Routes

Step 2: Define Routes

import { Routes, Route } from "react-router-dom";
import Product from "./Product";

function App() {
  return (
    <Routes>
      <Route path="/product/:id" element={<Product />} />
    </Routes>
  );
}

export default App;

Understanding `:id`

/product/:id

The colon : means:

This is a dynamic parameter.

Here:

id becomes the parameter name
React Router captures its value

Example:

/product/25

Then:

id = 25

Using `useParams`

Now let’s access the parameter.

import { useParams } from "react-router-dom";

function Product() {
  const params = useParams();

  return (
    <div>
      <h1>Product ID: {params.id}</h1>
    </div>
  );
}

export default Product;

Output

If URL is:

/product/99

Output:

Product ID: 99

Destructuring `useParams`

Most developers use destructuring.

const { id } = useParams();

Complete example:

import { useParams } from "react-router-dom";

function Product() {
  const { id } = useParams();

  return (
    <div>
      <h1>Product ID: {id}</h1>
    </div>
  );
}

export default Product;

How `useParams` Works Internally

When React Router matches a route:

/product/:id

and the current URL is:

/product/10

React Router creates:

{
  id: "10"
}

Then useParams() returns that object.

Important Point

All route parameters are returned as strings.

Even if:

/product/10

10 is still:

"10"

not a number.

Converting Parameter to Number

const { id } = useParams();

const productId = Number(id);

Multiple Route Parameters

You can use multiple dynamic parameters.

<Route path="/user/:userId/post/:postId" element={<Post />} />

URL:

/user/12/post/55

Using:

const { userId, postId } = useParams();

Result:

userId = "12"
postId = "55"

Real World Example — Fetching API Data

One of the most common use cases.

import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";

function Product() {
  const { id } = useParams();

  const [product, setProduct] = useState(null);

  useEffect(() => {
    fetch(`https://fakestoreapi.com/products/${id}`)
      .then(res => res.json())
      .then(data => setProduct(data));
  }, [id]);

  return (
    <div>
      {product && (
        <>
          <h1>{product.title}</h1>
          <p>{product.price}</p>
        </>
      )}
    </div>
  );
}

export default Product;

Why `[id]` is Added in Dependency Array

useEffect(() => {
  // fetch logic
}, [id]);

Because when URL changes:

/product/1

/product/2

the component must refetch data.

Dynamic Blog Example

Route:

<Route path="/blog/:slug" element={<Blog />} />

URL:

/blog/react-hooks-guide

Usage:

const { slug } = useParams();

Output:

slug = "react-hooks-guide"

Common Mistakes with `useParams`

1. Forgetting Colon `:`

Wrong:

<Route path="/product/id" element={<Product />} />

Correct:

<Route path="/product/:id" element={<Product />} />

2. Using Outside Router

Wrong:

useParams();

without:

<BrowserRouter>

This causes errors.

3. Expecting Number Instead of String

Wrong:

if(id === 5)

Correct:

if(Number(id) === 5)

4. Typo in Parameter Name

Route:

/product/:id

Wrong:

const { productId } = useParams();

Correct:

const { id } = useParams();

`useParams` vs Props

Before hooks, route parameters were often passed through props.

Hooks made it cleaner.

Instead of:

props.match.params.id

Now:

const { id } = useParams();

Much simpler and readable.

Combining `useParams` with Other Hooks

useParams works beautifully with:

useEffect
useState
useNavigate
useContext

Example:

const { id } = useParams();

useEffect(() => {
  fetchUser(id);
}, [id]);

Nested Routes with `useParams`

<Route path="/dashboard/user/:id" element={<User />} />

URL:

/dashboard/user/88

Usage:

const { id } = useParams();

Optional Parameters

Some applications use optional route segments.

Example pattern:

/profile/:username

or:

/profile/john

Best Practices

Keep Parameter Names Meaningful

Good:

:userId
:productId
:postId

Bad:

:x
:data
:value

Validate Parameters

Never trust URL values blindly.

if (isNaN(id)) {
  return <h1>Invalid Product ID</h1>;
}

Use Clean URL Structures

Good:

/product/15

Better readability and SEO.

Use Slugs for Blogs

Instead of:

/blog/15

Prefer:

/blog/react-router-guide

Complete Practical Example

App.jsx

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Product from "./Product";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/product/:id" element={<Product />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Product.jsx

import { useParams } from "react-router-dom";

function Product() {
  const { id } = useParams();

  return (
    <div>
      <h1>Viewing Product {id}</h1>
    </div>
  );
}

export default Product;

URL Testing

Visit:

/product/1

Then:

/product/25

Then:

/product/999

Notice how the same component dynamically changes.

That’s the real power of useParams.

Advantages of `useParams`

Advantage	Description
Dynamic Routing	Creates reusable pages
Cleaner Code	Easy parameter access
Better Scalability	One component handles many pages
Flexible URLs	Supports IDs and slugs
Easier API Calls	Fetch data directly from route

Limitations of `useParams`

Limitation	Explanation
Returns Strings Only	Needs conversion
Requires React Router	Cannot work standalone
Depends on Route Matching	Wrong route means undefined

Final Thoughts

useParams is one of the most important hooks when working with React Router.

It allows components to become dynamic by reading values directly from the URL.

Without it, building scalable applications like:

e-commerce platforms
blogging websites
dashboards
social media apps

would become extremely difficult.

Once you understand useParams, you unlock the ability to build fully dynamic page systems in React.

And in real-world projects, this hook is used almost everywhere dynamic routing exists.

Conclusion

This was the 10th episode of the “Let’s Master React Hooks Together” series, and in this episode, we took a deep dive into one of the most practical and widely used hooks in React Router — useParams.

We explored:

what useParams is
why it exists
the routing problems it solves
how dynamic URLs work
how React extracts route parameters
real-world implementation patterns
API integration examples
common mistakes developers make
professional best practices

Understanding useParams is more than just learning another hook.

It’s about understanding how modern React applications create dynamic experiences where a single component can intelligently display completely different content based on the current route.

This concept powers:

product pages
blog systems
user profiles
admin dashboards
course platforms
and countless real-world applications used every day.

Mastering useParams gives you the ability to build scalable routing architectures and dynamic page systems like professional production-level React applications.

And this is only the beginning.

As we continue forward in the “Let’s Master React Hooks Together” series, we’ll keep exploring more powerful hooks, advanced React patterns, and real-world development concepts that help transform React knowledge into real application-building skills.

See you in Episode 11.

Build Reusable Logic with Custom Hooks in React

Kathirvel S — Mon, 18 May 2026 14:29:54 +0000

Welcome back to the “Let’s Master React Hooks Together” series.

So far in this series, we’ve explored several important React Hooks and understood how they help manage state, side effects, performance optimization, references, and more inside React applications.

Now we’ve reached one of the most practical and powerful topics in React development — Custom Hooks.

This is the point where React applications start becoming cleaner, smarter, and more reusable.

As applications grow, developers often notice the same logic repeating in multiple components:

Fetching API data
Managing forms
Handling authentication
Tracking screen size
Working with local storage
Managing counters and timers

Instead of rewriting the same logic again and again, React allows us to extract that logic into reusable functions called Custom Hooks.

In this episode, we’ll deeply understand:

What Custom Hooks are
The official React definition
Why they are important
When to use them
How to create them
Real-world examples
Best practices
Common mistakes to avoid

Let’s get started.

Custom Hooks in React: Reusing Logic the Smart Way

When building React applications, one thing becomes obvious very quickly: the same logic appears again and again.

You fetch data in multiple components.
You track window size in several places.
You handle form inputs repeatedly.
You manage loading states everywhere.

At first, copying and pasting feels fast. But after a while, your code becomes difficult to maintain.

That’s exactly where Custom Hooks become useful.

Custom Hooks are one of the most powerful patterns in React because they allow you to extract reusable logic into a clean and reusable function.

In this article, we’ll understand:

What Custom Hooks are
The official React definition
Why they exist
When to use them
How to create them
Where they are useful in real projects
Best practices and common mistakes
Real-world examples

What Is a Custom Hook?

According to the official React documentation:

“A custom Hook is a JavaScript function whose name starts with use and that may call other Hooks.”

At first glance, this definition feels simple. But there’s more behind it.

A Custom Hook is basically:

A reusable function
That contains React logic
And can internally use hooks like useState, useEffect, useContext, etc.

Instead of duplicating logic across components, you move that logic into a reusable hook.

Why Custom Hooks Exist

To understand why Custom Hooks matter, let’s first look at a common problem.

Imagine you have multiple components fetching data from an API.

import { useState, useEffect } from "react";

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

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((data) => setUsers(data));
  }, []);

  return (
    <div>
      {users.map((user) => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
}

Now another component needs similar fetching logic.

import { useState, useEffect } from "react";

function Posts() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((res) => res.json())
      .then((data) => setPosts(data));
  }, []);

  return (
    <div>
      {posts.map((post) => (
        <p key={post.id}>{post.title}</p>
      ))}
    </div>
  );
}

Notice something?

The fetching logic is almost identical.

This creates problems:

Duplicate code
Harder maintenance
Repeated bug fixes
Larger components
Poor readability

Custom Hooks solve this by extracting reusable behavior.

Understanding the Real Purpose of Custom Hooks

A lot of developers think Custom Hooks are only for reducing code duplication.

That’s true — but not the full picture.

The real purpose is:

1. Reusability

Write logic once and use it anywhere.

2. Separation of Concerns

Your component focuses on UI while the hook handles logic.

3. Cleaner Components

Components become smaller and easier to read.

4. Better Maintainability

Updating logic in one place updates it everywhere.

5. Easier Testing

You can test business logic separately from UI.

The Rules of Custom Hooks

Custom Hooks follow the same rules as React Hooks.

Rule 1: The function name must start with `use`

Correct:

useFetchData()

Wrong:

fetchData()

React relies on this naming convention internally.

Rule 2: Hooks must be called at the top level

Do not call hooks inside:

loops
conditions
nested functions

Wrong:

if (show) {
  useEffect(() => {});
}

Correct:

useEffect(() => {
  if (show) {
    // logic here
  }
}, [show]);

How to Create a Custom Hook

The structure is very simple.

function useSomething() {
  // hook logic

  return something;
}

That’s it.

Now let’s build a real example.

Example 1: Creating a `useFetch` Hook

Step 1: Create the Hook

import { useEffect, useState } from "react";

function useFetch(url) {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        setLoading(true);

        const response = await fetch(url);

        if (!response.ok) {
          throw new Error("Failed to fetch data");
        }

        const result = await response.json();

        setData(result);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

Step 2: Use the Hook

import useFetch from "./useFetch";

function Users() {
  const { data, loading, error } = useFetch(
    "https://jsonplaceholder.typicode.com/users"
  );

  if (loading) return <p>Loading...</p>;

  if (error) return <p>{error}</p>;

  return (
    <div>
      {data.map((user) => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
}

Now the component is much cleaner.

The fetching logic lives in one reusable place.

Example 2: Creating a `useCounter` Hook

One of the simplest and most common examples of a Custom Hook is a counter.

Instead of managing counter logic separately in every component, we can create a reusable hook.

Step 1: Create the Hook

import { useState } from "react";

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => {
    setCount((prev) => prev + 1);
  };

  const decrement = () => {
    setCount((prev) => prev - 1);
  };

  const reset = () => {
    setCount(initialValue);
  };

  return {
    count,
    increment,
    decrement,
    reset,
  };
}

export default useCounter;

Step 2: Use the Hook

import useCounter from "./useCounter";

function Counter() {
  const {
    count,
    increment,
    decrement,
    reset,
  } = useCounter(10);

  return (
    <div>
      <h2>{count}</h2>

      <button onClick={increment}>
        Increment
      </button>

      <button onClick={decrement}>
        Decrement
      </button>

      <button onClick={reset}>
        Reset
      </button>
    </div>
  );
}

Now the counter logic is reusable across multiple components.

You can use the same hook anywhere in your application without rewriting the logic again.

When Should You Create a Custom Hook?

Not every repeated line of code needs a Custom Hook.

A good Custom Hook usually appears when:

You repeat logic across multiple components

Example:

API fetching
Authentication
Form handling
Pagination
Debouncing
Local storage access

Your component becomes too large

If a component contains too much logic, extracting it into hooks improves readability.

Logic is unrelated to UI

UI belongs inside components.

Reusable behavior belongs inside hooks.

Where Custom Hooks Are Commonly Used

Custom Hooks are everywhere in modern React applications.

1. API Requests

useFetch()
useUsers()
useProducts()

2. Authentication

useAuth()

3. Theme Handling

useTheme()

4. Form Management

useForm()

5. Window Resize Detection

useWindowSize()

6. Dark Mode

useDarkMode()

7. Local Storage

useLocalStorage()

Example 3: useLocalStorage Hook

Saving values in local storage is common.

Instead of rewriting the logic everywhere, create a reusable hook.

import { useState } from "react";

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const storedValue = localStorage.getItem(key);

    return storedValue
      ? JSON.parse(storedValue)
      : initialValue;
  });

  const saveValue = (newValue) => {
    setValue(newValue);

    localStorage.setItem(
      key,
      JSON.stringify(newValue)
    );
  };

  return [value, saveValue];
}

export default useLocalStorage;

Usage:

function App() {
  const [name, setName] = useLocalStorage(
    "username",
    ""
  );

  return (
    <input
      value={name}
      onChange={(e) => setName(e.target.value)}
    />
  );
}

How Custom Hooks Improve Project Structure

Without hooks, components often become messy.

Example of a bad structure:

components/
 ├── Users.jsx
 ├── Products.jsx
 ├── Dashboard.jsx

Each component contains repeated logic.

With hooks:

src/
 ├── components/
 ├── hooks/
 │    ├── useFetch.js
 │    ├── useAuth.js
 │    ├── useLocalStorage.js

Now logic is centralized and reusable.

Important Difference: Component vs Custom Hook

A lot of developers confuse them.

React Component

Returns JSX
Handles UI rendering

function Button() {
  return <button>Click</button>;
}

Custom Hook

Returns logic/data/functions
Does NOT return JSX

function useCounter() {
  return { count, increment };
}

Common Mistakes with Custom Hooks

1. Returning JSX from Hooks

Wrong:

function useModal() {
  return <div>Modal</div>;
}

Hooks should return:

state
functions
values
logic

Not UI.

2. Creating Hooks Too Early

Not every logic deserves a hook.

If logic is used only once, keep it inside the component.

3. Massive Hooks

Avoid creating giant hooks that do everything.

Bad:

useDashboardEverything()

Keep hooks focused.

4. Ignoring Dependency Arrays

Hooks using useEffect still require proper dependencies.

Wrong dependencies can create bugs.

Advanced Pattern: Hooks Calling Hooks

One powerful feature is that hooks can use other hooks.

Example:

function useAuth() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // auth logic
  }, []);

  return user;
}

Another hook can reuse it:

function useAdmin() {
  const user = useAuth();

  return user?.role === "admin";
}

This creates highly modular logic.

Real-World Example

Imagine an e-commerce application.

Without hooks:

Every page handles fetching
Every component manages loading
Authentication logic repeats
Cart logic duplicates

With hooks:

useProducts()
useCart()
useAuth()
useOrders()
useWishlist()

Everything becomes organized and reusable.

Are Custom Hooks Required?

No.

React applications can work without them.

But as projects grow, Custom Hooks become one of the best ways to keep code maintainable and scalable.

Most modern React applications use them heavily.

Best Practices for Writing Custom Hooks

Keep One Responsibility

Good:

useFetch()

Bad:

useFetchAndThemeAndAuth()

Use Clear Names

Hook names should describe behavior.

Good:

useWindowSize()
useDarkMode()

Return Useful Data

Hooks should expose only what components need.

Handle Errors Properly

Especially in API hooks.

Avoid Unnecessary Re-renders

Use optimization carefully when needed.

Final Thoughts

Custom Hooks are one of React’s cleanest and most practical features.

They help you:

Reuse logic
Reduce duplication
Keep components clean
Improve maintainability
Build scalable applications

The best way to understand Custom Hooks is to start noticing repeated logic in your own components.

Whenever you find yourself copying the same state management or effect logic multiple times, that’s usually a sign that a Custom Hook could help.

And once you start using them properly, your React code becomes significantly cleaner, easier to manage, and far more reusable.

Conclusion

That’s it for Episode 9 of the “Let’s Master React Hooks Together” series.

In this episode, we explored one of the most practical concepts in React — Custom Hooks — and understood how they help create reusable, clean, and maintainable applications.

We learned:

What Custom Hooks are
Why React introduced them
How to create them
When to use them
Real-world use cases
Best practices and mistakes to avoid

More importantly, we saw how Custom Hooks help separate logic from UI, making React applications much easier to scale and maintain.

As you continue building React projects, you’ll start noticing repeated patterns everywhere. That’s the perfect opportunity to create your own hooks and make your codebase cleaner and smarter.

In the next episode, we’ll continue exploring more advanced React concepts and patterns to strengthen your React development skills step by step.

See you in the next episode of
“Let’s Master React Hooks Together.”

Breaking Down Browser DevTools Until It Finally Made Click

Kathirvel S — Sun, 17 May 2026 09:44:43 +0000

Introduction

Welcome to the 3rd episode of my series “Sunday Source - I Break It, Then Explain It”.

Yesterday, I attended a mock interview at my Payilagam institute, and the interviewer Prithivraj Sir asked me a simple but tricky question:

“In a browser, there is a button. On click, where do you see that onclick function?”

For a moment, I paused. I knew I had seen it many times — I right-click and inspect daily — but I couldn’t immediately recall which section shows it. My mind jumped to the Console first, but that wasn’t the correct place.

That moment made me realize something important: we use DevTools daily, but we don’t always understand where things actually live.

So I decided to break it down properly — every panel, every section, and how the browser really exposes these internals.

This article is the result of that breakdown.

Modern web applications are complex systems made of HTML, CSS, JavaScript, APIs, and browser engines working together. To understand and debug this system, browsers provide a built-in engineering toolkit called Developer Tools (DevTools).

A widely used implementation is Chrome DevTools, which exposes the internal state of the browser in real time.

Think of DevTools as:

A live interface into the browser’s rendering engine, JavaScript runtime, and networking layer.

0. What DevTools Actually Is (Internal View)

Before individual panels, it’s important to understand what DevTools sits on top of:

The browser has 4 core systems:

Rendering Engine → Builds and paints UI (DOM + CSS)
JavaScript Engine → Executes JS (V8 in Chrome)
Networking Layer → Handles requests (HTTP/HTTPS)
Storage Layer → Cookies, cache, localStorage

DevTools connects to all of them:

DevTools
  ├── DOM Inspector → Rendering Engine
  ├── Console → JavaScript Engine
  ├── Network → Networking Layer
  ├── Application → Storage Layer
  └── Performance → All systems combined

So DevTools is NOT just a UI tool — it is a debug bridge into browser internals.

1. Elements Panel (DOM + CSS Rendering System)

The Elements panel shows the live DOM tree, not the original HTML file.

Important Concept: DOM ≠ HTML

When a page loads:

HTML file → Parsed → DOM Tree → Rendered UI

JavaScript can modify DOM dynamically:

document.createElement()
document.appendChild()
innerText changes

So what you see in Elements panel is:

“Current live state of the page”

Inspecting live DOM structure and CSS rules inside Chrome DevTools Elements panel

Deep Diagram: Rendering Pipeline

HTML → DOM
CSS → CSSOM
         ↓
     Render Tree
         ↓
     Layout (positioning)
         ↓
     Paint (pixels)
         ↓
     Composite (final screen)

Elements panel lets you inspect DOM + CSSOM interaction indirectly.

Real Debug Scenario

Imagine a button is not visible.

You inspect and find:

button {
  display: none;
}

opacity: 0;
visibility: hidden;

OR even:

position: absolute;
top: -9999px;

👉 DevTools helps you instantly identify why something is not visible.

Live CSS Editing (How it really works)

When you edit:

color: red;

DevTools:

Updates CSSOM in memory
Triggers re-render
Recalculates layout
Repaints UI

So every change is a mini rendering cycle

Advanced Use: Computed Styles

Computed tab shows:

Final CSS after all overrides
Inherited values
Browser defaults

Example:

color: black (from user agent)
color: blue (your CSS)
→ final = blue

2. Console Panel (JavaScript Runtime Interface)

The Console is not just a log window — it is a direct REPL (Read Evaluate Print Loop) into the JavaScript engine.

Internal Working

You type JS → V8 Engine executes → Memory updated → Output returned

This is the same engine used in Node.js (Chrome uses V8).

Console is a full JavaScript environment

JavaScript errors, warnings, and logs displayed inside DevTools Console

You can:

1. Access DOM directly

document.body

2. Modify live page state

document.title = "Hacked via Console";

3. Store variables in memory

let x = 10;
x * 20;

Real Debug Scenario

Bug:

user.profile.name

Error:

Cannot read properties of undefined

Meaning:

user.profile is undefined → name access fails

Console helps trace:

Which variable is undefined
At which line execution failed
What state caused it

Advanced Feature: console object

console.log()
console.warn()
console.error()
console.table()

Example:

console.table([
  { name: "A", age: 20 },
  { name: "B", age: 25 }
]);

👉 Converts JSON into readable table

3. Network Panel (HTTP Request Debugging System)

This panel shows how the browser communicates with servers.

Network waterfall showing API calls, assets, and loading timelines in real time

Internal Flow

JS fetch() → Browser Network Layer → DNS → Server → Response → Browser

What DevTools captures

Each request includes:

Request URL
Method (GET/POST)
Headers
Payload
Response
Timing breakdown

Deep Request Timeline

DNS Lookup → TCP Connect → SSL Handshake → Request Sent → Waiting → Response → Download

Real Debug Scenario

API not working:

Status code:

404 → URL wrong
500 → Server issue
401 → Authentication missing

Example fetch breakdown

fetch("/api/user")

Network panel shows:

Request:
GET /api/user

Response:
200 OK
{"name": "Alex"}

Performance insight

You can detect:

Slow APIs
Large payloads
Blocking scripts

4. Sources Panel (JavaScript Execution Engine Debugger)

This is the closest thing to “live code execution control”.

JavaScript execution paused at a breakpoint inside Chrome DevTools Sources panel, showing real-time debugging and call stack inspection

Internal Concept

JavaScript runs in a single thread:

Call Stack → Executes line by line

Sources panel lets you PAUSE this execution.

Breakpoint System

When you set a breakpoint:

JS Engine → pauses execution → freezes state → shows memory snapshot

Step-by-step control

You can:

Step over → skip function internals
Step into → go inside function
Step out → exit function

Real Debug Scenario

function total(a, b) {
  let sum = a + b;
  return sum;
}

At breakpoint:

a = 5
b = 10
sum = 15

You can literally watch execution happen.

5. Application Panel (Browser Storage Engine)

This shows persistent and session-based storage.

Inspecting cookies, local storage, and session storage inside Application panel

Storage hierarchy

Browser Storage Layer
  ├── Cookies (server communication)
  ├── LocalStorage (permanent)
  ├── SessionStorage (tab-based)
  ├── IndexedDB (large structured data)
  └── Cache Storage (offline assets)

Cookies (Important Concept)

Cookies are automatically sent with every request:

Browser → Server sends cookie → Server remembers user

Used for:

Authentication
Sessions
Tracking

LocalStorage vs SessionStorage

Feature	LocalStorage	SessionStorage
Lifetime	Permanent	Tab closed
Scope	All tabs	Single tab

Example

localStorage.setItem("theme", "dark");

Stored permanently in browser memory.

6. Performance Panel (Browser Rendering Profiler)

This panel shows how the browser spends time rendering your page.

Performance timeline showing scripting, rendering, and painting phases of a webpage in Chrome DevTools

Internal Pipeline

JS → Layout → Paint → Composite → GPU Rendering

Flame Chart Explanation

Main Thread:
████ JS Execution
████ Layout Recalculation
███ Paint
█ Composite

Real Problems Found Here

Layout thrashing (bad loops modifying DOM)
Heavy JavaScript blocking UI
Repeated re-renders

Example Issue

for (let i = 0; i < 1000; i++) {
  document.body.innerHTML += "x";
}

👉 Causes massive reflow + slow performance

7. Device Mode (Responsive Rendering Engine Simulation)

This is not just resizing — it simulates mobile browser rendering behavior.

Simulating mobile device view using Chrome DevTools responsive mode

What changes internally:

Viewport meta simulation
Touch event simulation
Pixel ratio changes
CSS media queries trigger differently

Responsive Flow

Desktop Layout → Breakpoint Trigger → Mobile Layout

Example CSS

@media (max-width: 600px) {
  body {
    background: black;
  }
}

DevTools triggers this instantly.

8. Security Panel (Trust Verification System)

This shows how safe the website connection is.

Security overview showing HTTPS encryption status and certificate validation in Chrome DevTools

Checks performed:

SSL certificate validity
HTTPS encryption status
Mixed content detection

HTTPS Flow

Browser ↔ Secure Encrypted Tunnel ↔ Server

If broken:

Warning appears
Resources blocked

Final Mental Model

DevTools is not just UI inspection.

It is:

DOM Inspector + JS Runtime Debugger + Network Analyzer + Performance Profiler + Storage Manager

Before You Scroll Away

This is Episode 3 of my series “Sunday Source - I Break It, Then Explain It”.

That mock interview moment with Prithivraj stayed in my mind because it exposed a simple truth — we often use tools daily without fully understanding where things actually exist inside them.

The question “where do you find the onclick function in browser DevTools?” wasn’t difficult, but it tested clarity of fundamentals.

And this article became my answer to that moment.

Now I know:

It’s not in Console
It’s not guesswork
It’s inside the Elements panel → Event Listeners section

More importantly, I learned something deeper:

Knowing tools is not enough — understanding their structure is what makes you confident in interviews and real debugging.

This is exactly what Sunday Source is about — breaking things down until they make sense.

See you in the next "Sunday Source" episode

Learn React useMemo the Right Way — Re-Renders, Optimization,Dependencies & useEffect

Kathirvel S — Thu, 14 May 2026 14:59:16 +0000

Welcome back to “Let’s Master React Hooks Together” — the series where we learn React hooks step by step in the most beginner-friendly way possible.

So far in this series, we’ve already explored hooks like useState and useEffect, and by now you’ve probably started noticing one important thing about React:

React components re-render a lot.

And honestly, that’s completely normal. React is designed that way.

But once applications start growing, re-rendering can sometimes create performance problems — especially when expensive calculations run again and again unnecessarily.

That’s exactly where today’s hook enters the picture:

useMemo()

At first glance, useMemo looks confusing. Many beginners memorize the syntax without actually understanding:

what problem it solves,
why it exists,
and how it connects with useEffect.

So in this 8th episode, we’re going to slow things down and understand useMemo properly from the ground up.

We’ll learn:

the official definition,
beginner-friendly explanation,
how memoization works,
how dependency arrays behave,
how useEffect connects with useMemo,
why useEffect does not return values,
and how useMemo actually returns optimized values.

And just like the previous episodes in this series, we’ll not only write code — we’ll also break down the execution flow step by step so you can understand what React is actually doing behind the scenes.

So let’s dive in and finally make useMemo feel simple.

Official Definition of `useMemo`

According to the React documentation:

useMemo is a React Hook that lets you cache the result of a calculation between re-renders.

This is the official explanation. But honestly, for beginners, this sentence alone is not very easy to understand.

So let’s simplify it.

Beginner Friendly Definition of `useMemo`

In simple words:

useMemo remembers a calculated value so React doesn’t calculate it again and again during every re-render.

Or even simpler:

useMemo helps React avoid unnecessary work.

That is the core idea.

React components re-render frequently. During those renders, calculations also run again. If some calculation is expensive, repeatedly running it can slow down the application. useMemo helps optimize that.

Before Learning `useMemo`, Understand Re-Rendering

To properly understand useMemo, you first need to understand one very important concept in React:

React re-renders components very often.

Whenever:

state changes,
props change,
or parent components re-render,

React runs the component function again.

Look at this example:

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  console.log("Component Rendered");

  return (
    <div>
      <h1>{count}</h1>

      <button onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
}

export default App;

At first, this code looks very small and harmless. But internally, React is doing more than beginners realize.

Step-by-Step Flow of the Code

When the component loads for the first time, React starts executing:

function App()

Inside the component, React creates state using:

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

Now:

count becomes 0
setCount becomes the function that updates state

After that, this line runs:

console.log("Component Rendered");

Then React returns the JSX and displays the UI.

When the button is clicked:

setCount(count + 1)

React updates the state.

And this is the important part:

React re-renders the entire component again.

That means:

the component function runs again,
variables recreate,
functions recreate,
calculations rerun,
console logs rerun.

This behavior is exactly why hooks like useMemo exist.

Why `useMemo` Exists

Most of the time, re-rendering is completely fine. React is fast.

But imagine your component contains:

huge filtering logic,
expensive calculations,
sorting large arrays,
heavy data processing.

Now every re-render becomes expensive.

Even unrelated state changes can trigger those calculations again.

That creates unnecessary work.

To solve this optimization problem, React introduced:

useMemo()

Its job is simple:

remember old calculated results,
and reuse them if dependencies did not change.

Official Syntax of `useMemo`

const memoizedValue = useMemo(() => {
  return expensiveCalculation();
}, [dependencies]);

At first glance, this syntax may look scary. But it becomes simple once we break it down carefully.

Understanding the Syntax Step by Step

The first part is the function:

() => {
  return expensiveCalculation();
}

This contains the calculation React should remember.

And notice something important here:

return expensiveCalculation();

useMemo RETURNS a value.

This is one of the biggest differences between useMemo and useEffect.

Then comes the dependency array:

[dependencies]

This tells React:

“Only rerun this calculation if these values change.”

This dependency system is exactly why beginners often connect useMemo with useEffect.

Because useEffect also uses dependency arrays.

Official Definition of `useEffect`

According to React:

useEffect lets you synchronize a component with external systems.

That sounds complicated too.

So let’s simplify it.

Beginner Friendly Definition of `useEffect`

In simple words:

useEffect runs some code after rendering.

Usually developers use it for:

API calls,
timers,
localStorage,
subscriptions,
DOM updates.

So while useMemo focuses on remembering values, useEffect focuses on running actions.

Very Important Difference

`useEffect` Does NOT Return Values

This is one of the most important beginner understandings.

Look at this:

const value = useMemo(() => {
  return 10;
}, []);

Here:

useMemo

returns a value.

That returned value gets stored inside:

value

Now compare it with:

useEffect(() => {
  console.log("Hello");
}, []);

This does NOT return a UI value.

useEffect simply runs some code after rendering.

So:

Hook	Returns Value?
`useMemo`	Yes
`useEffect`	No

This is a very important connectivity proof between both hooks.

One stores values.
The other performs actions.

Important Connection Between `useMemo` and `useEffect`

This is where many beginners get confused.

Both hooks use dependency arrays.

Example:

useEffect(() => {
  console.log("Effect running");
}, [count]);

and

useMemo(() => {
  return count * 2;
}, [count]);

Both are watching:

[count]

Whenever count changes:

useEffect reruns,
useMemo recalculates.

That’s why they feel similar.

But internally, their purpose is different.

Difference Between `useMemo` and `useEffect`

The easiest way to understand them is this:

Hook	Purpose
`useMemo`	Remember calculated values
`useEffect`	Run side effects/actions

You can also remember it like this:

`useMemo`

“Remember this value.”

`useEffect`

“Run this action.”

This one-line understanding helps a lot.

Example Without `useMemo`

Now let’s see the real problem.

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [dark, setDark] = useState(false);

  function slowFunction(num) {
    console.log("Heavy Calculation Running...");

    for (let i = 0; i < 1000000000; i++) {}

    return num * 2;
  }

  const doubledNumber = slowFunction(count);

  return (
    <div>
      <h1>{doubledNumber}</h1>

      <button onClick={() => setCount(count + 1)}>
        Increase
      </button>

      <button onClick={() => setDark(!dark)}>
        Toggle Theme
      </button>
    </div>
  );
}

At first, this code may look fine. But there’s an important issue hidden inside it.

What Happens Internally Here?

When the component renders:

slowFunction(count) runs,
heavy calculation happens,
React displays the result.

Now suppose the user clicks:

Toggle Theme

This updates:

dark

state.

Even though:

count did not change,
the heavy calculation still runs again.

Why?

Because React re-rendered the component, and everything inside the component executed again.

That is unnecessary work.

This is exactly where useMemo helps.

Fixing It with `useMemo`

import { useMemo, useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [dark, setDark] = useState(false);

  function slowFunction(num) {
    console.log("Heavy Calculation Running...");

    for (let i = 0; i < 1000000000; i++) {}

    return num * 2;
  }

  const doubledNumber = useMemo(() => {
    return slowFunction(count);
  }, [count]);

  return (
    <div>
      <h1>{doubledNumber}</h1>

      <button onClick={() => setCount(count + 1)}>
        Increase
      </button>

      <button onClick={() => setDark(!dark)}>
        Toggle Theme
      </button>
    </div>
  );
}

Now the behavior changes.

Flow of This Code

When the component renders for the first time:

useMemo runs,
slowFunction(count) executes,
React stores the result,
React also stores the dependency:

[count]

Now suppose theme changes.

React re-renders the component again.

But before recalculating, React compares old dependencies with new dependencies.

If:

count

did not change,
React skips the expensive calculation and reuses the old stored value.

This is called:

memoization

And that’s where the name useMemo comes from.

Combining `useMemo` with `useEffect`

Now let’s connect both hooks together.

import { useEffect, useMemo, useState } from "react";

function App() {
  const [number, setNumber] = useState(1);

  const squared = useMemo(() => {
    console.log("Calculating...");
    return number * number;
  }, [number]);

  useEffect(() => {
    console.log("Squared value changed:", squared);
  }, [squared]);

  return (
    <div>
      <h1>{squared}</h1>

      <button onClick={() => setNumber(number + 1)}>
        Increase
      </button>
    </div>
  );
}

This example is the best proof of connectivity between:

useMemo
and useEffect

Now get in to this flow

When the component loads:

number state initializes,
useMemo calculates:

number * number

React stores the returned value inside:

squared

This proves:

useMemo

returns a value.

Now React renders the UI.

After rendering finishes:

useEffect

runs.

Notice:

useEffect did not create a value,
it only performed an action:

console.log()

This proves:

useEffect

does NOT return UI values.

Now suppose the button is clicked.

setNumber(number + 1)

updates state.

React re-renders again.

Then:

useMemo checks [number]
dependency changed,
calculation reruns,
new squared value gets returned.

Now:

useEffect

detects that:

[squared]

changed.

So the effect runs again.

This is the real relationship:

useMemo creates optimized returned values
useEffect reacts when those values change

Once beginners understand this execution flow, both hooks become much easier.

Common Beginner Mistakes

One of the biggest beginner mistakes is using useMemo everywhere.

Example:

const value = useMemo(() => {
  return count + 1;
}, [count]);

This is unnecessary because:

count + 1

is already extremely fast.

useMemo itself also has a small cost.

So optimization should only happen when calculations are actually expensive.

Another common mistake is incorrect dependencies:

useMemo(() => {
  return count * 2;
}, []);

Now the value never updates because dependencies are empty.

The same dependency problems also happen in useEffect.

So dependency arrays are very important in both hooks.

Final Thoughts

For beginners, useMemo feels confusing because it introduces optimization concepts early.

But the core idea is actually simple.

React components re-render often. During those renders, calculations also rerun. If those calculations are expensive, useMemo helps React remember previous results and avoid unnecessary work.

At the same time:

useMemo returns optimized values,
while useEffect performs actions after rendering.

So together:

useMemo stores optimized calculated values,
useEffect reacts when values change.

And that’s a wrap for Episode 8 of “Let’s Master React Hooks Together.”

If useMemo felt confusing before, hopefully now it feels much more practical and less scary.

In the next episodes, we’ll continue exploring more React hooks, deeper concepts, and real-world React patterns step by step in the same beginner-friendly style.

Until then:

experiment with these examples,
change dependencies,
observe re-renders,
and keep building projects.

Because the more you practice React hooks, the more natural they become.

See you in Episode 9 of “Let’s Master React Hooks Together.”

Mastering Axios in React: API Calls Made Easy

Kathirvel S — Wed, 13 May 2026 14:12:46 +0000

Introduction

Welcome back to Episode 7 of our series — “Let’s Master React Hooks Together.”

So far in this series, we’ve explored how React Hooks help us manage state, handle side effects, and build cleaner, smarter components. But as applications grow, one thing becomes unavoidable — working with APIs and backend data.

A React application without API communication is like a car without fuel. Whether you're building a social media app, an e-commerce platform, or a dashboard, your frontend constantly needs to fetch, send, update, and delete data from servers.

That’s where Axios comes into the picture.

In this episode, we’ll deeply understand:

What Axios is
Why developers prefer it
How Axios works in React
GET, POST, PUT, DELETE requests
Error handling
Async/Await
Interceptors
Best practices
Real-world usage

By the end of this article, you’ll not only know how to use Axios — you’ll understand why it has become one of the most trusted tools in modern React development.

So let’s continue our journey and master another essential part of React development together.

What Is Axios?

Axios is a promise-based HTTP client for JavaScript.

In simple words, Axios helps your React application send and receive data from APIs.

It works in:

React
Node.js
Vue
Angular
Plain JavaScript applications

Axios allows developers to make requests such as:

GET → Fetch data
POST → Send data
PUT → Update data
DELETE → Remove data

Why Do We Need Axios in React?

React itself focuses only on building user interfaces. It does not include a built-in system for API handling.

To communicate with servers, we need tools like:

Fetch API
Axios

Although JavaScript already provides the Fetch API, many developers prefer Axios because it is simpler and provides more useful features.

Why Developers Prefer Axios Over Fetch

Here are some major reasons developers choose Axios:

1. Cleaner Syntax

Axios code is usually shorter and easier to read.

Example with Fetch

fetch("https://jsonplaceholder.typicode.com/users")
  .then(response => response.json())
  .then(data => console.log(data))

Example with Axios

axios.get("https://jsonplaceholder.typicode.com/users")
  .then(response => console.log(response.data))

Axios automatically converts JSON data, reducing extra code.

2. Better Error Handling

Axios handles HTTP errors more effectively.

For example:

404 errors
500 server errors
Network failures

It provides detailed error responses that help developers debug faster.

3. Automatic JSON Transformation

Axios automatically:

Converts request data to JSON
Parses response JSON automatically

With Fetch, you need to manually call .json().

4. Request Cancellation

Axios allows cancelling requests.

This is useful when:

Users leave a page before data loads
Preventing memory leaks
Avoiding unnecessary API calls

5. Interceptors

Axios provides interceptors that allow developers to:

Modify requests
Add authentication tokens
Handle errors globally

This is extremely useful in large applications.

Installing Axios in React

To use Axios in a React project, install it using npm.

npm install axios

Or using yarn:

yarn add axios

How Axios Works in React

Axios works by sending HTTP requests from your React frontend to a backend API.

The process looks like this:

React component loads
Axios sends request to API
Server processes request
Server sends response
React updates the UI with received data

Making Your First GET Request

A GET request is used to fetch data.

Example

import React, { useEffect, useState } from "react";
import axios from "axios";

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

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then((response) => {
        setUsers(response.data);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  return (
    <div>
      <h1>Users List</h1>

      {users.map((user) => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
}

export default Users;

Understanding the Code

`axios.get()`

Used to fetch data from an API.

axios.get(url)

`.then()`

Runs when the request succeeds.

.then((response) => {
   console.log(response.data)
})

`.catch()`

Handles errors.

.catch((error) => {
   console.log(error)
})

Using Async/Await with Axios

Modern React applications often use async/await because it looks cleaner.

Example

import React, { useEffect, useState } from "react";
import axios from "axios";

function Posts() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetchPosts();
  }, []);

  const fetchPosts = async () => {
    try {
      const response = await axios.get(
        "https://jsonplaceholder.typicode.com/posts"
      );

      setPosts(response.data);
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <div>
      <h1>Posts</h1>

      {posts.map((post) => (
        <p key={post.id}>{post.title}</p>
      ))}
    </div>
  );
}

export default Posts;

Sending Data with POST Request

POST requests are used to send data to a server.

Example

import axios from "axios";

const addUser = async () => {
  try {
    const response = await axios.post(
      "https://jsonplaceholder.typicode.com/users",
      {
        name: "John Doe",
        email: "john@example.com",
      }
    );

    console.log(response.data);
  } catch (error) {
    console.log(error);
  }
};

Updating Data with PUT Request

PUT requests update existing data.

Example

axios.put("https://jsonplaceholder.typicode.com/users/1", {
  name: "Updated Name",
});

Deleting Data with DELETE Request

DELETE requests remove data from a server.

Example

axios.delete("https://jsonplaceholder.typicode.com/users/1");

Axios Response Object

Axios responses contain useful information.

Example

const response = await axios.get(url);

console.log(response);

Common Properties

Property	Description
`data`	Actual response data
`status`	HTTP status code
`headers`	Response headers
`config`	Request configuration

Error Handling in Axios

Error handling is extremely important in real-world applications.

Example

try {
  const response = await axios.get(url);
} catch (error) {
  if (error.response) {
    console.log(error.response.status);
    console.log(error.response.data);
  } else {
    console.log(error.message);
  }
}

What Are Axios Interceptors?

Interceptors allow developers to run code before requests or responses are handled.

They are commonly used for:

Authentication tokens
Logging
Global error handling

Request Interceptor Example

axios.interceptors.request.use(
  (config) => {
    config.headers.Authorization = "Bearer token";
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

Response Interceptor Example

axios.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    if (error.response.status === 401) {
      console.log("Unauthorized");
    }

    return Promise.reject(error);
  }
);

Advantages of Axios

Easy to Use

Axios has beginner-friendly syntax.

Automatic JSON Parsing

No need for manual conversion.

Better Error Handling

Handles errors clearly.

Supports Older Browsers

Better compatibility than Fetch in some environments.

Request Timeout

Axios supports request timeout configuration.

axios.get(url, {
  timeout: 5000,
});

Disadvantages of Axios

Even though Axios is powerful, it has a few disadvantages.

Extra Dependency

You need to install an external package.

Slightly Larger Bundle Size

Compared to the native Fetch API.

Sometimes Overkill

For very small projects, Fetch may be enough.

Best Practices When Using Axios in React

1. Create a Separate Axios Instance

Instead of repeating the base URL everywhere:

import axios from "axios";

const api = axios.create({
  baseURL: "https://api.example.com",
});

export default api;

2. Store API Logic Separately

Avoid placing API calls directly inside components.

Good structure:

src/
 ├── api/
 │    └── users.js
 ├── components/
 └── pages/

3. Handle Errors Properly

Always use:

try/catch
loading states
user-friendly error messages

4. Use Environment Variables

Never hardcode API URLs.

Example:

process.env.REACT_APP_API_URL

Real-World Use Cases of Axios

Axios is commonly used in:

Authentication systems
E-commerce websites
Social media apps
Dashboard applications
Admin panels
Chat applications

Almost every React application that communicates with a backend can benefit from Axios.

Axios vs Fetch API

Feature	Axios	Fetch
JSON Parsing	Automatic	Manual
Error Handling	Better	Basic
Interceptors	Yes	No
Request Cancellation	Yes	Limited
Built into Browser	No	Yes
Simpler Syntax	Yes	Moderate

Conclusion

And that wraps up Episode 7 of our series — “Let’s Master React Hooks Together.”

In this episode, we explored one of the most important skills every React developer must learn: handling API requests with Axios.

We covered:

What Axios is
Why developers love it
How requests work
Async/Await handling
Error management
Interceptors
Best practices for scalable applications

Understanding Axios is a major step forward because real-world React applications are heavily dependent on backend communication. Once you become comfortable with Axios, building dynamic and data-driven applications becomes much easier and more professional.

As we continue this series, we’ll keep moving deeper into practical React concepts that developers use in real production applications every day.

So stay tuned for the next episode of “Let’s Master React Hooks Together” — and keep building, keep learning, and keep coding consistently.

Mastering useReducer in React — The Hook That Simplifies Complex State

Kathirvel S — Tue, 12 May 2026 15:16:44 +0000

From Simple State to Scalable Logic

Welcome back to another episode of “Let’s Master React Hooks Together”.

React always feels easy at the beginning.

You learn components.
You learn props.
You learn useState.

Everything feels smooth.

But then real applications arrive.

And suddenly state logic starts growing fast:

multiple form fields
loading states
error handling
API responses
step-based flows
conditional updates

And your component slowly becomes harder to manage.

This is where most developers get stuck.

Because useState works perfectly… until it doesn’t.

That’s where useReducer enters.

Not as a replacement.

But as a way to bring structure when state starts becoming complex.

In This Episode, You’ll Learn

What useReducer actually is
How state flows through it
How actions connect everything
How dispatch triggers updates
Real-world patterns
Multi-step form logic
When to use it and when not to

And most importantly…

You’ll see how scattered state turns into a clean, predictable flow.

What is useReducer in React?

At its core, useReducer follows one simple idea:

Instead of changing state directly, you describe what happened, and React figures out how the state should change.

That movement always follows the same path:

Action → Reducer → New State

Each part has a role:

Action carries the event
Reducer decides the change
State stores the result

Why This Pattern Exists

Think about a login screen.

You are dealing with multiple values:

email
password
loading
error
success

If each one is handled separately, updates happen in different places, and logic becomes scattered.

Over time, it becomes harder to track how everything connects.

The idea of a reducer is to bring all these changes into one controlled place where every update follows the same path.

The Foundation

Everything starts with this line:

const [state, dispatch] = useReducer(reducer, initialState)

This creates a connection between three things:

state → holds current values
dispatch → sends a signal
reducer → decides what happens next

Nothing changes yet — this only sets up the system.

State Begins the Journey

Now imagine state starting like this:

{
  count: 0
}

This becomes the single source of truth.

Every change in the future will create a new version of this structure instead of modifying it directly.

That’s why React can reliably update the UI — because every update is a fresh object.

Dispatch Starts Everything

Now something happens in the UI.

Instead of changing state directly, a message is sent:

dispatch({ type: "increment" })

At this point, nothing has changed yet.

This is just an instruction saying:

“something happened”.

That instruction now moves to the central decision point.

The Decision Point

Everything reaches this function:

function reducer(state, action) {
  switch (action.type) {

    case "increment":
      return {
        count: state.count + 1
      }

    case "decrement":
      return {
        count: state.count - 1
      }

    default:
      return state
  }
}

Now break this flow mentally:

state gives current value
action tells what happened
switch chooses the path

Each path creates a new version of state.

Nothing is modified directly — everything is replaced with a new result.

Connecting It All in a Component

Now everything comes together:

const initialState = {
  count: 0
}

This sets the starting point.

Now the reducer defines how this value will change over time:

function reducer(state, action) {
  switch (action.type) {

    case "increment":
      return { count: state.count + 1 }

    case "decrement":
      return { count: state.count - 1 }

    default:
      return state
  }
}

Now the component connects everything:

function Counter() {

  const [state, dispatch] = useReducer(reducer, initialState)

  return (
    <div>

      <h1>{state.count}</h1>

      <button onClick={() =>
        dispatch({ type: "increment" })
      }>
        +
      </button>

      <button onClick={() =>
        dispatch({ type: "decrement" })
      }>
        -
      </button>

    </div>
  )
}

Now follow the full loop:

User clicks button → dispatch sends action → reducer receives it → state updates → UI re-renders

Everything stays inside one predictable cycle.

Actions Carry Intent

An action is always simple:

dispatch({
  type: "increment"
})

It does not change anything directly.

It only describes what happened so the reducer can decide what to do.

When Data Is Needed

Sometimes actions carry extra information:

dispatch({
  type: "ADD_USER",
  payload: {
    name: "John"
  }
})

Now the reducer uses that data:

case "ADD_USER":
  return {
    users: [...state.users, action.payload]
  }

Now the same pattern continues:

event → action → reducer → new state

Real Flow — Multi-Step Form

Now this pattern expands into real applications.

A form usually has multiple connected parts:

step tracking
form data
validation errors

So everything is grouped together:

const initialState = {
  step: 1,

  formData: {
    name: "",
    email: ""
  },

  errors: {}
}

Now every change must respect this structure.

Updating Form Fields

Instead of writing separate logic for each input, everything flows through one pattern:

function reducer(state, action) {
  switch (action.type) {

    case "UPDATE_FIELD":
      return {
        ...state,
        formData: {
          ...state.formData,
          [action.field]: action.value
        }
      }

    case "NEXT_STEP":
      return {
        ...state,
        step: state.step + 1
      }

    default:
      return state
  }
}

Now focus on the flow:

existing state is copied
only one field inside formData changes
everything else stays intact

That’s how structure is preserved.

Input Connection

Each input follows the same path:

onChange={(e) =>
  dispatch({
    type: "UPDATE_FIELD",
    field: "name",
    value: e.target.value
  })
}

Now every keystroke follows the same cycle:

user input → dispatch → reducer → state update → UI refresh

No duplication. No scattered logic.

When It Makes Sense

This approach becomes useful when:

state starts interacting with other state
updates depend on previous values
logic becomes harder to manage
component starts growing fast

When It Doesn’t

If state is simple and isolated:

const [open, setOpen] = useState(false)

there is no need for extra structure.

The Core Idea

Simple state changes are independent.

Reducer-based state changes are structured flows.

That difference becomes important as applications scale.

Why Developers Prefer It

Because it naturally brings:

predictable updates
centralized control
scalable structure
clean separation of logic
easier debugging

Redux Connection

This same pattern evolves into Redux:

actions → reducers → dispatch → store updates

So understanding this now builds a strong foundation for larger systems later.

Final Thoughts

At this stage, React is no longer just about writing UI.

It becomes about designing how data moves.

Because the real difference between simple apps and scalable apps is not syntax…

It’s structure.

And useReducer introduces that structure.

Instead of asking:

“How do I change this value?”

You start asking:

“How should this value change over time?”

That shift is what separates writing code from designing applications.

What to Remember

When state starts feeling scattered:

Bring it into one flow.
Let actions describe events.
Let reducers decide outcomes.

That single mindset shift is what levels up your React thinking.

Next Episode

In the next episode of “Let’s Master React Hooks Together”, we’ll explore advanced React patterns that build on this foundation and take your applications closer to production-level architecture.

Stay consistent.

What Building a Quiz Web App Taught Me About React

Kathirvel S — Mon, 11 May 2026 15:30:27 +0000

From Confusion to Confidence — Building My Quiz Web App with React

As part of my React learning journey at Payilagam, this Quiz Web App project was guided by Vijaya Ragavan sir.
This project helped me understand how real React applications work practically instead of only learning concepts theoretically.

What started as a simple quiz application slowly became one of the most exciting and confidence-building projects in my learning journey

Live Project Link

👉 Try My Quiz Web App Here:
[https://react-projects-rjy7.vercel.app/]

The Idea Behind the Project

While learning React, I didn’t want to just watch tutorials and memorize syntax.

I wanted to build something interactive where I could actually apply:

React Hooks
Routing
State Management
Dynamic Rendering
User Interaction

That’s when I started building this Quiz Web App

The application flow is simple and user-friendly:

✅ User enters their name
✅ Quiz starts
✅ Questions appear one by one
✅ User selects answers
✅ Final score gets displayed
✅ User can restart the quiz again

Even though the concept sounds simple, building it taught me many important frontend development concepts.

React Concepts I Used

This single project helped me work with several important React concepts like:

useState
useEffect
useContext
useRef
useNavigate
BrowserRouter
Routing & Navigation
Protected Routes
JSON Data Handling
Conditional Rendering
Event Handling
Dynamic UI Rendering

Instead of learning these concepts separately,
this project helped me understand how everything connects together inside a real application.

Setting Up Routing Using BrowserRouter

The first thing I worked on was setting up routing for the application.

I used:

BrowserRouter
Routes
Route
Navigate

to create separate pages for:

User Page
Quiz Page
Result Page

<BrowserRouter>
  <Routes>
    <Route path='/' element={<User />} />
    <Route path='/quiz' element={<Quiz />} />
    <Route path='/result' element={<Result />} />
  </Routes>
</BrowserRouter>

This made the application feel like a real website instead of a single static page.

When page navigation started working smoothly without reloading the browser, it honestly felt amazing

Designing the User Page

The User page is where the quiz experience begins.

I created a simple and clean interface with:

Input field
Start Quiz button
Auto-focus functionality
Name formatting logic

One small feature I liked was automatically focusing the input box using useRef and useEffect.

useEffect(() => {
  userRef.current.focus()
}, [])

This may look like a small thing,
but it improves user experience and gives a professional feel to the application.

Name Formatting Logic

I also added logic to automatically format the entered user name properly.

Example:

❌ vIjAy rAgAvAn
✅ Vijay Ragavan

const formatted = e.target.value
  .split(" ")
  .map(word =>
    word.charAt(0).toUpperCase() +
    word.slice(1).toLowerCase()
  )
  .join(" ")

While writing this logic, I understood how JavaScript string methods can be used effectively inside React applications.

Understanding useState Through Real Application Logic

This project helped me understand the actual purpose of useState.

I used states for:

Current question
Selected option
User score
User name
Route access permission

const [crntQz, setCrntQz] = useState(0)
const [optChosen, setOptChosen] = useState("")

Whenever the state changes,
React automatically updates the UI.

That real-time re-rendering experience made React much easier to understand for me.

useContext — The Most Important Concept in This Project

Among all the hooks I used,
useContext became the most important one in this project.

Instead of passing props manually through multiple components,
I created a global context:

export const QuizData = createContext()

Using this context, I shared:

User name
Score
Permission state

across all pages easily.

This made the code:
✅ Cleaner
✅ Easier to manage
✅ More organized

Before this project, useContext felt confusing.
But implementing it practically made the concept much clearer.

Protected Route Logic

One feature that made the application feel more realistic was route protection.

I didn’t want users to directly access the /quiz page without entering their name first.

So I added this condition:

<Route
  path='/quiz'
  element={
    userPer ? <Quiz /> : <Navigate to="/" />
  }
/>

If the user tries to open the quiz page directly,
they are automatically redirected back to the home page.

This feature gave the project a more professional feel.

Building the Main Quiz Logic

This was the core part of the project.

I implemented:

Question navigation
Option selection
Next button functionality
Finish button logic
Score calculation
Dynamic rendering

Questions were stored inside a JSON file:

import questions from "../assets/questions.json"

This helped me understand how applications handle external structured data.

Dynamic Rendering Using map()

Instead of manually creating option buttons,
I dynamically rendered them using .map().

["A", "B", "C", "D"].map((opt, index) => (
  <button key={index}>
    {questions[crntQz][`option${opt}`]}
  </button>
))

This was one of the moments where React’s power became very clear to me.

The code became shorter, cleaner, and easier to maintain.

Score Calculation Logic

The application checks whether the selected answer matches the correct answer.

if(optChosen == questions[crntQz].answer ){
   setScore((prev)=>prev+1)
}

Each correct answer increases the score.

Simple logic…
but implementing it successfully gave me a lot of confidence as a beginner developer.

Result Page

After completing the quiz,
users are redirected to the Result page.

The page displays:

User name
Final score
Restart button

<h2>{name}, Your Score is {score} / 5 </h2>

I also added a “Start Quiz Again” button to improve interaction and make the app reusable.

Challenges I Faced

Building this project was exciting,
but there were definitely challenging moments too.

Some issues I faced:

State update confusion
Route navigation problems
Score calculation bugs
Option reset issues
Context-related mistakes
Conditional rendering confusion

Sometimes a very small bug took a long time to solve

But those debugging moments improved my logic-building and problem-solving skills a lot.

What This Project Taught Me

This project taught me much more than just React syntax.

It helped me understand:

How React applications are structured
How hooks work practically
How components communicate
How state controls UI updates
How routing improves user experience
How frontend logic is built step by step

Most importantly,
it taught me that real learning happens while building projects.

Final Thoughts

This Quiz Web App may be a beginner-level project,
but for me, it represents a huge learning milestone.

This was the project where:

React started making sense
Hooks became easier to understand
My coding confidence started growing

And honestly…

Seeing my own application work successfully from start to finish felt incredibly satisfying

If you’re also learning React or web development,
don’t wait until you feel “perfect.”

Start building.
Experiment.
Debug.
Improve.

Because every project teaches something new

The Hidden Reason Python Became the Face of AI

Kathirvel S — Sun, 10 May 2026 08:37:14 +0000

Why Python Is the #1 Language for AI

Welcome back to Sunday Source – I Break It, Then Explain It

This is Episode #2, and today we’re talking about something almost impossible to ignore in tech right now:

Why does almost every AI tool, tutorial, and startup somehow end up using Python?

Seriously.

Chatbots? Python.

Machine learning? Python.

AI automation? Again… Python.

At this point, it almost feels illegal to build AI without it 😅

But here’s the real question:

Why Python?

Why not Java?

Why not C++?

Why not JavaScript?

Is Python actually the most powerful language for artificial intelligence… or is it just the most popular?

In this episode, I’ll break down:

why Python became the default language for AI,
what makes developers love it,
and whether Python truly deserves the crown.

And don’t worry — no boring textbook explanations here.

Let’s break it down.

Why AI Needed a Language Like Python

Artificial intelligence is full of heavy concepts:

Math
Data
Algorithms
Neural networks
Endless experiments

Now imagine doing all that in a language with complicated syntax.

Sounds painful, right?

AI developers need to test ideas quickly. They don’t want to spend hours fixing semicolons or writing 20 extra lines just to print something on the screen.

Python made AI development feel simpler.

Here’s a tiny example.

Python:

print("Hello AI")

Java:

public class Main {
    public static void main(String[] args) {
        System.out.println("Hello AI");
    }
}

Be honest…

Which one feels less stressful?

Exactly.

That simplicity matters a LOT in artificial intelligence.

The Biggest Reasons Python Dominates AI

1. Python Is Easy to Read

Python almost looks like normal English.

That means:

Beginners learn faster
Teams collaborate better
Bugs become easier to find
Developers focus more on AI logic instead of syntax

And in AI projects, clarity is everything.

Because trust me — debugging a neural network is already confusing enough.

2. Python Has Powerful AI Libraries

This is probably Python’s biggest superpower.

Instead of building everything from scratch, developers can use powerful libraries.

Some famous ones are:

TensorFlow
PyTorch
NumPy
Pandas
Scikit-learn

These libraries save thousands of hours of work.

For example:

NumPy handles fast mathematical calculations
Pandas works with datasets
TensorFlow helps train deep learning models
PyTorch is loved by AI researchers

Without these tools, AI development would be much slower.

Imagine building a car by first inventing the wheel every single time.

That’s life without libraries.

3. Python Is Perfect for Beginners

Let’s be real.

AI already feels intimidating.

There are terms like:

Transformers
Neural networks
Backpropagation
Gradient descent

Now imagine learning all that while also fighting a difficult programming language.

Python reduces that learning pressure.

That’s why most universities and online courses teach Python for AI first.

It lets beginners focus on understanding AI instead of struggling with syntax.

4. Fast Experimentation Matters in AI

AI is not just coding.

It’s testing ideas constantly.

Sometimes developers train models for hours… only to realize the idea doesn’t work.

Painful? Absolutely.

That’s why fast experimentation matters.

Python helps developers:

Write code quickly
Test models faster
Change ideas easily
Build prototypes rapidly

This is one reason startups LOVE Python.

Speed of development often matters more than raw performance.

Quick Summary

Why is Python the best language for AI?

Simple syntax
Massive AI libraries
Beginner friendly
Huge community
Faster experimentation
Strong machine learning ecosystem

Is Python Actually Fast?

Here’s where things get interesting.

Python itself is actually slower than languages like C++.

Wait… what?

Then why use it for AI?

Because most AI libraries are secretly powered by super-fast languages underneath.

For example:

TensorFlow uses optimized C++ code
PyTorch uses CUDA for GPU acceleration
NumPy runs highly optimized computations internally

So while developers write simple Python code…

The heavy lifting happens behind the scenes using GPUs and faster low-level systems.

Sneaky, right?

Python vs Other Languages for AI

Let’s compare quickly.

Language	Good For	Problem
Python	AI, ML, beginners	Slightly slower
Java	Enterprise systems	More complex syntax
C++	High performance	Harder to learn
JavaScript	Web AI apps	Smaller AI ecosystem

So does this mean other languages are bad?

Not at all.

C++ is amazing for performance-heavy systems.

JavaScript works great for browser AI.

But Python gives the best balance between:

simplicity
power
speed
community support

And that balance changed everything.

Real Companies Using Python for AI

Still wondering if Python in artificial intelligence is truly a big deal?

Some of the world’s biggest companies use it.

Google

Uses Python in machine learning and AI research.

OpenAI

Python plays a major role in AI model development.

Netflix

Uses Python for recommendation systems and data analysis.

And honestly…

When companies handling billions of users trust Python for AI, that says a lot.

The Real Secret Behind Python’s Success

Here’s something people don’t talk about enough.

Python removes friction.

It helps developers turn ideas into experiments quickly.

That changes creativity.

Because when coding feels easier, people build more things.

And AI grows through experimentation.

Maybe Python didn’t win because it was the fastest language.

Maybe it won because it made AI feel accessible to everyone.

That’s powerful.

Before You Scroll away

Python became the #1 language for AI because it made complicated things feel simpler.

It gave developers:

easy syntax
powerful tools
faster workflows
and a huge community ready to help.

And honestly, in a field as complex as artificial intelligence, simplicity becomes a superpower.

Maybe Python didn’t dominate AI because it was the fastest language.

Maybe it won because it removed friction between human ideas and machine learning.

And that changed everything.

That’s it for Episode #2 of Sunday Source – I Break It, Then Explain It

If you enjoyed this breakdown Then the this series doing it's work perfectly

See you next Sunday for another Sunday Source episode.

The Smart Way to Share State —Master useContext in React

Kathirvel S — Thu, 07 May 2026 13:20:40 +0000

The Prop Drilling Problem Every React Developer Hits

Welcome back to Let’s Master React Hooks Together — the series where we learn React Hooks the practical way, like real-world developers actually use them.

In the previous episodes, we explored hooks like useState, useEffect and useNavigate . But now we’re entering a stage where React apps start becoming real applications — with shared state, nested components, themes, authentication, and global UI behavior.

And that’s exactly where developers hit one frustrating problem:

prop drilling.

You create a piece of state in a parent component, but suddenly you’re passing it through 4 or 5 layers of components just so one deeply nested child can use it.

Your component tree starts looking like this:

App → Layout → Header → Navbar → Button

And somewhere deep inside that tree, a button just needs the current theme or logged-in user.

The result?

messy props
unnecessary component coupling
harder maintenance
painful refactoring

React introduced the Context API to solve this problem.

And later, hooks made it dramatically cleaner with useContext.

In this episode, we’ll learn:

what useContext is
why React introduced it
how it works mentally
when to use it
when NOT to use it
performance pitfalls developers often miss

Let’s master it properly.

The Problem: Prop Drilling in React

Imagine you want to pass theme and user data to a deeply nested component.

function App() {
  return <Layout theme="dark" user={user} />;
}

function Layout({ theme, user }) {
  return <Header theme={theme} user={user} />;
}

function Header({ theme, user }) {
  return <Navbar theme={theme} user={user} />;
}

function Navbar({ theme, user }) {
  return <Button theme={theme} user={user} />;
}

Notice the issue?

Layout, Header, and Navbar may not even care about theme or user.

They’re just forwarding props downward.

This creates unnecessary complexity:

components become harder to read
props explode over time
refactoring becomes risky
maintenance gets annoying

Mentally, it looks like this:

App → Layout → Header → Navbar → Button → Theme

As applications grow, this pattern becomes difficult to manage.

React needed a cleaner way for components to access shared data directly.

That’s where Context comes in.

What is Context API?

The Context API is React’s built-in shared state mechanism.

It allows components to access common data without manually passing props through every level.

Think of it like a WiFi router.

Any device inside the network can access the internet without needing a direct cable connection to the source.

Similarly, components inside a Context Provider can access shared data directly.

React Context mainly consists of 3 parts:

1. Create Context

const ThemeContext = createContext();

2. Provider

<ThemeContext.Provider value={theme}>

3. Consumer (`useContext`)

const theme = useContext(ThemeContext);

That’s the core idea.

Simple concept. Massive improvement in component architecture.

What is `useContext`?

useContext is a React Hook that lets a component read data from a Context.

const value = useContext(MyContext);

In simple words:

“Give me the nearest value from this context.”

Before hooks existed, developers used Context.Consumer, which quickly became deeply nested and difficult to read.

Hooks made Context usage much cleaner and more natural.

Slightly Technical Understanding

When React renders a component using useContext, it searches upward through the component tree for the nearest matching Provider.

If the Provider value changes, React re-renders the components consuming that context.

That’s the main mental model.

Real Example: Theme Switching

Let’s build a simple dark/light theme system.

Create Context

import { createContext, useState } from "react";

export const ThemeContext = createContext();

Create Provider

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");

  const toggleTheme = () => {
    setTheme(prev => (prev === "light" ? "dark" : "light"));
  };

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

Consume Context

import { useContext } from "react";
import { ThemeContext } from "./ThemeContext";

function Button() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <button onClick={toggleTheme}>
      Current theme: {theme}
    </button>
  );
}

Now any component inside ThemeProvider can directly access the theme.

No prop drilling.

No unnecessary intermediary props.

Cleaner architecture.

How `useContext` Works (Mental Model)

Here’s the simplest mental model:

When React sees this:

useContext(ThemeContext)

it walks upward through the component tree searching for:

<ThemeContext.Provider>

The nearest provider wins.

Think of it like searching for the nearest WiFi signal.

If the Provider value changes:

value={newValue}

React re-renders components consuming that context.

That re-render behavior is important for performance.

When to Use `useContext`

useContext works best for shared application-wide state.

Great use cases include:

theme systems
authenticated user data
language switching
sidebar visibility
app settings
cart information

A simple rule:

If many distant components need the same data, Context is usually a good fit.

When NOT to Use `useContext`

This is where many developers misuse Context.

Avoid Frequently Changing State

Examples:

typing inputs
mouse movement
animations
rapidly updating values

Why?

Because every context update can trigger many component re-renders.

Avoid Replacing Local State

If only one component needs the state, useState is usually better.

Not everything belongs in global state.

Overusing Context creates bloated architectures that become difficult to maintain.

Performance Concerns (Important)

Here’s a very common mistake:

<Provider value={{ user, setUser }}>

Why is this problematic?

Because a new object is created on every render.

React compares references, not deep values:

{} !== {}

So all consuming components re-render.

Even if user didn’t actually change.

Better Approach

Memoize the value:

const value = useMemo(() => ({ user, setUser }), [user]);

Another important optimization:

Split Contexts by Concern

Instead of one massive global context:

AppContext

prefer smaller focused contexts:

ThemeContext
AuthContext
LanguageContext

This reduces unnecessary re-renders and improves maintainability.

Best Practices

Keep Context Small

Focused contexts are easier to manage.

Split by Responsibility

Separate auth, theme, language, cart, etc.

Avoid Giant Global Contexts

Large contexts become difficult to debug and optimize.

Keep Provider Values Stable

Memoize objects and functions when necessary.

Use Custom Hooks

Cleaner API:

const theme = useTheme();

instead of repeatedly calling useContext.

Real-World Examples

Authentication System

Store logged-in user data globally so navbar, dashboard, and profile pages can access it instantly.

Theme System

Dark/light mode is one of the best examples of Context usage.

Language Switcher

Allow the entire application to switch languages consistently.

Shopping Cart

E-commerce apps often share cart count and cart items across many components.

Interview Questions (Quick Revision)

What is useContext?

A hook that allows components to consume values from React Context.

What problem does it solve?

Prop drilling.

Does useContext replace Redux?

No. Context helps with shared state, but Redux handles more advanced global state patterns.

Why do consumers re-render?

Because the Provider value changes.

When should you avoid Context?

For fast-changing or highly local component state.

What does “nearest provider wins” mean?

React uses the closest matching Provider above the component in the tree.

Final Summary

In Episode 5 of Let’s Master React Hooks Together, we learned that useContext exists to solve one major React problem:

prop drilling.

It allows components to access shared state directly without passing props through every layer.

Use it for:

themes
authentication
language settings
shared UI state

Avoid it for:

rapidly changing values
highly local state
giant global stores

And most importantly:

Context is powerful, but every update can trigger re-renders.

Use it thoughtfully, keep contexts focused, and your React architecture will stay clean and scalable.

In the next episode of Let’s Master React Hooks Together, we’ll explore one of React’s most misunderstood hooks:

`useRef` — how React remembers values without causing re-renders.

Stop Using Links the Wrong Way — Master useNavigate in React

Kathirvel S — Wed, 06 May 2026 14:43:20 +0000

Hey… welcome back 👋

If you made it here, you’re not just learning React anymore —
you’re starting to think like a React developer.

In Episode 3, we set up the foundation with Browser Router — basically giving our app a navigation system.

But now comes the real question…

“Okay… routing is set. But how do I actually control navigation with logic?”

Because let’s be honest —
real apps don’t just wait for users to click links.

They:

redirect after login
protect private pages
move users based on conditions
respond to actions instantly

👉 And this… is exactly where useNavigate steps in.

What is useNavigate?

Let’s slow this down and really understand it.

At its core, useNavigate is a React hook that lets you change routes (pages) using JavaScript code instead of user clicks.

In simple terms:

It gives you control over when and where a user should move inside your app.

Normally in a website, navigation happens when a user clicks something.
But with useNavigate, navigation can happen because your logic decided it should happen.

What does that actually mean?

You don’t have to wait for a user to click a link
You can trigger navigation inside functions, conditions, API responses, or events
Your app becomes smarter and more responsive

Think of it like this:

Instead of the user driving the app, sometimes the app drives the user.

Why Does useNavigate Exist?

To understand this properly, you need to compare traditional websites vs React apps.

Traditional Website Navigation

In a normal website:

User clicks a link
Browser requests a new page from the server
Entire page reloads

This is slow and breaks the user experience.

React (Single Page Application) Navigation

React works differently.

It’s a Single Page Application (SPA), which means:

The page does not fully reload
Only the required components update
Navigation feels instant and smooth

But here’s the catch:

If there are no full page reloads… how do we move between pages?

That’s where React Router comes in (Episode 3).
And useNavigate is part of that system.

The Real Reason useNavigate Exists

Let’s move into real-world thinking.

Modern apps are not just about showing pages. They are about flows.

Real-Time Scenarios

After login → go to dashboard
After form submission → go to success page
If user is not logged in → redirect to login
If payment is successful → show confirmation page

These are not user-click actions. These are logic-driven decisions.

That is exactly why useNavigate exists.

Real-Time Examples

1. After Login

import { useNavigate } from "react-router-dom";

function Login() {
  const navigate = useNavigate();

  const handleLogin = () => {
    const isAuthenticated = true;

    if (isAuthenticated) {
      navigate("/dashboard");
    }
  };

  return <button onClick={handleLogin}>Login</button>;
}

2. After Form Submission

const handleSubmit = () => {
  navigate("/thank-you");
};

3. Protecting Private Routes

if (!user) {
  navigate("/login");
}

4. Auto Redirect After Delay

setTimeout(() => {
  navigate("/");
}, 3000);

Where Can You Use useNavigate?

Important rule:

useNavigate can only be used inside:

React functional components
Custom hooks

How to Use useNavigate (Step by Step)

1. Import

import { useNavigate } from "react-router-dom";

2. Initialize

const navigate = useNavigate();

3. Use

navigate("/home");

Additional Useful Patterns (Real Understanding)

These patterns are used heavily in real applications.

1. Go Back to Previous Page

navigate(-1);

Meaning

Works like browser back button.

-1 → go back one page
-2 → go back two pages

Example Flow

Home → Products → Product Details

navigate(-1);

You return to Products page.

2. Replace Current Page (No Back Navigation)

navigate("/home", { replace: true });

Meaning

Replaces current page in history.

User cannot go back to previous page.

Real Example: Login

const handleLogin = () => {
  navigate("/dashboard", { replace: true });
};

Without replace → user goes back to login page
With replace → login page is removed from history

3. Pass Data While Navigating

navigate("/profile", {
  state: { name: "John" }
});

Meaning

Send temporary data to another page.

Receiving Data

import { useLocation } from "react-router-dom";

function Profile() {
  const location = useLocation();
  console.log(location.state.name);
}

Real Use Case

navigate("/profile", {
  state: { userId: 5, name: "John" }
});

Link vs useNavigate

Scenario	Use
User clicks navigation	Link
Logic decides navigation	useNavigate

Common Mistakes Beginners Make (and How to Avoid Them)

1. Using useNavigate Outside Component

Hooks only work inside components.

2. Forgetting Router Setup

Make sure BrowserRouter is configured (Episode 3).

3. Overusing useNavigate

Don’t replace all links with it.

4. Navigating Before Logic Completes

Always wait for API success or conditions.

5. Ignoring Edge Cases

Handle failures before redirecting.

Simple Way to Remember

User action → Link
App logic → useNavigate

Final Thoughts

useNavigate is not just about switching pages.

It allows you to:

Control user flow
Build real-world app behavior
Create smooth, intelligent navigation

Once you understand this, you stop thinking in pages and start thinking in user journeys.

See you in next one

This is Episode 4 of the series “Let’s Master React Hooks Together.”

Full series here:
👉 https://dev.to/kathirvel-s/series/39103

In the next episode, we’ll explore another powerful concept that helps your React apps become even more dynamic and interactive.

Until then, try building a small project using useNavigate. That’s where real understanding begins.

Stop Using Links the Wrong Way — Master useNavigate in React

Kathirvel S — Wed, 06 May 2026 14:43:20 +0000

Hey… welcome back 👋

If you made it here, you’re not just learning React anymore —
you’re starting to think like a React developer.

In Episode 3, we set up the foundation with Browser Router — basically giving our app a navigation system.

But now comes the real question…

“Okay… routing is set. But how do I actually control navigation with logic?”

Because let’s be honest —
real apps don’t just wait for users to click links.

They:

redirect after login
protect private pages
move users based on conditions
respond to actions instantly

👉 And this… is exactly where useNavigate steps in.

What is useNavigate?

Let’s slow this down and really understand it.

At its core, useNavigate is a React hook that lets you change routes (pages) using JavaScript code instead of user clicks.

In simple terms:

It gives you control over when and where a user should move inside your app.

Normally in a website, navigation happens when a user clicks something.
But with useNavigate, navigation can happen because your logic decided it should happen.

What does that actually mean?

You don’t have to wait for a user to click a link
You can trigger navigation inside functions, conditions, API responses, or events
Your app becomes smarter and more responsive

Think of it like this:

Instead of the user driving the app, sometimes the app drives the user.

Why Does useNavigate Exist?

To understand this properly, you need to compare traditional websites vs React apps.

Traditional Website Navigation

In a normal website:

User clicks a link
Browser requests a new page from the server
Entire page reloads

This is slow and breaks the user experience.

React (Single Page Application) Navigation

React works differently.

It’s a Single Page Application (SPA), which means:

The page does not fully reload
Only the required components update
Navigation feels instant and smooth

But here’s the catch:

If there are no full page reloads… how do we move between pages?

That’s where React Router comes in (Episode 3).
And useNavigate is part of that system.

The Real Reason useNavigate Exists

Let’s move into real-world thinking.

Modern apps are not just about showing pages. They are about flows.

Real-Time Scenarios

After login → go to dashboard
After form submission → go to success page
If user is not logged in → redirect to login
If payment is successful → show confirmation page

These are not user-click actions. These are logic-driven decisions.

That is exactly why useNavigate exists.

Real-Time Examples

1. After Login

import { useNavigate } from "react-router-dom";

function Login() {
  const navigate = useNavigate();

  const handleLogin = () => {
    const isAuthenticated = true;

    if (isAuthenticated) {
      navigate("/dashboard");
    }
  };

  return <button onClick={handleLogin}>Login</button>;
}

2. After Form Submission

const handleSubmit = () => {
  navigate("/thank-you");
};

3. Protecting Private Routes

if (!user) {
  navigate("/login");
}

4. Auto Redirect After Delay

setTimeout(() => {
  navigate("/");
}, 3000);

Where Can You Use useNavigate?

Important rule:

useNavigate can only be used inside:

React functional components
Custom hooks

How to Use useNavigate (Step by Step)

1. Import

import { useNavigate } from "react-router-dom";

2. Initialize

const navigate = useNavigate();

3. Use

navigate("/home");

Additional Useful Patterns (Real Understanding)

These patterns are used heavily in real applications.

1. Go Back to Previous Page

navigate(-1);

Meaning

Works like browser back button.

-1 → go back one page
-2 → go back two pages

Example Flow

Home → Products → Product Details

navigate(-1);

You return to Products page.

2. Replace Current Page (No Back Navigation)

navigate("/home", { replace: true });

Meaning

Replaces current page in history.

User cannot go back to previous page.

Real Example: Login

const handleLogin = () => {
  navigate("/dashboard", { replace: true });
};

Without replace → user goes back to login page
With replace → login page is removed from history

3. Pass Data While Navigating

navigate("/profile", {
  state: { name: "John" }
});

Meaning

Send temporary data to another page.

Receiving Data

import { useLocation } from "react-router-dom";

function Profile() {
  const location = useLocation();
  console.log(location.state.name);
}

Real Use Case

navigate("/profile", {
  state: { userId: 5, name: "John" }
});

Link vs useNavigate

Scenario	Use
User clicks navigation	Link
Logic decides navigation	useNavigate

Common Mistakes Beginners Make (and How to Avoid Them)

1. Using useNavigate Outside Component

Hooks only work inside components.

2. Forgetting Router Setup

Make sure BrowserRouter is configured (Episode 3).

3. Overusing useNavigate

Don’t replace all links with it.

4. Navigating Before Logic Completes

Always wait for API success or conditions.

5. Ignoring Edge Cases

Handle failures before redirecting.

Simple Way to Remember

User action → Link
App logic → useNavigate

Final Thoughts

useNavigate is not just about switching pages.

It allows you to:

Control user flow
Build real-world app behavior
Create smooth, intelligent navigation

Once you understand this, you stop thinking in pages and start thinking in user journeys.

See you in next one

This is Episode 4 of the series “Let’s Master React Hooks Together.”

Full series here:
👉 https://dev.to/kathirvel-s/series/39103

In the next episode, we’ll explore another powerful concept that helps your React apps become even more dynamic and interactive.

Until then, try building a small project using useNavigate. That’s where real understanding begins.

Browser Router in React JS — Why It Exists, What It Solves, and How to Actually Use It

Kathirvel S — Mon, 04 May 2026 02:54:56 +0000

If you’ve ever built a React app and thought,

“Why does my page reload every time I click a link?”

you’re not alone.

That moment is usually where things start getting interesting…

and where something like Browser Router quietly steps in to save your user experience.

And if you’re following along with my series

"Mastering React Hooks Together",

this is the 3rd episode

and trust me, this piece matters more than it looks.

Because before jumping into hooks like useNavigate, there’s something fundamental you need to understand first… and that’s exactly what we’re unpacking here.

Let’s break it down in a way that actually makes sense — no robotic explanations, no unnecessary jargon. Just real understanding.

So… Why Does Browser Router Even Exist?

React is built for speed and smoothness. It updates parts of the page without refreshing the whole thing. But here’s the catch:

👉 Browsers don’t work that way by default.

When you click a normal link (<a href="/about">), the browser reloads the entire page. That means:

Your app resets
State is lost
It feels slow and clunky

Not exactly the “modern app” experience we want.

This is where Browser Router comes in — it lets your React app behave like a real single-page application (SPA), where navigation feels instant.

But how does it actually pull that off?

What is Browser Router (Official + Simple)

Official idea:
Browser Router is a routing component that uses the browser’s History API to keep your UI in sync with the URL.

Now in plain English:

👉 It watches the URL and decides what component to show — without refreshing the page.

Think of it like a smart traffic controller:

URL changes → Browser Router reacts → React renders the right component

No reloads. No flicker. Just smooth transitions.

And once you see it in action, you’ll realize it’s not just “nice to have” — it’s essential.

The Problem It Actually Solves

Let’s paint a quick picture.

Imagine you’re building a simple app:

Home page
About page
Contact page

Without routing, you’d either:

Reload the page every time (bad UX), or
Manually control everything with state (messy and hard to scale)

Neither feels right.

Browser Router solves this by:

Keeping the UI and URL in sync
Letting users bookmark/share links
Enabling back/forward navigation
Avoiding full page reloads

Basically, it gives your React app a real navigation system.

And once navigation is handled cleanly, the next natural question becomes…

How Do You Actually Use Browser Router?

Let’s keep this practical — but this time, not just what to write… also why each line exists, so nothing feels like magic.

Step 1: Install React Router

npm install react-router-dom

This installs the routing library your app doesn’t have by default. React itself doesn’t handle routing — so you’re bringing in the tool that will.

Step 2: Wrap Your App

import { BrowserRouter } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      {/* Your routes go here */}
    </BrowserRouter>
  );
}

Let’s break this down:

import { BrowserRouter }...
👉 You’re importing the component that enables routing using the browser’s URL.
<BrowserRouter>
👉 This is the engine of your routing system.
It listens to URL changes and provides routing context to everything inside it.
{/* Your routes go here */}
👉 This is where your app’s pages will live — but they only work because they’re inside Browser Router.

So at this point:
👉 Your app is now aware of URLs.

But it still doesn’t know what to render for each URL… and that leads us to the next step.

Step 3: Define Routes

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

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

Here:

import { Routes, Route }...
👉 These help you define which component should show for which URL.
<Routes>
👉 Think of this as a container that holds all your route rules.
<Route path="/" element={<Home />} />
👉 When the URL is /, React renders the Home component.
<Route path="/about" element={<About />} />
👉 When the URL is /about, React switches to the About component.

Now something important just happened:
👉 Your app can now map URLs to UI.

But how does the user actually move between these URLs without reloading?

Step 4: Navigate Without Reloading

import { Link } from "react-router-dom";

<Link to="/about">Go to About</Link>

Let’s unpack it:

import { Link }...
👉 This replaces the normal <a> tag in React apps.
<Link to="/about">
👉 Instead of reloading the page, it updates the URL internally.
Go to About
👉 What the user clicks.

So when clicked:
👉 URL changes → Browser Router detects it → सही component renders → no reload

And now everything connects:

Browser Router watches the URL
Routes decide what to render
Link changes the URL smoothly

That’s the full loop.

And once this loop clicks in your head, navigation stops feeling confusing… and starts feeling powerful.

When Should You Use Browser Router?

Short answer?

👉 Almost always — if you're building a web app.

But let’s be specific.

Use it when:

You have multiple pages/views
You want clean URLs
You care about user experience
You don’t want page reloads

Avoid it only if:

Your app is extremely small (like a single static view)
Or you’re using a different routing strategy (like hash-based routing for legacy setups)

Otherwise, Browser Router is your go-to.

And once navigation is set up, clicking links is just one part of the story…

Is Browser Router Just for useNavigate?

Not exactly — but it makes it possible.

Browser Router is the foundation.
Hooks like useNavigate are tools built on top of it.

Without Browser Router:
👉 useNavigate won’t work.

With Browser Router:
👉 You can programmatically move users around your app.

And this is exactly why understanding Browser Router comes before learning useNavigate.

Because:

useNavigate depends on routing context
That context is created by Browser Router
Without it, navigation logic simply has nowhere to run

So if you jump straight into useNavigate without this base, things will feel confusing or even break entirely.

Example:

import { useNavigate } from "react-router-dom";

function Home() {
  const navigate = useNavigate();

  return (
    <button onClick={() => navigate("/about")}>
      Go to About
    </button>
  );
}

This is where things shift from “basic routing” to “controlled user flow.”

Now you’re not just linking pages — you’re guiding users.

Bringing It All Together

Browser Router isn’t just another library piece you install and forget.

It’s what transforms your React app from:
👉 A collection of components
into
👉 A real, navigable application

It:

Eliminates full page reloads
Keeps URLs meaningful
Improves performance and UX
Enables powerful navigation patterns

And once you start using it, you’ll wonder how you ever built apps without it.

One Last Thought

If you’re continuing this journey with

“Mastering React Hooks Together”,

this 3rd episode sets the stage for everything that comes next.

Because when we step into hooks like useNavigate, you won’t just memorize syntax — you’ll actually understand what’s happening under the hood.

And that’s the difference between using React… and mastering it.

Forem: Kathirvel S

Mastering useParams in React Router: Dynamic Routing, URL Parameters

What is useParams?

Definition of useParams

Why Do We Need useParams?

Which Problem Does useParams Solve?

Where is useParams Used?

When Should You Use useParams?

Installing React Router

Basic Setup of React Router

Step 1: Wrap Application

Creating Dynamic Routes

Step 2: Define Routes

Understanding :id

Using useParams

Output

Destructuring useParams

How useParams Works Internally

Important Point

Converting Parameter to Number

Multiple Route Parameters

Real World Example — Fetching API Data

Why [id] is Added in Dependency Array

Dynamic Blog Example

Common Mistakes with useParams

1. Forgetting Colon :

2. Using Outside Router

3. Expecting Number Instead of String

4. Typo in Parameter Name

useParams vs Props

Combining useParams with Other Hooks

Nested Routes with useParams

Optional Parameters

Best Practices

Keep Parameter Names Meaningful

Validate Parameters

Use Clean URL Structures

Use Slugs for Blogs

Complete Practical Example

App.jsx

Product.jsx

URL Testing

Advantages of useParams

Limitations of useParams

Final Thoughts

Conclusion

Build Reusable Logic with Custom Hooks in React

Custom Hooks in React: Reusing Logic the Smart Way

What Is a Custom Hook?

Why Custom Hooks Exist

Understanding the Real Purpose of Custom Hooks

1. Reusability

2. Separation of Concerns

3. Cleaner Components

4. Better Maintainability

5. Easier Testing

The Rules of Custom Hooks

Rule 1: The function name must start with use

Rule 2: Hooks must be called at the top level

How to Create a Custom Hook

Example 1: Creating a useFetch Hook

Step 1: Create the Hook

Step 2: Use the Hook

Example 2: Creating a useCounter Hook

Step 1: Create the Hook

Step 2: Use the Hook

When Should You Create a Custom Hook?

You repeat logic across multiple components

Your component becomes too large

Logic is unrelated to UI

Where Custom Hooks Are Commonly Used

1. API Requests

2. Authentication

3. Theme Handling

4. Form Management

5. Window Resize Detection

6. Dark Mode

7. Local Storage

Example 3: useLocalStorage Hook

How Custom Hooks Improve Project Structure

What is `useParams`?

Definition of `useParams`

Why Do We Need `useParams`?

Which Problem Does `useParams` Solve?

Where is `useParams` Used?

When Should You Use `useParams`?

Understanding `:id`

Using `useParams`

Destructuring `useParams`

How `useParams` Works Internally

Why `[id]` is Added in Dependency Array

Common Mistakes with `useParams`

1. Forgetting Colon `:`

`useParams` vs Props

Combining `useParams` with Other Hooks

Nested Routes with `useParams`

Advantages of `useParams`

Limitations of `useParams`

Rule 1: The function name must start with `use`

Example 1: Creating a `useFetch` Hook

Example 2: Creating a `useCounter` Hook