DEV Community: Vidya

useMemo vs useCallback in React

Vidya — Mon, 15 Jun 2026 12:40:34 +0000

React applications re-render whenever state or props change. In most cases, React handles re-rendering efficiently. However, in large applications with complex calculations or deeply nested components, unnecessary re-renders can impact performance.

To solve this problem, React provides two optimization hooks:

useMemo – Memoizes a value.
useCallback – Memoizes a function.

Although both are used for performance optimization, they serve different purposes.

What is useMemo?

useMemo is a React Hook that stores (memoizes) the result of a calculation and reuses it on future renders until one of its dependencies changes.

Definition

useMemo prevents React from recalculating a value every time the component renders. Instead, it recalculates only when the specified dependencies change.

Syntax

const memoizedValue = useMemo(() => {
  return expensiveCalculation();
}, [dependency]);

How it Works
=> React executes the function during the first render.
=> The returned value is stored in memory.
=> On subsequent renders, React checks the dependency array.
=> If dependencies haven't changed, React returns the stored value.
=> If dependencies change, React recalculates and stores the new value.

Example Without useMemo

function ProductList({ products }) {

  const sortedProducts = products.sort((a, b) =>
    a.price - b.price
  );

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

Problem

Every time the component renders:
=> The sorting operation runs again.
=> Even if the products array hasn't changed.
=> This wastes CPU resources.

Example With useMemo

import { useMemo } from "react";

function ProductList({ products }) {

  const sortedProducts = useMemo(() => {
    return [...products].sort((a, b) =>
      a.price - b.price
    );
  }, [products]);

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

Benefit

Now sorting happens only when the products array changes.
If another state changes in the component:
=> React re-renders.
=> Sorting is skipped.
=> The stored value is reused.

What is useCallback?

useCallback is a React Hook that stores a function and returns the same function reference across renders until dependencies change.

Definition

useCallback prevents React from creating a new function every time the component renders.

Syntax

const memoizedFunction = useCallback(() => {
  // function logic
}, [dependency]);

Why Do We Need useCallback?

Consider this example:

function Parent() {

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

  const handleClick = () => {
    console.log("Button clicked");
  };

  return (
    <Child onClick={handleClick} />
  );
}

Whenever count changes:
--> Parent re-renders.
--> A new handleClick function is created.
--> Child receives a new function reference.
--> Child re-renders unnecessarily.

Example With useCallback

import { useCallback } from "react";" 

function Parent() {

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

  const handleClick = useCallback(() => {
    console.log("Button clicked");
  }, []);

  return (
    <Child onClick={handleClick} />
  );
}

Benefit
--> The same function reference is reused.
--> Child component doesn't re-render unnecessarily.
--> Performance improves.

useState vs useReducer in React

Vidya — Sat, 13 Jun 2026 07:16:24 +0000

What is useState?

useState is a React Hook that allows functional components to create and manage state. Before Hooks were introduced, state could only be managed inside class components. With useState, developers can store values such as numbers, strings, booleans, arrays, and objects directly inside functional components and update them whenever needed.

Whenever the state changes, React automatically re-renders the component and updates the UI with the latest data.

Syntax

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

--> state → Current value of the state.
--> setState → Function used to update the state.
--> initialValue → Initial value assigned to the state.

Example: Counter Application

import React, { useState } from "react";

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

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

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

export default Counter;

How it Works
=> useState(0) initializes the state with 0.
=> count stores the current value.
=> setCount() updates the value.
=> When the button is clicked, React re-renders the component with the updated count.

When to Use useState?

--> Counter applications
--> Show/Hide functionality
--> Theme switching
--> Simple forms
--> Managing a single piece of state

What is useReducer?

useReducer is a React Hook used for managing complex state logic. Instead of updating state directly, it uses a reducer function and actions to determine how the state should change.

It follows the same concept as Redux, where actions are dispatched and a reducer function decides the next state based on the action type.

useReducer is useful when a component has multiple state values or complex update logic.

Syntax


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

=> state → Current state.
=> dispatch → Function used to send actions.
=> reducer → Function that handles state updates.
=> initialState → Initial state value.

Example: Counter using useReducer

import React, { useReducer } from "react";

const initialState = { count: 0 };

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

    case "decrement":
      return { count: state.count - 1 };

    default:
      return state;
  }
}

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

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

      <button onClick={() =>
        dispatch({ type: "increment" })
      }>
        Increment
      </button>

      <button onClick={() =>
        dispatch({ type: "decrement" })
      }>
        Decrement
      </button>
    </div>
  );
}

export default Counter;

How it Works

--> initialState stores the starting state.
--> reducer() receives the current state and action.
--> dispatch() sends an action.
--> The reducer decides how the state should change.
--> React re-renders the component with the updated state.

Real-World Example
Using useState

const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [age, setAge] = useState("");

--> This is fine for a small form with a few fields.

Using useReducer

const initialState = {
  name: "",
  email: "",
  age: ""
};

function reducer(state, action) {
  switch (action.type) {
    case "UPDATE_NAME":
      return { ...state, name: action.payload };

    case "UPDATE_EMAIL":
      return { ...state, email: action.payload };

    case "UPDATE_AGE":
      return { ...state, age: action.payload };

    default:
      return state;
  }
}

--> For large forms with validations and multiple updates, useReducer keeps the code cleaner and easier to maintain.

Why Java Supports Multithreading While JavaScript is Single-Threaded?

Vidya — Fri, 12 Jun 2026 05:27:24 +0000

Why is Java Multithreaded but JavaScript Traditionally Single-Threaded?

Java and JavaScript are both popular programming languages, but they handle execution differently. One of the biggest differences is that Java supports true multithreading, while JavaScript was originally designed as a single-threaded language.

What is Multithreading?

Multithreading is the ability of a program to run multiple threads simultaneously. A thread is a lightweight unit of execution within a process. By using multiple threads, a program can perform several tasks at the same time, improving performance and responsiveness.

Why Does Java Support Multithreading?

Java was designed for building large-scale enterprise applications, desktop software, servers, and systems that often need to handle multiple tasks concurrently.

For example:

--> A banking application can process transactions while generating reports.
--> A web server can handle thousands of client requests simultaneously.
--> A desktop application can perform background tasks while keeping the user interface responsive.

Java provides built-in support for multithreading through:
=> Thread class
=> Runnable interface
=> Executor Framework
=> Concurrency utilities (java.util.concurrent)

Because of this, Java can utilize multiple CPU cores efficiently and execute threads in parallel.

Why Was JavaScript Designed as Single-Threaded?

JavaScript was originally created to run inside web browsers. Since browsers manipulate the DOM (Document Object Model), allowing multiple threads to modify the same web page simultaneously could lead to conflicts and unpredictable behavior.

To avoid these issues, JavaScript was designed with a single-threaded execution model. This means only one piece of JavaScript code runs at a time.

For example:
--> A button click event
--> Form validation
--> DOM updates

These operations execute one after another in a single thread, making browser behavior simpler and safer.

How Does JavaScript Handle Multiple Tasks?

Although JavaScript is single-threaded, it can still perform asynchronous operations using:
=> Event Loop
=> Callbacks
=> Promises
=> Async/Await

For example, while waiting for an API response, JavaScript does not block the entire application. Instead, it continues executing other code and processes the response when it arrives.

Modern JavaScript and Background Threads

Today, JavaScript can use additional threads through:
=> Web Workers (Browser)
=> Worker Threads (Node.js)

These allow heavy computations to run in the background without blocking the main thread. However, JavaScript's core execution model remains single-threaded.

Java vs JavaScript: Understanding the Key Differences

Vidya — Thu, 11 Jun 2026 13:23:45 +0000

Many beginners assume that Java and JavaScript are the same because of their similar names. However, they are completely different programming languages designed for different purposes. Understanding the differences between Java and JavaScript helps developers choose the right language for their projects.

What is Java?

Java is a high-level, object-oriented programming language developed by Oracle Corporation. It follows the principle of "Write Once, Run Anywhere" (WORA), which means Java programs can run on any platform that has a Java Virtual Machine (JVM). Java is widely used for enterprise applications, Android development, desktop software, and backend web applications.

Features of Java
=> Object-Oriented Programming (OOP)
=> Platform Independent
=> Strongly Typed Language
=> Secure and Robust
=> Multithreading Support
=> Excellent Performance with JVM

What is JavaScript?

JavaScript is a lightweight, high-level scripting language primarily used to create interactive and dynamic web pages. It was developed by Brendan Eich in 1995. JavaScript runs directly in web browsers and is one of the core technologies of web development alongside HTML and CSS.

Features of JavaScript
=> Lightweight and Interpreted
=> Dynamic Typing
=> Event-Driven Programming
=> Supports Functional and Object-Oriented Programming
=> Runs in Browsers and Servers
=> Fast Development and Deployment

Example: Java Program

public class Main {
    public static void main(String[] args) {
        System.out.println("Hello World");
    }
}

Example: JavaScript Program

console.log("Hello World");

When Should You Use Java?

Use Java when:
--> Building enterprise applications
--> Developing Android applications
--> Creating large-scale backend systems
--> Working on banking and financial software
--> Developing desktop applications
--> When Should You Use JavaScript?

Use JavaScript when:
--> Building interactive websites
--> Creating web applications
--> Developing frontend user interfaces
--> Working with frameworks like React, Angular, or Vue
--> Building server-side applications using Node.js

JavaScript Libraries and Frameworks

Vidya — Wed, 10 Jun 2026 07:28:00 +0000

JavaScript is one of the most popular programming languages used for web development. It helps developers create interactive and dynamic websites. To make development faster and easier, developers use JavaScript libraries and frameworks. Although both help in building applications, they serve different purposes.

What is a JavaScript Library?

A JavaScript library is a collection of pre-written JavaScript code that developers can use to perform common tasks. Libraries provide reusable functions and components, allowing developers to avoid writing code from scratch.

In a library, the developer controls the flow of the application and calls the library functions whenever needed.

Popular JavaScript Libraries
=> React
=> jQuery
=> Lodash
=> D3.js
=> Chart.js

Advantages of Libraries

--> Faster development
--> Reusable code
--> Easy to learn and use
--> Reduces repetitive coding

What is a JavaScript Framework?

A JavaScript framework is a complete structure that provides rules, tools, and predefined architecture for developing applications. Frameworks control the application's flow and determine how the code should be organized.

In a framework, the framework itself calls the developer's code when required. This concept is known as "Inversion of Control."

Popular JavaScript Frameworks

=> Angular
=> Vue.js
=> Next.js
=> Nuxt.js
=> Ember.js

Advantages of Frameworks
--> Organized project structure
--> Faster application development
--> Built-in tools and features
--> Easier maintenance of large applications

JavaScript libraries and frameworks help developers build modern web applications efficiently. Libraries provide specific functionalities that can be used when needed, while frameworks offer a complete structure for application development. Choosing between a library and a framework depends on the project's requirements, complexity, and development goals.

Interpreter vs Compiler: A Beginner-Friendly Guide

Vidya — Wed, 03 Jun 2026 05:29:01 +0000

When learning programming, you will often hear the terms Compiler and Interpreter. Both are used to convert human-readable source code into machine-readable code, but they work in different ways.

What is a Compiler?

A compiler is a software program that translates the entire source code into machine code before the program is executed. Once the compilation is completed, the generated executable file can run directly without needing the source code again.

How a Compiler Works?

=> Reads the entire source code.
=> Checks for syntax and semantic errors.
=> Converts the code into machine code.
=> Generates an executable file.
=> Executes the program.

Advantages of a Compiler

--> Faster program execution.
--> Errors are reported before execution.
--> Optimized machine code improves performance.

Disadvantages of a Compiler

=> Compilation can take time for large programs.
=> The program must be recompiled after every code change.

Examples of Compiled Languages
C
C++
Go
Rust

What is an Interpreter?

An interpreter is a software program that translates and executes source code line by line at runtime. It does not create a separate executable file.

How an Interpreter Works?

=> Reads one line of code.
=> Translates it into machine instructions.
=> Executes it immediately.
=> Moves to the next line.

Advantages of an Interpreter

--> Easy to test and debug code.
--> No separate compilation step is required.
--> Suitable for rapid development.

Disadvantages of an Interpreter

=> Slower execution compared to compiled programs.
=> The code must be interpreted every time it runs.

Examples of Interpreted Languages
Python
JavaScript
Ruby
PHP

Real-Life Example

Imagine you want to translate an English book into Tamil:

Compiler Approach

A translator converts the entire book first and then gives you the completed Tamil version. You can read it anytime without needing the translator again.

Interpreter Approach

A translator reads one sentence, translates it, and explains it immediately. Then moves to the next sentence.

Dependency Injection in Spring Boot

Vidya — Tue, 02 Jun 2026 05:25:57 +0000

Introduction

Dependency Injection (DI) is a design pattern used to achieve loose coupling between classes. Instead of a class creating its own objects, the required objects (dependencies) are provided by an external container. In Spring Boot, the Spring Container automatically creates and injects objects into classes.

What is Dependency Injection?

Dependency Injection is a process where the Spring Framework provides the required object to a class instead of the class creating the object itself using the new keyword. This makes the application more flexible, maintainable, and easier to test.

Without Dependency Injection
public class Car {
Engine engine = new Engine(); // Object created manually
}

In this approach, the Car class is tightly coupled with the Engine class.

With Dependency Injection
@Component
public class Engine {
}

@Component
public class Car {

@Autowired
private Engine engine;

}

Here, Spring creates the Engine object and injects it into the Car class automatically.

What is @Autowired in Spring Boot?

@Autowired is an annotation used for Dependency Injection in Spring.

It tells the Spring Container:

"This class needs an object of another class. Please create it and inject it automatically."

What happens here?

=> Spring starts the application.
=> It finds @Component on Engine.
=> Spring creates an Engine object and stores it in the Spring Container.
=> It finds @Autowired on engine.
=> Spring injects the already created Engine object into the Car class.

Internally, it works like:

Engine engine = new Engine();
Car car = new Car();
car.engine = engine;

--> But Spring does this automatically.

Why Do We Use Dependency Injection?

=> Reduces tight coupling between classes.
=> Improves code maintainability.
=> Makes unit testing easier.
=> Promotes code reusability.
=> Helps manage object creation automatically.

Auto Configuration in Spring Boot

Vidya — Mon, 01 Jun 2026 05:36:07 +0000

What is Auto Configuration in Spring Boot?

Auto Configuration is one of the most powerful features of Spring Boot. It automatically configures your application based on the dependencies available in the project. This reduces manual configuration and helps developers build applications faster.

In traditional Spring applications, developers had to create many configuration classes and bean definitions manually. Spring Boot simplifies this process through Auto Configuration.

Why Do We Use Auto Configuration?

=> Reduces boilerplate configuration code.
=> Speeds up application development.
=> Minimizes manual setup.
=> Provides sensible default configurations.
=> Makes Spring applications easier to create and maintain.

How Auto Configuration Works?

When a Spring Boot application starts:
=> Spring Boot scans the dependencies in pom.xml.
=> It checks which libraries are available.
=> Based on those libraries, it automatically creates and configures the necessary beans.
=> The application becomes ready to use with minimal configuration.

The Auto Configuration feature is enabled by the @SpringBootApplication annotation.

@SpringBootApplication
public class MyApplication {
    public static void main(String[] args) {
        SpringApplication.run(MyApplication.class, args);
    }
}

The @SpringBootApplication annotation internally includes:

@Configuration
@EnableAutoConfiguration
@ComponentScan

Here, @EnableAutoConfiguration is responsible for Auto Configuration.

Real-Life Example

Think of Auto Configuration like a new smartphone.
When you insert a SIM card:
=> The phone automatically detects the network.
=> Configures mobile settings.
=> Enables calling and internet.
---> You do not manually configure everything.

Similarly, Spring Boot detects dependencies and automatically configures the required components.

Learn REST API Easily

Vidya — Thu, 28 May 2026 06:10:07 +0000

What is REST API?
A REST API (Representational State Transfer Application Programming Interface) is a way for applications to communicate with each other using HTTP methods like GET, POST, PUT, and DELETE. It allows clients and servers to exchange data, usually in JSON format. Each resource is identified using a unique URL such as http://localhost:8080/products. REST APIs are widely used in web and mobile applications because they are simple, fast, and scalable.

When we used REST API?
We use REST APIs when different applications need to communicate and share data with each other. They are commonly used to connect frontend applications with backend servers. REST APIs are also used in web and mobile applications to perform operations like creating, reading, updating, and deleting data. They help applications work efficiently across different platforms and technologies.

Example:

Example:
http://localhost:8080/users

This is a REST API endpoint used to manage user data from the server.

localhost → Your local machine where the application runs
8080 → Port number of the server
/users → Resource that contains user information

Operations:

GET /users → Get all users
GET /users/1 → Get user with ID 1
POST /users → Add a new user
PUT /users/1 → Update user details
DELETE /users/1 → Delete user with ID 1

Image Format:

API

Vidya — Wed, 27 May 2026 07:38:26 +0000

What is API?

API stands for Application Programming Interface. It is a bridge that allows two applications to communicate and exchange data with each other. APIs are used to send requests and receive responses between frontend and backend applications. They help applications fetch, store, update, and delete data from the server or database. APIs are widely used in web applications, mobile applications, and cloud services. For example, a React frontend uses APIs to get data from a Spring Boot backend.

For example:

=> React frontend
=> Spring Boot backend
=> MySQL database

The frontend cannot directly access the database.
So it sends a request through an API, and the backend returns the response.

Simple Flow

Frontend → API → Backend → Database

Real-Time Example

Consider a food delivery app.
=> The mobile app needs restaurant data
=> The data is stored in the server/database
=> The app requests data using an API
=> The server sends the response
---> So APIs help different applications communicate with each other.

Why Do We Use API?
1.Communication Between Applications

APIs allow different applications to communicate.

Example:
React ↔ Spring Boot
Mobile App ↔ Server
Website ↔ Payment Gateway

2.To Fetch Data

APIs are used to get data from the server or database.
Example:

GET /products
   This returns all products.

3. To Send Data

APIs are used to store data in the database.
Example:

POST /products
       This adds a new product.

4. To Update Data

Example:

PUT /products/1
         This updates the product with ID 1.

5. To Delete Data

Example:

DELETE /products/1
          This deletes the product with ID 1.

Annotations in Spring Boot

Vidya — Tue, 26 May 2026 06:00:28 +0000

Common Spring Boot Annotations and Why We Use Them?

@SpringBootApplication**

@SpringBootApplication
public class DemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
}

Why we use?

This is the main annotation for Spring Boot application.

It combines 3 annotations internally:

@Configuration
@EnableAutoConfiguration
@ComponentScan

Meaning:
=> Starts Spring Boot app
=> Automatically configures project
=> Scans classes like controller, service, repository

2. @RestController

@RestController
public class StudentController {

}

@RestController is used in Spring Boot to create REST APIs and send data directly to the client as an HTTP response, usually in JSON format.

Why do we use it?

We use @RestController when we want to:

=> send data to frontend applications
=> create APIs
=> return JSON/XML instead of HTML pages

3.@Controller

@Controller is used to create a web controller in Spring MVC.

It is mainly used to return:

=> HTML pages
=> JSP pages
=> Thymeleaf templates
instead of JSON data.

Why do we use @Controller?

We use @Controller when we want to:

=> handle web requests
=> return UI pages to the browser
=> build traditional web applications

Example

 @Controller
public class HomeController {

    @GetMapping("/home")
    public String home() {
        return "home";
    }
}

4.@Service

@Service is used to mark a class as a service layer in a Spring Boot application.

It contains the business logic of the application.

Why do we use @Service?

We use @Service to:

=> write business logic
=> perform calculations
=> validate data
=> process application logic
=> keep controller code clean

Example

@Service
public class StudentService {

    public String getMessage() {
        return "Welcome Student";
    }
}

5. @Repository
@Repository is used to mark a class as a repository layer in a Spring Boot application.

It is mainly used for database operations.

Why do we use @Repository?

We use @Repository to:

=> connect with the database
=> save data
=> fetch data
=> update data
=> delete data

It acts as a bridge between the application and the database.

Example

@Repository
public class StudentRepository {

}

Spring vs Spring Boot – Complete Comparison

Vidya — Tue, 12 May 2026 15:33:31 +0000

What is Spring?
=> Spring Framework is a Java framework used to build enterprise applications.
=> It provides features like Dependency Injection (DI), IoC, database handling, security, and web development.
=> In Spring, developers must configure many things manually using XML or Java configuration.
=> It is flexible and powerful but requires more setup and coding.
Spring is mainly used for large-scale Java applications.
Example: Creating web applications, banking systems, REST APIs, and microservices.

What is Spring Boot?
=> Spring Boot is built on top of Spring Framework.
=> It reduces configuration work and makes development faster and easier.
=> Spring Boot provides auto-configuration, embedded servers, and starter dependencies.
=> You can run applications directly without deploying WAR files manually.
=> It follows “convention over configuration,” so less code is needed.
Example: Quickly creating REST APIs, backend services, and microservice applications.

Why do we use Spring Boot Framework in Java instead of others?
=> Spring Boot makes Java development simple, fast, and production-ready.
=> It has built-in support for REST APIs, databases, security, and microservices.
=> Embedded servers like Tomcat help run applications easily.
=> Large community support and many companies use it in real projects.
=> It reduces boilerplate code and saves development time.
=> Compared to many frameworks, Spring Boot is easier for creating scalable enterprise applications quickly.

Image Format