DEV Community: Mahalakshmi C

React.memo in React

Mahalakshmi C — Thu, 22 Oct 2026 14:49:45 +0000

What is React.memo?

React.memo is a higher-order component in React that helps prevent unnecessary re-renders of a functional component when its props have not changed.

Normally, when a parent component re-renders, its child components may also re-render. React.memo can skip a child component's re-render if its props are unchanged.

Syntax

const MemoizedComponent = React.memo(Component);

Here:

React.memo() receives a component.
It returns a memoized version of that component.
React compares the previous props with the new props using shallow comparison by default.

Why Do We Use React.memo?

We use React.memo to:

Avoid unnecessary child component re-renders.
Improve performance in suitable situations.
Optimize components that render frequently with unchanged props.
Reduce repeated rendering work in large applications.

Example Without React.memo

import { useState } from "react";

function Child() {
    console.log("Child rendered");

    return <h2>Hello from Child</h2>;
}

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

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

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

            <Child />
        </div>
    );
}

export default App;

How does it work?

Whenever the button is clicked, the count state changes and App re-renders.

The Child component also re-renders, even though it does not receive any props and its output has not changed.

Example With React.memo

import { useState, memo } from "react";

const Child = memo(function Child() {
    console.log("Child rendered");

    return <h2>Hello from Child</h2>;
});

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

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

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

            <Child />
        </div>
    );
}

export default App;

How does it work?

Initially, the Child component renders.
Clicking Increase updates the parent's count.
The parent re-renders.
React checks the child's props.
Since the child has no props to compare, React can skip its re-render.

Note: React may still re-render a memoized component when its own state or a context value it uses changes. Memoization is an optimization, not a guarantee.

React.memo vs useMemo

Feature	Purpose
`React.memo`	Memoizes a component based on its props
`useMemo`	Memoizes a calculated value

Conclusion

React.memo is useful for optimizing functional components by skipping re-renders when their props remain unchanged. It is most helpful when a component renders frequently and its rendering work is significant. It should be used when it provides a meaningful performance benefit, rather than automatically wrapping every component.

useCallback, useMemo, and useReducer in React

Mahalakshmi C — Mon, 12 Oct 2026 14:10:33 +0000

React provides several Hooks to manage state, optimize performance, and organize component logic.

1. useCallback Hook

What is useCallback?

useCallback is a React Hook that caches a function definition between renders until its dependencies change.

It is useful when we want to avoid creating a new function reference on every render, especially when passing callbacks to memoized child components.

Syntax

const cachedFunction = useCallback(() => {
    // function logic
}, [dependencies]);

Callback function: The function we want to cache.
Dependency array: Values that the function depends on.
When a dependency changes, React returns a new function definition.

Example

import { useState, useCallback } from "react";

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

    const showMessage = useCallback(() => {
        console.log("Button clicked");
    }, []);

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

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

            <button onClick={showMessage}>
                Show Message
            </button>
        </div>
    );
}

export default App;

How does it work?

useCallback caches the showMessage function.
The empty dependency array means the function reference remains cached across renders, provided the component remains mounted.
Clicking the Increase button changes the state and re-renders the component.
React can reuse the cached function reference.

Important: useCallback does not prevent a component from re-rendering by itself. It is most useful when function identity matters, such as when passing a callback to a child wrapped in React.memo.

Why do we use useCallback?

To preserve function references between renders.
To help optimize memoized child components.
To avoid unnecessary effect re-runs caused by changing function dependencies.

2. useMemo Hook

What is useMemo?

useMemo is a React Hook that caches the result of a calculation between renders until its dependencies change.

It is useful when a calculation is expensive and does not need to be repeated when its inputs remain the same.

Syntax

const cachedValue = useMemo(() => {
    return calculateValue();
}, [dependencies]);

Callback function: Contains the calculation.
Dependency array: Contains the values used by the calculation.
Return value: The calculated result, which React can reuse while the dependencies remain unchanged.

Example

import { useState, useMemo } from "react";

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

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

    return (
        <div>
            <h2>Number: {number}</h2>
            <h2>Square: {square}</h2>
            <h2>Count: {count}</h2>

            <button onClick={() => setNumber(number + 1)}>
                Change Number
            </button>

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

export default App;

How does it work?

Initially, number is 5, so the square is 25.

When the Increase Count button is clicked, count changes, but number remains the same. React can reuse the cached square value instead of recalculating it.

When the number changes, React recalculates the square.

Why do we use useMemo?

To cache expensive calculation results.
To avoid unnecessary recalculations.
To help optimize rendering when calculations are costly.

Important: Do not use useMemo for every calculation. Simple calculations usually do not need it. React treats memoization as an optimization, not a guarantee.

3. useReducer Hook

What is useReducer?

useReducer is a React Hook used to manage state through a reducer function and actions.

It is useful when state logic becomes complex or when several actions need to update the same state.

Syntax

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

useReducer returns an array containing two values:

state — the current state.
dispatch — a function used to send an action to the reducer.

Important Terms

Reducer function: Receives the current state and an action, then returns the next state.

Action: An object that describes what should happen.

Dispatch: Sends an action to the reducer.

Initial state: The starting state value.

Example: Counter

import { useReducer } from "react";

function reducer(state, action) {
    switch (action.type) {
        case "increase":
            return { count: state.count + 1 };

        case "decrease":
            return { count: state.count - 1 };

        case "reset":
            return { count: 0 };

        default:
            return state;
    }
}

function App() {
    const initialState = { count: 0 };

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

    return (
        <div>
            <h2>Count: {state.count}</h2>

            <button onClick={() => dispatch({ type: "increase" })}>
                Increase
            </button>

            <button onClick={() => dispatch({ type: "decrease" })}>
                Decrease
            </button>

            <button onClick={() => dispatch({ type: "reset" })}>
                Reset
            </button>
        </div>
    );
}

export default App;

How does it work?

The initial state is { count: 0 }.
Clicking Increase calls dispatch({ type: "increase" }).
The reducer receives the current state and the action.
The reducer returns a new state object.
React updates the state and re-renders the component.

Why do we use useReducer?

To organize complex state logic.
To handle multiple types of state updates.
To keep state transitions in one reducer function.
To manage related state values together.

For example, useReducer can be useful in a shopping cart, form management, or a task management application.

Difference Between useCallback, useMemo, and useReducer

Hook	Main purpose	Returns
`useCallback`	Caches a function definition	Cached function
`useMemo`	Caches a calculation result	Cached value
`useReducer`	Manages state using actions and a reducer	Array containing state and dispatch

Conclusion

useCallback and useMemo help optimize performance when caching is useful. useReducer helps manage state updates through a structured reducer function. Understanding these Hooks makes it easier to build React applications that are organized, maintainable, and efficient.

Lifting State Up in React

Mahalakshmi C — Thu, 08 Oct 2026 15:00:16 +0000

What is Lifting State Up?

Lifting State Up is a React concept where the state is moved from a child component to their common parent component so that multiple child components can share and use the same state.

When two or more child components need to use the same data, move the state to their nearest common parent.

Why Do We Lift State?

Normally, data flows from parent to child using props.

But sometimes two child components need to access or update the same data.

For example:

          App
        /     \
    Input     Display

Suppose Input changes a value and Display needs to show that value.

If the state is inside Input, Display cannot directly access it.

So, we move the state to the parent:

          App
       state
        /   \
       ↓     ↓
    Input   Display

Now both child components can communicate through the parent.

Example

Suppose we want to enter a name in one component and display it in another component.

Parent Component

import { useState } from "react";

function App() {

    const [name, setName] = useState("");

    return (
        <div>
            <InputBox name={name} setName={setName} />

            <Display name={name} />
        </div>
    );
}

export default App;

Here, the state:

const [name, setName] = useState("");

is stored in the parent component App.

Child Component 1 – InputBox

function InputBox({ name, setName }) {

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

The InputBox receives:

name
setName

through props.

When the user types something, setName() updates the state in the parent.

Child Component 2 – Display

function Display({ name }) {

    return (
        <h2>Hello {name}</h2>
    );
}

The Display component receives the updated name through props and displays it.

How Does It Work?

The flow of data is:

             App
        name + setName
          /        \
         ↓          ↓
    InputBox      Display
         |
         ↓
     setName()
         |
         ↓
    App state updates
         |
         ↓
     App re-renders
         |
         ↓
    Updated name
         ↓
      Display

The important point is that the state belongs to the parent, while the child components receive the state and setter function through props.

Lifting State Up vs Props

Props are the method used to pass the state and setter function from the parent to the child.

Lifting State Up
       ↓
Move state to common parent
       ↓
Pass state using props
       ↓
Child components share the data

Conclusion

Lifting State Up is a technique used to share state between sibling components. The state is moved to their nearest common parent, and the parent passes the state and setter function to the children through props. This keeps data flow predictable and makes components easier to manage.

React Router DOM

Mahalakshmi C — Wed, 07 Oct 2026 13:31:14 +0000

What is React Router DOM?

React Router DOM is a library used in React applications to handle routing and navigation.

Routing means displaying different components or pages based on the URL.

For example, a blog application may have:

/              → Home
/about         → About
/blog          → Blog
/contact       → Contact

React Router allows users to move between these pages without completely reloading the browser page.

Why Do We Use React Router?

React applications are often Single Page Applications (SPAs). This means the application can display different content without loading a completely new HTML page from the server for every navigation.

React Router helps us:

Create different routes
Navigate between pages
Display different components for different URLs
Create dynamic routes
Handle nested routes
Navigate programmatically

Installing React Router DOM

First, install the package:

npm install react-router-dom

Then we can use it in our React application.

Important Components

Some commonly used React Router features are:

BrowserRouter
Routes
Route
Link
NavLink
useNavigate
useParams

Basic Example

Suppose we have a simple blog with three pages:

Home
Blog
About

App.jsx

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

function Home() {
    return <h1>Home Page</h1>;
}

function Blog() {
    return <h1>Blog Page</h1>;
}

function About() {
    return <h1>About Page</h1>;
}

function App() {
    return (
        <BrowserRouter>

            <nav>
                <Link to="/">Home</Link>
                <Link to="/blog">Blog</Link>
                <Link to="/about">About</Link>
            </nav>

            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/blog" element={<Blog />} />
                <Route path="/about" element={<About />} />
            </Routes>

        </BrowserRouter>
    );
}

export default App;

How Does This Code Work?

1. BrowserRouter

<BrowserRouter>

BrowserRouter enables routing in the React application and uses the browser's URL to manage navigation.

2. Routes

<Routes>

Routes contains all the routes defined in the application.

3. Route

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

A Route connects a URL path with a React component.

Here:

/blog → Blog component

When the browser URL becomes /blog, React Router displays the Blog component.

4. Link

<Link to="/blog">Blog</Link>

Link is used to navigate between routes.

When the user clicks Blog, React Router changes the URL and displays the Blog component without performing a full page reload.

Dynamic Routing

React Router can also create dynamic routes.

For example, a blog may have different posts:

/blog/1
/blog/2
/blog/3

We can create a dynamic route using:

<Route path="/blog/:id" element={<BlogPost />} />

Here, :id is a dynamic parameter.

We can access it using useParams().

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

function BlogPost() {

    const { id } = useParams();

    return <h1>Blog Post ID: {id}</h1>;
}

If the URL is:

/blog/10

the output will be:

Blog Post ID: 10

useNavigate

useNavigate is used when we want to navigate to another route using JavaScript.

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

function Login() {

    const navigate = useNavigate();

    function handleLogin() {
        navigate("/home");
    }

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

After clicking the button, the user is navigated to /home.

React Router Flow

User clicks a Link
       ↓
URL changes
       ↓
React Router checks the URL
       ↓
Matching Route is found
       ↓
Corresponding Component is rendered
       ↓
UI is updated

Important Points

BrowserRouter enables routing.
Routes contains the application's routes.
Route connects a URL path with a component.
Link is used for navigation.
useParams accesses dynamic URL parameters.
useNavigate allows navigation using JavaScript.
React Router allows navigation without a full page reload.

Conclusion

React Router DOM provides a simple way to implement navigation and routing in React applications. It is especially useful for applications with multiple views, such as blogs, dashboards, shopping websites, and portfolio applications.

useContext Hook in React

Mahalakshmi C — Mon, 05 Oct 2026 13:10:12 +0000

useContext

useContext is a React Hook used to access shared data from a Context without passing props manually through every component.

It is useful when the same data needs to be accessed by multiple components.

Examples of data that can be shared using Context include:

User information
Theme
Language
Login status
Application settings

Why Do We Use useContext?

Normally, data is passed from a parent component to a child component using props.

For example:

App
 ↓
Navbar
 ↓
Profile

If Profile needs some data from App, we may have to pass that data through Navbar even if Navbar does not need it.

This is called prop drilling.

App
 ↓ props
Navbar
 ↓ props
Profile

useContext helps avoid this problem.

With Context, the data can be shared directly:

        Context
       ↙       ↘
   Navbar     Profile

How Does useContext Work?

There are three main steps:

Create a Context
Provide a value using Provider
Access the value using useContext

Example

Suppose we want to share a username between components.

Step 1: Create Context

import { createContext } from "react";

const UserContext = createContext();

createContext() creates a Context object.

Step 2: Provide the Value

function App() {

    return (
        <UserContext.Provider value="Maha">
            <Profile />
        </UserContext.Provider>
    );
}

Here:

value="Maha"

is the data we want to share.

The Profile component is placed inside the Provider, so it can access the value.

Step 3: Access the Value Using useContext

import { useContext } from "react";

function Profile() {

    const user = useContext(UserContext);

    return <h2>Hello {user}</h2>;
}

Here:

const user = useContext(UserContext);

gets the value provided by:

<UserContext.Provider value="Maha">

The output will be:

Hello Maha

So the data flow is:

createContext()
      ↓
Context Provider
      ↓
value="Maha"
      ↓
useContext()
      ↓
Profile Component

useContext vs Props

Props	useContext
Data is passed from parent to child	Data can be shared through Context
Useful for direct parent-child communication	Useful when many components need the same data
Can cause prop drilling	Helps avoid prop drilling
Data is passed through component props	Data is accessed using `useContext()`

Conclusion

useContext makes it easier to share data across multiple React components without passing props through every level of the component tree. It is especially useful for application-wide or shared data such as themes, user information, and settings.

useRef Hook in React

Mahalakshmi C — Thu, 01 Oct 2026 13:10:30 +0000

useRef is a React Hook that is used to store a value that persists between renders without causing the component to re-render when the value changes.

It is also commonly used to access and interact with DOM elements directly.

Syntax

const reference = useRef(initialValue);

For example:

const count = useRef(0);

What Does useRef Return?

useRef() returns an object containing a property called current.

const count = useRef(0);

console.log(count);

The result is similar to:

{
    current: 0
}

The value can be accessed or changed using:

count.current

For example:

count.current = count.current + 1;

Why Do We Use useRef?

useRef is commonly used for:

Accessing DOM elements
Storing values between renders
Keeping a previous value
Storing values without causing a re-render

Example 1: Accessing a DOM Element

One of the most common uses of useRef is focusing an input element.

import { useRef } from "react";

function App() {

    const inputRef = useRef();

    function focusInput() {
        inputRef.current.focus();
    }

    return (
        <div>
            <input ref={inputRef} />

            <button onClick={focusInput}>
                Focus Input
            </button>
        </div>
    );
}

export default App;

How does it work?

First, we create a ref:

const inputRef = useRef();

Then we attach it to the input:

<input ref={inputRef} />

React stores the input DOM element inside:

inputRef.current

When the button is clicked:

inputRef.current.focus();

the input receives focus.

Example 2: useRef Does Not Cause Re-render

Consider:

const count = useRef(0);

We can change the value:

count.current = count.current + 1;

But changing count.current does not cause the component to re-render.

This is an important difference between useRef and useState.

useState	useRef
Stores state	Stores a mutable reference
Updating state causes re-render	Updating `.current` does not cause re-render
Uses a setter function	Uses `.current`
Used when UI needs to update	Useful when UI does not need to update

useRef for Storing Previous Values

useRef can also be used to remember a value from the previous render.

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

function App() {

    const [name, setName] = useState("Maha");
    const previousName = useRef("");

    useEffect(() => {
        previousName.current = name;
    }, [name]);

    return (
        <div>
            <h2>Current Name: {name}</h2>
            <h2>Previous Name: {previousName.current}</h2>

            <button onClick={() => setName("Lakshmi")}>
                Change Name
            </button>
        </div>
    );
}

export default App;

Here, previousName.current can store a value that persists between renders.

useRef vs useState

Suppose we have:

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

When we write:

setCount(count + 1);

React updates the state and re-renders the component.

But with:

const count = useRef(0);

when we write:

count.current = count.current + 1;

the value changes, but React does not re-render the component just because the ref changed.

Simple Flow

useState

State changes
     ↓
React re-renders
     ↓
UI updates

useRef

ref.current changes
     ↓
No automatic re-render
     ↓
Component UI does not automatically update

Conclusion

useRef is useful when a value needs to persist between renders without triggering a re-render. It is especially useful for accessing DOM elements, storing previous values, and keeping mutable values that do not directly control the UI.

useState and useEffect in React

Mahalakshmi C — Wed, 30 Sep 2026 15:22:47 +0000

useState

useState is a React Hook used to create and manage state in a functional component.

State is a value that can change during the execution of a component. When the state changes, React re-renders the component and updates the UI.

Syntax

const [state, setState] = useState(initialValue);

Here:

state → stores the current value
setState → updates the value
initialValue → initial value of the state

What does useState return?

useState() returns an array containing two values:

[
    current state value,
    setter function
]

For example:

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

Here:

count → current state value
setCount → setter function used to update the state
0 → initial value

The array returned by useState() is commonly destructured into two variables.

Example

import { useState } from "react";

function Counter() {

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

    function increase() {
        setCount(count + 1);
    }

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

            <button onClick={increase}>
                Increase
            </button>
        </div>
    );
}

export default Counter;

When the button is clicked, setCount() updates the state.

setCount(count + 1);

React then re-renders the component with the new value.

Setter Function

The second value returned by useState() is called the setter function.

For example:

const [name, setName] = useState("Maha");

Here:

name     → current value
setName  → setter function

We should use the setter function to update state:

setName("Lakshmi");

Instead of directly changing the state:

name = "Lakshmi";   // ❌

The setter function tells React that the state has changed and the component needs to be rendered again.

useEffect

useEffect is a React Hook used to perform side effects in a functional component.

A side effect is an operation that happens outside the normal process of calculating and displaying the UI.

Common examples include:

Fetching data from an API
Updating localStorage
Setting a timer
Adding event listeners
Working with external systems

Syntax

useEffect(() => {
    // side effect code
}, [dependencies]);

The first argument is a callback function.

The second argument is called the dependency array.

Example

import { useEffect, useState } from "react";

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

    useEffect(() => {
        console.log("Count changed:", count);
    }, [count]);

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

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

export default Counter;

Here, useEffect depends on count:

[count]

Whenever count changes, the effect runs.

Dependency Array

The dependency array controls when the effect runs.

No dependency array

useEffect(() => {
    console.log("Effect runs");
});

The effect runs after every render.

Empty dependency array

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

An empty dependency array means the effect does not depend on changing state or props. It runs after the initial render.

With dependencies

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

The effect runs after the initial render and again when count changes.

Difference Between useState and useEffect

useState	useEffect
Manages state	Performs side effects
Stores changing data	Runs code after rendering
Updating state causes a re-render	Responds to rendering/dependency changes
Example: counter value	Example: API call or localStorage

Complete Example Using useState and useEffect

import { useState, useEffect } from "react";

function Counter() {

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

    useEffect(() => {
        console.log("Count changed:", count);
    }, [count]);

    function increase() {
        setCount((previousCount) => previousCount + 1);
    }

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

            <button onClick={increase}>
                Increase
            </button>
        </div>
    );
}

export default Counter;

How this code works

First:

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

creates a state variable called count with an initial value of 0.

When the button is clicked:

setCount((previousCount) => previousCount + 1);

the setter function updates the state.

After the state changes, React renders the component again.

Then:

useEffect(() => {
    console.log("Count changed:", count);
}, [count]);

runs because count has changed.

Simple Flow

useState
   ↓
Creates state + setter function
   ↓
User clicks button
   ↓
Setter function updates state
   ↓
Component re-renders
   ↓
useEffect checks dependency
   ↓
Effect callback runs

Hooks in React

Mahalakshmi C — Tue, 29 Sep 2026 13:13:05 +0000

What are Hooks?

Hooks are special(Built-in) functions provided by React that allow functional components to use React features such as state, side effects, context, and references.

Hooks were introduced in React 16.8.

Before Hooks, features such as state and lifecycle methods were mainly used with class components. Hooks made it possible to use these features in functional components.

Some commonly used Hooks are:

useState
useEffect
useContext
useRef
useMemo
useCallback

Why Do We Use Hooks?

Hooks are used to:

Manage state in functional components
Perform side effects
Access context data
Store references to DOM elements
Optimize certain calculations and functions
Reuse stateful logic

Rules of Hooks

React has some important rules for using Hooks.

Rule 1: Call Hooks at the Top Level

Do not call Hooks inside:

if statements
for loops
while loops
Nested functions

Correct:

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

    return <h1>{count}</h1>;
}

Incorrect:

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

Rule 2: Call Hooks from React Functions

Hooks should be called from:

React functional components
Custom Hooks

1. useState

useState is used to create and manage state in a functional component.

Example

import { useState } from "react";

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

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

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

export default Counter;

Here:

count → current state value
setCount → function used to update the state
0 → initial value

When setCount changes the value, React re-renders the component.

2. useEffect

useEffect is used to perform side effects in a component.

Examples of side effects include:

Fetching data from an API
Updating localStorage
Setting timers
Adding event listeners

Example

import { useEffect, useState } from "react";

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

    useEffect(() => {
        console.log("Count changed:", count);
    }, [count]);

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

export default Counter;

Whenever count changes, the effect runs.

3. useRef

useRef is used to store a value that persists between renders without causing a re-render when the value changes.

It is also commonly used to access a DOM element.

Example

import { useRef } from "react";

function InputBox() {
    const inputRef = useRef();

    function focusInput() {
        inputRef.current.focus();
    }

    return (
        <div>
            <input ref={inputRef} />

            <button onClick={focusInput}>
                Focus Input
            </button>
        </div>
    );
}

export default InputBox;

Here, useRef is used to access the input element.

Conclusion

Hooks make functional components more powerful by allowing them to use React features such as state, effects, context, and references. Among them, useState and useEffect are two of the most commonly used Hooks when learning React.

Child Components and Props in React

Mahalakshmi C — Sun, 27 Sep 2026 13:32:31 +0000

React applications are built using components. Components can be connected to each other, and one component can pass data to another component.

What is a Child Component?

A child component is a component that is rendered inside another component.
The component that contains the child is called the parent component.

For example:

function BlogPost() {
    return <h2>Introduction to React</h2>;
}

function App() {
    return (
        <div>
            <h1>My Blog</h1>
            <BlogPost />
        </div>
    );
}

Here:

App is the parent component.
BlogPost is the child component.
<BlogPost /> is used inside App.

The relationship is:

App (Parent)
    ↓
BlogPost (Child)

What are Props?

Props stands for Properties.

Props are used to pass data from a parent component to a child component.

Props are passed using attributes.

Example

function BlogPost(props) {
    return <h2>{props.title}</h2>;
}

function App() {
    return (
        <div>
            <BlogPost title="Introduction to React" />
        </div>
    );
}

Here:

<BlogPost title="Introduction to React" />

The parent component App passes the value:

Introduction to React

to the child component BlogPost.

The child receives this data through:

props.title

So the flow is:

Parent Component
       |
       |  title="Introduction to React"
       ↓
Child Component
       |
       ↓
props.title

Why Do We Use Props?

Props are mainly used to make components reusable.

For example, instead of creating a separate component for every blog post, we can create one BlogPost component and pass different data to it.

function BlogPost(props) {
    return (
        <article>
            <h2>{props.title}</h2>
            <p>{props.description}</p>
        </article>
    );
}

function App() {
    return (
        <div>
            <h1>My Blog</h1>

            <BlogPost
                title="Introduction to React"
                description="React is a JavaScript library for building user interfaces."
            />

            <BlogPost
                title="Understanding JavaScript"
                description="JavaScript is used to create interactive web applications."
            />
        </div>
    );
}

export default App;

Here, the same BlogPost component is reused twice with different data.

Output

My Blog

Introduction to React
React is a JavaScript library for building user interfaces.

Understanding JavaScript
JavaScript is used to create interactive web applications.

The component remains the same, but the data changes through props.

Props are read-only.

A child component should not directly change the props it receives from its parent.

For example:

function BlogPost(props) {
    return <h2>{props.title}</h2>;
}

Props Can Contain Different Types of Data

<BlogPost
    title="React"
    views={100}
    isPublished={true}
/>

Here:

title → String
views → Number
isPublished → Boolean

Props can also pass arrays, objects, and even functions.

Conclusion

A child component is a component rendered inside a parent component. Props provide a way for the parent component to send data to its child component.

The basic flow is:

Parent Component
       ↓
      Props
       ↓
Child Component
       ↓
    Display Data

Props make React components reusable, flexible, and easier to manage.

Components in React

Mahalakshmi C — Fri, 25 Sep 2026 14:32:57 +0000

A component is a reusable and independent part of a user interface in React.
Components help divide a large application into smaller and manageable parts.

For example, a website can be divided into components such as:

Navbar
Header
Home
Product
Footer
Login Form

Each component can have its own structure and behavior.

Why Are Components Used?

Components provide several benefits:

Reusability
Easy Maintenance
Separation of UI
Passing Data - Props are used to pass data from one component to another.

Types of Components

React components are mainly written as functional components in modern React.

Functional Component

A functional component is a JavaScript function that returns JSX.

function App() {
    return (
        <div>
            <Welcome />
            <p>This is my React application.</p>
        </div>
    );
}

App is the main component, and Welcome is used inside App.

Class Components

Class components are an older way of creating React components.

class Welcome extends React.Component {
    render() {
        return <h1>Hello React</h1>;
    }
}

Class components were commonly used before Hooks were introduced.

Example for components

function BlogPost() {
    return (
        <article>
            <h2>Introduction to React</h2>
            <p>
                React is a JavaScript library used to build
                user interfaces.
            </p>
        </article>
    );
}

function App() {
    return (
        <div>
            <h1>My Blog</h1>

            <BlogPost />
            <BlogPost />
        </div>
    );
}

export default App;

How Does This Work?

The BlogPost component contains the UI for one blog post.

Inside the App component:

<BlogPost /> <BlogPost />

the same component is used twice.

Therefore, React displays two blog posts without writing the same HTML/JSX code again.

My Blog

Introduction to React
React is a JavaScript library used to build user interfaces.

Introduction to React
React is a JavaScript library used to build user interfaces.

Conclusion

Components are a fundamental part of React. They allow an application to be divided into small, reusable, and manageable pieces. By combining different components, a complete React application can be created.

Virtual DOM in React

Mahalakshmi C — Thu, 24 Sep 2026 13:38:26 +0000

The Virtual DOM (Document Object Model) is one of the important concepts in React. It helps React update the user interface efficiently.

What is Virtual DOM?

The Virtual DOM is a lightweight JavaScript representation of the actual DOM.

The actual DOM represents the elements on a webpage, such as headings, buttons, paragraphs, images, and forms.

React does not directly update the entire actual DOM whenever something changes. Instead, it uses the Virtual DOM to find out what has changed.

How Does Virtual DOM Work?

The basic process is:

React creates a Virtual DOM that represents the UI.
When the data or state changes, React creates a new Virtual DOM.
React compares the new Virtual DOM with the previous Virtual DOM.
It identifies the changed elements.
React updates only those changed parts in the actual DOM.

This comparison process is commonly referred to as reconciliation.

Example

Suppose the UI initially displays:

Hello
Count: 1

After the count changes:

Hello
Count: 2

React does not need to recreate the entire page. It identifies that only the count has changed and updates that part of the UI.

Simple Flow

Initial UI
    ↓
Virtual DOM
    ↓
State changes
    ↓
New Virtual DOM
    ↓
Compare old and new Virtual DOM
    ↓
Find changes
    ↓
Update required part of Actual DOM

Virtual DOM vs Actual DOM

Virtual DOM	Actual DOM
JavaScript representation of the UI	Represents the actual webpage
Lightweight	More expensive to manipulate
Managed by React	Managed by the browser
Used to determine UI changes	Displays the UI

Conclusion

The Virtual DOM helps React manage UI updates efficiently. Instead of unnecessarily changing the entire webpage, React determines which parts need to change and updates those parts in the actual DOM.

React

Mahalakshmi C — Wed, 23 Sep 2026 13:37:35 +0000

Introduction

React is a JavaScript library used to build user interfaces (UI), especially for web applications.

React was developed by Facebook (now Meta) and was first released as an open-source project in 2013.

Why Do We Use React?

In traditional websites, when we change something on a page, the browser may reload the whole page. React helps us build applications where the UI can be updated efficiently without reloading the entire page.

React is commonly used to create Single Page Applications (SPAs).

What is a Component?

A component is a small, reusable part of a user interface.

For example, in a shopping website, we can create separate components for:

Navbar
Product
Product Card
Cart
Footer

These components can be combined to create the complete application.

Example

function Welcome() {
    return <h1>Welcome to React</h1>;
}

Here, Welcome is a React component.

When we use:

<Welcome />

React displays:

Welcome to React

React Library vs Framework

React is mainly considered a JavaScript library because it focuses primarily on building the user interface.

A framework usually provides a more complete structure and tools for developing an application.

Advantages of React

Reusable components
Efficient UI updates
Easy to maintain
Supports Single Page Applications
Large community
Can be used to build modern web applications

Conclusion

React makes it easier to build interactive and reusable user interfaces. It uses components to divide an application into smaller and manageable parts. For a beginner who already knows HTML, CSS, and JavaScript, React is a useful next step for learning modern frontend development.