DEV Community: Abimanyu P

Adavanced React Hooks

Abimanyu P — Wed, 14 Oct 2026 16:51:47 +0000

Advanced React Hooks

React provides several hooks to help developers manage complex state and optimize component performance. Three useful hooks are useReducer, useMemo, and useCallback. Although they serve different purposes, they help make React applications more predictable, efficient, and easier to maintain.

1. useReducer — Managing Complex State

The useReducer hook is an alternative to useState. It is especially useful when state updates involve multiple actions or complex logic.

Example: Counter using useReducer

import { useReducer } from "react";

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    case "reset":
      return { count: 0 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <h2>Count: {state.count}</h2>
      <button onClick={() => dispatch({ type: "increment" })}>
        Increment
      </button>
      <button onClick={() => dispatch({ type: "decrement" })}>
        Decrement
      </button>
      <button onClick={() => dispatch({ type: "reset" })}>
        Reset
      </button>
    </div>
  );
}

How it works: The reducer function determines how the state changes based on an action. The dispatch function sends an action to the reducer, which returns the next state.

When to use it: Use useReducer when state has multiple related values, several update actions, or logic that becomes difficult to manage with multiple useState calls.

2. useMemo — Caching Expensive Calculations

The useMemo hook caches the result of a calculation between renders. React recalculates the value when one of its dependencies changes.

Example: Calculating a total

import { useMemo, useState } from "react";

function ShoppingCart() {
  const [price, setPrice] = useState(100);
  const [quantity, setQuantity] = useState(2);

  const total = useMemo(() => {
    console.log("Calculating total...");
    return price * quantity;
  }, [price, quantity]);

  return (
    <div>
      <h2>Total: ₹{total}</h2>
      <button onClick={() => setPrice(price + 10)}>
        Increase Price
      </button>
      <button onClick={() => setQuantity(quantity + 1)}>
        Increase Quantity
      </button>
    </div>
  );
}

How it works: React recalculates total when price or quantity changes. If the component renders again without either dependency changing, React can reuse the cached result.

When to use it: Use useMemo for expensive calculations or when maintaining a stable object or value can prevent unnecessary work. For simple calculations, it is usually unnecessary.

3. useCallback — Caching Function References

The useCallback hook caches a function reference between renders until its dependencies change. It is particularly useful when passing callbacks to memoized child components.

Example: Handling a button click

import { useCallback, useState } from "react";

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

  const increment = useCallback(() => {
    setCount((previous) => previous + 1);
  }, []);

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

How it works: React reuses the same increment function reference across renders because its dependency list is empty. The functional state update ensures the callback uses the latest state without needing count as a dependency.

When to use it: Use useCallback when a stable function reference helps avoid unnecessary renders in memoized child components or when a function is a dependency of another hook. It is not necessary for every event handler.

Conclusion

These three React hooks solve different problems:

useReducer manages state transitions through a reducer function and dispatched actions.
useMemo caches the result of a calculation.
useCallback caches a function reference.

Understanding when to use each hook helps you write cleaner React code and optimize performance when necessary. However, these hooks are optimization and state-management tools, not requirements for every component. Start with simple solutions, measure performance when needed, and introduce advanced hooks where they provide a clear benefit.

State Lifting in React

Abimanyu P — Sat, 10 Oct 2026 15:45:49 +0000

State Lifting in React

When building a React application, different components often need to share the same data. Normally, each component can manage its own state using the useState hook. However, when multiple components need to access or update the same data, managing separate states can create synchronization problems. State lifting solves this problem by moving state to the nearest common parent component and sharing it with child components through props.

Why Do We Need State Lifting?

Consider a shopping application with two components:
Product: Allows users to add products to the cart.
Cart: Displays the number of products added.
If both components maintain separate states, updating the product count in one component will not automatically update the other.
To solve this problem, we can move the shared state to their common parent component.
The parent manages the state and passes the required data and functions to its children through props.

State Lifting with an Example

Consider the following component structure, where App is the parent component and Counter and Display are its children.

import { useState } from "react";

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

  return (
    <div>
      <Counter count={count} setCount={setCount} />
      <Display count={count} />
    </div>
  );
}

function Counter({ count, setCount }) {
  return (
    <div>
      <h2>Counter: {count}</h2>

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

function Display({ count }) {
  return <h2>Display: {count}</h2>;
}

export default App;

In this example, the App component creates the state using the useState hook. It passes the count value and setCount function to the Counter component and passes the count value to the Display component. When the user clicks the Increment button, the setCount function updates the state owned by App. React then re-renders the relevant components, allowing both components to display the updated count.

How Does State Lifting Work?

The execution flow of state lifting involves three important steps:

State creation: The parent component creates and manages the shared state using useState.
Passing props: The parent passes the state value and, when necessary, its setter function to child components.
State update: A child component calls the setter function to request an update. React updates the parent's state and re-renders the components that depend on the updated value.

The important point is that the child component does not directly modify the parent's state. Instead, it calls the setter function provided through props. The parent remains the owner of the state, maintaining a single source of truth for the shared data.

When Should We Use State Lifting?

State lifting is useful whenever multiple components need to work with the same data.
For example, a search input and a search results component can share a search query, while a product filter and a product list can share the selected category. Similarly, a shopping cart can share its data between product components and a cart summary.
However, state should not always be moved to the top-level component. It is generally better to keep state as close as practical to the components that use it. When many components across different levels of the component tree need the same data, the useContext hook can help avoid passing props through multiple intermediate components.

Axios in React

Abimanyu P — Wed, 07 Oct 2026 04:29:41 +0000

What is Axios?

Axios is a JavaScript library used to make HTTP requests. In a React application, it is commonly used to communicate with APIs and backend servers. Through Axios, a React application can send requests to a server and receive data from it.

For example, a React application may need to get a list of movies from an API, send a new user to a backend, update existing data, or delete a record. Axios provides methods such as get(), post(), put(), patch(), and delete() for these operations.

The basic flow can be understood as:

React Application
       ↓
     Axios
       ↓
   HTTP Request
       ↓
      API
       ↓
   HTTP Response
       ↓
     Axios
       ↓
React Application

Axios itself is not a database and does not permanently store the data. Its main responsibility is communication between the application and the server.

Installing Axios

Axios can be installed in a React project using:

npm install axios

After installing it, import Axios into the component or JavaScript file where it is required:

import axios from "axios";

Now Axios methods can be used to communicate with APIs.

Axios GET Request

The GET method is used when we want to retrieve data from a server.

const response = await axios.get("https://example.com/users");

console.log(response.data);

Axios returns a response object that contains information such as the response data, status, and headers. The actual data returned by the server is normally accessed using response.data.

For example, if the API returns an array of users:

[
  {
    id: 1,
    name: "John"
  },
  {
    id: 2,
    name: "David"
  }
]

then response.data contains this array.

Using GET in React

When data needs to be fetched when a component loads, Axios is commonly used inside useEffect().

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

function App() {

  const [users, setUsers] = useState([]);

  useEffect(() => {

    const getUsers = async () => {
      const response = await axios.get(
        "https://example.com/users"
      );

      setUsers(response.data);
    };

    getUsers();

  }, []);

  return (
    <div>
      {users.map((user) => (
        <div key={user.id}>
          <h2>{user.name}</h2>
        </div>
      ))}
    </div>
  );
}

Initially, users is an empty array. The component renders, and then the effect runs. Axios sends the GET request. After the server responds, setUsers() updates the state. React then re-renders the component, and map() creates the UI for each user.

The flow is:

Component renders
       ↓
useEffect runs
       ↓
Axios sends GET request
       ↓
Server sends response
       ↓
response.data
       ↓
setUsers()
       ↓
React re-renders
       ↓
map() creates UI

Mapping API Data in React

APIs frequently return an array of objects. React can use the JavaScript map() method to convert every object into JSX.

Suppose the API returns:

[
  {
    imdbID: "tt001",
    Title: "Avatar"
  },
  {
    imdbID: "tt002",
    Title: "Titanic"
  }
]

It can be displayed like this:

<ul>
  {movie.map((x) => (
    <li key={x.imdbID}>
      <h1>{x.Title}</h1>
    </li>
  ))}
</ul>

Here, map() goes through the array one object at a time. During each iteration, x represents the current movie object.

For the first object:

x = {
  imdbID: "tt001",
  Title: "Avatar"
}

Therefore:

x.imdbID

gives "tt001" and:

x.Title

gives "Avatar".

The same process happens for every object in the array.

The key helps React identify each item in the list. A unique identifier from the API, such as imdbID, is generally preferable to using the array index.

Axios POST Request

The POST method is generally used to send data to a server, often to create a new resource.

The first argument is the URL, and the second argument is the data that should be sent to the server.

The basic structure is:

axios.post(url, data);

For example, when a user submits a form in React, the form data can be sent using Axios:

const addUser = async () => {

  const user = {
    name: "John",
    age: 22
  };

  const response = await axios.post(
    "https://example.com/users",
    user
  );

  console.log(response.data);
};

Dynamic GET Requests

The URL of a GET request can also be created based on user input.

For example:

const username = "john";

const response = await axios.get(
  `https://example.com/users/${username}`
);

The resulting URL is:

https://example.com/users/john

Template literals are useful for creating dynamic URLs.

Axios also supports query parameters through the params option:

const response = await axios.get(
  "https://example.com/movies",
  {
    params: {
      name: "Avatar"
    }
  }
);

This produces a request containing a query parameter such as:

https://example.com/movies?name=Avatar

Using params is often cleaner than manually constructing a long query string.

Other Axios Methods

Axios supports the common HTTP methods used for CRUD operations.

CREATE → POST
READ   → GET
UPDATE → PUT / PATCH
DELETE → DELETE

For example:

axios.get("/users");
axios.post("/users", user);
axios.put("/users/10", user);
axios.patch("/users/10", { name: "David" });
axios.delete("/users/10");

PUT is generally used to replace or update a resource, while PATCH is generally used for a partial update.

Error Handling

HTTP requests can fail for many reasons. The server may be unavailable, the URL may be incorrect, the user may not be authorized, or the network connection may fail.

Axios requests can be handled using try...catch:

try {

  const response = await axios.get(url);

  console.log(response.data);

} catch (error) {

  console.log(error);

}

Headers

Some APIs require additional information in the request. This information can be sent using HTTP headers.

For example:

axios.get(url, {
  headers: {
    Authorization: `Bearer ${token}`
  }
});

Headers are often used for authentication and other request metadata.

For a POST request, Axios can receive the request data and configuration separately:

axios.post(
  url,
  userData,
  {
    headers: {
      Authorization: `Bearer ${token}`
    }
  }
);

The three arguments are:

URL
 ↓
Data
 ↓
Configuration

Axios Instances

In larger applications, the same API base URL may be used repeatedly. Instead of writing the complete URL every time, an Axios instance can be created.

const api = axios.create({
  baseURL: "https://example.com/api"
});

Now requests can be written as:

api.get("/users");
api.post("/users", user);

This makes API-related code easier to organize and maintain.

useContext Hook in React

Abimanyu P — Mon, 05 Oct 2026 15:34:00 +0000

Context and useContext in React

When building a React application, components often need to share data with other components. Normally, we pass data from a parent component to a child component using props. This works well when the components are close to each other. However, when the data needs to travel through several components before reaching the component that actually needs it, the code can become difficult to manage. This problem is known as prop drilling.

Context provides a way to share data between components without having to pass that data manually through props at every level. You can think of Context as a common place where certain data is made available to a group of components. Any component inside that Context can access the shared data directly, even if there are other components between them.

For example, imagine a component structure where App contains Parent, Parent contains Child, and Child contains Profile. If Profile needs the username stored in App, we would normally have to pass the username from App to Parent, then from Parent to Child, and finally to Profile. Context allows us to avoid this unnecessary chain of props.

What is Context?

Context is a React feature that allows data to be shared across multiple components without explicitly passing it through props.

Common types of information that can be shared through Context include:

Logged-in user information
Application theme
Selected language
Shopping cart data
Application settings

Context is particularly useful when the same data is required by many components at different levels of the component tree.

What is useContext?

useContext is a React Hook that allows a component to read the value stored in a Context.

A Context itself does not automatically provide data to every component. We normally create a Context, provide a value to it using a Provider, and then use useContext inside a component to access that value.

The basic flow is:

createContext()
      ↓
Create a Context
      ↓
Provider
      ↓
Provide shared data
      ↓
useContext()
      ↓
Read the shared data

For example, we can create a Context like this:

const UserContext = createContext();

Then a Provider can make a value available:

<UserContext.Provider value={username}>
    <App />
</UserContext.Provider>

A component inside the Provider can then access the value using:

const username = useContext(UserContext);

The important idea is that the component does not need to receive username through props. It gets the value directly from the Context.

complete example:

import { createContext, useContext } from "react";

const UserContext = createContext();

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

  return (
    <UserContext.Provider value={username}>
      <Parent />
    </UserContext.Provider>
  );
}

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

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

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

  return <h1>Hello {username}</h1>;
}

export default App;

Key Points to Remember

Props are used to pass data from a parent to a child.
Prop drilling happens when data is passed through components that do not actually need that data.
Context provides a way to share data with multiple components.
A Provider supplies the data to the components inside it.
useContext allows a component to read the data from a Context.
Context is useful for data that needs to be accessed by many components at different levels.
Context does not replace useState; they solve different problems. useState manages state, while Context provides a way to share values across components.

The simplest way to remember it is: Context makes shared data available, and useContext allows a component to access that shared data.

useRef in React

Abimanyu P — Fri, 02 Oct 2026 15:17:14 +0000

Understanding useRef in React

useRef is one of the built-in Hooks in React that allows us to store a value that persists between component renders. The main difference between useRef and useState is that changing a ref value does not cause the component to re-render. Because of this, useRef is useful when we want React to remember a value, but we do not want that value change to update the UI. A ref can also be used to directly access a DOM element, such as an input, button, or div.

How useRef Works

We create a ref by calling useRef():

const inputRef = useRef(null);

useRef() returns an object containing a current property. We access or change the stored value using .current.

inputRef.current

One important thing to understand is that useRef does not store the value directly in the variable itself. Instead, the value is stored inside the current property. The ref object remains the same between renders, which means the value stored in .current can be remembered even when the component renders again.

A common use of useRef is accessing a DOM element. In normal JavaScript, we can use document.getElementById() to get a reference to an HTML element. React provides ref as a cleaner way to get a reference to an element.

import { useRef } from "react";

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

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

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

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

Here, ref={inputRef} tells React to connect the input element with the ref. After React creates the input element, the actual DOM element becomes available through inputRef.current. Therefore, when inputRef.current.focus() is called, JavaScript is accessing the actual input element and calling its focus() method.

Another important feature of useRef is that its value persists between renders. A normal variable declared inside a component can be recreated whenever the component renders. A ref, however, keeps the same ref object between renders, so its .current value can be used to remember information.

const countRef = useRef(0);

countRef.current++;

If the component renders again, the value stored in countRef.current is still available. However, changing countRef.current does not tell React to render the component again. This is one of the biggest differences between useRef and useState.

With state:

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

setCount(10);

React schedules a re-render because the state is normally used to control what appears on the screen. With a ref:

const countRef = useRef(0);

countRef.current = 10;

React does not re-render because changing a ref is intended for storing information rather than updating the UI.

This gives us a simple rule for deciding between them. Use useState when changing a value should update the UI. Use useRef when you need to remember a value without causing a re-render. For example, a counter displayed on the screen should normally use state, while a timer ID that only needs to be remembered so it can later be stopped can be stored in a ref.

const timerRef = useRef(null);

timerRef.current = setInterval(() => {
    console.log("Running...");
}, 1000);

clearInterval(timerRef.current);

Here, the timer ID does not need to be displayed on the screen. We only need to remember it so that we can later pass it to clearInterval(). Therefore, a ref is suitable.

It is important not to think of useRef as a replacement for useState. They have different purposes. If you store a value in a ref and then display that value in JSX, changing the ref alone will not update what the user sees. If the UI needs to react to the value changing, state is generally the correct choice.

In simple terms, useRef can be thought of as a persistent storage box inside a React component. The value inside the box is available through .current, it survives re-renders, and changing it does not trigger another render. This makes useRef especially useful for DOM references, timer IDs, previous values, and other information that React needs to remember but that does not directly control the UI.

Final Difference

useState
   ↓
Value changes
   ↓
React re-renders
   ↓
UI can update


useRef
   ↓
.current changes
   ↓
No re-render
   ↓
Value is simply remembered

The most important idea to remember is: useState is mainly for data that affects the UI, while useRef is mainly for data or references that need to persist without causing the UI to re-render.

React useEffect Hook

Abimanyu P — Fri, 25 Sep 2026 17:31:27 +0000

What is useEffect?

useEffect is a React Hook used to perform side effects in a component. A side effect is an operation that happens outside the normal React rendering process. Some common examples are using setInterval, adding an event listener, fetching data from an API, or changing the browser document title.

The basic syntax of useEffect is:

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

The second parameter is called the dependency array. An empty array means the effect runs after the component is initially rendered.

For example, we can use useEffect to change the browser title:

import { useEffect, useState } from "react";

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

    useEffect(() => {
        document.title = `Count: ${count}`;
    }, [count]);

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

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

Here, whenever count changes, the component renders again and the useEffect runs because count is included in the dependency array.

useEffect with setInterval and Event Listener

useEffect is useful with setInterval because an interval keeps running until we stop it. We can create the interval inside useEffect and use the cleanup function to stop it.

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

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

The setInterval runs every one second. When the component is removed, the cleanup function runs and clearInterval() stops the timer.

The same idea can be used with an event listener.

useEffect(() => {
    function handleKeyDown(event) {
        console.log(event.key);
    }

    window.addEventListener("keydown", handleKeyDown);

    return () => {
        window.removeEventListener("keydown", handleKeyDown);
    };
}, []);

Here, the event listener waits for the user to press a keyboard key. When a key is pressed, handleKeyDown runs and prints the key in the console.

The cleanup function removes the event listener when the component is no longer needed.

Without useEffect, an event listener could be added again every time the component re-renders. This can cause unnecessary or duplicate listeners. useEffect helps us control when the listener is added and the cleanup function helps us remove it.

So the general pattern is:

useEffect(() => {
    // start or add something

    return () => {
        // stop or remove something
    };
}, []);

For example, setInterval() can be cleaned with clearInterval(), and addEventListener() can be cleaned with removeEventListener().

In simple terms, useEffect is used when we need React to perform an operation after rendering and when necessary clean up that operation later.

React Hooks And useState

Abimanyu P — Thu, 24 Sep 2026 16:47:08 +0000

React Hooks

Hooks are special functions in React that allow functional components to use React features such as state. Before hooks were introduced, state and other React features were mainly used with class components. Hooks made it possible to use these features inside functional components in a simpler way.

A hook is usually a function that starts with the word use. Some commonly used hooks are useState, useEffect, and useContext. Each hook has a specific purpose. useState is used to store and update data that can change inside a component.

useState

useState is a React hook used to create a state variable in a functional component. It returns two values: the current state value and a function used to update that value.

import { useState } from "react";

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

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

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

Here, count stores the current value and setCount changes the value. The 0 passed to useState is the initial value.

useState can also be used with different types of data. For example:

const [name, setName] = useState("");
const [isVisible, setIsVisible] = useState(false);
const [likes, setLikes] = useState(0);

When the state is updated, React re-renders the component and displays the updated value.

For input fields, useState can store the value entered by the user:

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

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

event.target.value gets the current value from the input and setName updates the state.

State can also control whether something is displayed:


const [isVisible, setIsVisible] = useState(false);

<button onClick={() => setIsVisible(!isVisible)}>
  Show / Hide
</button>

{isVisible && <p>Hello!</p>}

Here, the boolean state controls the visibility of the paragraph.

Think of it as:
If isVisible is true, show Hello!. Otherwise, show nothing.

Ex:
{false && Hello!} The paragraph is not displayed.
{true && Hello!} React displays: Hello!

This is called conditional rendering using the "&&" operator.

useState is useful whenever a component needs to remember changing information, such as counters, input values, likes, messages, or whether an element should be visible.

React Basics: Library, SPA, Rendering, Components, JSX and Props.

Abimanyu P — Wed, 23 Sep 2026 16:51:28 +0000

React as a JavaScript Library

React is a JavaScript library mainly used for building user interfaces. A library provides reusable code that we can use whenever we need it. The main difference between a library and a framework is control. In a library, we call the library when we need it, but in a framework, the framework provides the overall structure and controls the flow of the application.

For example, Axios is a library used for making HTTP requests. We decide when to call it:

axios.get("https://example.com/users");

A real-world example is a toolbox. We take a particular tool whenever we need it. A framework is more like a construction company that follows a predefined process and structure for building a house.

React and Single Page Applications

React is commonly used to build Single Page Applications (SPA). In a traditional website, clicking a link can request a new HTML page from the server and reload the browser page. In a React SPA, different parts of the UI can be updated without requiring a full browser page reload.

For example, in an online shopping application, when the user adds a product to the cart, React can update the cart count without refreshing the complete page. This makes the application feel more like a desktop or mobile application.

React Components

A component is a reusable building block of a React application's UI. Instead of creating the complete website in one large file, we can divide it into smaller components such as Navbar, ProductCard, Sidebar and Footer.

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

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

Here, Welcome is a component. We can reuse it wherever we need it.

Components are useful because the same UI structure can be reused with different data. For example, a ProductCard component can be used for many different products.

JSX Expressions

JSX allows us to write HTML-like code inside JavaScript. A JSX expression is JavaScript code written inside curly braces {}.

function App() {
    let name = "Abimanyu";

    return <h1>Hello {name}</h1>;
}

Here {name} is a JSX expression. React evaluates the JavaScript expression and displays its value.

We can also use calculations and conditions:

function App() {
    let a = 10;
    let b = 20;

    return (
        <div>
            <h1>{a + b}</h1>
            <p>{a > b ? "A is bigger" : "B is bigger"}</p>
        </div>
    );
}

Expressions produce values, so they can be used inside JSX. Statements such as normal if statements cannot be directly placed inside JSX. A ternary operator can be used when a condition needs to produce a value.

Rendering in React

Rendering means React takes a component and creates or updates the UI displayed in the browser.

For example:

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

React renders this component and the browser displays Hello World.

In a modern React application, we commonly use createRoot():

import { createRoot } from "react-dom/client";
import App from "./App";

createRoot(document.getElementById("root")).render(
    <App />
);

The .render() method tells React which component should be displayed inside the root DOM element.

When the state of a component changes, React renders the component again and determines which parts of the UI need to be updated.

Props

Props, short for properties, are used to pass data from a parent component to a child component.

function Student(props) {
    return <h2>Name: {props.name}</h2>;
}

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

Here, name="Abimanyu" is a prop passed from App to Student.

Props are similar to arguments passed to a JavaScript function:

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

student("Abimanyu");

In React, we can pass different types of data through props, such as strings, numbers, arrays, objects and even functions.

Props Destructuring

Instead of accessing every value through props, we can use JavaScript destructuring.

Without destructuring:

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

With destructuring:

function Student({ name, age }) {
    return (
        <div>
            <h2>{name}</h2>
            <p>{age}</p>
        </div>
    );
}

Both examples work in the same way. Destructuring simply makes the code shorter and easier to read.

Props Children

children is a special prop in React. It contains the content placed between the opening and closing tags of a component.

For example:

function Box(props) {
    return <div>{props.children}</div>;
}

function App() {
    return (
        <Box>
            <h1>Hello</h1>
            <p>Welcome to my website</p>
        </Box>
    );
}

The content inside <Box>...</Box> becomes props.children.

We can also destructure children:

function Box({ children }) {
    return (
        <div className="box">
            {children}
        </div>
    );
}

This is useful when creating reusable components such as cards, boxes, buttons, layouts and modal components.

For example:

function Card({ title, children }) {
    return (
        <div className="card">
            <h2>{title}</h2>
            {children}
        </div>
    );
}

We can use the same component with different content:

<Card title="Profile">
    <p>Name: Abimanyu</p>
    <p>Age: 21</p>
</Card>

<Card title="Contact">
    <p>Email: example@gmail.com</p>
    <button>Contact Me</button>
</Card>

Here, title is a normal prop, while children contains the content written inside the Card component.

Tic-Tac-Toe

Abimanyu P — Wed, 09 Sep 2026 15:25:00 +0000

Understanding the Flow of a Tic-Tac-Toe Game in JavaScript

A Tic-Tac-Toe game is a good project for understanding how JavaScript works with the DOM, event listeners, functions, conditions, and arrays. In this example, two players, X and O, take turns clicking on a 3×3 board. After every move, JavaScript checks whether a player has won or whether the game has ended in a tie.

Setting Up the Players

const players = ["X", "O"];
let currentPlayer = players[0];

The players array stores the two players. Since array indexing starts from 0, players[0] is "X".

Therefore, the game starts with:

currentPlayer = "X";

The currentPlayer variable keeps track of whose turn it is.

Getting the Game Squares

let cells = document.getElementsByClassName("square");

This gets all the HTML elements that have the class square.

For example, a Tic-Tac-Toe board can have nine squares:

0 | 1 | 2
---------
3 | 4 | 5
---------
6 | 7 | 8

The cells collection contains these nine squares so that JavaScript can work with them.

Defining the Winning Combinations

const winningCombinations = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
];

There are eight possible ways to win in Tic-Tac-Toe.

For example:

[0, 1, 2]

represents the first row, while:

[0, 3, 6]

represents the first column.

The diagonal is represented by:

[0, 4, 8]

These combinations are later used by the calculateWin() function.

Handling a Player's Click

The handleEvents() function is responsible for adding a click event to every square.

const handleEvents = () => {
    for (let i of cells) {
        i.addEventListener("click", () => {
            // game logic
        });
    }
}

The for...of loop goes through every square in cells. An event listener is then attached to each square.

This means whenever a player clicks a square, the code inside the click event runs.

Checking Whether the Square Is Already Filled

The first thing the click event checks is whether the square already contains a player.

if (i.textContent === "X" || i.textContent === "O") {
    return alert("This cell is already filled!");
}

If the square contains either "X" or "O", the function stops using return.

This prevents a player from replacing an existing move.

Placing the Player's Symbol

If the square is empty, the current player's symbol is placed inside it.

i.textContent = currentPlayer;

If it is X's turn:

currentPlayer = "X";

clicking a square changes it to:

After the move, the game needs to check whether X has won or whether the board is full.

Checking for a Winner

The code calls:

const iswin = calculateWin();

The calculateWin() function checks every winning combination.

for (let i of winningCombinations) {
    const [a, b, c] = i;

Suppose the current combination is:

[0, 1, 2]

Array destructuring assigns:

a = 0;
b = 1;
c = 2;

The function then gets the three corresponding squares:

const square1 = document.getElementById(`square${a}`);
const square2 = document.getElementById(`square${b}`);
const square3 = document.getElementById(`square${c}`);

It checks whether all three contain the same player:

if (
    square1.textContent &&
    square1.textContent === square2.textContent &&
    square1.textContent === square3.textContent
) {
    return true;
}

The first condition:

square1.textContent

makes sure the square isn't empty.

The other two conditions check whether all three squares contain the same symbol.

If a winning combination is found, calculateWin() returns true. Otherwise, after checking all combinations, it returns false.

Checking for a Tie

After checking for a winner, the game checks whether the board is full.

const isTie = gameTie();

The gameTie() function goes through every square:

const gameTie = () => {
    for (let i of cells) {
        if (i.textContent === "") {
            return false;
        }
    }

    return true;
}

If even one square is empty, the game is not a tie, so it returns false.

If every square is filled, it returns true.

Handling the Winner or Tie

After placing a symbol, two checks are made:

if (iswin) {
    return alert(`${currentPlayer} wins!`);
}

if (isTie) {
    return alert("It's a tie!");
}

If iswin is true, the game displays the winner.

For example:

X wins!

If nobody has won but the board is full, the game displays:

It's a tie!

The return stops the rest of the click function from running.

Switching Between Players

If there is no winner and no tie, the game switches to the other player.

currentPlayer =
    currentPlayer === players[0]
        ? players[1]
        : players[0];

This uses the ternary operator.

It can be understood as:

if (currentPlayer === "X") {
    currentPlayer = "O";
} else {
    currentPlayer = "X";
}

So the flow becomes:

X's turn
   ↓
X clicks
   ↓
Check winner
   ↓
Check tie
   ↓
Switch to O
   ↓
O's turn
   ↓
O clicks
   ↓
Check winner
   ↓
Check tie
   ↓
Switch to X

Starting the Game

At the bottom of the code, we have:

document.addEventListener("DOMContentLoaded", handleEvents);

DOMContentLoaded runs when the HTML document has been loaded.

Only after the page has loaded does JavaScript call:

handleEvents();

This is important because handleEvents() needs to find the HTML elements containing the square class.

Complete Game Flow

The overall flow of the program is:

HTML loads
    ↓
DOMContentLoaded
    ↓
handleEvents()
    ↓
Add click events to all squares
    ↓
Player clicks a square
    ↓
Check if square is already filled
    ↓
Place X or O
    ↓
calculateWin()
    ↓
gameTie()
    ↓
Is there a winner?
    ├── Yes → Show winner → Stop
    └── No
         ↓
    Is it a tie?
         ├── Yes → Show tie → Stop
         └── No
              ↓
        Switch player
              ↓
        Wait for next click

Restart Function

There is also a restartButton() function:

const restartButton = () => {
    for (let i of cells) {
        i.textContent = "";
    }
}

It removes the contents of all squares, effectively clearing the board.

However, in the current code, this function is only defined and is not connected to a button or called anywhere. Also, if you use it as a real restart function, you would normally reset currentPlayer as well.

Promises In JS

Abimanyu P — Tue, 08 Sep 2026 15:38:03 +0000

Promises in JavaScript

When JavaScript performs an operation that takes some time, such as fetching data from a server, it does not want to wait and block the rest of the program. Instead, JavaScript can handle the operation asynchronously.

A Promise is an object that represents the eventual result of an asynchronous operation. In simple words, a Promise means "I don't have the result right now, but I will give you the result later."

Creating a Promise

We can create a Promise using the built-in Promise constructor:

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

    const age = 10;

    setTimeout(() => {

        if (age >= 18) {
            resolve("You are eligible to vote");
        }

        else {
            reject("You are not eligible to vote");
        }

    }, 3000);

});

Here, Promise is a built-in JavaScript constructor, and new Promise() creates a new Promise object.

The function passed to new Promise() is called the executor function:

(resolve, reject) => {
    // code
}

resolve and reject are parameters of this executor function. The Promise constructor provides functions as arguments for these parameters.

We call resolve() when the operation is successful and reject() when the operation fails.

resolve("You are eligible to vote");

means the operation was successful.

reject("You are not eligible to vote");

means the operation failed.

Promise States

A Promise has three possible states:

State	Meaning
Pending	The operation is still in progress
Fulfilled	The operation completed successfully
Rejected	The operation failed

In our example, when the Promise is created, it is initially pending.

After 3 seconds, the age is checked. Since the age is 10, the condition is false and reject() is called.

So the Promise changes from:

Pending
   ↓
Rejected

If the age were 18 or above, resolve() would be called instead:

Pending
   ↓
Fulfilled

Handling a Promise

After creating the Promise, we can use .then() to handle a successful result and .catch() to handle an error.

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

    const age = 10;

    setTimeout(() => {

        if (age >= 18) {
            resolve("You are eligible to vote");
        }

        else {
            reject("You are not eligible to vote");
        }

    }, 3000);

})

.then((message) => {

    console.log(message);

})

.catch((error) => {

    console.log(error);

});

When resolve() is called, the value passed to it is received by .then():

resolve("You are eligible to vote");

The value "You are eligible to vote" becomes the argument passed to the .then() callback.

In:

.then((message) => {
    console.log(message);
})

message is a parameter. It receives the value provided by the fulfilled Promise.

So the flow is:

resolve("You are eligible to vote")
              ↓
           .then()
              ↓
message = "You are eligible to vote"
              ↓
       console.log(message)

Similarly, when reject() is called:

reject("You are not eligible to vote");

the value is passed to .catch():

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

Here, error is a parameter that receives the rejected value.

The flow is:

reject("You are not eligible to vote")
              ↓
          .catch()
              ↓
error = "You are not eligible to vote"
              ↓
       console.log(error)

Why Promises Are Useful

Promises are especially useful for handling asynchronous operations. For example, an application might need to:

Get a user
Get the user's orders
Get the details of an order
Make a payment

When many asynchronous operations depend on each other, using callbacks can result in deeply nested code called callback hell.

Promises allow us to chain these operations using .then():

getUser()
    .then(user => getOrders(user))
    .then(orders => getOrderDetails(orders[0]))
    .then(order => makePayment(order))
    .catch(error => {
        console.log(error);
    });

Each .then() receives the result from the previous Promise and can return another Promise for the next operation.

This allows asynchronous operations to be written as a chain instead of deeply nested callbacks.

Conclusion

A Promise represents the eventual result of an asynchronous operation. It starts in a pending state and eventually becomes either fulfilled or rejected.

The important things to remember are:

Promise is a built-in constructor.
new Promise() creates a Promise object.
The function passed to new Promise() is called the executor function.
resolve and reject are parameters that receive functions from the Promise constructor.
resolve() is used when the operation succeeds.
reject() is used when the operation fails.
.then() handles a fulfilled Promise.
.catch() handles a rejected Promise.
Promises can be chained to make asynchronous code easier to manage.

The basic idea is:

        Promise
           ↓
       Pending
        ↙     ↘
   resolve   reject
      ↓         ↓
 Fulfilled   Rejected
      ↓         ↓
   .then()   .catch()

CallBack In JS

Abimanyu P — Mon, 07 Sep 2026 15:55:45 +0000

Callback in JavaScript

A callback is a function that is passed as an argument to another function. The receiving function can then call that function when it needs to. In simple words, a callback allows us to say, "Here is a function; call it when you are ready."

What is a Callback?

JavaScript allows us to pass functions as values. This means a function can be stored in a variable, passed as an argument, or returned from another function. When we pass a function to another function and that function later calls it, the passed function is called a callback function.

function greet() {
    console.log("Hello!")
}

function execute(callback) {
    callback()
}

execute(greet)

Here, greet is passed to execute() as an argument. Inside execute(), the callback() parameter refers to the greet function, so calling callback() executes greet().

greet()
   ↓
passed to
   ↓
execute(greet)
   ↓
callback()
   ↓
greet() executes

Why Do We Need Callbacks?

Callbacks are useful when we want one function to perform some work and then execute another function at a particular point. They are especially important when working with asynchronous operations, where we may want something to happen after an operation finishes.

For example, setTimeout() accepts a callback:

setTimeout(function () {
    console.log("2 seconds passed")
}, 2000)

Here, the function passed to setTimeout() is the callback. JavaScript calls this function after the timer finishes.

Passing a Function vs Calling a Function

When passing a callback, we usually pass the function without parentheses.

execute(greet)

This means:

"Pass the greet function to execute."

But:

execute(greet())

means:

"Call greet now and pass its returned value to execute."

So these two are not the same.

What is Callback Hell in JavaScript?

In JavaScript, a callback is a function that is passed to another function and executed later. Callbacks are commonly used when working with asynchronous operations such as fetching data, reading files, or waiting for a task to complete.

The problem starts when we have many asynchronous operations that depend on each other. We may put one callback inside another callback, and then another callback inside that. This creates a deeply nested structure called Callback Hell.

Example of Callback Hell

Imagine we need to perform these tasks one after another:

Get user data
Get the user's orders
Get the details of the first order
Make a payment

Using callbacks, the code might look like this:

getUser(function(user) {
    getOrders(user, function(orders) {
        getOrderDetails(orders[0], function(order) {
            makePayment(order, function(result) {
                console.log("Payment completed")
            })
        })
    })
})

Here, each operation depends on the previous operation. Because of this, each callback is placed inside another callback.

As the number of asynchronous operations increases, the code becomes more deeply nested. This makes the code harder to read, understand, debug, and maintain.

This deeply nested callback structure is what we commonly call Callback Hell.

Closure in javascript

Abimanyu P — Mon, 07 Sep 2026 15:36:51 +0000

Closures in JavaScript

Closures are one of the most important concepts in JavaScript. They can look confusing at first because they involve functions, lexical scope, and lexical environments together. But once we understand how these concepts are connected, closures become much easier to understand.

A simple definition of closure is:

A closure is a function that remembers and can access variables from its surrounding lexical environment even after the outer function has finished executing.

The word "remembers" here doesn't mean that JavaScript literally copies the variables into the function. Instead, the function maintains a connection to the lexical environment in which it was created.

Let's understand it with an example

Consider the following code:

function outer() {
    let name = "Abimanyu"

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

    return inner
}

let myFunction = outer()

myFunction()

When outer() is called, JavaScript creates a lexical environment for it. That environment contains the variable name:

Outer Lexical Environment
    name → "Abimanyu"

The inner() function is created inside outer(), so it has access to that surrounding environment. When outer() returns inner, the function is stored in myFunction.

Now outer() has finished executing, but myFunction still refers to inner().

myFunction
    ↓
  inner()
    ↓
Outer Lexical Environment
    ↓
name → "Abimanyu"

When we call:

myFunction()

inner() needs the value of name. Since name is not inside its own environment, JavaScript looks through its surrounding environment and finds name in the environment created by outer().

This is the important part of a closure: the function retains access to the environment where it was created, even though the outer function has already finished executing.

Why doesn't `name` disappear?

This is where closures are often misunderstood.

You might think that once outer() finishes, everything created inside it should disappear. But inner() still has a reference to the environment containing name. Since that environment is still reachable through the function, JavaScript cannot simply remove it.

So conceptually, after outer() has finished, we can still think of the relationship like this:

myFunction
    ↓
inner()
    ↓
remembered lexical environment
    ↓
name → "Abimanyu"

The function and its connection to the surrounding environment together form the idea of a closure.

The word "closure" therefore describes the behavior where a function closes over the variables available in its surrounding lexical scope and continues to access them later.

Closure is connected to lexical scope

To understand closures properly, it is useful to remember what lexical scope means.

Lexical scope means that the scope of a function is determined by where the function is written in the code, not where the function is called.

For example, inner() was written inside outer(), so its surrounding lexical scope includes outer().

function outer() {
    let message = "Hello"

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

    return inner
}

Because of where inner() is written, it can access message.

This relationship exists before we even call the function. The function's position in the source code determines its lexical surroundings.

Closures can maintain state

One of the most useful things about closures is that they allow a function to maintain state between calls.

function createCounter() {
    let count = 0

    return function() {
        count++
        return count
    }
}

let counter = createCounter()

console.log(counter()) // 1
console.log(counter()) // 2
console.log(counter()) // 3

Here, createCounter() finishes executing after returning the function. However, the returned function still has access to count.

Each time counter() is called, it accesses the same count variable and changes its value.

So the value isn't recreated from scratch on every call. The closure keeps the connection to the environment where count was created.

This ability to preserve state is one reason closures are so useful in JavaScript.

Closures can also provide data privacy

Closures can be used to keep certain variables inaccessible directly from outside code.

For example:

function createAccount() {
    let balance = 1000

    return {
        deposit(amount) {
            balance += amount
        },

        getBalance() {
            return balance
        }
    }
}

let account = createAccount()

account.deposit(500)

console.log(account.getBalance()) // 1500

Here, balance cannot be accessed directly through account.balance. However, deposit() and getBalance() can access it because both functions were created inside the environment containing balance.

The closure therefore allows those functions to work with the private state without exposing the variable directly.

DEV Community: Abimanyu P

Adavanced React Hooks

Advanced React Hooks

1. useReducer — Managing Complex State

2. useMemo — Caching Expensive Calculations

3. useCallback — Caching Function References

Conclusion

State Lifting in React

State Lifting in React

Why Do We Need State Lifting?

State Lifting with an Example

How Does State Lifting Work?

When Should We Use State Lifting?

Axios in React

What is Axios?

Installing Axios

Axios GET Request

Using GET in React

Mapping API Data in React

Axios POST Request

Dynamic GET Requests

Other Axios Methods

Error Handling

Headers

Axios Instances

useContext Hook in React

Context and useContext in React

What is Context?

What is useContext?

Key Points to Remember

useRef in React

Understanding useRef in React

How useRef Works

Final Difference

React useEffect Hook

What is useEffect?

useEffect with setInterval and Event Listener

React Hooks And useState

React Hooks

useState

React Basics: Library, SPA, Rendering, Components, JSX and Props.

React as a JavaScript Library

React and Single Page Applications

React Components

JSX Expressions

Rendering in React

Props

Props Destructuring

Props Children

Tic-Tac-Toe

Understanding the Flow of a Tic-Tac-Toe Game in JavaScript

Setting Up the Players

Getting the Game Squares

Defining the Winning Combinations

Handling a Player's Click

Checking Whether the Square Is Already Filled

Placing the Player's Symbol

Checking for a Winner

Checking for a Tie

Handling the Winner or Tie

Switching Between Players

Starting the Game

Complete Game Flow

Restart Function

Promises In JS

Promises in JavaScript

Creating a Promise

Promise States

Handling a Promise

Why Promises Are Useful

Conclusion

CallBack In JS

Callback in JavaScript

What is a Callback?

Why Do We Need Callbacks?

Passing a Function vs Calling a Function

What is Callback Hell in JavaScript?

Example of Callback Hell

Closure in javascript

Closures in JavaScript

Why doesn't `name` disappear?