DEV Community: Abimanyu P

Variables and Data Types in Java

Abimanyu P — Thu, 05 Nov 2026 06:52:45 +0000

Variables and Data Types in Java

In Java, variables and data types are the fundamental concepts used to store and manage data in a program. Every application needs to store different kinds of information, such as names, ages, prices, marks, and other values. Java uses variables to store this information and data types to define what kind of values can be stored.

1. Variables in Java

A variable is a named memory location used to store data in a program. Every variable has a name, a data type, and a value.

Example:

String name = "Abimanyu";
int age = 21;
double salary = 25000.50;

System.out.println(name);
System.out.println(age);
System.out.println(salary);

Here, name, age, and salary are variables. Java allocates memory to store their values based on their data types.

Types of Variables

Java has three main types of variables:

Local Variable: A variable declared inside a method, constructor, or block. It can only be accessed within its scope and must be initialized before use.
Instance Variable: A variable declared inside a class but outside methods. Each object gets its own copy of these variables.
Static Variable: A variable declared using the static keyword. It belongs to the class and is shared among its objects.

2. Data Types in Java

A data type defines what kind of value a variable can store. For example, an integer variable stores whole numbers, whereas a String variable stores text.

Java is a statically typed language, which means we must declare the data type when creating a variable.

Java data types are divided into two main categories:

Primitive Data Types

Primitive data types are the basic built-in data types provided by Java. Java has eight primitive data types.

Data Type	Size	Example
byte	8 bits	`byte a = 100;`
short	16 bits	`short a = 2000;`
int	32 bits	`int a = 100;`
long	64 bits	`long a = 10000L;`
float	32 bits	`float a = 10.5f;`
double	64 bits	`double a = 20.55;`
char	16 bits	`char a = 'A';`
boolean	JVM-dependent	`boolean a = true;`

Some important points:

int is commonly used to store integer values.
long is used for larger integer values.
float and double are used for decimal values.
char stores a single UTF-16 code unit.
boolean stores either true or false.

Non-Primitive Data Types

Non-primitive data types are reference types used to work with objects and more complex data structures.

Some common examples are:

String: Used to store a sequence of characters.
Array: Used to store multiple values of the same type.
Class: A blueprint used to create objects.

Example:

String name = "Abimanyu";

int[] marks = {85, 90, 95};

System.out.println(name);
System.out.println(marks[0]);

Unlike primitive types, reference variables can hold null, which means they do not currently refer to an object.

3. Type Casting in Java

Type casting is the process of converting one data type into another. Java supports two main types of casting.

Widening Casting (Automatic):

Converting a smaller compatible numeric type into a larger type.

int number = 100;

double result = number;

System.out.println(result);

Output: 100.0

Narrowing Casting (Manual):

Converting a larger numeric type into a smaller type. It requires explicit casting and may result in data loss.

double price = 99.99;

int result = (int) price;

System.out.println(result);

Output: 99

Classes and Objects in Java

Abimanyu P — Mon, 02 Nov 2026 16:24:25 +0000

Classes and Objects in Java

Java is an Object-Oriented Programming (OOP) language. Classes and objects are two fundamental concepts of OOP. A class defines the structure and behaviour, while an object is an instance created from that class.

1. What is a Class?

A class is a blueprint or template used to create objects. It defines the properties (variables) and behaviours (methods) that its objects can have.

For example, consider a Bank Account. Every account has an account holder name, account number, and balance. It can also perform operations like depositing and withdrawing money.

class BankAccount {
    String accountHolder;
    int accountNumber;
    double balance;

    void deposit(double amount) {
        balance += amount;
    }

    void checkBalance() {
        System.out.println(balance);
    }
}

Here, BankAccount is a class that defines the properties and behaviours of a bank account.

2. What is an Object?

An object is an instance of a class. We create objects using the new keyword.

Syntax:

ClassName objectName = new ClassName();

For example:

BankAccount customer1 = new BankAccount();

customer1.accountHolder = "Arun";
customer1.accountNumber = 101;
customer1.balance = 5000;

customer1.deposit(2000);
customer1.checkBalance();

Here, customer1 is an object reference variable that refers to the newly created BankAccount object.

We can create multiple objects from the same class, and each object maintains its own instance variable values.

BankAccount customer2 = new BankAccount();

customer2.accountHolder = "Kumar";
customer2.accountNumber = 102;
customer2.balance = 10000;

Both customers use the same class, but their account information is different.

3. What Happens When We Create an Object?

When we create an object using the new keyword, Java performs several operations behind the scenes.

BankAccount customer1 = new BankAccount();

The following steps take place:

Memory Allocation: Java allocates memory for the new object in Heap memory.
Default Values: Instance variables receive their default values, such as 0 for integers and null for reference types.
Constructor Execution: The constructor executes to initialize the object. If no constructor is declared, Java provides a default no-argument constructor.
Reference Creation: The new expression returns a reference to the newly created object.
Object Access: We use the reference variable to access the object's variables and methods.

Stack and Heap Memory

Java uses different memory areas to manage objects and local variables.

Stack Memory: Stores local variables and object reference variables within method execution.
Heap Memory: Stores objects and their instance variables.

For example:

Student s1 = new Student();

Here, the reference variable s1 is stored in the stack frame of the executing method, while the actual Student object is allocated in Heap memory.

TanStack Query in React

Abimanyu P — Fri, 30 Oct 2026 15:49:45 +0000

TanStack Query in React

TanStack Query (formerly React Query) is a popular library used in React applications to manage server state. It simplifies fetching, caching, updating, and synchronizing data from APIs.

Normally, we use useState() and useEffect() to handle API requests. TanStack Query provides built-in features to manage these operations with less code.

1. Installation and Setup

Install TanStack Query using npm:

npm install @tanstack/react-query

Wrap your application with QueryClientProvider in main.jsx.

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

createRoot(document.getElementById("root")).render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
);

This makes TanStack Query available throughout the application.

2. useQuery()

useQuery() is used to fetch data from an API using GET requests.

import { useQuery } from "@tanstack/react-query";
import axios from "axios";

const { data, isPending, isError } = useQuery({
  queryKey: ["users"],

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

    return response.data.users;
  }
});

Important properties:

queryKey: Uniquely identifies a query and its cached data.
queryFn: Function responsible for fetching data.
data: Contains the API response.
isPending: Indicates that the query has no data yet and is pending.
isError: Indicates that the query failed.

3. useMutation()

useMutation() is used to create, update, and delete data using POST, PUT, PATCH and DELETE requests.

Example: Adding a new user.

import { useMutation } from "@tanstack/react-query";

const addUser = useMutation({
  mutationFn: async (newUser) => {
    const response = await axios.post(
      "https://dummyjson.com/users/add",
      newUser
    );

    return response.data;
  }
});

// Execute mutation
addUser.mutate({
  firstName: "John",
  age: 25
});

Important properties:

mutationFn: Contains the API request.
mutate(): Executes the mutation.
isPending: Indicates that the mutation is running.
isSuccess: Indicates successful execution.
isError: Indicates that the mutation failed.

4. useQueryClient()

useQueryClient() provides access to the Query Client. It helps manage cached API data.

One important use is refreshing cached data after a successful mutation.

import { useQueryClient, useMutation } from "@tanstack/react-query";

const queryClient = useQueryClient();

const addUser = useMutation({
  mutationFn: addUserAPI,

  onSuccess: () => {
    queryClient.invalidateQueries({
      queryKey: ["users"]
    });
  }
});

Here, invalidateQueries() marks the existing users query as stale(or old). If the query is active, TanStack Query normally refetches it automatically.

Redux Toolkit in React

Abimanyu P — Wed, 28 Oct 2026 15:54:21 +0000

What Is Redux Toolkit?

Redux Toolkit (RTK) is a library used to manage global state in React applications. It is the official, recommended way to write Redux logic.

In React, we use useState to manage data inside a component. But when multiple components need the same data, sharing and updating that data can become difficult.

For example, in an e-commerce application, the Navbar displays the cart count, and the Cart component displays the cart items. Both components need access to the same data.

Redux Toolkit solves this problem by storing shared data in one central place called the Redux Store.

Important Concepts

Store: Stores the application's global state.
Slice: Contains a piece of state and the functions used to update it.
Reducer: Defines how the state changes.
useSelector: Reads data from the Redux Store.
useDispatch: Dispatches actions to update the state.

How to Use Redux Toolkit

First, install Redux Toolkit and React Redux:

npm install @reduxjs/toolkit react-redux

1. Create a Slice

Create a file named counterSlice.js.

import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",

  initialState: {
    count: 0,
  },

  reducers: {
    increment: (state) => {
      state.count += 1;
    },
  },
});

export const { increment } = counterSlice.actions;

export default counterSlice.reducer;

Here, createSlice() creates a slice with an initial state and a reducer.

When the increment action is dispatched, the count increases by one.

2. Create the Store

Create a file named store.js.

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counterSlice";

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

The configureStore() function creates the Redux Store and registers the counter reducer.

3. Connect Redux to React

In main.jsx, wrap the application with Provider.

import { Provider } from "react-redux";
import { store } from "./store";
import App from "./App";

<Provider store={store}>
  <App />
</Provider>

The Provider makes the Redux Store accessible to the components inside it. Include this wrapper in your existing React rendering code.

4. Use Redux in a Component

In App.jsx:

import { useSelector, useDispatch } from "react-redux";
import { increment } from "./counterSlice";

function App() {
  const count = useSelector((state) => state.counter.count);

  const dispatch = useDispatch();

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

      <button onClick={() => dispatch(increment())}>
        Increment
      </button>
    </div>
  );
}

export default App;

Here, useSelector() reads the count from the store, and useDispatch() allows us to dispatch an action.

When the button is clicked, the increment action is dispatched, the reducer updates the count, and React displays the new value.

Conclusion

Redux Toolkit makes global state management easier in React by providing a central store and a structured way to update shared data. It is especially useful in applications where multiple components need to access and update the same state.
For small applications, useState and useContext may be enough. For larger applications with complex shared state, Redux Toolkit can make state management easier to organize and maintain.

Lazy Loading in React

Abimanyu P — Mon, 26 Oct 2026 16:12:48 +0000

What Is Lazy Loading?

Lazy loading in React is a technique that loads a component only when it is needed instead of loading all components at the beginning of the application.

It helps improve application performance by reducing the amount of JavaScript that needs to be loaded initially.

For example, imagine an application with three pages:

Home
About
Dashboard

Without lazy loading, the JavaScript for all three pages might be included in the initial bundle, even if the user visits only the Home page.

With lazy loading, React can load the Home page first and load the About or Dashboard page when the user navigates to it.

Why Do We Use Lazy Loading?

Lazy loading offers several benefits:

Improves initial loading speed: The browser downloads less JavaScript when the application first opens.
Reduces bundle size: Code can be split into smaller chunks rather than downloading everything at once.
Improves user experience: Users can start interacting with the application sooner, especially on slower networks.
Loads components when needed: Components that users never visit do not need to be downloaded during the initial load.
Supports large applications: It helps manage applications with many pages and features.

How to Implement Lazy Loading in React

React provides two built-in features for lazy loading components:

React.lazy()
<Suspense>

Example

Suppose you have a component named Dashboard.jsx.

Step 1: Create the Dashboard component

// Dashboard.jsx

function Dashboard() {
  return <h2>Welcome to the Dashboard!</h2>;
}

export default Dashboard;

Step 2: Use lazy loading in your main component

// App.jsx

import { lazy, Suspense } from "react";

const Dashboard = lazy(() => import("./Dashboard"));

function App() {
  return (
    <div>
      <h1>My React Application</h1>

      <Suspense fallback={<p>Loading Dashboard...</p>}>
        <Dashboard />
      </Suspense>
    </div>
  );
}

export default App;

How Does This Code Work?

1. lazy(() => import("./Dashboard"))

const Dashboard = lazy(() => import("./Dashboard"));

React loads the Dashboard component's module when the lazy component is first rendered, rather than requiring it as a normal static import.

The dynamic import() allows supported build tools to split the component into a separate JavaScript chunk.

2. <Suspense>

<Suspense fallback={<p>Loading Dashboard...</p>}>
  <Dashboard />
</Suspense>

While the component's code is loading, React displays the fallback UI.

Once the module finishes loading, React displays the Dashboard component.

Important: Lazy loading does not mean that a component loads every time it is rendered. Once its module has loaded, React and the JavaScript module system can reuse it.

Real-World Example: Lazy Loading with React Router

In a large application, you may have multiple pages. Instead of loading every page's code upfront, you can lazy-load each page.

import { lazy, Suspense } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

const Home = lazy(() => import("./Home"));
const About = lazy(() => import("./About"));
const Dashboard = lazy(() => import("./Dashboard"));

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<p>Loading page...</p>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

export default App;

In this example:

When the user visits /, React loads the Home page's module when needed.
When the user visits /about, React loads the About page's module when needed.
When the user visits /dashboard, React loads the Dashboard page's module when needed.

The build tool determines the actual chunk structure, and shared dependencies may be placed in separate chunks.

Java: Introduction, History, and Features

Abimanyu P — Sun, 25 Oct 2026 15:48:25 +0000

Introduction

Java is a high-level, object-oriented, general-purpose programming language used to develop various software applications. It was developed by James Gosling and his team at Sun Microsystems and officially released in 1995. Java is widely used in web development, enterprise applications, cloud computing, and Android development.

One of Java's most important features is platform independence, which allows Java programs to run on different operating systems with the help of the Java Virtual Machine (JVM).

History of Java

The history of Java began in 1991 with the Green Project at Sun Microsystems. James Gosling, Mike Sheridan, and Patrick Naughton worked on developing a programming language for electronic devices.

Initially, the language was named Oak, inspired by an oak tree near James Gosling's office. Later, it was renamed Java and officially introduced in 1995. Java became popular because of its ability to support internet-based applications.

In 1996, the first official version, JDK 1.0, was released. In 2004, Java 5 introduced important features such as generics and enhanced loops. Java 8, released in 2014, introduced lambda expressions and the Stream API. In 2010, Oracle acquired Sun Microsystems and took over the development and stewardship of Java.

Today, Java remains one of the widely used programming languages in the software industry.

Features of Java

Java offers several important features:

Simple: Its syntax is familiar to programmers who know C or C++.
Object-Oriented: It uses classes and objects to organize programs.
Platform-Independent: Java bytecode can run on different systems with a compatible JVM.
Secure: It provides runtime and language features that help support secure applications.
Robust: Exception handling and automatic memory management help improve reliability.
Multithreaded: It supports multiple threads of execution within a program.

How Does Java Work?

Java programs are written in .java files. The Java compiler converts the source code into bytecode, which is stored in .class files. The Java Virtual Machine (JVM) then executes this bytecode.

This process allows Java programs to run on different operating systems without requiring the source code to be rewritten for each platform.

Applications of Java

Java is used in many areas, including web applications, Android development, banking systems, enterprise software, cloud services, and desktop applications. Its reliability, portability, and extensive ecosystem make it suitable for both small projects and large-scale software systems.

Conclusion

Java is a powerful and versatile programming language that has evolved significantly since its introduction in 1995. Its platform independence, object-oriented approach, and extensive libraries make it a popular choice for developers. Learning Java provides a strong foundation for understanding programming concepts and building real-world software applications.

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.

DEV Community: Abimanyu P

Variables and Data Types in Java

Variables and Data Types in Java

1. Variables in Java

Types of Variables

2. Data Types in Java

Primitive Data Types

Non-Primitive Data Types

3. Type Casting in Java

Classes and Objects in Java

Classes and Objects in Java

1. What is a Class?

2. What is an Object?

3. What Happens When We Create an Object?

Stack and Heap Memory

TanStack Query in React

TanStack Query in React

1. Installation and Setup

2. useQuery()

3. useMutation()

4. useQueryClient()

Redux Toolkit in React

What Is Redux Toolkit?

Important Concepts

How to Use Redux Toolkit

1. Create a Slice

2. Create the Store

3. Connect Redux to React

4. Use Redux in a Component

Conclusion

Lazy Loading in React

What Is Lazy Loading?

Why Do We Use Lazy Loading?

How to Implement Lazy Loading in React

Example

How Does This Code Work?

Real-World Example: Lazy Loading with React Router

Java: Introduction, History, and Features

Introduction

History of Java

Features of Java

How Does Java Work?

Applications of Java

Conclusion

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