DEV Community: Rakshambika

useState in React

Rakshambika — Fri, 25 Sep 2026 10:54:00 +0000

What is useState?

useState is a React Hook that allows functional components to store and manage data that can change over time. Whenever the state changes, React automatically updates the UI to reflect the new value.
Before Hooks were introduced, state could only be managed in class components. The useState Hook made state management possible in functional components, making React code simpler and easier to maintain.

Why Do We Need useState?

In normal JavaScript, changing a variable does not automatically update the webpage.

let count = 0;

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

Even though the value of count changes, the UI will not re-render automatically.

React solves this problem using state. When state changes, React re-renders the component and updates the UI.

Syntax of useState:

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

Parameters:

state → Current value of the state.
setState → Function used to update the state.
initialValue → The initial value of the state.

Example : Counter Application

import { useState } from "react"; 
function Counter() 
{ 
const [count, setCount] = useState(0); 
const increase = () => { 
setCount(count + 1); 
};

return 
( <div> 
<h1>{count}</h1> 
<button onClick={increase}>Increase</button> 
</div> 
); 
} 

export default Counter;

Output

Initial value of count is 0.
When the button is clicked, setCount(count + 1) updates the state.
React re-renders the component and displays the updated value.

Rules of useState

Hooks must be called at the top level of a component.
Hooks cannot be called inside loops, conditions, or nested functions.
Hooks can only be used inside React functional components or custom Hooks.

Components in React

Rakshambika — Thu, 24 Sep 2026 16:51:27 +0000

What is a Component?

A component is simply a JavaScript function that returns JSX.

Example:

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

Here:

Welcome is a component.
It returns an <h1> element.
React renders the returned JSX on the screen.

Why Do We Need Components?

Without components, we would have to write the same code repeatedly. Components help us:

Reuse code
Keep code organized
Improve maintainability
Build complex UIs easily

Types of Components

1. Functional Components

Modern React mainly uses functional components.

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

2. Class Components

Older React applications used class components.

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

Reusability of Components

A component can be used multiple times.

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

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

Output:

Welcome!
Welcome!
Welcome!

This demonstrates the reusability of components.

Real-World Example

Imagine building a portfolio website.

Instead of writing everything in one file, create separate components:

Header Component
About Component
Skills Component
Projects Component
Contact Component
Footer Component

Then combine them inside App.jsx.

function App() {
  return (
    <>
      <Header />
      <About />
      <Skills />
      <Projects />
      <Contact />
      <Footer />
    </>
  );
}

This makes the project cleaner and easier to maintain.

Library vs Framework

Rakshambika — Wed, 23 Sep 2026 16:02:44 +0000

We often hear terms like Library and Framework. While both help us build applications faster and more efficiently, they differ in how they are used and who controls the flow of the application.

What is a Library?

A Library is a collection of pre-written functions, methods, or modules that developers can use to perform specific tasks. The developer decides when and where to use the library.

In simple terms, your code calls the library whenever it is needed.

Example

Libraries such as React, Lodash, and jQuery provide reusable functionality that developers can import and use in their applications.

function greet(name) {
    return `Hello ${name}`;
}

console.log(greet("Raksha"));

Here, the developer controls when the function is executed.

Characteristics of a Library

Reusable code for specific tasks
Developer controls the application flow
Can be added or removed easily
Focuses on solving particular problems

What is a Framework?

A Framework provides a complete structure for building applications. It defines how different parts of the application should be organized and interact with each other.

In a framework, the framework calls your code when needed.

Example

Frameworks such as Angular, Spring Boot, and Django provide predefined structures and rules for application development.

For example, in Angular, developers create components, services, and modules according to the framework's architecture.

Characteristics of a Framework

Provides a complete application structure
Controls the overall flow of the application
Enforces conventions and best practices
Helps build large-scale applications efficiently

Inversion of Control

The key difference between a library and a framework is Inversion of Control (IoC).

Library

You are in control.

Your Code → Library
Framework

The framework is in control.

Framework → Your Code
Real-World Analogy

Imagine you are building a house.

Library:

A library is like a toolbox. You choose the tools you need and use them whenever required.

Framework:

A framework is like a construction company that provides a complete building plan. You follow its structure and guidelines to build the house.

Library vs Framework

Library	Framework
The developer controls the flow of the application.	The framework controls the flow of the application.
Used to provide specific functionality or features.	Provides a complete structure for building applications.
More flexible and lightweight.	More structured and follows predefined conventions.
Your code calls the library when needed.	The framework calls your code at the appropriate time.
Generally easier to learn and integrate.	May require learning its architecture and conventions.

React

Rakshambika — Tue, 22 Sep 2026 16:25:40 +0000

What is React?

React is a popular JavaScript library used for building user interfaces (UI), especially for web applications.
It was created by Facebook (now Meta) and was first released in 2013. React helps developers create fast, interactive, and reusable user interface components.
Examples of applications built using React include Facebook, Instagram, Netflix, WhatsApp Web, and many other modern web applications.

Why Was React Created?

Before React, developers often used plain JavaScript to update web pages.

As applications became larger and more complex, managing the UI became difficult because:

Code became harder to maintain.
Updating the page required more manual DOM manipulation.
Large applications became slower and difficult to scale.
Reusing UI elements was challenging.

To solve these problems, Facebook developed React.

React introduced a component-based approach that makes building and maintaining large applications much easier.

Key Features of React:

Component-Based Architecture
Virtual DOM
JSX (JavaScript XML)

Real-World Applications of React:

React is commonly used to build:

Social media platforms
E-commerce websites
Dashboard applications
Chat applications
Streaming platforms
Portfolio websites
Task management applications

Fetch API in JS

Rakshambika — Mon, 21 Sep 2026 15:30:00 +0000

What is Fetch API?

The Fetch API is a modern JavaScript API used to make HTTP requests to a server.

It allows us to perform operations such as:

GET → Read data
POST → Create data
PUT → Update complete data
PATCH → Update partial data
DELETE → Delete data

The Fetch API returns a Promise, so we can handle the response using .then() and .catch().

Basic Syntax:

fetch(url) 
.then(response => response.json()) 
.then(data => { console.log(data); }) 
.catch(error => { console.log(error); });

How Fetch API Works?

JavaScript 
 ↓ 
fetch() 
 ↓ 
HTTP Request
 ↓ 
Server / API
 ↓ 
HTTP Response
 ↓ 
response.json()
 ↓ 
JavaScript Data

For example:

fetch("https://fakestoreapi.com/products")

The browser sends a request to the API.

The API sends a response.

We then convert the response into JavaScript data using:

response.json();

Response Object:

fetch(url)
.then(response => {
    console.log(response);
});

response is a Response object.

It contains useful information such as:

response.status
response.ok
response.headers
response.json()

For example:

fetch("https://fakestoreapi.com/products")
.then(response => {

    console.log(response.status);
    console.log(response.ok);

});

A successful response may have:

status → 200
ok → true

What Happens Internally?

When we execute:

fetch(url)

the following process happens:

fetch() is called ↓
Browser sends HTTP request ↓
JavaScript continues executing ↓
Server processes request ↓
Server sends response ↓
Promise is fulfilled ↓
.then() executes ↓
response.json() converts JSON ↓
Next .then() receives the data

This is why Fetch API is useful for performing asynchronous operations without blocking the main JavaScript execution.

Fetch API vs XMLHttpRequest

Before Fetch API, developers commonly used XMLHttpRequest.

XMLHttpRequest
let xhr = new XMLHttpRequest();

xhr.open("GET", url);

xhr.onload = function() {
    console.log(xhr.responseText);
};

xhr.send();

Fetch provides a more modern Promise-based approach:

fetch(url)
.then(response => response.json())
.then(data => console.log(data));

So Fetch API generally provides a cleaner way to work with HTTP requests.

Events in JS

Rakshambika — Fri, 18 Sep 2026 16:43:34 +0000

When we build a web page, we don't want it to just display information. We want it to respond to the user's actions.

For example:

Clicking a button
Typing in an input box
Moving the mouse
Submitting a form
Loading a page
Pressing a keyboard key

These actions are called events in JavaScript.

What is Events?

An event is an action or occurrence that happens in the browser and can be detected by JavaScript.

For example, when a user clicks a button:

<button>Click Me</button>

The click is an event.

JavaScript can listen for this event and execute some code when it happens.

button.addEventListener("click", function() {
    console.log("Button clicked!");
});

Here:

click → Event
addEventListener() → Listens for the event
function() → Code executed when the event occurs

Why Do We Need Events?

Events make web pages interactive. Without events, a button would simply be a button.

With events, we can make it:

Show a message
Change text
Change styles
Open/close menus
Submit forms
Validate user input
Fetch data from an API
Add or remove elements

For example:

button.addEventListener("click", function() {
    document.body.style.backgroundColor = "lightblue";
});

Now the background changes when the user clicks the button.

JavaScript Events

There are many events available in JavaScript.

Some commonly used ones are:

Event	When it occurs
`click`	When the user clicks an element
`dblclick`	When the user double-clicks an element
`mouseover`	When the mouse pointer moves over an element
`mouseout`	When the mouse pointer leaves an element
`mousedown`	When a mouse button is pressed
`mouseup`	When a mouse button is released
`mousemove`	When the mouse pointer moves
`keydown`	When a keyboard key is pressed
`keyup`	When a keyboard key is released
`input`	When the value of an input changes
`change`	When the value of an input or select element changes
`submit`	When a form is submitted
`focus`	When an element receives focus
`blur`	When an element loses focus
`load`	When a page or resource finishes loading

Promise Chaining

Rakshambika — Thu, 17 Sep 2026 16:35:40 +0000

What is Promise Chaining?

Promise chaining means connecting multiple .then() methods together so that the result of one asynchronous operation is passed to the next operation.
It is especially useful when one asynchronous task depends on the result of another task.

Simple idea

Promise 1
   ↓
.then()
   ↓
Promise 2
   ↓
.then()
   ↓
Promise 3
   ↓
.then()
   ↓
Final Result
   ↓
.catch()

Why do we need Promise Chaining?

Imagine an application needs to do these tasks:

1. Get user
       ↓
2. Get user's orders
       ↓
3. Get payment details

The second operation needs the result of the first.

getUser()
   ↓
Need user.id
   ↓
getOrders(user.id)
   ↓
Need order.id
   ↓
getPayment(order.id)

This is a perfect situation for Promise chaining.

Simple Promise Chaining :

Let's start with a very simple example.

const promise = Promise.resolve(10);

promise
    .then(value => {
        console.log(value);
        return value * 2;
    })
    .then(value => {
        console.log(value);
        return value + 5;
    })
    .then(value => {
        console.log(value);
    });

Output

10
20
25

What happened?

First:

Promise.resolve(10)

It returns:10

Then the first .then() receives 10.

.then(value => {
    console.log(value); // 10

    return value * 2;
})

It returns:20

That 20 is automatically passed to the next .then().

.then(value => {
    console.log(value); // 20

    return value + 5;
})

It returns: 25

The final .then() receives 25.

Promise Chaining vs Callback Hell

Callback Hell

getUser(function(user) {

    getOrders(user.id, function(orders) {

        getPayment(orders[0].id, function(payment) {

            console.log(payment);

        });

    });

});

Notice the nesting.

Promise Chaining

getUser()
    .then(user => getOrders(user.id))
    .then(orders => getPayment(orders[0].id))
    .then(payment => console.log(payment))
    .catch(error => console.log(error));

Much easier to read.

Methods in Promise

Rakshambika — Tue, 15 Sep 2026 16:59:00 +0000

Methods in Promise

Promise methods are divided into Instance Methods and Static Methods.

1. Instance Methods

These methods are called on a Promise object.

const promise = new Promise((resolve, reject) => {
    resolve("Success");
});

.then()

Handles a successful result.

promise.then((data) => {
    console.log(data);
});

Output:

Success

.catch()

Handles errors or rejected promises.

const promise = new Promise((resolve, reject) => {
    reject("Something went wrong");
});

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

Output:

Something went wrong

.finally()

Runs whether the promise is fulfilled or rejected.

const promise = new Promise((resolve, reject) => {
    resolve("Done");
});

promise
    .then((data) => console.log(data))
    .finally(() => console.log("Finished"));

Output:

Done
Finished

2. Static Methods

These methods are called directly on the Promise class.

Syntax: Promise.methodName()

Promise.resolve()

Creates an already fulfilled promise.

const promise = Promise.resolve("Hello");

promise.then((data) => {
    console.log(data);
});

Output

Hello

Promise.reject()

Creates an already rejected promise.

const promise = Promise.reject("Error");

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

Output

Error

Promise.all()

Waits for all promises to succeed.

const p1 = Promise.resolve("Task 1");
const p2 = Promise.resolve("Task 2");
const p3 = Promise.resolve("Task 3");

Promise.all([p1, p2, p3])
    .then((result) => {
        console.log(result);
    });

Output

["Task 1", "Task 2", "Task 3"]

If any promise fails:

const p1 = Promise.resolve("Task 1");
const p2 = Promise.reject("Task 2 Failed");
const p3 = Promise.resolve("Task 3");

Promise.all([p1, p2, p3])
    .catch((error) => {
        console.log(error);
    });

Output

Task 2 Failed

Promise.allSettled()

Waits for all promises to complete, whether success or failure.

const p1 = Promise.resolve("Success");
const p2 = Promise.reject("Failed");

Promise.allSettled([p1, p2])
    .then((result) => {
        console.log(result);
    });

Output

[
  { status: "fulfilled", value: "Success" },
  { status: "rejected", reason: "Failed" }
]

Promise.race()

Returns the result of the first promise that settles (success or failure).

const p1 = new Promise((resolve) => {
    setTimeout(() => resolve("Task 1"), 3000);
});

const p2 = new Promise((resolve) => {
    setTimeout(() => resolve("Task 2"), 1000);
});

Promise.race([p1, p2])
    .then((result) => {
        console.log(result);
    });

Output

Task 2

Because p2 finished first.

Promise.any()

Returns the first successful promise.

const p1 = Promise.reject("Error 1");

const p2 = new Promise((resolve) => {
    setTimeout(() => resolve("Success"), 2000);
});

const p3 = Promise.reject("Error 3");

Promise.any([p1, p2, p3])
    .then((result) => {
        console.log(result);
    });

Output

Success

Error Handling in js

Rakshambika — Mon, 14 Sep 2026 13:30:00 +0000

What is Error Handling?

Error handling is the process of managing errors that occur during program execution so that the application doesn't crash unexpectedly.

JavaScript provides:

try
catch
finally
Throw

Why Error Handling?

Without error handling:

console.log("Start");
let result = 10 / x; // x is not defined
console.log("End");

Output:

Start
ReferenceError: x is not defined

The program stops when the error occurs.

1. try...catch

The try block contains code that may cause an error.
The catch block handles the error.

Syntax

try {
    // risky code
} catch(error) {
    // handle error
}

Example

try {
    console.log(x);
} catch(error) {
    console.log("Error occurred");
}

Output:

Error occurred

2. Accessing Error Information:

The error object contains details about the error.

try {
    console.log(x);
} catch(error) {
    console.log(error);
}

Output:

ReferenceError: x is not defined

Useful Properties

try {
    console.log(x);
} catch(error) {
    console.log(error.name);
    console.log(error.message);
}

Output:

ReferenceError
x is not defined

3. finally

The finally block always executes whether an error occurs or not.

try {
    console.log("Try block");
} catch(error) {
    console.log("Catch block");
} finally {
    console.log("Finally block");
}

Output:

Try block
Finally block

Example with Error

try {
    console.log(x);
} catch(error) {
    console.log("Error handled");
} finally {
    console.log("Always executes");
}

Output:

Error handled
Always executes

4. throw

The throw keyword is used to create custom errors.

Example

let age = 15;

try {
    if (age < 18) {
        throw new Error("You must be 18 or older");
    }

    console.log("Eligible");
} catch(error) {
    console.log(error.message);
}

Output:

You must be 18 or older

Promise in JS

Rakshambika — Fri, 11 Sep 2026 16:00:00 +0000

What is promise?

A Promise is an object used to handle the result of an asynchronous operation.

Example:

let promise = new Promise((resolve, reject) => {

    let success = true;

    if (success) {
        resolve("Data received successfully");
    } else {
        reject("Failed to receive data");
    }

});

States in Promise:

A Promise has 3 states:

Pending → Operation is still running
Fulfilled → Operation completed successfully
Rejected → Operation failed

Why do we need Promises?

Before Promises, asynchronous operations were commonly handled using callbacks.

example:

getUser(function(user) {

    getOrders(user, function(orders) {

        getPayment(orders, function(payment) {

            console.log(payment);

        });

    });

});

When many asynchronous operations depend on each other, callbacks can become deeply nested.

This is called Callback Hell.

Promises make the code easier to organize:

getUser()
    .then(user => getOrders(user))
    .then(orders => getPayment(orders))
    .then(payment => console.log(payment))
    .catch(error => console.log(error));

So, one major reason we need Promises is:

Promises make asynchronous code easier to read, manage, and handle errors .

Uses of Promises:

Handling asynchronous operations
Handling success and failure
Promise chaining
Avoiding Callback Hell
Working with multiple asynchronous operations

Promise to handle success:

When the operation is successful, call resolve().

const promise = new Promise((resolve, reject) => {

    let success = true;

    if (success) {
        resolve("Data received successfully");
    }
});

Then we handle the successful result using .then():

promise.then(result => {
    console.log(result);
});

Promise
   ↓
resolve()
   ↓
FULFILLED
   ↓
.then()
   ↓
Success result

Promise to handle error:

When the operation fails, call reject().

const promise = new Promise((resolve, reject) => {

    let success = false;

    if (success) {
        resolve("Data received");
    } else {
        reject("Failed to get data");
    }
});

Then handle the error using .catch():

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

Promise
   ↓
reject()
   ↓
REJECTED
   ↓
.catch()
   ↓
Error

Handling both success and error:

Usually, we handle both together:

const promise = new Promise((resolve, reject) => {

    let success = true;

    if (success) {
        resolve("Data loaded successfully");
    } else {
        reject("Something went wrong");
    }
});

promise
    .then(result => {
        console.log("Success:", result);
    })
    .catch(error => {
        console.log("Error:", error);
    });

Closure in JS

Rakshambika — Thu, 10 Sep 2026 14:29:55 +0000

What is a Closure?

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

Example:

function outer() {
    let name = "Raksha";

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

    return inner;
}

const myFunction = outer();

myFunction();

Output:

Raksha

Here,

outer() is called.
name is created inside outer().
inner() is created and uses name.
outer() finishes execution.
Normally, you might think name is gone.
But inner() remembers name.
When we call myFunction(), it can still access "Raksha".

That is a closure.

Why do we use closures?

Closures are useful for:

Data privacy
Counters
Callbacks
Event handlers
Maintaining state
Function factories
Async JavaScript
Real-life example

Think of a bank account:

function bankAccount() {
    let balance = 1000;

    return {
        deposit: function(amount) {
            balance += amount;
        },

        getBalance: function() {
            return balance;
        }
    };
}

const account = bankAccount();

account.deposit(500);

console.log(account.getBalance());

Output:

The balance variable cannot be directly accessed from outside:

console.log(account.balance);

It gives:

undefined

But the inner functions can access it because they close over balance.

Callback in JavaScript

Rakshambika — Wed, 09 Sep 2026 14:54:00 +0000

What is a Callback in JavaScript?

A callback function is a function that is passed as an argument to another function and is executed later by that function.

Example:

function addition(a,b,callback)
{
    console.log(a+b);
    callback(a,b);
}

function multiply(x,y)
{
    console.log(x*y);
}

addition(10,20,multiply)

Output:

30
200

How it works?

addition(10, 20, multiply)
          ↓
       a = 10
       b = 20
       callback = multiply
          ↓
   console.log(a + b)
          ↓
          30
          ↓
   callback(a, b)
          ↓
   multiply(10, 20)
          ↓
          200

Here:

addition() → Main function
     ↓
receives multiply()
     ↓
callback = multiply
     ↓
addition() performs addition
     ↓
callback(a,b)
     ↓
multiply(a,b) executes

Why do we need callbacks?

To execute another function when needed.
To decide what happens after a task finishes.
To handle asynchronous operations.

Without callback

Suppose you want to use the same two numbers 10 and 20 for different operations.

function calculate(a, b) {
    console.log(a + b);
}

calculate(10, 20);

Here, it only perform addition.

If later you want subtraction, you would need another function:

function calculateSub(a, b) {
    console.log(a - b);
}

calculateSub(10, 20);

And for multiplication, another one:

function calculateMul(a, b) {
    console.log(a * b);
}

calculateMul(10, 20);

So we have three different functions.

With Callback

Instead, we can create one common calculate() function and tell it which operation to perform.

function calculate(a, b, operation) {
    console.log(operation(a, b));
}

function add(a, b) {
    return a + b;
}

function subtract(a, b) {
    return a - b;
}

function multiply(a, b) {
    return a * b;
}

calculate(10, 20, add);
calculate(10, 20, subtract);
calculate(10, 20, multiply);

Output:

30
-10
200

                  calculate()
                /      |       \
             add    subtract   multiply
              ↓        ↓          ↓
           10+20    10-20      10*20
              ↓        ↓          ↓
             30       -10        200

Callback with Asynchronous Operations:

A callback is often used with asynchronous operations because we don't know exactly when the operation will finish.

Example:

console.log("Start");

setTimeout(function() {
    console.log("Task completed");
}, 2000);

console.log("End");

Output:

Start
End
Task Completed

Start
  ↓
setTimeout() starts
  ↓
JavaScript doesn't wait
  ↓
End
  ↓
2 seconds completed
  ↓
Callback executes
  ↓
Task completed

What is Callback Chaining?

Callback chaining means passing one callback to another function, and that function then uses another callback to call the next function.

Example:

function add(a, b, callback) {
    console.log(a + b);
    callback(a, b, multiplication);
}

function sub(x, y, multi) {
    console.log(x - y);
    multi(x, y);
}

function multiplication(a, b) {
    console.log(a * b);
}

add(50, 2, sub);

Output:

52
48
100

add(50, 2, sub)
       ↓
     add()
       ↓
   50 + 2 = 52
       ↓
 callback = sub
       ↓
 sub(50, 2, multiplication)
       ↓
   50 - 2 = 48
       ↓
 multi = multiplication
       ↓
 multiplication(50, 2)
       ↓
   50 × 2 = 100