DEV Community: Madhan Raj

BrowserRouter in React

Madhan Raj — Wed, 05 Aug 2026 18:01:06 +0000

BrowserRouter is a component provided by React Router to enable client-side routing using the HTML5 history API, allowing navigation without full page reloads. It also updates the browser URL dynamically while preserving the application state during view changes.

Client-side navigation: Handles routing in the browser using the HTML5 history API, avoiding full page reloads.
State-preserving URL updates: Changes the browser URL during navigation while keeping the app state intact.

Syntax

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

Enables Routing: BrowserRouter wraps the application, allowing URL-based navigation without page reloads.
Defines Routes: Routes contain Route components, mapping paths (/, /about) to specific React components.

Features of BrowserRouter

Real URL Updates: Reflects navigation in the browser's address bar using the HTML5 History API (pushState / replaceState).
Back & Forward Support: Native browser history buttons work out of the box for seamless navigation.
Deep Linking: Users can bookmark, share, or directly access any route via its URL.
SEO-Friendly: Clean, readable URLs (e.g., /products/123) are indexable by search engines.
Server-Side Rendering Ready: Pairs well with SSR frameworks like Next.js for full-stack React apps.

Working

BrowserRouter uses the HTML5 history API, which consists of pushState, replaceState, and popstate events, to update the browser’s history and allow for dynamic routing.

Initialization of Browser Router

When the application is loaded, the BrowserRouter component is wrapped around the entire app (typically at the top level).

<BrowserRouter>
  <App />
</BrowserRouter>

URL Detection

BrowserRouter uses the HTML5 History API to detect changes in the URL. This allows React Router to manipulate the URL while keeping the page from reloading. When a user navigates to a different route (e.g., clicking a or typing a URL), BrowserRouter listens for this URL change.
Matching the URL

Inside BrowserRouter the Route components define which URL path corresponds to which component. For instance, when the URL is /about, a is matched.

<Route path="/about" component={About} />

Rendering Components

After matching the URL to the corresponding Route, the associated component is rendered. If the URL matches /about, the About component will be displayed.

Navigating Between Views

When a user clicks a link, such as:

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

Maintaining Application State

Since the page doesn't reload, the application's state (like form data or user input) remains intact. React will only re-render the relevant components, ensuring a seamless user experience.
History Management

The BrowserRouter uses the browser's built-in history stack, so users can navigate backward and forward between different routes using the browser's back and forward buttons.
Dynamic Updates

As the URL changes (either by user interaction or programmatically using the history object), BrowserRouter continues to handle the URL and re-render the app's UI accordingly, providing smooth transitions between views.

Reference
https://www.geeksforgeeks.org/reactjs/browserrouter-in-react/

ReactJS useContext Hook

Madhan Raj — Tue, 28 Jul 2026 17:42:28 +0000

ReactJS useContext Hook

The useContext hook in React allows components to consume values from the React context. React’s context API is primarily designed to pass data down the component tree without manually passing props at every level. useContext is a part of React's hooks system, that enables functional components to access context values.

1.Simplifies accessing shared state across components.
2.Avoids prop drilling by eliminating the need to pass props down multiple levels.
3.Works seamlessly with React's Context API to provide global state.
4.Ideal for managing themes, authentication, or user preferences across the app.

Syntax:

const contextValue = useContext(MyContext);

MyContext: The context object is created using React.createContext().
contextValue: The current context value that we can use in our component.

Working of useContext

The useContext hook allows to consume values from a React Context, enabling easy access to shared state across multiple components without prop drilling. Here’s how it works:

useContext hook consumes values from a React Context, making them accessible to functional components.
First, create a Context object using React.createContext(), which holds the shared state.
Use useContext to access the context value in any component that needs it, avoiding prop drilling.
When the value of the Context updates, all components consuming that context automatically re-render with the new value.

1. Managing Authentication with useContext

useContext can be used for managing the user authentication state globally

import React, { createContext, useContext, useState } from 'react';
const AuthContext = createContext();
function AuthProvider({ children }) {
    const [isLoggedIn, setIsLoggedIn] = useState(false);
    return (
        <AuthContext.Provider value={{ isLoggedIn, setIsLoggedIn }}>
            {children}
        </AuthContext.Provider>
    );
}
function LoginButton() {
    const { isLoggedIn, setIsLoggedIn } = useContext(AuthContext);
    return (
        <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
            {isLoggedIn ? 'Logout' : 'Login'}
        </button>
    );
}
function App() {
    return (
        <AuthProvider>
            <LoginButton />
        </AuthProvider>
    );
}
export default App;

In this code,

AuthContext is created using createContext() and AuthProvider manages the isLoggedIn state, passing it down through the context.
LoginButton uses useContext to access isLoggedIn and setIsLoggedIn from the context and toggles the login state.
App renders LoginButton wrapped in AuthProvider, allowing dynamic login/logout functionality.

Output

Performance Considerations

Minimize Re-renders: Avoid unnecessary re-renders by memoizing values and functions using useMemo and useCallback.
Efficient State Initialization: Use lazy initialization in useState for expensive computations.
Cleanup Effects: Always clean up side effects in useEffect to prevent memory leaks.
Limit Dependencies: Keep dependencies in useEffect minimal to reduce unnecessary executions.

Reference
https://www.geeksforgeeks.org/reactjs/reactjs-usecontext-hook/

Python Introduction

Madhan Raj — Mon, 27 Jul 2026 16:21:15 +0000

What is Python?

Python is a popular programming language. It was created by Guido van Rossum, and released in 1991.

It is used for:

web development (server-side),
software development,
mathematics,
system scripting.

What can Python do?

Python can be used on a server to create web applications.
Python can be used alongside software to create workflows.
Python can connect to database systems. It can also read and modify files.
Python can be used to handle big data and perform complex mathematics.
Python can be used for rapid prototyping, or for production-ready software development.

Why Python?

Python works on different platforms (Windows, Mac, Linux, Raspberry Pi, etc).
Python has a simple syntax similar to the English language.
Python has syntax that allows developers to write programs with fewer lines than some other programming languages.
Python runs on an interpreter system, meaning that code can be executed as soon as it is written. This means that prototyping can be very quick.
Python can be treated in a procedural way, an object-oriented way or a functional way.

Good to know

The most recent major version of Python is Python 3, which we shall be using in this tutorial.
In this tutorial Python will be written in a text editor. It is possible to write Python in an Integrated Development Environment, such as Thonny, Pycharm, Netbeans or Eclipse which are particularly useful when managing larger collections of Python files.

Python Syntax compared to other programming languages

Python was designed for readability, and has some similarities to the English language with influence from mathematics.
Python uses new lines to complete a command, as opposed to other programming languages which often use semicolons or parentheses.
Python relies on indentation, using whitespace, to define scope; such as the scope of loops, functions and classes. Other programming languages often use curly-brackets for this purpose.

Example

print("Hello, World!")

Reference
https://www.w3schools.com/python/python_intro.asp

Re-rendering Components in ReactJS

Madhan Raj — Mon, 20 Jul 2026 17:57:46 +0000

Re-rendering Components in ReactJS
In ReactJS, re-rendering occurs when React needs to update the app with new data or when a component’s state or props change. React compares the updated component with the previous one and updates only the parts that need changing to keep everything in sync.
How React Handles Re-Rendering

React uses Virtual DOM as an intermediate layer. It sits between what the developer wants to show on the screen and what the browser actually renders. This helps React efficiently update only the necessary parts of the UI.

Initial Render: React creates a virtual DOM tree representing the UI based on the current state and props of components.

2.State or Props Change: When the state or props change, React updates the component’s virtual DOM and compares it with the previous virtual DOM using a process called reconciliation.

3.Diffing Algorithm: React’s diffing algorithm identifies the differences between the current and previous virtual DOM. Only the changes are applied to the real DOM, which minimizes performance overhead.

4.Re-rendering: React re-renders the components with the new state or props, and only the necessary DOM updates are applied.

Example: React Re-rendering with State

import React, { useState } from 'react';

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

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
}

export default Counter;

Output

In this example

Initially the component rerenders with the count = 0.
When we click the button the state updates, which trigger the re-rendering.
Now, the React will compare with the virtual Dom and will update the only changed part.

Reference
https://www.geeksforgeeks.org/reactjs/re-rendering-components-in-reactjs/

REACT Usestate Hook

Madhan Raj — Fri, 17 Jul 2026 18:10:24 +0000

React useState Hook

The React useState Hook allows us to track state in a function component.

State generally refers to data or properties that need to be tracking in an application.
Import useState

To use the useState Hook, we first need to import it into our component.
Example:
At the top of your component, import the useState Hook.

import { useState } from "react";

Notice that we are destructuring useState from react as it is a named export.
Initialize useState

We initialize our state by calling useState in our function component.

useState accepts an initial state and returns two values:

The current state.
A function that updates the state.

Example:


Initialize state at the top of the function component.

import { useState } from "react";

function FavoriteColor() {
  const [color, setColor] = useState("red");
}

Notice that again, we are destructuring the returned values from useState.

The first value, color, is our current state.

The second value, setColor, is the function that is used to update our state.

These names are variables that can be named anything you would like.

Lastly, we set the initial state to "red": useState("red")

Read State

We can now include our state anywhere in our component.
Example:

Use the state variable in the rendered component.

import { useState } from 'react';
import { createRoot } from 'react-dom/client';

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return <h1>My favorite color is {color}!</h1>
}

createRoot(document.getElementById('root')).render(
  <FavoriteColor />
);

Update State

To update our state, we use our state updater function.
Example:

Use the state updater function to update the state:

<button
  type="button"
  onClick={() => setColor("blue")}
>Blue</button>

We should never directly update state. Ex: color = "blue" is not allowed.
Example:

Use a button to update the state:

import { useState } from 'react';
import { createRoot } from 'react-dom/client';

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("blue")}
      >Blue</button>
    </>
  )
}

createRoot(document.getElementById('root')).render(
  <FavoriteColor />
);

What Can State Hold?

The useState Hook can be used to keep track of strings, numbers, booleans, arrays, objects, and any combination of these!

We could create multiple state Hooks to track individual values.
Example:

Create multiple state Hooks:

import { useState } from 'react';
import { createRoot } from 'react-dom/client';

function MyCar() {
  const [brand, setBrand] = useState("Ford");
  const [model, setModel] = useState("Mustang");
  const [year, setYear] = useState("1964");
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My {brand}</h1>
      <p>
        It is a {color} {model} from {year}.
      </p>
    </>
  )
}

createRoot(document.getElementById('root')).render(
  <MyCar />
);

Or, we can just use one state and include an object instead!
Example:

Create a single Hook that holds an object:


import { useState } from 'react';
import { createRoot } from 'react-dom/client';

function MyCar() {
  const [car, setCar] = useState({
    brand: "Ford",
    model: "Mustang",
    year: "1964",
    color: "red"
  });

  return (
    <>
      <h1>My {car.brand}</h1>
      <p>
        It is a {car.color} {car.model} from {car.year}.
      </p>
    </>
  )
}

createRoot(document.getElementById('root')).render(
  <MyCar />
);

Since we are now tracking a single object: car, we need to reference that object when rendering the component. (Ex: car.brand)
Updating Objects and Arrays in State

When state is updated, the entire state gets overwritten.

What if we only want to update the color of our car?

If we only called setCar({color: "blue"}), this would remove the brand, model, and year from our state.

We can use the JavaScript spread operator to help us.
Example:

Use the JavaScript spread operator to update only the color of the car:

const updateColor = () => {
  setCar(previousState => {
    return { ...previousState, color: "blue" }
  });
}

Because we need the current value of state, we pass a function into our setCar function. This function receives the previous value.

We then return an object, spreading the previousState and overwriting only the color.
Reference
https://www.w3schools.com/react/react_usestate.asp

React Props

Madhan Raj — Thu, 16 Jul 2026 17:49:20 +0000

React Props
Props are arguments passed into React components.

Props are passed to components via HTML attributes.

props stands for properties.
React Props

React Props are like function arguments in JavaScript and attributes in HTML.

To send props into a component, use the same syntax as HTML attributes:
Example

Add a brand attribute to the Car element:

createRoot(document.getElementById('root')).render(
  <Car brand="Ford" />
);

The component receives the argument as a props object:
Example

Use the brand attribute in the Car component:


function Car(props) {
  return (
    <h2>I am a {props.brand}!</h2>
  );
}

The name of the object is props, but you can call it anything you want.
Example

You can use myobj instead of props in the component:

function Car(myobj) {
  return (
    <h2>I am a {myobj.brand}!</h2>
  );
}

Pass Multiple Properties

You can send as many properties as you want.

Every attribute is sent to the Car component as object properties.
Example

Send multiple properties to the Car component:

createRoot(document.getElementById('root')).render(
  <Car brand="Ford" model="Mustang" color="red" />
);

All properties are received in the Car component inside the props object:
Example

Use the property values in the Car component:

function Car(props) {
  return (
    <h2>I am a {props.color} {props.brand} {props.model}!</h2>
  );
}

Different Data Types

React props can be of any data type, including variables, numbers, strings, objects, arrays, and more.

Strings can be sent inside quotes as in the examples above, but numbers, variables, and objects need to be sent inside curly brackets.
Example

Numbers has to be sent inside curly brackets to be treated as numbers:

createRoot(document.getElementById('root')).render(
  <Car year={1969} />
);

Object Props

The component treats objects like objects, and you can use the dot notation to access the properties.
Example

Use the dot notation to access object properties:

function Car(props) {
  return (
    <>
      <h2>My {props.carinfo.name} {props.carinfo.model}!</h2>
      <p>It is {props.carinfo.color} and it is from {props.carinfo.year}!</p>
    </>
  );
}

const carInfo = {
  name: "Ford",
  model: "Mustang",
  color: "red",
  year: 1969
};

createRoot(document.getElementById('root')).render(
  <Car carinfo={carInfo} />
);

Reference
https://www.w3schools.com/react/react_props.asp

React vs React DOM

Madhan Raj — Wed, 15 Jul 2026 17:31:41 +0000

React is a JavaScript library used for building user interfaces, especially for single-page applications. React DOM is a separate package that enables React to update and render UI components on the web browser by directly interacting with the browser's Document Object Model (DOM), ensuring smooth, dynamic user experiences by not reloading the whole page.

Differences between the React and React Dom

Advantages of React

Virtual DOM for Efficiency: React uses a virtual DOM to quickly figure out what needs updating, making apps faster and more responsive without reloading the entire page.
Ideal for Single-Page Applications (SPAs): React is perfect for single-page applications(SPA), where the content updates dynamically without needing to reload the whole page, giving users a smoother experience.
Reusable Components: React allows developers to build applications using reusable components, making code easier to manage, test, and scale.
One-Way Data Binding: React allows one way data binding which means that the data will flow in one direction, which makes it easier to understand and debug. This helps developers manage and track how data changes across the app.

Disadvantages of React

Documentation Limitations: While React's official website offers good documentation, some developers find it lacking in detailed explanations or depth for complex use cases. This can make it challenging for newcomers to grasp more advanced concepts.
Complex Advanced Features: React's basic concepts are easy to understand, but advanced features use complex parts of JavaScript. The many advanced topics can make it hard for developers to master React fully.
Frequent Updates: React is updated often, and new versions sometimes introduce changes that break old code, requiring developers to keep up with updates.

Advantages of React DOM

Efficient Updates: React DOM updates only the parts of the UI that have changed, making updates faster and reducing unnecessary re-rendering.
Virtual DOM Optimization: By utilizing a virtual DOM, ReactDOM minimizes direct manipulation of the browser’s DOM, enhancing speed and overall app performance.
Cross-Browser Compatibility: React DOM ensures that your app works consistently across different web browsers, handling compatibility issues automatically.
Cross-Browser Compatibility: React DOM helps in creating smooth, dynamic interfaces by efficiently handling the changes in the UI, resulting in a better user experience.

Disadvantages of React DOM

Initial Load Time: React DOM may take time to load and render large applications initially, affecting the startup speed.
SEO Limitations: By default, ReactDOM does not render content for search engines, making SEO optimization challenging without using additional tools like server-side rendering
Complexity for Large Apps: For very large applications, the virtual DOM utilized by ReactDOM can introduce unnecessary complexity and overhead, which may lead to slower performance.

Reference
https://www.geeksforgeeks.org/reactjs/react-vs-react-dom/

REACT Components

Madhan Raj — Tue, 14 Jul 2026 17:06:27 +0000

REACT Components
Components are like functions that return HTML elements.
React Components

Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML.

Components come in two types, Class components and Function components, in this tutorial we will concentrate on Function components.

In older React code bases, you may find Class components primarily used.

It is now suggested to use Function components along with Hooks, instead of Class components.

Class components are still supported, check the Class components section for more information.
Create Your First Component

When creating a React component, the component's name MUST start with an upper case letter.

React components returns HTML code.

Example

Create a Function component called Car


function Car() {
  return (
    <h2>Hi, I am a Car!</h2>
  );
}

Rendering a Component

Now your React application has a component called Car, which returns an

element.

To use this component in your application, refer to it like this:
Example


Display the Car component in the "root" element:

createRoot(document.getElementById('root')).render(
  <Car />
)
``
**Props**

Arguments can be passed into a component as props, which stands for properties.

You send the arguments into the component as HTML attributes.

You will learn more about props in our React Props chapter.
**Example**

Use an attribute to pass a color to the Car component, and use it in the render function:

function Car(props) {
return (

I am a {props.color} Car!

);
}






**Components in Components**

We can refer to components inside other components:
**Example**

Use the Car component inside the Garage component:

function Car() {
  return (
    <h2>I am a Car!</h2>
  );
}

function Garage() {
  return (
    <>
      <h1>Who lives in my Garage?</h1>
      <Car />
    </>
  );
}


createRoot(document.getElementById('root')).render(
  <Garage />
);



**Reference**
https://www.w3schools.com/react/react_components.asp

Introduction to REACT

Madhan Raj — Mon, 13 Jul 2026 16:29:31 +0000

What is React?

React is a front-end JavaScript library.

React was developed by the Facebook Software Engineer Jordan Walke.

React is also known as React.js or ReactJS.

React is a tool for building UI components.

How does React Work?

React creates a VIRTUAL DOM in memory.

Instead of manipulating the browser's DOM directly, React creates a virtual DOM in memory, where it does all the necessary manipulating, before making the changes in the browser DOM.

React only changes what needs to be changed!

React finds out what changes have been made, and changes only what needs to be changed.

You will learn the various aspects of how React does this in the rest of this tutorial.
What You Should Already Know

Before you continue you should have a basic understanding of the following:

HTML
CSS
JavaScript

If you want to study these subjects first, find the tutorials on our Home page.
React.JS History

Latest version of React.JS is 19.2.

Initial release to the Public (version 0.3.0) was in July 2013.

React.JS was first used in 2011 for Facebook's Newsfeed feature.

Facebook Software Engineer, Jordan Walke, created it.

Reference
https://www.w3schools.com/react/react_intro.asp

Javascript Fetch API

Madhan Raj — Fri, 10 Jul 2026 10:52:23 +0000

JavaScript Fetch API
Examples

fetch(file)
.then(x => x.text())
.then(y => myDisplay(y));

Fetch is based on async and await. The example might be easier to understand like this:

async function getText(file) {
  let x = await fetch(file);
  let y = await x.text();
  myDisplay(y);
}

Use understandable names instead of x and y:

async function getText(file) {
  let myObject = await fetch(file);
  let myText = await myObject.text();
  myDisplay(myText);
}

Description

The fetch() method starts the process of fetching a resource from a server.

The fetch() method returns a Promise that resolves to a Response object.

Syntax
fetch(file)

Parameters
Parameter | Description
file | Optional.
The name of a resource to fetch.
Return Value

Type | Description
Promise | A Promise that resolves to a Response object.

Reference
https://www.w3schools.com/jsref/api_fetch.asp

Promise in Javascript

Madhan Raj — Thu, 09 Jul 2026 18:06:31 +0000

JavaScript Promises

A Promise represents the eventual result of an asynchronous operation.

It acts as a placeholder for a value that is not available yet.

Instead of waiting for the operation to finish, JavaScript continues running other code.

When the operation completes, the Promise is either fulfilled with a value or rejected with an error.
Why Promises?

Callbacks work well for simple asynchronous tasks.

However, when several asynchronous operations depend on each other, callbacks can become deeply nested.

Promises provide a cleaner and more readable way to organize asynchronous code.
Example

step1(function(result1) {
  step2(result1, function(result2) {
    step3(result2, function(result3) {
      display(result3);
    });
  });
});

The style above is often called callback hell.

Promises let you write the same logic in a cleaner way.
Same Flow with Promises
Example

step1()
  .then(step2)
  .then(step3)
  .then(display);

Each then() waits for the previous Promise to finish.

The code is flatter and easier to read.
Promise States

A Promise acts as a placeholder for a value that will be available at some point in the future, allowing you to handle asynchronous code in a cleaner way than traditional callbacks.

Every Promise is always in one of 3 states.
State Description
Pending The initial state.
The operation has started but is not fulfilled or rejected.
Fulfilled The operation has completed and a value is available.
Rejected The operation has failed and a value (error) is available.

Pending
│
├────────► Fulfilled
│
└────────► Rejected

A promise is considered settled if it is fulfilled or rejected (not pending).
Promises and JavaScript APIs

Many web APIs return promises.

fetch() is a common example.
Example

fetch("fetch.txt")
.then(function(response) {
  return response.text();
})
.then(function(data) {
  myDisplayer(data);
})
.catch(function(error) {
  myDisplayer(error);
});

This is promise-based async programming.

Most of the time you will use Promises returned by JavaScript APIs.

But you can also create your own Promise.

Creating a Promise

Here is how to CREATE a Promise:
Syntax

let myPromise = new Promise(function(resolve, reject) {

// Code that may take some time

  resolve(value); // when successful
  reject(value);  // when error
});

The promise constructor takes a function with two parameters.
Parameter Description
resolve function to run if finishes successfully
reject function to run if finishes with an error

Call resolve() when the operation succeeds.

Call reject() when it fails.
Using a Promise

Here is how to USE a Promise:
Syntax

// USE a Promise
myPromise.then(
  function(value) { /* code if success */ },
  function(value) { /* code if error */ }
);

then() takes two arguments, one callback function for success and another for failure.

Both are optional, so you can add a callback function for success or failure only.
Examples

// Create a Promise
let myPromise = new Promise(function(resolve, reject) {

// Code that may take some time

  let success = true;
  if (success) {
    resolve("Done");
  } else {
    reject("Failed");
  }
});

// Use the Promise
myPromise.then(
  function(value) {myDisplayer(value);},
  function(value) {myDisplayer(value);}
);

// Create a Promise
let myPromise = new Promise(function(resolve, reject) {

// Code that may take some time

  let success = false;
  if (success) {
    resolve("Done");
  } else {
    reject("Failed");
  }
});

// Use the Promise
myPromise.then(
  function(value) {myDisplayer(value);},
  function(value) {myDisplayer(value);}
);

A promise represents a value that will be available later.

A promise is a container for a future result.

The result can be a value or an error.
The then() Method

The then() method runs when a Promise is fulfilled.
Example

fetch("fetch.txt")
.then(function(response) {
  return response.text();
})
.then(function(data) {
  myDisplayer(data);
});

The first then() receives the fetch response.

The second then() receives the data returned by the first.
The catch() Method

If a Promise is rejected, catch() handles the error.
Example

fetch("fetch.txt")
.then(function(response) {
  return response.text();
})
.then(function(data) {
  myDisplayer(data);
})
.catch(function(error) {
  myDisplayer(error);
});

Reference
https://www.w3schools.com/js/js_promise.asp

CallBack and CallBack Hell in JS

Madhan Raj — Wed, 08 Jul 2026 11:03:40 +0000

In JavaScript, callbacks are used for handling operations like reading files and making API requests. When there is excessive nesting of the functions it leads to a problem known as the callback hell. Due to this, it becomes difficult to read the code, debug, and maintain. But when we implement the promises and async/await it helps in improving the code.

What are Callbacks in JavaScript?

In JavaScript, callbacks are functions that are passed as arguments from one function to another and are executed after the completion of a certain task. They are commonly used in asynchronous operations, such as reading files, making HTTP requests, or handling user input.

A function can accept another function as a parameter.
Callbacks allow one function to call another at a later time.
A callback function can execute after another function has finished.

How Do Callbacks Work in JavaScript?

JavaScript executes code line by line (synchronously), but sometimes we need to delay execution or wait for a task to complete before running the next function. Callbacks help achieve this by passing a function that is executed later.
Example of a Callback

function greet(name, callback) {
    console.log(`Hello, ${name}!`);
    callback();  // calling the callback function
}

function afterGreet() {
    console.log('Greeting is complete!');
}

greet('Anjali', afterGreet);

Output

Hello, Anjali!
Greeting is complete!

Problem with Callbacks
Callback Hell (Pyramid of Doom)

When multiple asynchronous operations depend on each other, callbacks get deeply nested, making the code hard to read and maintain.


getUser(userId, (user) => {
    getOrders(user, (orders) => {
        processOrders(orders, (processed) => {
            sendEmail(processed, (confirmation) => {
                console.log("Order Processed:", confirmation);
            });
        });
    });
});

What is Callback Hell?

Callback Hell in JavaScript can be defined as the situation where we have nested callbacks(functions passed as arguments to other functions) which makes the code difficult to read and debug. The term "callback hell" describes the deep nesting of functions that can result in poor code readability and difficulty in debugging, especially when handling multiple asynchronous operations.

function task1(callback) {
    setTimeout(() => {
        console.log("Task One completed");
        callback();
    },);
}

function task2(callback) {
    setTimeout(() => {
        console.log("Task Two completed");
        callback();
    },);
}

task1(function () {
    task2(function () {
        console.log("Both tasks completed");
    });
});

Output

Task One completed
Task Two completed
Both tasks completed

In this example

The two tasks (task1 and task2) are executed one after the other.
Each task has a callback that triggers the next task, causing the callback to be nested inside the other, leading to Callback Hell.

Solution to Callback Hell
Promises

Promises can help in avoiding the callback hell by providing the structured way to handle the asynchronous operations using the .then() method. Due to which the code becomes more readable by avoiding the deeply neseted callbacks.

For more details read this article - JavaScript Promises

Async/await

Async/await can help in avoiding the callback hell by writing the asynchronous code that looks like the synchronous code due to which the code becomes more cleaner and readable and reduces the complexity.

Reference
https://www.geeksforgeeks.org/javascript/what-to-understand-callback-and-callback-hell-in-javascript/