DEV Community: ABISHEK M

'useMemo' Hook in React

ABISHEK M — Sat, 17 Oct 2026 17:00:25 +0000

When building React applications, components can re-render many times. During re-rendering, some calculations may run again even when the data has not changed. To avoid unnecessary calculations, React provides a Hook called useMemo.

What is `useMemo`?

useMemo is a React Hook that remembers, or caches, the result of a calculation. React can reuse the previous result when its dependencies have not changed.

For example:

import { useMemo } from "react";

const result = useMemo(() => {
  return number * number;
}, [number]);

Here, number is the dependency. If its value stays the same, React can reuse the cached result instead of recalculating it.

Why Do We Need `useMemo`?

Imagine a college application that displays student results. The application filters thousands of student records to find students who scored above 80 marks.

const topStudents = useMemo(() => {
  return students.filter(
    student => student.marks >= 80
  );
}, [students]);

Here, React can reuse the filtered student list when the students dependency remains unchanged. If the student data changes, React recalculates the list.

Understanding the Dependency Array

The dependency array tells React which values the calculation depends on.

const total = useMemo(
  () => price * quantity,
  [price, quantity]
);

If either price or quantity changes, React recalculates the total. If neither changes, React can reuse the previous result.

When Should We Use `useMemo`?

We can use useMemo when performing expensive calculations, filtering large datasets, sorting records, or processing complex data.

However, we should not use it for every small calculation. For simple operations, using useMemo may add unnecessary complexity without providing much benefit.

It is also important to understand that useMemo does not prevent a component from re-rendering. It only helps avoid unnecessary recalculations.

Conclusion

useMemo is a useful React Hook for improving performance when calculations are expensive. It caches a calculation result between renders and recalculates it when its dependencies change.

useReducer Hook in React

ABISHEK M — Wed, 14 Oct 2026 17:59:45 +0000

Introduction

React provides several Hooks to manage state in functional components. One of the important Hooks used for managing complex state logic is the useReducer Hook.

For simple state updates, the useState Hook is usually sufficient. However, when an application contains multiple related state updates or complex conditions, useReducer can help organize the logic in a more structured and maintainable way.

In this blog, we will explore what useReducer is, how it works, its syntax and real-world applications.

What Is the useReducer Hook?

The useReducer Hook is a built-in React Hook that manages component state using a reducer function. It allows developers to define how the state should change based on different actions.

Instead of writing state-update logic in multiple event handlers, developers can centralize the logic inside a reducer function.

The useReducer Hook is particularly useful when several actions can modify the same state or when state updates involve multiple conditions.

Syntax of useReducer

The basic syntax of useReducer is:

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

The syntax contains four important concepts:

State: Represents the current state value.
Dispatch: A function used to send an action to React.
Reducer: A function that determines the next state based on the current state and the action.
Initial State: The starting value of the state.

Understanding these concepts is essential to using useReducer effectively.

How Does useReducer Work?

The useReducer Hook follows a structured process whenever a user performs an action.

The user interacts with the application.
The component dispatches an action.
React processes the action using the reducer function.
The reducer calculates and returns the next state.
React renders the component using the updated state.

The process can be summarized as:

User Action → Dispatch → Reducer → New State → UI Update

For example, in a counter application, clicking the Increment button dispatches an increment action. The reducer receives the current count and the action, calculates the next count, and returns it.

If the current count is 5, the reducer returns 6. React then updates the displayed count.

Understanding the Reducer Function

A reducer function is the core part of useReducer. It accepts two parameters: the current state and an action.

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

    case "decrement":
      return state - 1;

    default:
      return state;
  }
}

In this example, the reducer handles two actions.

When the action type is "increment", the reducer increases the state by one.
When the action type is "decrement", the reducer decreases the state by one.
The default case returns the current state if the action type is not recognized.

A reducer should be a pure function. It should calculate the next state from its inputs without modifying the existing state or performing side effects such as API requests.

Real-World Applications of useReducer

The useReducer Hook is useful in applications where state changes depend on different user actions.

1. Shopping Cart Management

An e-commerce application may need to add products, remove products, increase quantities, decrease quantities, and clear the cart.

These operations can be represented as different actions.

For example:

dispatch({
  type: "ADD_TO_CART",
  payload: product
});

Here, the action contains a type and a product object.

The reducer can check whether the product already exists in the cart. If it does, the reducer can increase its quantity. Otherwise, it can add the product to the cart.

Using useReducer helps organize these related operations in one place.

2. Form Management

A registration form may contain a username, email address, password, and submission status.

A reducer can handle actions such as updating individual fields, clearing the form, and recording submission results.

For example:

dispatch({
  type: "UPDATE_EMAIL",
  payload: "user@example.com"
});

This approach can make complex form-state transitions easier to organize.

3. Game State Management

A game might track the player's score, remaining lives, and whether the game has ended.

Actions such as "INCREASE_SCORE", "LOSE_LIFE", and "RESTART_GAME" can be handled by a reducer.

This keeps the rules for updating the game state together, making them easier to understand and maintain.

Conclusion

The useReducer Hook is an important part of React state management. It allows developers to manage state through actions and a reducer function, providing a structured approach to handling complex state transitions.

By understanding state, actions, dispatch, and reducers, developers can build applications with more organized state-update logic.

Although useState remains an excellent choice for simple state management, useReducer can be particularly useful for applications such as shopping carts, complex forms, and games.

useContext in React

ABISHEK M — Sat, 10 Oct 2026 17:32:42 +0000

Introduction

React is a popular JavaScript library used to build interactive user interfaces. In React applications, components often need to share data with one another. Usually, data is passed from a parent component to a child component using props. However, when an application contains many nested components, passing props through every intermediate component can make the code difficult to manage. This problem is called prop drilling.

To solve this problem, React provides a Hook called useContext. It allows components to access shared data without manually passing props through every intermediate component. In this blog, we will learn what useContext is, how it works, and where it can be used in real-world applications.

What Is useContext in React?

useContext is a React Hook that allows a component to read a value from React Context. Context provides a way to share data across multiple components without explicitly passing props at every level.

For example, in an e-commerce website, the Navbar, Products page, and Cart page may all need access to the same cart information. Instead of passing cart data through multiple components, we can use Context to make that information available to the components that need it.

The basic syntax is:

const value = useContext(MyContext);

Here, MyContext is the Context object from which the component reads its value.

How Does useContext Work?

Using Context generally involves three steps.

1. Create a Context

First, create a Context object using the createContext() function.

import { createContext } from "react";

export const UserContext = createContext();

This creates a Context object that can be used to share information between components.

2. Provide the Data

Next, use the Context Provider to make a value available to descendant components.

<UserContext.Provider value="Abishek">
  <Home />
</UserContext.Provider>

In this example, the Provider makes the value "Abishek" available to components rendered inside it.

3. Access the Data Using useContext

Finally, use the useContext() Hook to access the shared value.

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

function Home() {
  const username = useContext(UserContext);

  return <h1>Welcome, {username}!</h1>;
}

The output will be:

Welcome, Abishek!

The useContext(UserContext) expression reads the value supplied by the nearest matching Provider above the component. If no matching Provider exists, React returns the default value specified when creating the Context.

Difference Between Props and useContext

Props are used to pass data from a parent component to its children. Context allows components to access shared values from a Provider higher in the component tree.

For simple parent-child communication, props are usually sufficient. However, when multiple components need the same information, Context can help reduce unnecessary prop passing and make the code easier to maintain.

Common Use Cases of useContext

The useContext Hook can be used in many real-world applications:

Authentication: Share logged-in user information across components.
Theme management: Provide dark mode or light mode preferences throughout an application.
Shopping cart: Share cart information between the Navbar, Products page, and Cart page.
Language preferences: Make the selected language available to different components.
Application settings: Share common configuration values across the component tree.

Important Things to Remember

Although useContext is useful, there are a few important points to understand.

Context does not automatically manage state. It can be combined with useState or useReducer to manage changing data.
Components must be within the relevant Provider's scope to receive its value.
When a Provider's value changes, components consuming that context may re-render.
Context does not automatically save data permanently. Data stored only in React state can be lost when the page is refreshed.
Context should be used appropriately. Props may be simpler when data only needs to move between a parent and a child.

Conclusion

The useContext Hook is an important feature in React that makes sharing data between components easier. It helps reduce prop drilling and allows multiple components to access shared information without manually passing props through every intermediate component.

To use Context effectively, developers should understand three main concepts: creating a Context with createContext(), providing a value through a Provider, and accessing the value using useContext().

When combined with useState or useReducer, Context can be useful for building applications such as e-commerce websites, authentication systems, and theme management applications.

In simple terms, useContext allows React components to access shared data without passing props through every intermediate component. Understanding this Hook helps developers build more organized and maintainable React applications.

'map()' Method

ABISHEK M — Fri, 09 Oct 2026 18:16:48 +0000

Introduction

The map() method is one of the most widely used array methods in JavaScript. It enables developers to transform data by executing a callback function on every element of an array and returning a new array containing the results. Unlike methods that modify the original array, map() preserves the original array when used without mutating operations inside its callback.

The map() method plays an important role in modern web development, particularly when processing API responses, transforming datasets, and rendering dynamic user interfaces in React applications.

Syntax

array.map((element, index, array) => {
  return transformedValue;
});

The callback function accepts three parameters:

element: The current element being processed.
index: The index of the current element.
array: The original array being traversed.

The index and array parameters are optional.

Basic Example

Consider an array of numbers where each element needs to be multiplied by two.

const numbers = [10, 20, 30, 40];

const doubledNumbers = numbers.map((num) => num * 2);

console.log(doubledNumbers);

Output:

[20, 40, 60, 80]

In this example, map() processes each number, applies the multiplication operation, and stores the returned values in a new array. The original numbers array remains unchanged.

Working with Arrays of Objects

In real-world applications, data is frequently represented as arrays of objects. The map() method makes it easy to extract specific properties or transform object data.

const products = [
  { id: 1, name: "Laptop", price: 50000 },
  { id: 2, name: "Mobile", price: 20000 },
  { id: 3, name: "Headphones", price: 2000 }
];

const productNames = products.map((product) => product.name);

console.log(productNames);

Output:

["Laptop", "Mobile", "Headphones"]

This approach is useful for extracting product names, preparing API data, and creating simplified datasets for further processing.

Using `map()` in React

In React, map() is commonly used to render lists of elements dynamically.

function ProductList() {
  const products = [
    { id: 1, name: "Laptop" },
    { id: 2, name: "Mobile" },
    { id: 3, name: "Headphones" }
  ];

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

export default ProductList;

Here, each product object is transformed into a paragraph element. The unique key prop helps React identify list elements when the data changes.

Conclusion

The JavaScript map() method is an essential tool for efficient data transformation. Its ability to create new arrays from existing data makes it valuable in API integration, data processing, and React development. By understanding its syntax, behavior, and practical applications, developers can write cleaner, more predictable, and maintainable JavaScript code.

Axios in React

ABISHEK M — Tue, 06 Oct 2026 18:29:17 +0000

When building a React application, we often need to communicate with a backend server or an API. For example, an e-commerce application may need to fetch products, add new products, update product information, or delete products. To perform these operations, we need to send HTTP requests. Axios is a popular JavaScript library used for this purpose.

Axios is a promise-based HTTP client that allows frontend applications to communicate with APIs and backend servers. We can use Axios with JavaScript, React, Node.js, and other JavaScript-based applications.

First, we need to install Axios in our React project:

npm install axios

Then we import it into our component:

import axios from "axios";

Axios supports different HTTP methods. The most commonly used methods are GET, POST, PUT, PATCH, and DELETE.

A GET request is used to retrieve data:

const response = await axios.get("/products");
console.log(response.data);

A POST request is used to create new data:

axios.post("/products", {
  title: "Laptop",
  price: 50000
});

A PUT or PATCH request is used to update existing data, while DELETE is used to remove data:

axios.delete("/products/1");

Axios is commonly used with React's useEffect hook when we need to fetch data when a component loads. We can also use async/await with Axios to make asynchronous API calls easier to understand. Since API requests can fail, we normally use try...catch for error handling.

The easiest way to remember Axios is to think of it as a messenger between React and the backend.

React
  ↓
Axios
  ↓
API / Server
  ↓
Database
  ↓
API / Server
  ↓
Axios
  ↓
React

In short, Axios makes API communication easier in React applications and is an important tool to learn when working with frontend applications and backend APIs.

useRef in React

ABISHEK M — Mon, 05 Oct 2026 17:18:33 +0000

useRef is one of the important Hooks in React. It is mainly used to store a value that persists between renders without causing a re-render. It can also be used to directly access a DOM element.

To use useRef, we need to import it from React:

import { useRef } from "react";

What is useRef?

useRef creates a reference object that contains a property called current.

const myRef = useRef(initialValue);

For example:

const countRef = useRef(0);

Conceptually, React creates an object like:

{
  current: 0
}

We can access or modify the value using:

countRef.current

The important point is that changing ref.current does not cause the component to re-render.

Accessing DOM Elements

One of the most common uses of useRef is accessing a DOM element directly.

For example, suppose we have an input field and want to focus it when a button is clicked.

import { useRef } from "react";

function App() {
  const inputRef = useRef(null);

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

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

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

export default App;

Here, inputRef is attached to the input using:

<input ref={inputRef} />

After React renders the input, inputRef.current refers to that actual DOM element.

Therefore:

inputRef.current.focus();

directly focuses the input.

Real-world example

Think about a TV remote. The remote is used to directly control a particular TV.

Similarly:

useRef
   ↓
Reference
   ↓
DOM element
   ↓
Direct interaction

useRef Does Not Cause Re-render

This is the most important difference between useRef and useState.

With useState:

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

If we do:

setCount(10);

React updates the state and re-renders the component.

But with useRef:

const countRef = useRef(0);

countRef.current = 10;

The value changes, but React does not re-render the component.

We can remember it like this:

useState
value changes
     ↓
re-render
     ↓
UI updates


useRef
value changes
     ↓
no re-render

useRef vs useState

Both useState and useRef can store values, but they behave differently.

useState	useRef
Stores state	Stores a mutable reference
Changing state causes re-render	Changing `current` does not cause re-render
Used when UI needs to update	Used when UI doesn't need to update
Updated using setter function	Updated using `.current`
Example: counter displayed on screen	Example: timer ID or DOM reference

For example:

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

Changing:

setCount(5);

causes a re-render.

Whereas:

const countRef = useRef(0);

Changing:

countRef.current = 5;

does not cause a re-render.

Important Point About `.current`

Whenever you use useRef, remember the current property.

const myRef = useRef(null);

The value is accessed using:

myRef.current

For example:

const countRef = useRef(0);

console.log(countRef.current);

Output:

We can change it:

countRef.current = 10;

Now:

console.log(countRef.current);

Output:

But React does not re-render just because current changed.

Conclusion

useRef is a React Hook used to create a persistent reference. It is especially useful when we need to access a DOM element directly or store a value that should survive between renders without causing a re-render.

The easiest way to remember useRef is:

useRef = Remember a value + Access a reference + No re-render

The two most important ideas are:

useRef
   ↓
current
   ↓
1. DOM reference
2. Persistent value

And the most important difference is:

useState → value change → re-render

useRef → current change → no re-render

Once you understand these two concepts, useRef becomes much easier to use in React applications.

useEffect in React

ABISHEK M — Sat, 03 Oct 2026 16:47:16 +0000

React provides several built-in Hooks that help us manage different aspects of a component. One of the most commonly used Hooks is useEffect. It is mainly used to perform side effects in a React component.

What is `useEffect`?

useEffect is a React Hook that allows us to perform an operation after a component renders.

The basic syntax is:

useEffect(() => {
  // side effect code
});

To use useEffect, we need to import it from React:

import { useEffect } from "react";

What is a Side Effect?

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

Common examples include:

Fetching data from an API
Updating localStorage
Setting a timer
Adding event listeners
Updating the browser document title
Subscribing to external services

For example:

useEffect(() => {
  document.title = "My React App";
});

Here, changing the browser tab title is a side effect.

Dependency Array

The dependency array controls when the effect should run.

1. Without a Dependency Array

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

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

2. Empty Dependency Array

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

An empty dependency array means the effect runs after the initial render. This is commonly used for operations that need to happen when a component starts.

3. With Dependencies

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

Here, count is a dependency. The effect runs after the initial render and again when the value of count changes.

Multiple dependencies can also be used:

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

The effect can run when either count or name changes.

`useState` and `useEffect`

useEffect is frequently used together with useState.

import { useState, useEffect } from "react";

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

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

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

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

When the button is clicked, count changes. React re-renders the component, and because count is a dependency, the effect runs again.

The basic flow is:

State changes
     ↓
React re-renders
     ↓
UI updates
     ↓
useEffect runs

Cleanup Function

Some effects create resources that need to be stopped or removed. For example, timers and event listeners.

useEffect allows us to return a cleanup function:

useEffect(() => {
  const timer = setInterval(() => {
    console.log("Running...");
  }, 1000);

  return () => {
    clearInterval(timer);
  };
}, []);

The cleanup function helps prevent unnecessary timers, listeners, or subscriptions from continuing after they are no longer needed.

Real-World Example

A common example is saving data to localStorage.

useEffect(() => {
  localStorage.setItem("tasks", JSON.stringify(tasks));
}, [tasks]);

Whenever the tasks state changes, the latest tasks are stored in localStorage.

Important Rules to Remember

There are three important patterns to remember:

// 1. No dependency array
useEffect(() => {});

Runs after every render.

// 2. Empty dependency array
useEffect(() => {}, []);

Runs after the initial render.

// 3. Dependency array
useEffect(() => {}, [count]);

Runs after the initial render and when count changes.

Conclusion

useEffect is an important React Hook for handling side effects. It is especially useful when working with APIs, timers, localStorage, event listeners, subscriptions, and other external operations.

The easiest way to understand useEffect is to remember:

Effect = What should happen?
Dependency array = When should it happen?

Once you understand the dependency array and cleanup function, you have a strong foundation for using useEffect in real React applications.

Prop Drilling in React

ABISHEK M — Fri, 02 Oct 2026 17:52:31 +0000

In React, props are used to pass data from a parent component to a child component. Props are an important part of React because they allow components to share information. However, when data needs to travel through many levels of components, it can lead to a situation called Prop Drilling.

Prop drilling means passing data from a parent component to a deeply nested child component through intermediate components, even when those intermediate components do not need the data.

For example, imagine the component structure:

App
 ↓
Parent
 ↓
Child
 ↓
GrandChild

Suppose the App component has a username that is required by GrandChild.

function App() {
  const username = "Abishek";

  return <Parent username={username} />;
}

The Parent component receives the username and passes it to Child:

function Parent({ username }) {
  return <Child username={username} />;
}

Then Child passes it to GrandChild:

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

Finally, GrandChild uses the username:

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

Here, Parent and Child don't actually use the username. They only pass it to the next component. This is called prop drilling.

Prop drilling is not always a problem. If data only passes through one or two components, normal props are simple and useful. However, when data needs to pass through many levels, the code can become difficult to read, maintain, and modify.

React provides solutions such as the Context API to avoid unnecessary prop drilling. Context allows deeply nested components to access shared data without manually passing props through every intermediate component.

In simple terms:

Props: Parent → Child
Prop Drilling: Parent → Child → Grandchild → Deep Child

Understanding prop drilling helps developers decide when normal props are sufficient and when a different approach to sharing data would make the application easier to manage.

Props in React – Introduction

ABISHEK M — Thu, 01 Oct 2026 18:27:56 +0000

When building React applications, we often create multiple components. These components need to communicate with each other and share data. Props are one of the most important concepts used for passing data between React components.

The word Props is short for Properties. Props allow us to pass data from a parent component to a child component.

What are Props?

Props are read-only data passed from a parent component to a child component.

For example, imagine a Student component. Instead of writing a separate component for every student, we can create one reusable Student component and pass different student information using props.

function App() {
  return <Student name="Abishek" />;
}

function Student(props) {
  return <h1>Hello {props.name}</h1>;
}

Here, name="Abishek" is a prop.

The Student component receives this data through the props object. We can access the value using:

props.name

The output will be:

Hello Abishek

How Props Work

The basic data flow looks like this:

Parent Component
       ↓
     Props
       ↓
Child Component

For example:

function App() {
  return <Student name="Abishek" age={21} />;
}

function Student(props) {
  return (
    <div>
      <h1>{props.name}</h1>
      <p>Age: {props.age}</p>
    </div>
  );
}

In this example, the App component is the parent, while Student is the child.

The parent passes two props:

name="Abishek"
age={21}

The child receives them through props.

Conceptually, the props object looks like:

{
  name: "Abishek",
  age: 21
}

Why Do We Use Props?

Props make React components reusable and dynamic.

For example, we can use the same Student component for different students:

function App() {
  return (
    <>
      <Student name="Abishek" age={21} />
      <Student name="Rahul" age={22} />
      <Student name="Arun" age={20} />
    </>
  );
}

We don't need to create three different components. The same component can display different information based on the props it receives.

Props are Read-Only

One important rule is that props should not be modified by the child component.

The child can read and use props, but it should not directly change them.

function Student(props) {
  // props.name = "Rahul"; ❌ Don't modify props
}

If data needs to be changed, React provides other mechanisms such as state and event handlers.

Real-World Example

Think about an online shopping website.

A reusable Product component might receive:

Product Name
Price
Image
Rating

Different products can pass different values to the same component.

<Product name="Laptop" price={50000} />
<Product name="Phone" price={25000} />
<Product name="Headphones" price={3000} />

The Product component can then display the information it receives.

This is one of the main reasons props are useful in React: one component can be reused with different data.

Props vs State

Props and state are both important in React, but they have different purposes.

Props	State
Passed from parent to child	Managed inside a component
Read-only	Can be updated
Used to pass data	Used to manage changing data
Makes components reusable	Makes components interactive

Conclusion

Props are a fundamental concept in React. They allow components to communicate and share data, mainly by passing information from a parent component to a child component. Props also make components reusable because the same component can display different information depending on the values it receives.

A simple way to remember props is:

Props = Data passed from Parent → Child

useState in React

ABISHEK M — Wed, 30 Sep 2026 17:47:35 +0000

When building interactive web applications with React, we often need to store values that can change over time. For example, a counter value can increase, a user's name can change, or a login status can switch between logged in and logged out. React provides a Hook called useState to handle these changing values.

What is useState?

useState is a React Hook that allows functional components to create and manage state.

State is a value that a component needs to remember between renders. When the state changes, React re-renders the component and updates the user interface.

The basic syntax is:

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

For example:

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

Here, count is the current state value, setCount is the function used to update the state, and 0 is the initial value.

Importing useState

Before using useState, we need to import it from React:

import { useState } from "react";

We can then use it inside a functional component.

Understanding State and Setter Function

Consider this example:

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

Initially, the value of count is 0.

If we want to change it to 5, we should use:

setCount(5);

After the state update, React re-renders the component and the new value becomes available.

We should not directly modify the state like this:

count = 5; // ❌

Instead, we should use the setter function:

setCount(5); // ✅

The setter function tells React that the state needs to be updated.

Example: Counter

A simple counter is one of the best ways to understand useState.

import { useState } from "react";

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

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

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

export default App;

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

The flow is:

User clicks button
        ↓
setCount()
        ↓
State changes
        ↓
React re-renders
        ↓
UI updates

What is Re-rendering?

A re-render means React runs the component again to determine what the updated user interface should look like.

For example, if:

count = 0

and we call:

setCount(1);

React schedules the state update and renders the component again with the updated state.

The browser does not perform a complete page refresh. React updates the necessary part of the UI.

State as a Snapshot

React treats state as a snapshot for each render. This means the value of a state variable belongs to the particular render in which it was read.

For example:

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

  function handleClick() {
    setCount(count + 1);
    console.log(count);
  }

  return <button onClick={handleClick}>{count}</button>;
}

If count is 0 in the current render, calling setCount(1) does not immediately change the count variable inside that same function execution. The current render still sees 0. React processes the update and provides 1 in the next render.

This concept is often described as state being a snapshot.

Functional State Updates

Sometimes the new state depends on the previous state. In such situations, we can use a functional updater:

setCount(prev => prev + 1);

Here, prev represents the state value React provides to the updater function.

For example:

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

If the initial value is 0, React processes the updates sequentially:

0 → 1 → 2

Therefore, the final value is 2.

The functional updater is especially useful when multiple updates depend on the previous state.

Array Destructuring in useState

The syntax:

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

uses JavaScript array destructuring.

The first value represents the current state, while the second value represents the setter function.

For example:

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

Here:

name → current state value
setName → function used to update the state
"" → initial state value

The names can be changed depending on what the state represents.

Examples:

const [age, setAge] = useState(21);

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

const [isLoggedIn, setIsLoggedIn] = useState(false);

useState with Input Fields

useState is commonly used with form inputs.

For example:

import { useState } from "react";

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

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

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

When the user types something into the input, onChange runs.

event.target.value gives the current value of the input.

For example, if the user types:

Abi

then:

event.target.value

contains:

"Abi"

and:

setName(event.target.value);

updates the state.

The flow becomes:

User types
    ↓
onChange
    ↓
event.target.value
    ↓
setName()
    ↓
State changes
    ↓
Re-render
    ↓
UI updates

This pattern is commonly used in login forms, signup forms, search boxes, todo applications, and many other React applications.

Different Types of State

useState can store different types of JavaScript values.

Number

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

String

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

Boolean

const [isLoggedIn, setIsLoggedIn] = useState(false);

Array

const [todos, setTodos] = useState([]);

Object

const [user, setUser] = useState({
  name: "",
  age: 0
});

The type of state depends on what information the component needs to remember.

Why is useState Important?

Without state, creating interactive React applications would be much more difficult. useState allows components to respond to user actions and remember changing information.

For example, state can be used for:

Counter applications
Login forms
Signup forms
Todo lists
Search boxes
Dark mode
Dropdown menus
Like buttons
Shopping carts
Form validation

Conclusion

useState is one of the most important concepts for anyone learning React. It allows functional components to store values that can change over time and update the user interface when those values change.

The basic pattern is:

const [value, setValue] = useState(initialValue);

The key ideas to remember are:

useState()
    ↓
Creates state
    ↓
State has a current value
    ↓
Setter function updates the state
    ↓
React re-renders
    ↓
UI displays the updated state

Once you understand useState, concepts such as forms, event handling, conditional rendering, todo applications, and many other React features become much easier to understand.

Components in React

ABISHEK M — Tue, 29 Sep 2026 18:00:37 +0000

React is a JavaScript library used to build user interfaces for web applications. One of the most important concepts in React is the component. A component is a small, reusable part of a user interface. Instead of creating an entire application in one large file, React allows developers to divide the application into smaller components.

For example, a website can contain a Navbar, Sidebar, Button, Product Card, Login Form, and Footer. Each of these can be created as a separate component. These components can then be combined to create a complete web application.

A React component is commonly created using a JavaScript function. For example:

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

Here, Welcome is a component. It returns JSX that displays a heading on the webpage.

Components are useful because they are reusable. For example, if we create a Button component, we can use it multiple times in our application without writing the same code again.

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

We can use this component wherever we need:

<Button />
<Button />
<Button />

Another important feature is that components can be nested. One component can contain other components. For example, an App component can contain Navbar, MainContent, and Footer components.

Components also make applications easier to understand, maintain, debug, and scale. In real-world projects, developers usually organize components into separate files such as Navbar.jsx, ProductCard.jsx, and Footer.jsx.

Component names normally start with a capital letter, such as Navbar, ProductCard, and LoginForm. This helps React distinguish custom components from regular HTML elements.

In simple terms, a component is like a building block of a React application. Multiple small components can be combined to create a complete and powerful web application.

In short: React application = Collection of reusable components.

Virtual DOM in React

ABISHEK M — Sat, 26 Sep 2026 17:09:45 +0000

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

What is DOM?

DOM stands for Document Object Model. When a browser loads an HTML page, it creates a tree-like structure representing the HTML elements. For example, a page containing a heading, paragraph, and button will have these elements represented in the DOM.

When the DOM is updated, the browser may need to perform various operations to display the changes on the screen. React provides a way to efficiently manage these UI updates using the Virtual DOM.

What is Virtual DOM?

The Virtual DOM is a lightweight JavaScript representation of the real DOM. React maintains this representation in memory.

When the data or state of a React component changes, React creates a new Virtual DOM representation. It then compares the new representation with the previous one to identify what has changed. This process is known as reconciliation.

After finding the changes, React updates the required parts of the real DOM instead of unnecessarily recreating the entire UI.

How Virtual DOM Works

The basic process is:

State/Data Change → New Virtual DOM → Compare with Previous Virtual DOM → Identify Changes → Update Real DOM

For example, suppose a counter displays:

<h1>Count: 0</h1>

After clicking a button, it becomes:

<h1>Count: 1</h1>

React identifies that only the displayed count has changed and updates the necessary part of the UI.

Real-World Example

Imagine a house with many rooms. If you want to change only a light bulb in one room, you don't need to rebuild the entire house. You only change that particular bulb.

Similarly, React uses its reconciliation process to determine which parts of the UI need to change.

Benefits of Virtual DOM

Helps React efficiently manage UI updates.
Makes UI development easier through declarative programming.
Reduces unnecessary DOM operations.
Works well with frequently changing interfaces.
Helps React manage complex applications.

Virtual DOM vs Real DOM

Real DOM	Virtual DOM
Represents the actual webpage	JavaScript representation of the UI
Managed by the browser	Managed by React
Directly affects the webpage	Used to determine required UI changes
DOM operations can be expensive	Helps React manage updates efficiently

Conclusion

The Virtual DOM is an important concept behind React's UI update mechanism. Instead of manually deciding which DOM elements should change, developers update the state, and React handles the process of determining and applying the necessary UI changes. Understanding the Virtual DOM also helps beginners understand concepts such as state, re-rendering, and reconciliation in React.

DEV Community: ABISHEK M

'useMemo' Hook in React

What is useMemo?

Why Do We Need useMemo?

Understanding the Dependency Array

When Should We Use useMemo?

Conclusion

useReducer Hook in React

Introduction

What Is the useReducer Hook?

Syntax of useReducer

How Does useReducer Work?

Understanding the Reducer Function

Real-World Applications of useReducer

1. Shopping Cart Management

2. Form Management

3. Game State Management

Conclusion

useContext in React

Introduction

What Is useContext in React?

How Does useContext Work?

1. Create a Context

2. Provide the Data

3. Access the Data Using useContext

Difference Between Props and useContext

Common Use Cases of useContext

Important Things to Remember

Conclusion

'map()' Method

Introduction

Syntax

Basic Example

Working with Arrays of Objects

Using map() in React

Conclusion

Axios in React

useRef in React

What is useRef?

Accessing DOM Elements

Real-world example

useRef Does Not Cause Re-render

useRef vs useState

Important Point About .current

Conclusion

useEffect in React

What is useEffect?

What is a Side Effect?

Dependency Array

1. Without a Dependency Array

2. Empty Dependency Array

3. With Dependencies

useState and useEffect

Cleanup Function

Real-World Example

Important Rules to Remember

Conclusion

Prop Drilling in React

Props in React – Introduction

What are Props?

How Props Work

Why Do We Use Props?

Props are Read-Only

Real-World Example

Props vs State

Conclusion

useState in React

What is useState?

Importing useState

Understanding State and Setter Function

Example: Counter

What is Re-rendering?

State as a Snapshot

Functional State Updates

Array Destructuring in useState

useState with Input Fields

Different Types of State

Number

String

Boolean

What is `useMemo`?

Why Do We Need `useMemo`?

When Should We Use `useMemo`?

Using `map()` in React

Important Point About `.current`

What is `useEffect`?

`useState` and `useEffect`