DEV Community: Saravanan Lakshmanan

Stop Prop Drilling: Learn React useContext with Easy Examples

Saravanan Lakshmanan — Sun, 02 Aug 2026 06:37:20 +0000

React `useContext` Hook Explained with Simple Examples

If you've started learning React Hooks, you've probably heard about useContext. At first, it may seem confusing, but once you understand the problem it solves, it becomes much easier.

What is `useContext`?

useContext is a React Hook that allows multiple components to access the same data without passing it through every intermediate component as props.

In simple words:

useContext helps you share data between components directly.

Why do we need `useContext`?

Imagine the following component structure:

App
 ├── Parent
      ├── Child
            ├── GrandChild

Suppose the GrandChild component needs the user's name.

Without useContext, you would have to pass the data like this:

<App user="Saravanan">
   ↓
<Parent user={user}>
   ↓
<Child user={user}>
   ↓
<GrandChild user={user}>

Even though only GrandChild needs the data, every component in between has to receive and pass it.

This process is called prop drilling.

useContext solves this problem.

Real-Time Example

Think of a company.

The CEO announces a holiday.
Every employee should know about it.
The CEO doesn't tell each employee individually.
Instead, the announcement is placed on the company notice board where everyone can read it.

In React:

Context = Notice board
Provider = Person who posts the announcement
Consumer (useContext) = Employees reading the announcement

No need to pass the information through every manager.

Another Simple Example

Imagine your house has Wi-Fi.

Every family member connects to the same Wi-Fi.

The password is not passed from one family member to another every time someone wants internet access.

Instead, everyone accesses the same network directly.

useContext works similarly.

Syntax

Step 1: Create a Context

import { createContext } from "react";

const UserContext = createContext();

Step 2: Provide the Data

<UserContext.Provider value="Saravanan">
    <Child />
</UserContext.Provider>

The value prop contains the data that will be shared.

Step 3: Consume the Data

import { useContext } from "react";

const user = useContext(UserContext);

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

Now the component can access the shared data directly.

Complete Example

App.jsx

import { createContext } from "react";
import Child from "./Child";

export const UserContext = createContext();

function App() {
  return (
    <UserContext.Provider value="Saravanan">
      <Child />
    </UserContext.Provider>
  );
}

export default App;

Child.jsx

import GrandChild from "./GrandChild";

function Child() {
  return <GrandChild />;
}

export default Child;

GrandChild.jsx

import { useContext } from "react";
import { UserContext } from "./App";

function GrandChild() {
  const user = useContext(UserContext);

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

export default GrandChild;

Output

Hello, Saravanan

Notice that Child never receives any props.

GrandChild directly accesses the shared value.

How `useContext` Works

createContext()
        │
        ▼
Context Object
        │
        ▼
Provider shares data
        │
        ▼
Child Components
        │
        ▼
useContext() reads the data

Python Is More Than Just print("Hello World"): Understanding the Fundamentals

Saravanan Lakshmanan — Sun, 26 Jul 2026 14:41:56 +0000

I recently started learning Python, and in my first session, we explored some important fundamentals about Python, programming languages, Python versions, Python implementations, and the features that make Python popular.

Before jumping directly into coding, understanding these basics gives us a better idea of what Python actually is and why it is widely used.

What is Python?

Python is a high-level, general-purpose programming language known for its simple and readable syntax.

It is used in many areas, including:

Web Development
Automation
Data Science
Artificial Intelligence
Machine Learning
Scripting
Backend Development
Software Development

Python is designed to be easy to read and write, which makes it popular among beginners as well as experienced developers.

Understanding Python Version Numbers

You may have seen Python versions written like this:

Python 3.14.6

Let's understand what these numbers mean.

Major Version

The first number represents the major version.

Examples:

Python 2
Python 3

Python 2 and Python 3 are major versions with significant differences.

Minor Version

The second number represents the minor version.

Examples:

Python 3.13
Python 3.14

A new minor version can introduce new language features, improvements, and changes.

Maintenance or Patch Version

The third number represents the maintenance or patch release.

Example:

Python 3.14.6

This can be understood as:

3 → Major version
14 → Minor version
6 → Maintenance/Patch release

Patch releases generally focus on:

Bug fixes
Security fixes
Stability improvements
Other small improvements

Understanding Alpha, Beta, RC, and Development Versions

When looking at Python releases, we may see versions such as:

3.15.0a1
3.15.0b1
3.15.0rc1
3.15.0
3.15.0.dev1

These indicate different stages of development.

Alpha (a)

Example:

3.15.0a1

An Alpha version is an early development version.

It may contain new features, but the features and behavior can still change.

Alpha versions are mainly useful for developers and testers.

Beta (b)

Example:

3.15.0b1

A Beta version is more mature than an Alpha version, but it may still contain bugs and changes.

It is released for further testing before the final version.

Release Candidate (rc)

Example:

3.15.0rc1

A Release Candidate is almost ready for the final release.

If no major problems are discovered, the Release Candidate may become the final version.

Final Release

Example:

3.15.0

This is the official stable release.

It is considered ready for general use.

Development Version (dev)

Example:

3.15.0.dev1

A development version represents an early stage of development before the Alpha stage.

The general progression is:

Development
     ↓
Alpha
     ↓
Beta
     ↓
Release Candidate
     ↓
Final Release

What is CPython?

CPython is the original and most widely used implementation of Python.

It is written primarily in the C programming language.

When most people download and install Python from the official Python website, they are generally using CPython.

A simple representation is:

Python Code
     ↓
CPython
     ↓
Execution

CPython is the reference implementation of Python and is the implementation most commonly used by Python developers.

What is Jython?

Jython is an implementation of Python designed to run on the Java platform.

It allows Python code to interact with Java libraries and Java applications.

In simple terms:

Python + Java Platform = Jython

Jython can be useful when Python code needs to work with Java-based applications and libraries.

What is IronPython?

IronPython is an implementation of Python designed for the .NET platform.

It allows Python code to work with the .NET ecosystem and interact with .NET libraries.

In simple terms:

Python + .NET Platform = IronPython

Important Features of Python

1. Simple and Easy to Learn

Python has a clean and readable syntax.

For example:

print("Hello, Python!")

This code is simple and easy to understand.

Python syntax is designed to be close to natural language, which makes it beginner-friendly.

Compared to many other programming languages, Python generally requires less code to perform the same task.

2. Open Source

Python is open-source software.

This means:

Anyone can use Python.
Anyone can download Python.
Developers can study its source code.
Developers can contribute to its development.
Python can be used for personal and commercial projects.

Python is freely available to developers around the world.

3. Object-Oriented Programming

Python supports Object-Oriented Programming, commonly known as OOP.

Object-Oriented Programming allows us to organize programs using:

Classes
Objects
Inheritance
Encapsulation
Polymorphism
Abstraction

Example:

class Student:
    pass

Here, Student is a class.

A class can be used as a blueprint for creating objects.

Python also supports other programming styles, including:

Procedural Programming
Functional Programming

Therefore, Python is a multi-paradigm programming language.

4. High-Level Programming Language

Python is a high-level programming language.

High-level languages are designed to be easier for humans to read and understand.

Example:

print("Hello, Python!")

We do not need to directly manage:

CPU registers
Memory addresses
Machine instructions

The Python implementation handles many low-level details for us.

Low-Level Language

Examples:

Machine Language
Assembly Language

These languages are closer to the hardware and are more difficult for humans to understand.

High-Level Language

Examples:

Python
Java
JavaScript
C++
C#

These languages are easier for humans to read and write.

5. Dynamically Typed Language

Python is a dynamically typed programming language.

This means we do not need to explicitly declare the data type of a variable.

Example:

x = 10

Python automatically understands that x contains an integer.

name = "Saravanan"

Python understands that name contains a string.

price = 99.99

Python understands that price contains a floating-point number.

The data type is determined automatically during program execution.

6. Interpreted Language

Python is commonly described as an interpreted programming language.

Python code is executed by the Python interpreter.

A simple representation is:

Python Source Code
        ↓
Python Interpreter
        ↓
Program Execution

The interpreter reads and executes Python code.

In CPython, Python source code is first compiled into an intermediate form called bytecode.

The bytecode is then executed by the Python Virtual Machine, commonly known as the PVM.

A simplified representation is:

Python Source Code
        ↓
Bytecode
        ↓
Python Virtual Machine
        ↓
Execution

7. Extensive Standard Library

Python comes with a large collection of built-in modules and libraries.

These libraries provide ready-made functionality for many tasks.

Examples include:

File handling
Mathematics
Date and time operations
Regular expressions
Internet communication
Operating system interaction

For example:

import math

print(math.sqrt(25))

Output:

5.0

Instead of writing the square root logic ourselves, we can use the built-in math module.

Python is often called:

"Batteries included"

This means Python provides many useful tools and libraries out of the box.

8. Large Ecosystem of Third-Party Libraries

In addition to the standard library, Python has a huge ecosystem of third-party libraries.

Developers can install additional packages to add more functionality.

Examples:

NumPy → Numerical computing
Pandas → Data analysis
Matplotlib → Data visualization
Django → Web development
Flask → Web development
TensorFlow → Machine Learning
PyTorch → Deep Learning
Requests → HTTP requests

This large ecosystem is one of the major reasons Python is so popular.

9. Platform Independent

Python is a cross-platform programming language.

Python programs can generally run on different operating systems, including:

Windows
Linux
macOS

For example, a Python program written on Windows can usually be executed on Linux or macOS with little or no modification.

A simple representation is:

Python Program
      ↓
Python Interpreter
      ↓
Windows / Linux / macOS

However, certain operating-system-specific features may require modifications.

10. General-Purpose Programming Language

Python is a general-purpose programming language.

This means it is not limited to only one specific type of application.

Python can be used for:

Web Development
Automation
Data Analysis
Data Science
Artificial Intelligence
Machine Learning
Backend Development
Scripting
Game Development
Desktop Applications
Cybersecurity
Scientific Computing

Because of this flexibility, Python is useful in many different industries.

11. Portable

Python programs can often be moved from one operating system to another.

For example:

Windows
    ↓
Python Program
    ↓
Linux

In many cases, the same Python code can work on both systems.

This makes Python portable.

However, external dependencies and operating-system-specific features may sometimes require additional configuration.

12. Extensible

Python can be extended using code written in other programming languages such as:

C
C++
Rust

This can be useful when high performance is required.

For example, Python can use code written in C to perform certain operations more quickly.

This allows developers to combine:

Python
   +
High-Performance Languages

13. Embeddable

Python can be embedded inside applications written in other programming languages.

For example, Python can be integrated into applications written using languages such as C or C++.

This allows developers to use Python's flexibility inside larger software applications.

14. Automatic Memory Management

Python provides automatic memory management.

Developers generally do not need to manually allocate and release memory.

Python uses a mechanism called Garbage Collection to manage unused objects.

For example:

x = 10

When an object is no longer needed, Python can automatically clean up the memory associated with it.

This makes programming easier and reduces certain types of memory-management errors.

React useEffect Explained: Understanding Mounting, Updating, and Unmounting

Saravanan Lakshmanan — Fri, 24 Jul 2026 09:17:52 +0000

When learning React, two important concepts are the component lifecycle and the useEffect Hook.

A React component is not just created once and forgotten. It goes through different stages during its existence:

Mounting
Updating
Unmounting

The useEffect Hook helps us perform side effects during these stages. Examples of side effects include fetching data from an API, working with timers, adding event listeners, and interacting with external systems.

What is a React Component?

A React component is an independent and reusable part of a user interface. In modern React, components are commonly created using JavaScript functions.

For example:

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

When React uses this component, it renders the JSX returned by the function.

A component can have its own state, receive props, and respond to changes during its lifetime.

This is where the concept of the component lifecycle becomes important.

The Three Stages of a React Component

Every React component goes through three major stages:

Mounting → Updating → Unmounting

We can understand these stages using a simple real-life example.

Think of a component like a person:

Birth → Life and Changes → Departure

In React:

Component Created → Component Updated → Component Removed

1. Mounting

Mounting is the first stage of a component's lifecycle.

It happens when a component is created and added to the page for the first time.

For example:

function App() {
    return <h1>Hello React</h1>;
}

When React displays this component for the first time, the component is mounted.

The basic process is:

Component is created
        ↓
React renders the component
        ↓
The UI appears on the page

For function components, useEffect with an empty dependency array is commonly used when an effect should run after the initial render.

Example:

import { useEffect } from "react";

function App() {

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

    return <h1>Hello React</h1>;
}

export default App;

The empty dependency array is:

[]

This tells React that the effect should run after the initial render and should not run again because of later state or prop changes.

A common use case is fetching initial data:

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

The empty array is useful when the operation should happen only when the component initially appears.

2. Updating

After a component has been mounted, it may change.

A component can update when:

Its state changes
Its props change
Its parent component causes it to render again

For example:

import { useState } from "react";

function Counter() {

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

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

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

export default Counter;

Initially:

count = 0

When the button is clicked:

count: 0 → 1

Because the state changed, React renders the component again with the updated value.

The process is:

State or props change
        ↓
React renders the component again
        ↓
The UI is updated

This is called the updating stage.

Understanding useEffect

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

The basic syntax is:

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

The second argument is called the dependency array.

The dependency array controls when the effect should run.

There are three important patterns.

Pattern 1: useEffect Without a Dependency Array

Example:

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

When no dependency array is provided, the effect runs after every render.

Example:

function App() {

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

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

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

The sequence is:

Initial render
      ↓
useEffect runs

Click button
      ↓
State changes
      ↓
Component renders again
      ↓
useEffect runs again

So:

Every render → useEffect runs

This can sometimes cause unwanted repeated operations.

For example, if an effect changes state and the effect runs after every render, it can potentially create repeated renders.

Therefore, the dependency array is important for controlling when an effect should execute.

Pattern 2: useEffect With an Empty Dependency Array

Example:

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

The empty dependency array means that the effect does not depend on any state or prop value.

The effect runs after the initial render.

The sequence is:

Component mounts
      ↓
Initial render
      ↓
useEffect runs
      ↓
Later re-renders occur
      ↓
Effect does not run again because of those changes

Example:

function App() {

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

    useEffect(() => {
        console.log("This runs after the initial render");
    }, []);

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

When the button is clicked:

count changes
      ↓
Component re-renders
      ↓
useEffect does not run again

A common example is fetching initial data:

useEffect(() => {
    fetch("https://example.com/api/data");
}, []);

The effect is intended to run when the component initially appears.

Pattern 3: useEffect With Dependencies

Example:

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

Here, count is the dependency.

The effect runs:

After the initial render
Whenever count changes

Example:

function Counter() {

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

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

    return (
        <div>

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

            <button onClick={() => setCount2(count2 + 1)}>
                +2
            </button>

            <h2>Counter: {count}</h2>
            <h2>Counter 2: {count2}</h2>

        </div>
    );
}

Now consider what happens when each button is clicked.

Clicking the first button

count changes
      ↓
Component re-renders
      ↓
[count] has changed
      ↓
useEffect runs

Clicking the second button

count2 changes
      ↓
Component re-renders
      ↓
[count] has not changed
      ↓
useEffect does not run

This is a very important point:

The entire component can re-render even though a particular useEffect does not run.

The dependency array controls the execution of the effect, not whether the entire component renders.

A Simple Example to Understand the Difference

Consider:

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

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

When count changes:

count: 0 → 1

Component re-renders
        ↓
React checks [count]
        ↓
count changed
        ↓
useEffect runs

When count2 changes:

count2: 10 → 11

Component re-renders
        ↓
React checks [count]
        ↓
count did not change
        ↓
useEffect does not run

The component re-render and the effect execution are two different things.

This distinction is essential for understanding React.

3. Unmounting

Unmounting is the final stage of a component's lifecycle.

It happens when a component is removed from the page.

For example:

function App() {

    const [show, setShow] = useState(true);

    return (
        <div>

            {show && <Child />}

            <button onClick={() => setShow(false)}>
                Remove Component
            </button>

        </div>
    );
}

Initially:

show = true
      ↓
Child component is displayed

After clicking the button:

show = false
      ↓
Child component is removed
      ↓
Child component is unmounted

The lifecycle becomes:

Mount
  ↓
Update
  ↓
Unmount

useEffect Cleanup Function

Some effects create resources that should be stopped or removed when they are no longer needed.

Examples include:

Timers
Intervals
Event listeners
Subscriptions

The cleanup function is created by returning a function from useEffect.

Example:

useEffect(() => {

    const timer = setTimeout(() => {
        console.log("Timer completed");
    }, 1000);

    return () => {
        clearTimeout(timer);
    };

}, []);

The cleanup function is:

return () => {
    clearTimeout(timer);
};

When the component is removed, the cleanup code runs.

The process is:

Component mounts
      ↓
Timer starts
      ↓
Component is removed
      ↓
Cleanup function runs
      ↓
Timer is cleared

This prevents unnecessary operations from continuing after the component is gone.

Cleanup During Updates

Cleanup is not only used when a component is unmounted.

Suppose an effect depends on a value:

useEffect(() => {

    console.log("Effect started");

    return () => {
        console.log("Cleanup executed");
    };

}, [count]);

When count changes, React performs the following general sequence:

Previous effect cleanup
        ↓
Component updates
        ↓
New effect runs

So the lifecycle of an effect can look like:

Effect starts
      ↓
Dependency changes
      ↓
Previous effect cleanup
      ↓
New effect starts

This is particularly useful for subscriptions, timers, and event listeners.

Complete Component Lifecycle

The complete lifecycle can be represented like this:

                 MOUNTING
                    ↓
          Component is created
                    ↓
             Initial render
                    ↓
              useEffect runs
                    ↓
                 UPDATING
                    ↓
       State or props change
                    ↓
             Component renders
                    ↓
     Dependency value changed?
             ↙              ↘
           Yes               No
            ↓                 ↓
    Effect runs again     Effect does not run
                    ↓
                UNMOUNTING
                    ↓
       Component removed
                    ↓
            Cleanup runs

Ever wondered why React applications feel so fast? The answer lies in one of React's smartest concepts: the Virtual DOM.

Saravanan Lakshmanan — Thu, 16 Jul 2026 14:53:10 +0000

Real DOM vs Virtual DOM in React

What is the DOM?

DOM (Document Object Model) is a programming interface for HTML and XML documents. It represents the structure of a webpage as a tree of objects, allowing JavaScript to access, modify, add, or remove elements dynamically.

When a browser loads an HTML document, it creates the DOM in memory.

Example:

<body>
  <h1>Hello</h1>
  <p>Welcome</p>
</body>

DOM Tree:

Document
   │
  html
   │
  body
  ├── h1
  │     └── Hello
  └── p
        └── Welcome

JavaScript can manipulate these elements using methods like:

document.getElementById()
document.querySelector()
document.createElement()
document.removeChild()

What is Real DOM?

The Real DOM is the actual DOM created and maintained by the browser. Every HTML element becomes an object in memory.

Whenever JavaScript changes an element, the browser updates the Real DOM and may need to recalculate layout, repaint, and render the page again.

Example

<h1 id="title">Hello</h1>

document.getElementById("title").innerText = "Welcome";

The browser immediately updates the actual <h1> element on the webpage.

Problem with Real DOM

Imagine a webpage with 5,000 elements.

If only one button's text changes, the browser still needs to determine what changed, update the DOM, and potentially recalculate layout and repaint affected parts of the page.

Frequent DOM updates can become expensive because DOM operations are generally slower than working with plain JavaScript objects.

What is Virtual DOM?

The Virtual DOM is a lightweight JavaScript representation (copy) of the Real DOM.

It is not displayed on the screen. Instead, React uses it internally to determine what has changed before updating the browser's Real DOM.

When data changes:

React creates a new Virtual DOM.
React compares it with the previous Virtual DOM.
It identifies only the changed elements.
It updates only those elements in the Real DOM.

This comparison process is called Diffing, and the update strategy is known as Reconciliation.

Example

Initial UI

<h1>Hello</h1>
<p>React</p>
<button>Click</button>

Virtual DOM Copy

App
├── h1 → Hello
├── p → React
└── button → Click

After clicking a button:

<h1>Welcome</h1>
<p>React</p>
<button>Click</button>

React compares the old and new Virtual DOM.

It finds that only the <h1> text changed.

Instead of rebuilding the whole page, React updates only:

<h1>Welcome</h1>

The <p> and <button> remain untouched.

How React Updates the UI

State Changes
      │
      ▼
Create New Virtual DOM
      │
      ▼
Compare with Old Virtual DOM
      │
      ▼
Find Differences (Diffing)
      │
      ▼
Update Only Changed Elements
      │
      ▼
Real DOM Updated

Real DOM vs Virtual DOM

Feature	Real DOM	Virtual DOM
Meaning	Actual DOM maintained by the browser	Lightweight JavaScript copy of the Real DOM
Location	Browser memory	JavaScript memory
Update Speed	Comparatively slower for frequent updates	Faster because React computes changes in memory first
Update Method	Updates the actual DOM directly	Compares two virtual trees, then updates only necessary parts of the Real DOM
Rendering	Browser handles rendering directly	React optimizes updates before the browser renders
Performance	Can become slower with many repeated updates	Improves efficiency by minimizing direct DOM operations
Used By	Vanilla JavaScript	React

Real-Life Analogy

Imagine you are editing a 500-page book.

Real DOM

You erase and rewrite directly in the original printed book every time you find a mistake.

Even a small correction means working on the actual book.

Virtual DOM

You first make corrections on a photocopy.

Then you compare the photocopy with the original.

Finally, you update only the pages that actually changed.

This saves time and avoids unnecessary work.

Why React Uses Virtual DOM

Reduces unnecessary DOM updates.
Improves application performance for frequent UI changes.
Makes user interfaces more responsive.
Updates only the required elements instead of the entire page.
Provides a declarative way to build interactive interfaces.

React Made Simple: Components, Hooks (useState), and the Virtual DOM Explained

Saravanan Lakshmanan — Wed, 15 Jul 2026 15:19:58 +0000

If you're starting your React journey, understanding Components, Hooks (useState), and the Virtual DOM will make learning every advanced topic much easier.

In this blog, we'll explore these fundamental concepts with examples.

1. What is a Component?

A component is the fundamental building block of a React application. It is an independent, reusable piece of UI that contains its own structure, logic, and behavior.

Instead of writing the same HTML repeatedly, React allows developers to create components once and reuse them wherever needed.

For example, a website may contain:

Header
Navigation Bar
Sidebar
Product Card
Footer

Each of these can be created as separate components and reused throughout the application.

Functional Component Example

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

export default Header;

The component can then be rendered using:

<Header />

React treats the component as a custom HTML element and renders the UI returned by the function.

Advantages of Components

Improves code reusability.
Makes applications easier to maintain.
Separates different parts of the UI into manageable units.
Encourages modular development.
Simplifies debugging and testing.

2. Types of Components

React mainly provides two types of components.

Class Component

Before React 16.8, class components were commonly used because they could manage state and lifecycle methods.

Example:

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

Characteristics:

Uses JavaScript classes.
Supports state.
Supports lifecycle methods.
More verbose and complex.

Functional Component

Functional components are regular JavaScript functions that return JSX.

Example:

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

Characteristics:

Easy to understand.
Less code.
Better readability.
Supports Hooks.
Preferred in modern React applications.

Today, most React applications are built using functional components because they are simpler and more maintainable.

Difference Between Class and Functional Components

Class Component	Functional Component
Uses JavaScript classes	Uses JavaScript functions
More code	Less code
Uses `this` keyword	Does not use `this`
State managed using `this.state`	State managed using Hooks
Uses lifecycle methods	Uses Hooks such as `useEffect`
Less common in new projects	Preferred in modern React

3. What are Hooks?

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

They were introduced in React 16.8.

Before Hooks, developers often used class components whenever they needed state or lifecycle methods. Hooks removed this limitation by enabling functional components to access these features.

Examples of Hooks include:

useState
useEffect
useContext
useRef
useReducer

4. What is `useState`?

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

State represents data that can change over time. Whenever state changes, React automatically re-renders the component and updates the user interface.

Syntax:

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

Explanation:

count stores the current state value.
setCount updates the state.
useState is the Hook.
0 is the initial value.

Counter Example

import { useState } from "react";

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

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

  return (
    <>
      <h2>Count: {count}</h2>
      <button onClick={increment}>Increment</button>
    </>
  );
}

export default Counter;

How it works:

Initially, count is 0.
Clicking the button calls increment().
setCount(count + 1) updates the state.
React re-renders the component.
The updated value is displayed automatically.

Why use `useState`?

useState is commonly used for:

Counter applications
Like buttons
Show/Hide password functionality
Theme toggles
Form inputs
Shopping cart counters
Dynamic UI updates

5. What is the Virtual DOM?

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

Instead of updating the browser's DOM directly after every change, React first updates the Virtual DOM.

React then compares the updated Virtual DOM with the previous version using a process called Diffing.

After identifying the changes, React updates only the necessary parts of the Real DOM.

This process improves rendering performance because manipulating the Real DOM is comparatively expensive.

How the Virtual DOM Works

The component renders for the first time.
React creates a Virtual DOM tree.
When state changes, React creates a new Virtual DOM.
React compares the old and new Virtual DOM trees.
Only the changed elements are updated in the Real DOM.
The browser reflects the changes efficiently.

Example

Suppose a page contains:

Header
Sidebar
Footer
Counter

If only the counter value changes from 5 to 6, React updates only the counter element instead of rebuilding the entire page.

This selective update improves application performance.

Advantages of the Virtual DOM

Faster UI updates.
Efficient DOM manipulation.
Better application performance.
Reduces unnecessary rendering.
Improves user experience.
Simplifies UI updates for developers.

Conclusion

Components, Hooks, and the Virtual DOM are among the most important concepts in React.

Components encourage reusable and modular UI development. Functional components combined with Hooks such as useState make React applications simpler and easier to maintain. The Virtual DOM optimizes rendering by updating only the parts of the interface that have changed, resulting in better performance and a smoother user experience.

Understanding these concepts forms a strong foundation for learning more advanced React topics such as Props, useEffect, Routing, Context API, and state management libraries.

The Three React Terms That Confuse Every Beginner (Explained Clearly)

Saravanan Lakshmanan — Tue, 14 Jul 2026 14:32:16 +0000

Understanding Vite, Components, and Node Package Manager (NPM)

When developers begin learning React, they frequently encounter three terms: Vite, Component, and Node Package Manager (NPM). Although these concepts are closely related, each serves a different purpose in the development workflow. Understanding them individually helps build a strong foundation before creating React applications.

What is Vite?

Vite (pronounced "veet", derived from the French word for "fast") is a modern frontend build tool that helps developers create, run, and build web applications efficiently. It was created to solve the slow startup and rebuild times experienced with older frontend tooling.

Vite is not a JavaScript library or a framework. Instead, it is a development tool that prepares your project, starts a development server, bundles your code for production, and provides a smooth development experience.

Why was Vite introduced?

As frontend applications became larger, traditional bundlers had to process the entire application before starting the development server. This resulted in longer startup times and slower updates whenever developers modified their code.

Vite improves this process by leveraging modern browser support for native ES Modules. Instead of bundling the entire application during development, Vite serves source files directly to the browser and only processes the files that are requested.

This approach provides:

Faster project startup
Instant page refreshes
Faster Hot Module Replacement (HMR)
Optimized production builds

Creating a React Project with Vite

To create a new React application using Vite:

npm create vite@latest

You will be prompted to choose:

Project name
Framework (React)
Language (JavaScript or TypeScript)

After the project is created:

cd my-project
npm install
npm run dev

The development server starts, and your React application becomes available in the browser.

Typical Project Structure

my-project/
│
├── node_modules/
├── public/
├── src/
│   ├── App.jsx
│   ├── main.jsx
│
├── package.json
├── package-lock.json
├── vite.config.js
└── index.html

Each folder has a specific responsibility:

src/ – Contains the application's source code.
public/ – Stores static assets.
node_modules/ – Contains installed packages.
package.json – Stores project information and dependencies.
vite.config.js – Configuration file for Vite.
index.html – Entry point of the application.

Key Features of Vite

Extremely fast development server
Native ES Module support
Hot Module Replacement (HMR)
Optimized production builds
Minimal configuration
Supports React, Vue, Svelte, Solid, and other frameworks

What is a Component?

A Component is one of the core concepts of React.

A component is an independent, reusable piece of the user interface. Instead of writing an entire webpage inside one large file, React encourages developers to divide the interface into smaller pieces called components.

Each component is responsible for rendering a specific part of the application.

Examples include:

Header
Navigation Bar
Footer
Product Card
Login Form
Search Box
Sidebar

Every webpage is essentially a collection of multiple components working together.

Why Components?

Imagine developing an e-commerce website.

Without components, every product card would need to be written repeatedly.

With components, the product card is written once and reused wherever needed.

This approach provides:

Code reusability
Better readability
Easier maintenance
Independent development
Improved scalability

Example Component

function Header() {
    return (
        <h1>Welcome to My Website</h1>
    );
}

This is a React component because it returns JSX, which React converts into user interface elements.

Using a Component

function App() {
    return (
        <>
            <Header />
        </>
    );
}

When React encounters <Header />, it executes the Header function and displays the returned UI.

Why Do Component Names Start with a Capital Letter?

React follows a naming convention where custom components begin with an uppercase letter.

Correct:

function Header() {}

Incorrect:

function header() {}

This distinction exists because React interprets lowercase tags as standard HTML elements.

For example:

<div></div>

React recognizes this as an HTML <div> element.

However:

<Header />

React recognizes this as a custom React component.

Using PascalCase allows React to differentiate custom components from built-in HTML tags.

Components Are JavaScript Functions

Most React components are simply JavaScript functions.

Example:

function Greeting() {
    return <h1>Hello</h1>;
}

Although a component is technically a JavaScript function, React refers to it as a Component because its purpose is to produce a portion of the user interface.

Types of Components

Modern React primarily uses Function Components.

function Welcome() {
    return <h2>Welcome</h2>;
}

Earlier versions of React also supported Class Components.

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

Today, function components are the recommended approach because they are simpler and support Hooks.

What is Node Package Manager (NPM)?

NPM (Node Package Manager) is the default package manager for Node.js.

It enables developers to install, update, remove, and manage reusable JavaScript packages.

A package is a collection of reusable code created by developers to solve common programming problems.

Examples include:

React
Axios
Express
Lodash
Bootstrap

Instead of writing every feature from scratch, developers install packages maintained by the community.

Why Do We Need NPM?

Modern web development depends heavily on third-party libraries.

Without NPM, developers would need to manually download libraries, manage versions, and copy files into every project.

NPM automates this entire process.

It can:

Install packages
Update packages
Remove packages
Manage project dependencies
Execute project scripts

Installing a Package

npm install axios

npm i axios

NPM downloads Axios and stores it inside the node_modules directory.

Installing React

npm install react react-dom

This downloads React and its required packages into your project.

package.json

Every NPM project contains a package.json file.

It stores important information such as:

Project name
Version
Dependencies
Scripts
Project metadata

Example:

{
  "name": "my-project",
  "version": "1.0.0",
  "dependencies": {
    "react": "^19.0.0"
  }
}

Whenever a package is installed, NPM automatically updates this file.

node_modules

After running:

npm install

NPM creates a directory named:

node_modules/

This folder contains every installed package along with its required dependencies.

Because this directory can become very large, developers typically exclude it from version control using .gitignore.

Common NPM Commands

Create a Vite project:

npm create vite@latest

Install dependencies:

npm install

Install a package:

npm install package-name

Remove a package:

npm uninstall package-name

Start the development server:

npm run dev

Build the project:

npm run build

Relationship Between Vite, Components, and NPM

Although these technologies work together, they have distinct responsibilities.

Vite creates and serves the project during development and builds it for production.
NPM installs and manages the packages required by the project.
Components are the reusable building blocks used to construct the application's user interface.

A typical React development workflow is:

Create a project using Vite.
Install project dependencies with NPM.
Build the application's interface using React components.
Run the project using the Vite development server.
Build the optimized production version when development is complete.

Understanding the role of each tool provides a strong foundation for modern React development and makes it easier to learn advanced concepts such as Hooks, Routing, State Management, and API integration.

React Explained: JSX, Components, Virtual DOM & Diffing Algorithm

Saravanan Lakshmanan — Mon, 13 Jul 2026 11:40:38 +0000

Introduction

React is an open-source JavaScript library used to build fast, interactive, and reusable user interfaces (UI). It is primarily used for developing Single Page Applications (SPAs), where only the necessary parts of a webpage are updated instead of reloading the entire page.

React follows a component-based architecture, making applications easier to build, maintain, and scale.

History of React

React was created by Facebook (now Meta) in 2011 to solve the challenges of building complex and dynamic user interfaces for its own applications. After successfully using it internally, Facebook released React as an open-source JavaScript library in 2013, allowing developers worldwide to use and contribute to its development.

Open Source

React is completely open source, meaning its source code is publicly available for anyone to use, study, modify, and improve.

Making React open source helped:

Increase adoption across the industry.
Build a large developer community.
Receive contributions from developers worldwide.
Improve the library continuously through community support.

Today, React is one of the most popular frontend libraries in the world.

Companies Using React

React is widely adopted by many leading technology companies, including:

Meta (Facebook and Instagram)
Netflix
Airbnb
Uber
Dropbox
WhatsApp Web
Discord
Shopify
Reddit

Why React?

React simplifies frontend development by providing:

Reusable components
Faster UI updates
Better code organization
Easier maintenance
Improved performance
Strong community support
Rich ecosystem of libraries and tools

These advantages make React suitable for both small and large-scale applications.

Component-Based Architecture

React applications are built using components.

A component is an independent, reusable piece of the user interface that performs a specific task.

For example, an e-commerce website can be divided into:

Navbar
Search Bar
Banner
Product Card
Cart
Footer

Each component can be developed, tested, and reused independently, making applications more modular and easier to maintain.

JSX

JSX (JavaScript XML) is a syntax extension that allows developers to write HTML-like code inside JavaScript.

Although JSX looks like HTML, it is converted into JavaScript before being executed by the browser.

JSX makes React code easier to read and write while allowing JavaScript and UI elements to work together naturally.

Single Page Application (SPA)

React is commonly used to build Single Page Applications.

In a traditional website, navigating between pages reloads the entire webpage.

In a React application, only the required content is updated while the rest of the page remains unchanged.

This provides:

Faster navigation
Better user experience
Reduced page reloads
Improved application performance

Real DOM

The Real DOM is the actual Document Object Model created by the browser from the HTML document.

Whenever JavaScript directly modifies the DOM, the browser updates the webpage accordingly.

For large applications with frequent UI updates, repeatedly modifying the Real DOM can become less efficient.

Virtual DOM

The Virtual DOM is a lightweight copy of the Real DOM maintained by React in memory.

Whenever application data changes, React creates a new Virtual DOM and compares it with the previous Virtual DOM.

Instead of updating the entire webpage, React identifies only the parts that have changed and updates those specific elements in the Real DOM.

This approach improves efficiency and provides a smoother user experience.

Diffing Algorithm

The Diffing Algorithm is React's comparison process.

It compares the previous Virtual DOM with the newly created Virtual DOM to identify differences between them.

After finding the changes, React updates only the affected elements in the Real DOM rather than rebuilding the entire page.

This selective updating helps improve rendering performance.

React UI Updating Process

The UI update process in React follows these steps:

A user performs an action.
The application state changes.
React creates a new Virtual DOM.
The Diffing Algorithm compares the old and new Virtual DOM.
React identifies the changed elements.
Only those elements are updated in the Real DOM.
The browser displays the updated user interface.

Advantages of React

Simple and reusable components
Efficient UI rendering
Better application performance
Cleaner and maintainable code
Easy integration with APIs
Large open-source community
Excellent ecosystem and tooling
Suitable for modern web applications

Conclusion

React has become one of the most widely used JavaScript libraries for frontend development due to its simplicity, component-based architecture, Virtual DOM, and efficient rendering process.

Understanding concepts such as Components, JSX, Virtual DOM, Diffing Algorithm, and Single Page Applications provides a strong foundation for building modern and scalable web applications.

References:
https://www.geeksforgeeks.org/reactjs/reactjs-introduction/
https://www.w3schools.com/react/react_intro.asp

My Experience at Code on JVM Chennai: From DSA in Production to Building AI Products

Saravanan Lakshmanan — Sun, 12 Jul 2026 15:05:42 +0000

Recently, I attended the Code on JVM Chennai meetup, and it was an incredible learning experience. As someone transitioning into software development and currently learning Full Stack Java, events like these help bridge the gap between classroom learning and real-world software engineering.

The meetup featured three insightful sessions, each offering a unique perspective on modern software development.

Session 1: DSA in Production

Speaker: Hareesh Rajendran (Founder & CEO, Hayan Tech)

This session completely changed the way I think about Data Structures and Algorithms (DSA).

As beginners, we often associate DSA with coding interviews and competitive programming. But this session demonstrated how many advanced data structures quietly power the applications we use every day.

1. Bloom Filter

A Bloom Filter is a memory-efficient probabilistic data structure used to quickly determine whether an element might exist in a dataset.

Instead of storing every value, it stores compact information, making lookups extremely fast while consuming very little RAM.

Some real-world applications include:

Instagram username availability checks
Apache Cassandra
Google Chrome
Feed readers

2. HNSW Graph (Hierarchical Navigable Small World)

One of the most important data structures behind modern AI applications.

It enables extremely fast similarity searches across millions of vectors, making AI-powered search practical.

Common applications include:

Vector Databases
AI Search
Recommendation Systems
Retrieval-Augmented Generation (RAG)

One interesting takeaway was seeing how AI products rely on efficient data structures—not just machine learning models.

3. Skip List

A Skip List is an alternative to balanced trees that allows fast searching, insertion, and deletion.

Real-world usage:

Redis Sorted Sets
Rate Limiting
RocksDB Storage Engine

4. LSM Tree (Log-Structured Merge Tree)

An LSM Tree is designed for systems that perform a huge number of write operations.

It is widely used in databases and storage systems because it optimizes write performance.

Applications include:

Storage Engines
Databases
Live Streaming Systems

5. Consistent Hashing

Consistent Hashing distributes requests across multiple servers while minimizing data movement whenever servers are added or removed.

It is heavily used in distributed systems such as:

Akamai CDN
Netflix
Amazon DynamoDB
Discord Routing

The speaker also recommended exploring the Netflix Engineering Blog to understand how these concepts are used in production.

6. Hexagonal Grid (H3)

A geospatial indexing system that divides maps into hexagonal cells for efficient location-based processing.

Applications include:

Ola
Uber
Swiggy
Zomato

The recommendation to read the H3 Engineering Blogs was another valuable takeaway.

7. HyperLogLog

HyperLogLog is a probabilistic algorithm used to estimate the number of unique elements while using very little memory.

Instead of counting every item exactly, it provides an approximate count with impressive accuracy.

Examples include:

Reddit
Analytics Dashboards
Google BigQuery

My Biggest Takeaway

This session completely changed my perspective on DSA.

It's not just about solving interview problems—it's about building systems capable of serving millions of users efficiently.

Session 2: Uncovering Ideas Worth Building in the AI Era

Speaker: Agnel John (Founder & CEO, Error Makes Clever)

This session shifted the focus from technology to entrepreneurship.

One of the strongest messages was that building a product alone is never enough. The real challenge is creating something that solves a genuine problem and that people are willing to pay for.

Some important takeaways were:

Build your idea instead of waiting for the "perfect time."
Learn how your product can generate revenue.
A product by itself is never your competitive advantage—execution, customer understanding, and continuous improvement matter much more.
Before building something big, find someone within your own circle who is willing to pay for your solution.
Once you've validated your idea, commit fully and keep improving it.
Getting your first paying customer is a significant milestone because it proves that you're solving a real problem.

As someone still learning development, this session reminded me that writing code is only one part of building successful software. Understanding users and solving meaningful problems are equally important.

Session 3: Streaming Large File Downloads in Java

Speaker: Kalaivani Mohan (Software Engineer, IBM)

The final session focused on an important backend engineering concept—streaming large file downloads.

A common mistake is trying to load an entire large file into memory before sending it to the user. This can consume excessive RAM and affect application performance.

Instead, Java applications use streaming, where files are sent in smaller chunks.

This approach offers several benefits:

Lower memory consumption
Better application performance
Faster response times
Improved scalability

Streaming is commonly used while serving:

Videos
PDF documents
Reports
Cloud storage downloads
Enterprise applications

Although the concept sounds simple, it's an excellent example of how small implementation decisions can make applications significantly more efficient.

Final Thoughts

Each session taught me something different.

The first session showed how advanced data structures power large-scale systems used by millions of users.

The second session reminded me that successful products are built around real customer problems—not just great technology.

The third session demonstrated how backend engineering techniques improve performance and scalability.

As someone currently learning Full Stack Development, attending this meetup broadened my understanding of software engineering beyond coding tutorials and classroom lessons.

A heartfelt thank you to the organizers, speakers, and everyone involved in making Code on JVM Chennai such an informative and inspiring event.

I'm looking forward to attending more tech meetups, learning from experienced professionals, and continuing my journey as a software developer.

Every meetup is another step forward in the learning journey.

Callback, Callback Hell & Promise in JavaScript

Saravanan Lakshmanan — Thu, 09 Jul 2026 17:31:57 +0000

What is a Callback?

A callback is simply a function passed as an argument to another function so that it can be executed later.

Example:

function greet(name) {
    console.log("Hello " + name);
}

function processUser(callback) {
    callback("Saravanan");
}

processUser(greet);

Output

Hello Saravanan

Here, greet is the callback function.

Why do we need callbacks?

Some tasks take time to complete.

For example:

Downloading data from a server
Reading a file
Waiting for a timer
Fetching API data

JavaScript doesn't stop the entire program while waiting.

Instead, it says:

"Continue doing other work. When this task finishes, I'll call the callback."

Example:

console.log("Start");

setTimeout(() => {
    console.log("Task Completed");
}, 2000);

console.log("End");

Output

Start
End
Task Completed

Notice that JavaScript didn't wait for 2 seconds before printing End.

The Problem: Callback Hell

Imagine we're building software using the SDLC process.

The order should be:

Planning
↓
Design
↓
Development
↓
Testing
↓
Deployment

Using callbacks:

function planning(callback) {
    setTimeout(() => {
        console.log("Planning Completed");
        callback();
    }, 1000);
}

function design(callback) {
    setTimeout(() => {
        console.log("Design Completed");
        callback();
    }, 1000);
}

function development(callback) {
    setTimeout(() => {
        console.log("Development Completed");
        callback();
    }, 1000);
}

function testing(callback) {
    setTimeout(() => {
        console.log("Testing Completed");
        callback();
    }, 1000);
}

function deploy() {
    console.log("Deployment Completed");
}

planning(() => {
    design(() => {
        development(() => {
            testing(() => {
                deploy();
            });
        });
    });
});

Although the program works, there's a problem.

The code keeps moving further to the right.

planning(
    design(
        development(
            testing(
                deploy()
            )
        )
    )
)

This deeply nested structure is called Callback Hell.

Problems with Callback Hell:

Difficult to read
Difficult to debug
Difficult to maintain
Becomes messy as the project grows

Solution: Promise

A Promise represents the result of an asynchronous operation.

It can be in one of three states:

Pending
Fulfilled (Resolved)
Rejected

Creating a Promise:

const planning = () => {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log("Planning Completed");
            resolve();
        }, 1000);
    });
};

The Promise either calls:

resolve();

when successful,

reject();

when something goes wrong.

Promise Chaining

Now we can execute tasks one after another without nesting.

planning()
    .then(() => design())
    .then(() => development())
    .then(() => testing())
    .then(() => deploy())
    .catch(() => console.log("Something went wrong."));

This code is much easier to read.

It clearly says:

Planning
→ Design
→ Development
→ Testing
→ Deploy

Even Cleaner: async/await

JavaScript introduced async and await to make Promise-based code look more like normal synchronous code.

async function SDLC() {
    try {
        await planning();
        await design();
        await development();
        await testing();
        await deploy();
    } catch (error) {
        console.log(error);
    }
}

SDLC();

This is usually easier to understand because the steps appear in the same order they execute.

Callback Hell vs Promise

Callback Hell	Promise
Deeply nested code	Flat and readable code
Hard to maintain	Easy to maintain
Difficult error handling	Centralized error handling using `.catch()`
Less readable as the project grows	Easier to understand and extend

References:
https://www.w3schools.com/js/js_promise.asp
https://www.geeksforgeeks.org/javascript/javascript-promise/

JavaScript Closures

Saravanan Lakshmanan — Wed, 08 Jul 2026 09:54:26 +0000

Closure

A closure is created when an inner function remembers and can access the variables of its outer function even after the outer function has finished executing.

In simple words:

A closure allows a function to "remember" the environment in which it was created.

This is one of JavaScript's most powerful features and is commonly used for data privacy, maintaining state, callbacks, and event handling.

Why Do We Need Closures?

Normally, local variables exist only while a function is running.

Once the function finishes execution, its local variables are destroyed.

But sometimes we need those variables even after the function has finished.

Closures solve this problem by allowing the inner function to remember those variables.

Basic Example

function outer() {
    let message = "Hello";

    function inner() {
        console.log(message);
    }

    return inner;
}

const greet = outer();

greet();

Output

Hello

Step-by-Step Execution

Step 1

outer() is called.

let message = "Hello";

A local variable is created.

Step 2

Inside outer(), another function is created.

function inner() {
    console.log(message);
}

The inner() function can access message because it is inside outer().

Step 3

Instead of calling inner(), we return it.

return inner;

Step 4

The returned function is stored.

const greet = outer();

Although outer() has finished execution, JavaScript does not destroy the variable message.

Why?

Because the returned function still needs it.

Step 5

Now we call:

greet();

Output:

Hello

The inner function still remembers the variable.

This memory is called a closure.

Visual Representation

outer()
│
├── message = "Hello"
│
└── return inner()
         │
         ▼
    greet()
         │
         ▼
console.log(message)
         │
         ▼
      "Hello"

Even though outer() has finished, message is still available because inner() remembers it.

Example 2: Counter

function counter() {

    let count = 0;

    return function () {
        count++;
        console.log(count);
    };

}

const increment = counter();

increment();
increment();
increment();

Output

1
2
3

How It Works

When counter() runs,

count = 0

The returned function remembers count.

Each time the function is called,

count++;

The value increases instead of resetting.

Without a closure, count would become 0 every time.

Example 3: Private Variable

function bankAccount() {

    let balance = 5000;

    return function () {
        console.log(balance);
    };

}

const checkBalance = bankAccount();

checkBalance();

Output

The variable balance cannot be accessed directly.

console.log(balance);

Output

ReferenceError

Only the returned function can access it.

This provides data privacy.

Closure with Parameters

function multiply(x) {

    return function(y) {
        return x * y;
    };

}

const double = multiply(2);

console.log(double(5));

Output

Here,

x = 2

is remembered by the returned function.

Later,

2 × 5 = 10

References:
https://www.geeksforgeeks.org/javascript/closure-in-javascript/
https://www.w3schools.com/js/js_function_closures.asp

JavaScript DOM Basics: Selecting, Accessing, Adding & Deleting Elements

Saravanan Lakshmanan — Fri, 03 Jul 2026 10:26:50 +0000

1️⃣ Selecting an Element

Selecting means finding an HTML element so JavaScript can work with it.

HTML

<h1 id="title">Welcome</h1>

<p class="text">Hello</p>

<button>Click Me</button>

JavaScript

const heading = document.getElementById("title");

Now JavaScript knows which element you want to work with.

Common Selection Methods

// By ID
document.getElementById("title");

// By Class
document.getElementsByClassName("text");

// By Tag
document.getElementsByTagName("button");

// First matching element
document.querySelector(".text");

// All matching elements
document.querySelectorAll(".text");

💡 Real-life analogy:

Imagine a library with thousands of books.

If someone asks you to bring the JavaScript book, the first thing you do is find it.

That process is called Selecting.

2️⃣ Accessing an Element

Once you've selected an element, you can access its information.

HTML

<h1 id="title">Welcome</h1>

JavaScript

const heading = document.getElementById("title");

console.log(heading.innerText);

Output

Welcome

You can also access other properties:

heading.id;

heading.className;

heading.style.color;

heading.tagName;

Think of it this way

Selecting ➜ Finds the element

Accessing ➜ Reads information from the element

💡 Real-life analogy:

You search for your friend's contact (Selecting).

Then you check their phone number or email (Accessing).

3️⃣ Adding an Element

Adding means creating a new HTML element and inserting it into the webpage.

Step 1: Create an element

const para = document.createElement("p");

This creates:

<p></p>

But it's not visible yet.

Step 2: Add content

para.innerText = "Hello Everyone";

Now it becomes

<p>Hello Everyone</p>

Still not visible.

Step 3: Add it to the webpage

document.body.appendChild(para);

Now your page becomes

<body>

<h1>My Website</h1>

<p>Hello Everyone</p>

</body>

The paragraph now appears on the webpage.

💡 Real-life analogy:

Buying a new chair doesn't automatically place it in your room.

You first buy it (create), then bring it into your room (append).

4️⃣ Deleting an Element

Deleting means removing an element from the webpage.

HTML

<p id="msg">Hello</p>

JavaScript

const para = document.getElementById("msg");

para.remove();

The paragraph disappears from the page.

Another Example

<ul>
    <li>Apple</li>
    <li id="banana">Banana</li>
    <li>Mango</li>
</ul>

document.getElementById("banana").remove();

Result

<ul>
    <li>Apple</li>
    <li>Mango</li>
</ul>

💡 Real-life analogy:

Your room has a chair, table, and fan.

If you remove the chair, the room still exists—but the chair is gone.

That's exactly what .remove() does.

Complete Flow

HTML

<body>

<h1 id="title">Welcome</h1>

</body>

Step 1 — Select

const heading = document.getElementById("title");

Step 2 — Access

console.log(heading.innerText);

Output

Welcome

Step 3 — Add

const p = document.createElement("p");

p.innerText = "Learning DOM";

document.body.appendChild(p);

Now the page becomes

<h1>Welcome</h1>

<p>Learning DOM</p>

Step 4 — Delete

p.remove();

Back to

<h1>Welcome</h1>

Quick Summary

Concept	Meaning	Example
Selecting	Find an HTML element	`document.getElementById("title")`
Accessing	Read information from the selected element	`heading.innerText`
Adding	Create and insert a new element	`createElement()` + `appendChild()`
Deleting	Remove an element from the webpage	`element.remove()`

References:
https://www.w3schools.com/jsreF/met_element_remove.asp
https://developer.mozilla.org/en-US/docs/Web/API/Element/remove
https://www.geeksforgeeks.org/javascript/how-to-remove-an-html-element-using-javascript/

JavaScript DOM Mini Projects

Saravanan Lakshmanan — Wed, 01 Jul 2026 17:24:52 +0000

DOM Mini Project #1 – Bulb ON/OFF Toggle

📝 Project Overview

This beginner-friendly DOM project simulates a simple Bulb ON/OFF Toggle using JavaScript. Clicking the button switches the bulb image between ON and OFF states while updating the button text accordingly. This project helped me understand DOM manipulation, event handling, conditional statements, and dynamically updating HTML elements.

Source Code

<body>
    <img id = "bulb" src = "https://www.w3schools.com/js/pic_bulboff.gif">
    <button id = "btn" onclick="bulbToggle()">ON</button>

    <script>
        function bulbToggle(){
            if(document.getElementById("btn").innerText ==="ON"){
            document.getElementById("bulb").src = "https://www.w3schools.com/js/pic_bulbon.gif";
            document.getElementById("btn").innerText = "OFF";

            }else{
            document.getElementById("bulb").src = "https://www.w3schools.com/js/pic_bulboff.gif";
            document.getElementById("btn").innerText = "ON";
            }
        }
    </script>
</body>

Output

GitLab Pages:
https://front-end-3d9f55.gitlab.io/javascript/js-mini_projects.html

DOM Mini Project #2 – Counter App

📝 Project Overview

This Counter App is a beginner-friendly JavaScript project that allows users to increment, decrement, and reset a counter. It helped me practice variables, functions, DOM manipulation, conditional statements, and keeping the UI synchronized with application state.

Source Code

<body>
    <h2>Count : <span id="count"></span></h2>
    <button id="incrementBtn" onclick="increment()">+</button>
    <button id="decrementBtn" onclick="decrement()">-</button>
    <button id="resetBtn" onclick="reset()">reset</button>
    <h1>Counter App</h1>

    <script>
        let count = 0;
        let countElement = document.getElementById("count");
        countElement.innerText = count;

        function updateCount() {
            countElement.innerText = count;
        }

        function increment() {
            count++;
            updateCount();
        }

        function decrement() {
            if (count > 0) {
                count--;
                updateCount();
            }
        }

        function reset() {
            count = 0;
            updateCount();
        }
    </script>
</body>

Output:

GitLab Pages:
https://front-end-3d9f55.gitlab.io/javascript/counterapp.html

DOM Mini Project #3 – Live Character Counter

📝 Project Overview

This Live Character Counter updates the character count instantly as the user types into a textarea. It helped me understand real-time event handling, DOM updates, and working with string properties in JavaScript.

Source Code:

<body>
    <h1>Live Character Counter</h1>

    <textarea id="text" oninput="textArea()"></textarea>

    <p>Characters : <span id="counter"></span></p>

    <script>
        let counterElement = document.getElementById("counter");
        let textElement = document.getElementById("text");

        counterElement.innerText = textElement.value.length;

        function textArea() {
            counterElement.innerText = textElement.value.length;
        }
    </script>
</body>

Output:

GitLab Pages:
https://front-end-3d9f55.gitlab.io/javascript/liveCharCount.html

DEV Community: Saravanan Lakshmanan

Stop Prop Drilling: Learn React useContext with Easy Examples

React useContext Hook Explained with Simple Examples

What is useContext?

Why do we need useContext?

Real-Time Example

Another Simple Example

Syntax

Step 1: Create a Context

Step 2: Provide the Data

Step 3: Consume the Data

Complete Example

App.jsx

Child.jsx

GrandChild.jsx

Output

How useContext Works

Python Is More Than Just print("Hello World"): Understanding the Fundamentals

What is Python?

Understanding Python Version Numbers

Major Version

Minor Version

Maintenance or Patch Version

Understanding Alpha, Beta, RC, and Development Versions

Alpha (a)

Beta (b)

Release Candidate (rc)

Final Release

Development Version (dev)

What is CPython?

What is Jython?

What is IronPython?

Important Features of Python

1. Simple and Easy to Learn

2. Open Source

3. Object-Oriented Programming

4. High-Level Programming Language

Low-Level Language

High-Level Language

5. Dynamically Typed Language

6. Interpreted Language

7. Extensive Standard Library

8. Large Ecosystem of Third-Party Libraries

9. Platform Independent

10. General-Purpose Programming Language

11. Portable

12. Extensible

13. Embeddable

14. Automatic Memory Management

React useEffect Explained: Understanding Mounting, Updating, and Unmounting

What is a React Component?

The Three Stages of a React Component

1. Mounting

2. Updating

Understanding useEffect

Pattern 1: useEffect Without a Dependency Array

Pattern 2: useEffect With an Empty Dependency Array

Pattern 3: useEffect With Dependencies

Clicking the first button

Clicking the second button

A Simple Example to Understand the Difference

3. Unmounting

useEffect Cleanup Function

Cleanup During Updates

Complete Component Lifecycle

Ever wondered why React applications feel so fast? The answer lies in one of React's smartest concepts: the Virtual DOM.

Real DOM vs Virtual DOM in React

What is the DOM?

What is Real DOM?

Example

Problem with Real DOM

What is Virtual DOM?

Example

How React Updates the UI

Real DOM vs Virtual DOM

Real-Life Analogy

Real DOM

Virtual DOM

Why React Uses Virtual DOM

React Made Simple: Components, Hooks (useState), and the Virtual DOM Explained

React `useContext` Hook Explained with Simple Examples

What is `useContext`?

Why do we need `useContext`?

How `useContext` Works

4. What is `useState`?

Why use `useState`?