DEV Community: Madhavan G

Understanding Constructors in Java: Why We Need Them and How They Solve Object Creation Problems.

Madhavan G — Sat, 11 Jul 2026 08:02:21 +0000

This is the program we worked in the last blog

Program Without a Constructor

public class Building {

    static int age = 10;
    static String name = "Payilagam";

    String studName1 = "Mohan";
    int studAge1 = 22;

    String studName2 = "Deva";
    int studAge2 = 23;

    String studName3 = "Madhavan";
    int studAge3 = 24;

    public static void main(String[] args) {

        Building student1 = new Building();
        Building student2 = new Building();
        Building student3 = new Building();

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

        System.out.println(student1.studName1 + " " + student1.studAge1);
        System.out.println(student1.studName2 + " " + student1.studAge2);
        System.out.println(student1.studName3 + " " + student1.studAge3);
    }
}

What Is the Problem with This Program?

At first glance, the program seems to work correctly. It prints:

Payilagam
10
Mohan 22
Deva 23
Madhavan 24

However, if we carefully examine the class, we can identify several design problems.

Problem 1: One Object Contains Data for Multiple Students

Notice these instance variables:

String studName1 = "Mohan";
int studAge1 = 22;

String studName2 = "Deva";
int studAge2 = 23;

String studName3 = "Madhavan";
int studAge3 = 24;

Instead of representing one student, a single Building object stores the details of three different students.

This defeats the purpose of object-oriented programming.

Ideally,

student1 should represent only Mohan.
student2 should represent only Deva.
student3 should represent only Madhavan.

Instead, every object contains all three students.

Problem 2: Every Object Stores the Same Data

Consider these statements:

Building student1 = new Building();
Building student2 = new Building();
Building student3 = new Building();

You might expect each object to have different information.

But all three objects actually contain exactly the same values.

For example,

student1 contains

studName1 = Mohan
studName2 = Deva
studName3 = Madhavan

Similarly,

student2 also contains

studName1 = Mohan
studName2 = Deva
studName3 = Madhavan

And the same is true for student3.

Creating multiple objects serves no purpose because every object is identical.

Problem 3: Not Scalable

Imagine storing details for 100 students.

You would have to write

String studName1;
String studName2;
String studName3;
...
String studName100;

and

int studAge1;
int studAge2;
int studAge3;
...
int studAge100;

This results in hundreds of variables, making the program difficult to read, maintain, and extend.

Problem 4: Objects Cannot Store Unique Data

Suppose you want to add a new student named Akash.

You would need to modify the class itself by adding new variables:

String studName4 = "Akash";
int studAge4 = 25;

Every time a new student is added, the class must be edited.

A well-designed class should not require modification whenever new objects are created.

To solve this we are using constructor.

What is a Constructor?

A constructor is a special member of a class that is automatically executed whenever an object is created.

Unlike ordinary methods, constructors are not called manually. Java automatically invokes them whenever an object is created using the new keyword.

A constructor has the following characteristics:

*It has the same name as the class.
*It does not have a return type, not even void.
*It executes automatically when an object is created.
*It is mainly used to initialize instance variables.

How Constructors Solve These Problems

Instead of creating separate variables for every student, we create only one name variable and one age variable.

String studName;
int studAge;

Now each object stores its own values.

To initialize these variables automatically, we use a constructor.

Program Using a Constructor

public class Building {

    static int age = 10;
    static String name = "Payilagam";

    String studName;
    int studAge;

    // Constructor
    public Building(String studName, int studAge) {
        this.studName = studName;
        this.studAge = studAge;
    }

    public void display() {
        System.out.println(studName + " " + studAge);
    }

    public static void main(String[] args) {

        Building student1 = new Building("Mohan", 22);
        Building student2 = new Building("Deva", 23);
        Building student3 = new Building("Madhavan", 24);

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

        student1.display();
        student2.display();
        student3.display();
    }
}

Program Using a Constructor screenshot:

How the Constructor Fixes the Problem

The constructor is

public Building(String studName, int studAge) {
    this.studName = studName;
    this.studAge = studAge;
}

Whenever an object is created, Java automatically passes the supplied values to the constructor.

For example,

Building student1 = new Building("Mohan", 22);

Java internally executes

this.studName = "Mohan";
this.studAge = 22;

Similarly,

Building student2 = new Building("Deva", 23);

stores

studName = Deva
studAge = 23

Each object now has its own unique data.

Understanding the Constructor

The constructor accepts two parameters.

public Building(String studName, int studAge)

Whenever Java creates an object, it automatically passes the supplied values to these parameters.

Inside the constructor,

this.studName = studName;
this.studAge = studAge;

the values received through the parameters are stored in the object's instance variables.

This ensures that every object is initialized immediately after creation.

What Does the `this` Keyword Mean?

Many beginners get confused by this line:

this.studName = studName;

Both variables have the same name, but they represent different things.

studName refers to the constructor parameter.
this.studName refers to the instance variable of the current object.

Therefore,

this.studName = studName;

means:

Store the value passed to the constructor inside the current object's studName variable.

Similarly,

this.studAge = studAge;

stores the age passed by the user inside the object's studAge variable.

The this keyword helps Java distinguish between instance variables and constructor parameters when they have the same name.

How Object Creation Works

Consider the following statement:

Building student1 = new Building("Mohan", 22);

When Java executes this line, two important things happen automatically.

Step 1: Memory Allocation

Java allocates memory for a new Building object.

Step 2: Constructor Execution

Immediately after creating the object, Java calls

Building("Mohan", 22)

Inside the constructor,

this.studName = "Mohan";
this.studAge = 22;

Now the object contains:

studName = Mohan
studAge = 22

The same process happens for every object.

When Java executes

Building student2 = new Building("Deva", 23);

the constructor initializes

studName = Deva
studAge = 23

Similarly,

Building student3 = new Building("Madhavan", 24);

creates another object containing

studName = Madhavan
studAge = 24

Although all three objects are created from the same class, each object stores different values.

Understanding the `display()` Method

The display() method prints the instance variables of the object that calls it.

public void display() {
    System.out.println(studName + " " + studAge);
}

When

student1.display();

is executed, the output is

Mohan 22

When

student2.display();

is executed, the output becomes

Deva 23

Similarly,

student3.display();

prints

Madhavan 24

The same method is used for all objects, but each object prints its own data because every object has its own instance variables.

Comparing Both Approaches

Without Constructor	With Constructor
One object stores details of multiple students.	One object represents one student.
Many variables like `studName1`, `studName2`, `studName3` are required.	Only one `studName` and one `studAge` variable are needed.
Every object contains the same data.	Every object stores its own data.
The class must be modified whenever a new student is added.	New students can be created simply by creating new objects.
Difficult to maintain.	Easy to maintain and extend.
Not a good object-oriented design.	Follows object-oriented programming principles.

Static vs Instance Variables in Java: Explained with Real-Life Examples and Programs

Madhavan G — Fri, 10 Jul 2026 15:29:26 +0000

What is a Static Variable?

A static variable belongs to the class, not to individual objects.

It is declared using the static keyword, and only one copy of the variable exists in memory, regardless of how many objects are created.

Characteristics of Static Variables

Declared using the static keyword.
Belongs to the class.
Only one copy exists.
Shared by all objects.
Memory is allocated only once when the class is loaded.
Accessed using the class name.

Syntax

class Student {
    static String institute = "Payilagam";
}

Accessing the static variable:

System.out.println(Student.institute);

Real-Life Example

Imagine the employees working in a company.

Every employee has a different name and employee ID, but the company name printed on every ID card is the same.

Employee 1
Name      : Mohan
Company   : Payilagam

Employee 2
Name      : Deva
Company   : Payilagam

Employee 3
Name      : Madhavan
Company   : Payilagam

Since the company name is common to every employee, it is a perfect example of a static variable.

What is a Non-Static (Instance) Variable?

A non-static variable, also called an instance variable, belongs to an individual object.

Whenever a new object is created, Java allocates a separate copy of every instance variable for that object.

Characteristics of Instance Variables

Declared without the static keyword.
Belongs to an object.
Every object has its own copy.
Memory is allocated whenever an object is created.
Accessed through an object reference.

Syntax

class Student {
    String name;
    int age;
}

Accessing an instance variable:

Student s = new Student();
System.out.println(s.name);

Real-Life Example

Each employee has a unique:

Name
Employee ID
Age

These values are different for every employee, so they should be stored as non-static variable(instance variables).

Example Program

public class Building {

    static int age = 10;
    static String name = "Payilagam";

    String studName1 = "Mohan";
    int studAge1 = 22;

    String studName2 = "Deva";
    int studAge2 = 23;

    String studName3 = "Madhavan";
    int studAge3 = 24;

    public static void main(String[] args) {

        Building student1 = new Building();
        Building student2 = new Building();
        Building student3 = new Building();

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

        System.out.println(student1.studName1 + " " + student1.studAge1);
        System.out.println(student1.studName2 + " " + student1.studAge2);
        System.out.println(student1.studName3 + " " + student1.studAge3);
    }
}

Program output Screenshot:

Understanding the Program

1. Why are static variables accessed using the class name?

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

Here, name and age are declared as static.

Since they belong to the class itself, there is no need to create an object to access them.

This is why we write:

Building.name

instead of

student1.name

2. Why can't a static method access instance variables directly?

The main() method is declared as static.

A static method belongs to the class, whereas instance variables belong to individual objects.

So if we write:

System.out.println(studName1);

Java doesn't know which object's studName1 should be accessed.

Therefore, the compiler displays the error:

non-static variable studName1 cannot be referenced from a static context

3. How do we access instance variables?

First, create an object.

Building student1 = new Building();

Now access the variable using that object.

System.out.println(student1.studName1);

Here,

student1 is the object.
studName1 belongs to that object.

The Problem in This Program:

Although the program works, it violates one of the most important principles of Object-Oriented Programming.

We created three objects.

Building student1 = new Building();
Building student2 = new Building();
Building student3 = new Building();

But every object contains all three students.

student1
Mohan
Deva
Madhavan

student2
Mohan
Deva
Madhavan

student3
Mohan
Deva
Madhavan

Every object stores the same information.

This defeats the purpose of creating multiple objects.

One Object Should Represent One Real-World Entity

One of the core principles of Object-Oriented Programming is:

One object should represent one real-world entity.

Instead of storing multiple students inside one object, each object should represent exactly one student.

Student Object 1
Name : Mohan
Age : 22

Student Object 2
Name : Deva
Age : 23

Student Object 3
Name : Madhavan
Age : 24

This design is cleaner, easier to maintain, and follows object-oriented principles.

How can we solve this problem:

By using Constructor in java we can solve this problem let discuss this in next blog.

Summary

Static Variable	Instance Variable
Belongs to the class	Belongs to an object
Declared using the `static` keyword	Declared without the `static` keyword
Only one copy exists	Every object has its own copy
Shared by all objects	Unique for every object
Memory allocated once when the class loads	Memory allocated whenever an object is created
Accessed using `ClassName.variable`	Accessed using `object.variable`
Stores common data	Stores object-specific data

Java Rules for Creating a Class, Data Types, and Static Variables

Madhavan G — Fri, 03 Jul 2026 07:42:22 +0000

Java is one of the most popular object-oriented programming languages used for developing desktop applications, web applications, mobile apps, and enterprise software. To write efficient Java programs, it is essential to understand the basic concepts such as creating a class, using different data types, and working with static variables. This article explains these concepts in a simple and easy-to-understand manner.

Java Rules for Creating a Class

A class is a blueprint for creating objects. It defines the properties (variables) and behaviors (methods) of an object.

Rules for Creating a Java Class

1. Class Name Should Start with a Letter

A Java class name must begin with an alphabet (A-Z or a-z), underscore (_), or dollar sign ($). However, it is recommended to start with a letter.

Valid Examples:

class Student
class Employee
class _Demo

Invalid Example:

class 123Student

2. Use Pascal Case Naming Convention

Java follows the Pascal Case naming convention for class names, where the first letter of every word is capitalized.

Examples:

Student
EmployeeDetails
BankAccount

3. Class Name Should Not Be a Java Keyword

Reserved keywords cannot be used as class names.

Invalid Examples:

class int
class public
class static

4. Only One Public Class Per File

If a class is declared as public, the filename must match the class name.

Example:

File Name: Student.java

public class Student {
}

5. Curly Braces Define the Class Body

Everything related to the class, such as variables, constructors, and methods, must be enclosed within curly braces { }.

Example:

public class Student {

    int id;
    String name;

    void display() {
        System.out.println(name);
    }

}

6. A Class Can Contain

Variables
Methods
Constructors
Nested Classes
Static Members

Example of a Java Class

public class Student {

    int id;
    String name;

    void display() {
        System.out.println("ID: " + id);
        System.out.println("Name: " + name);
    }

    public static void main(String[] args) {

        Student s = new Student();

        s.id = 101;
        s.name = "Rahul";

        s.display();
    }
}

Output:

ID: 101
Name: Rahul

Java Data Types

A data type specifies the type of value that a variable can store.

Java data types are divided into two categories:

Primitive Data Types
Non-Primitive (Reference) Data Types

1. Primitive Data Types

Primitive data types are predefined by Java and store simple values.

Data Type	Size	Example
byte	1 byte	100
short	2 bytes	2000
int	4 bytes	50000
long	8 bytes	9876543210L
float	4 bytes	12.5f
double	8 bytes	45.78
char	2 bytes	'A'
boolean	1 bit	true

Integer Example

public class IntegerExample {

    public static void main(String[] args) {

        int age = 25;

        System.out.println(age);
    }
}

Output

Double Example

public class DoubleExample {

    public static void main(String[] args) {

        double salary = 45000.75;

        System.out.println(salary);
    }
}

Output

45000.75

Character Example

public class CharacterExample {

    public static void main(String[] args) {

        char grade = 'A';

        System.out.println(grade);
    }
}

Output

Boolean Example

public class BooleanExample {

    public static void main(String[] args) {

        boolean isPassed = true;

        System.out.println(isPassed);
    }
}

Output

true

2. Non-Primitive Data Types

Non-primitive data types store references to objects rather than actual values.

Examples include:

String
Arrays
Classes
Interfaces
Objects

Example:

public class StringExample {

    public static void main(String[] args) {

        String name = "John";

        System.out.println(name);
    }
}

Output

John

Static Variable in Java

A static variable is a variable that belongs to the class rather than to individual objects. Only one copy of the static variable is created, and it is shared among all objects of the class.

Static variables are declared using the static keyword.

Syntax

class ClassName {

    static dataType variableName;

}

Characteristics of Static Variables

Belong to the class instead of objects.
Memory is allocated only once.
Shared among all objects.
Can be accessed using the class name.
Initialized when the class is loaded.

Example of a Static Variable

public class Student {

    int id;
    String name;

    static String college = "ABC College";

    Student(int i, String n) {
        id = i;
        name = n;
    }

    void display() {
        System.out.println(id + " " + name + " " + college);
    }

    public static void main(String[] args) {

        Student s1 = new Student(101, "Rahul");
        Student s2 = new Student(102, "Priya");

        s1.display();
        s2.display();
    }
}

Output

101 Rahul ABC College
102 Priya ABC College

Notice that both students share the same value for the college variable because it is declared as static.

Changing the Value of a Static Variable

If the value of a static variable changes, the updated value is reflected for all objects.

public class Student {

    static String college = "ABC College";

    public static void main(String[] args) {

        System.out.println(college);

        college = "XYZ University";

        System.out.println(college);
    }
}

Output

ABC College
XYZ University

Difference Between Static and Instance Variables

Static Variable	Instance Variable
Belongs to the class	Belongs to an object
Shared by all objects	Separate copy for each object
Created once	Created whenever an object is created
Accessed using the class name	Accessed using object references
Declared with the `static` keyword	Declared without the `static` keyword

Programming Paradigms

Madhavan G — Thu, 25 Jun 2026 08:20:35 +0000

What Is a Programming Paradigm?

A programming paradigm is a fundamental approach to writing computer programs. It defines how code is organized, how data is handled, and how problems are broken down into manageable parts.

Just as there are different styles of architecture for designing buildings, there are different programming paradigms for designing software. Each paradigm has its strengths and is suited to particular types of problems.

1.Procedural Programming:

Procedural programming is one of the oldest and most straightforward programming paradigms. In this approach, a program is organized as a sequence of procedures or functions that execute step by step.

The focus is on creating clear instructions that tell the computer exactly what to do and in what order.

Example:

void greet() {
    printf("Hello");
}

int main() {
    greet();
}

Key Characteristics:

Code is organized into procedures or functions.
Execution follows a logical sequence.
Easy to understand for beginners.
Suitable for smaller and medium-sized applications.

Common Languages:

C
Pascal
BASIC

Best Use Cases:

Procedural programming works well for applications that require straightforward execution flows, such as utilities, scripts, and system-level programming.

2.Object-Oriented Programming (OOP):

Object-Oriented Programming (OOP) organizes software around objects rather than functions. An object combines data (attributes) and behavior (methods) into a single unit.

The main goal of OOP is to model real-world entities and their interactions.

Example:

class Car:
    def start(self):
        print("Car started")

car = Car()
car.start()

Key Characteristics:

Uses classes and objects.
Supports encapsulation, inheritance, and polymorphism.
Encourages code reusability.
Makes large applications easier to manage.

Common Languages:

Java
C++
Python
C#

Best Use Cases:

OOP is widely used in enterprise applications, desktop software, mobile applications, and game development.

3.Functional Programming:

Functional programming treats computation as the evaluation of mathematical functions. Instead of changing data directly, it emphasizes immutable data and pure functions.

A pure function always produces the same output for the same input and has no side effects.

Example;

numbers = [1, 2, 3]
squared = list(map(lambda x: x * x, numbers))

Key Characteristics:

Functions are first-class citizens.
Avoids mutable state.
Encourages predictable and testable code.
Makes concurrent programming easier.

Common Languages:

Haskell
Lisp
Scala
F#

Best Use Cases:

Functional programming is commonly used in data processing, distributed systems, and applications requiring high reliability.

4.Declarative Programming:

Declarative programming focuses on describing what should be achieved rather than how to achieve it.

The programmer specifies the desired result, and the underlying system determines the execution strategy.

Example:

SELECT * FROM Employees
WHERE Salary > 50000;

In this example, you describe the data you want, not the detailed steps required to retrieve it.

Key Characteristics:

Emphasizes desired outcomes.
Reduces implementation complexity.
Often leads to concise and readable code.

Common Technologies:

SQL
HTML
CSS

Best Use Cases:

Declarative programming is widely used in database queries, web development, and configuration management.

5.Logic Programming:

Logic programming is based on formal logic. Instead of writing explicit instructions, developers define facts and rules, and the system uses logical reasoning to determine answers.

Example:

parent(john, mary).
parent(mary, sam).

The program stores relationships, and queries can be used to derive new information from them.

Key Characteristics:

Uses facts and rules.
Relies on automated reasoning.
Ideal for knowledge-based systems.

Common Languages:

Prolog
Datalog

Best Use Cases:

Logic programming is commonly used in artificial intelligence, expert systems, and rule-based applications.

Multi-Paradigm Programming Languages:

Modern programming languages are often designed to support multiple paradigms rather than being restricted to just one.

For example:

Python supports procedural, object-oriented, and functional programming.
Java primarily supports object-oriented and procedural programming.
JavaScript supports object-oriented, procedural, and functional programming.
C++ supports object-oriented, procedural, and generic programming.

This flexibility allows developers to choose the most appropriate style for a specific problem.

Why Are Programming Paradigms Important?

Understanding programming paradigms offers several benefits:

Better Problem Solving:

Different paradigms provide different tools and perspectives for solving problems efficiently.

Improved Code Organization:

Paradigms help structure code in a way that improves readability and maintainability.

Greater Flexibility:

Knowledge of multiple paradigms allows developers to select the best approach for each project.

Enhanced Career Growth:

Modern software development often requires familiarity with multiple programming styles and methodologies.

Understanding useMemo in React.

Madhavan G — Wed, 10 Jun 2026 08:53:32 +0000

What is useMemo?

useMemo is a React Hook used to store the result of an expensive calculation and only recalculate it when needed.

Syntax:

const memoizedValue = useMemo(() => {
  return calculation();
}, [dependencies]);

Parameters:

Callback Function: Contains the calculation whose result should be cached.
Dependencies Array: React recalculates the value only when one of these dependencies changes.

Return Value:
Returns the cached (memoized) value.

Why Do We Use useMemo?

Normally, when a React component re-renders, all the code inside it runs again.

This can become a problem if:

The component performs heavy calculations.
Large lists need filtering or sorting.
Expensive operations run repeatedly.

useMemo helps by:

✅ Improving performance

✅ Reducing unnecessary calculations

✅ Making applications more efficient

Without useMemo:

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

  const expensiveCalculation = () => {
    console.log("Calculating...");
    return 1000000 * 1000000;
  };

  const result = expensiveCalculation();

  return (
    <div>
      <h2>Result: {result}</h2>
      <button onClick={() => setCount(count + 1)}>
        Count: {count}
      </button>
    </div>
  );
}

Problem

Whenever the button is clicked:

State changes.
Component re-renders.
expensiveCalculation() runs again.
Performance may decrease.

Using useMemo:


import { useState, useMemo } from "react";

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

  const result = useMemo(() => {
    console.log("Calculating...");
    return 1000000 * 1000000;
  }, []);

  return (
    <div>
      <h2>Result: {result}</h2>
      <button onClick={() => setCount(count + 1)}>
        Count: {count}
      </button>
    </div>
  );
}

export default App;

What Happens?

Component renders for the first time.
useMemo calculates the value.
Value is stored in memory.
Clicking the button causes a re-render.
React reuses the stored value.
Calculation does not run again.

Understanding useEffect in React with Simple Examples

Madhavan G — Fri, 22 May 2026 08:45:22 +0000

React’s useEffect hook is one of the most important hooks for handling side effects in functional components.

You can use it to:

run code after rendering
fetch data
listen to changes
work with timers
update the DOM and much more.

The behavior of useEffect mainly depends on its dependency array.

Let’s understand it with practical examples.

1. Run Only Once (Component Mount)

Sometimes you want code to run only when the page loads for the first time.

Example:

API call on page load
Initial setup
Logging

Example:

import React, { useEffect } from "react";

function App() {
  useEffect(() => {
    console.log("Component Mounted");
  }, []);

  return <h1>Hello React</h1>;
}

export default App;

Why Does This Work?

An empty dependency array tells React:

“Run this effect only once after the initial render.”

Output:
Component Mounted

Only once when the component loads.

2. Run on Every Render:

Sometimes you want something to happen after every render.

Example:

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

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

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

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

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

export default App;

What Happens Here?

Since no dependency array is provided:

the effect runs after every render

This includes:

initial render
state updates
parent component re-renders

Output:

Rendered
Rendered
Rendered

Every render triggers the effect.

Important Note

Be careful with this pattern because unnecessary renders can affect performance.

3. Run When State Changes:

Suppose you want an effect to run only when a specific state changes.

Example:

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

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

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

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

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

export default App;

What Happens?

Dependency Array
[count]
So the effect runs whenever count changes.

4. Two States, One Effect:

Now let’s say we have two state variables.

Example:

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

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

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

  return (
    <div>
      <input
        type="text"
        placeholder="Enter name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />

      <h1>{count}</h1>

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

export default App;

What Happens?

The effect runs whenever:

count changes
OR name changes
Why?

React watches all values inside the dependency array.

If any dependency changes, the effect runs again.

What If Only count Is Added?
useEffect(() => {
console.log("Effect ran");
}, [count]);

Now:

changing count triggers the effect
changing name does NOT trigger the effect

This can sometimes create bugs if your effect also depends on name.

5. Derived Logic — Should It Be Inside useEffect?:

Suppose we want to show:

“Even Number”

whenever count becomes even.

Example:

import React, { useState } from "react";

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

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

      {count % 2 === 0 && <p>Even Number</p>}

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

export default App;

Why Not useEffect?

Because this is:

derived UI
not a side effect

useEffect should be used only for side effects like:

API calls
timers
subscriptions
localStorage updates

Basic react about Jsx and Component.

Madhavan G — Fri, 15 May 2026 08:45:14 +0000

What is JSX?

JSX stands for JavaScript XML. It is a syntax extension for JavaScript that allows developers to write HTML-like structures directly inside JavaScript code.

Example:

const element = <h1>Hello World</h1>;

Although JSX looks like HTML, browsers do not understand JSX directly. Tools like Babel convert JSX into regular JavaScript.

The above JSX code becomes:

React.createElement("h1", null, "Hello World");

Why Use JSX?

JSX is widely used because it makes code:

Easier to read
Cleaner and more organized
Faster to write
Simple to manage UI components

Instead of writing complex JavaScript code for UI creation, developers can use JSX to design interfaces in a more natural way.

Rules of JSX:

To write JSX correctly, developers must follow some important rules.

1.JSX Must Have One Parent Element:

JSX does not allow multiple elements without wrapping them inside a single parent element.

Correct Example:

return (
  <div>
    <h1>Welcome</h1>
    <p>This is JSX</p>
  </div>
);

Incorrect Example:

return (
  <h1>Welcome</h1>
  <p>This is JSX</p>
);

You can also use React Fragments:

return (
  <>
    <h1>Welcome</h1>
    <p>This is JSX</p>
  </>
);

2.All Tags Must Be Closed:

Every JSX tag must be properly closed.

Correct Example:

<img src="image.jpg" />
<input />

Incorrect Example:

<img src="image.jpg">

3. Use className Instead of class:

Since class is a reserved keyword in JavaScript, JSX uses className.

Correct Example

<div className="container">
  Content
</div>

Incorrect Example

<div class="container">
  Content
</div>

Use CamelCase for Attributes:

4.JSX attributes follow camelCase naming:

Examples
HTML Attribute=>JSX Attribute
onclick =>onClick
tabindex =>tabIndex
maxlength=>maxLength

Example:

<button onClick={handleClick}>
  Click Here
</button>

5.JavaScript Expressions Use Curly Braces {}

You can write JavaScript expressions inside JSX using curly braces.

Example

const name = "Rahul";

<h1>Hello {name}</h1>

You can also use calculations:

<h2>{5 + 5}</h2>

6.Inline CSS Must Be Written as an Object:

Styles in JSX are written as JavaScript objects.

Example:

<div style={{ color: "blue", fontSize: "20px" }}>
  Styled Text
</div>

Notice that property names use camelCase.

7.Comments in JSX:

Comments are written using {/* comment */} syntax.

Example

<div>
  {/* This is a JSX comment */}
  <h1>Hello</h1>
</div>

8.Component Names Must Start with a Capital Letter:

Custom React components should always begin with uppercase letters.

Correct Example:

<MyComponent />

Incorrect Example:

<myComponent />

Lowercase names are treated as normal HTML elements.

Advantages of JSX

Some major advantages of JSX are:

Improves code readability
Makes UI development easier
Reduces complexity
Supports reusable components
Provides better error handling

What are React Components?

React components are reusable pieces of code that return JSX and define how a part of the user interface should appear.

A component works like a JavaScript function that returns HTML-like UI code.

Example

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

The component can then be used like an HTML tag:

<Welcome />

Why Use Components?

Components provide several advantages:

Reusable code
Better organization
Easier maintenance
Improved readability
Faster development

Instead of writing the same code multiple times, developers can create one component and reuse it wherever needed.

Types of React Components:

There are mainly two types of components in React:

Functional Components
Class Components

1.Functional Components:

Functional components are simple JavaScript functions that return JSX.

They are the most commonly used components in modern React.

Example:

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

Using the Component:

<Greeting />

Functional Component with Props

Props are used to pass data from one component to another.

Example

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

Using Props:

<Greeting name="Rahul" />

Output:
Hello Rahul

2.Class Components:

Class components are ES6 classes that extend React.Component.

Before hooks were introduced, class components were mainly used for state management.

Example

import React, { Component } from "react";

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

Using the Component:

<Welcome />

Difference Between Functional and Class Components:
Functional Components|||Class Components
Simpler syntax||||||||More complex
Use hooks for state|||Use lifecycle methods
Faster and cleaner||||More boilerplate code
Mostly used today|||||Less commonly used

Rules for Naming Components:

React components should follow these rules:

Component names must start with a capital letter
Names should be meaningful
One component should focus on one task
Correct Example:

function Header() {
  return <h1>Website Header</h1>;
}

Incorrect Example

function header() {
  return <h1>Website Header</h1>;
}

Basic about React,Library and Framwork.

Madhavan G — Wed, 13 May 2026 14:08:09 +0000

What is React?

React is a free, open-source front-end JavaScript library used to build interactive user interfaces (UIs), particularly for single-page applications especially for:

•websites
•web apps
•dashboards
•mobile apps (through React Native)

React helps developers create apps using components.

Example:

•Navbar component
•Button component
•Profile card component
•Chat message component

These reusable pieces make apps easier to build and maintain.

Who Created React?

React was created by: Jordan Walke

while working at: Meta(previously Facebook)

React was first released publicly in 2013.

It was originally built to improve Facebook’s UI performance and complexity.

Why Was React Created?

Before React:

•Updating web pages dynamically was difficult
•large applications became messy
•DOM manipulation was slow and error-prone
•UI state management was hard

Developers frequently used:

•jQuery
•manual DOM updates
•lots of imperative code

React introduced a better approach:

•declarative UI
•component-based architecture
•efficient rendering

Why Do We Need React?

Without React, building complex UIs becomes harder as apps grow.

Imagine:

•Notifications updating
•Chat messages appearing
•Likes increasing
•Forms changing
•Live dashboards refreshing

Managing all this manually is difficult.

React helps by:

•Organizing UI into components
•Automatically updating the page when data changes
•Reducing repetitive code
•Improving maintainability

What is the difference between library and framwork?

Library

⇒A library is a collection of reusable functions or tools that you call when you need them.

⇒You are in control of the application flow.

Example:

If you use a math library:

add(2, 3)

Your code decides:

•when to call it
•how to use it
•how the app is structured

⇒Key idea
Your code calls the library

Framework:

A framework provides a structure and rules for building applications. It often controls the overall flow and calls your code at specific times.

Example

In a web framework:

•it decides routing
•lifecycle
•app structure
•startup flow

You plug your code into the framework.

⇒Key idea
The framework calls your code

This is often called Inversion of Control (IoC).

⇒Simple Analogy

•Library = toolbox
You pick tools when needed.

•Framework = house blueprint
The structure is already decided; you fill in parts.

what is build tool in react?

A build tool in React is software that automates the transformation of your source code (like JSX, TypeScript, and modern JavaScript) into optimized, browser-ready files. Because browsers cannot natively understand features like JSX or advanced ES6+ syntax, these tools act as a "bridge" to make your code functional and efficient for the web.

Popular build tools used in react:

Vite
Webpack
Parcel
Rspack
esbuild
Turbopack
Rollup

What is Vite?

Vite is a modern frontend build tool and development server used to build fast web applications, especially with React, Vue, and other frameworks.

It is designed to make development much faster and simpler compared to older tools like Webpack.

Closure in javascript.

Madhavan G — Wed, 06 May 2026 16:01:24 +0000

A closure is a fundamental concept in JavaScript where an inner function retains access to the variables of its outer function even after the outer function has finished executing. This occurs because the inner function keeps a reference to its original lexical environment, effectively "remembering" the scope it was created in.

How Closures Work:
In JavaScript, closures are created every time a function is defined inside another function.

⇒Lexical Scoping: JavaScript uses the physical location of a variable in the source code to determine its accessibility. Inner functions can look "up" the scope chain to find variables in outer functions.

⇒Persistence: Normally, local variables within a function are destroyed once that function finishes running. However, if an inner function uses those variables, the JavaScript engine keeps them in memory as long as that inner function exists.

Common Use Cases:
⇒Data Encapsulation (Private Variables): You can use closures to hide variables from the global scope, making them accessible only through specific methods.

⇒Function Factories: Generate multiple functions with pre-set configurations (e.g., creating specific adders like add5 or add10).

⇒State Preservation: Maintaining state in asynchronous operations, such as timers or API calls, where the function needs to remember context after a delay.

⇒Optimization: Implementing memoization or caching to store the results of expensive calculations.

Potential Downsides:
⇒Memory Leaks: Because closures keep variables in memory, they can lead to higher memory usage or leaks if long-lived closures hold onto large objects unnecessarily.

⇒Performance: Overusing nested functions and closures can introduce minor performance overhead due to the maintenance of the scope chain

Example:

Output:

JavaScript Array Iterations.

Madhavan G — Wed, 15 Apr 2026 15:42:16 +0000

What is Iteration?
Iterations refer to the process of repeating a block of code multiple times, usually using loops. It’s a fundamental concept used when you want to perform the same operation over a collection of data or until a condition is met.

JavaScript Array Iterations:

Array forEach
Array map()
Array flatMap()
Array filter()
Array reduce()
Array reduceRight()
Array every()
Array some()
Array from()
Array keys()
Array entries()
Array with()
Array Spread (...)
Array Rest (...)

⇒Array forEach:

•The forEach() method calls a function (a callback function) once for each array element.
Example:
let nums = [1, 2, 3];
nums.forEach(n => console.log(n * 2));

Note that the function takes 3 arguments:

The item value
The item index
The array itself
When a callback function uses only the value parameter, the index and array parameters can be omitted

Screenshot of the program:

⇒Array map():

The map() method creates a new array by performing a function on each array element.
The map() method does not execute the function for array elements without values.
The map() method does not change the original array.

Example:

let nums = [1, 2, 3, 4, 5];
let doubled = nums.map(n => n * 2);
console.log(doubled);

Screenshot of the program:

⇒Array flatMap():
•The flatMap() method first maps all elements of an array and then creates a new array by flattening the array.

Example:

let arr = [1, 2, 3, 4, 5];
let result = arr.flatMap(n => [n, n * 2]);
console.log(result);

Screenshot of the program:

⇒Array filter():
•The filter() method creates a new array with array elements that pass a test.

Example:

let nums = [1, 2, 3, 4];
let even = nums.filter(myFunction);
console.log(even);
function myFunction(value){
return (value%2===0)
}

Screenshot of the program:

⇒Array reduce():

The reduce() method runs a function on each array element to produce a single value.
The reduce() method works from left-to-right in the array. See also reduceRight().
The reduce() method does not reduce the original array.
In reduce(), the callback function is called for every element, and it receives 4 arguments:

array.reduce((accumulator, currentValue, index, array) =>
{
// logic
}, initialValue);

accumulator (acc):

👉The running result
•Stores the result from previous steps
•Updated and passed forward each iteration

2.currentValue (n / item):

👉 The current array element

3.index (optional):

👉 Position of current element

4.array (optional):

👉 Original array itself

Example:

let nums = [1, 2, 3, 4];
let sum = nums.reduce(myFunction,0)
function myFunction(acc,n){
return acc+n;
}
console.log(sum)

// In arrow funtion
let nums = [1, 2, 3, 4];
let sum = nums.reduce((acc, n) => acc + n, 0);
console.log(sum);//10

Screenshot of the program:

⇒Array reduceRight():

The reduceRight() method runs a function on each array element to produce a single value.
The reduceRight() works from right-to-left in the array. See also reduce().
The reduceRight() method does not reduce the original array.

Example:
let arr = ["1", "2", "3", "4"];
let result = arr.reduceRight(myFunction)
function myFunction(acc,n){
return acc+n;
}
console.log(result)

//In arrow funtion
let arr = ["1", "2", "3","4"];
let result = arr.reduceRight((acc, val) => acc + val);
console.log(result);

Screenshot of the program:

⇒Array every():

•The every() method checks if all array values pass the condition.

Example:

const numbers = [45, 4, 9, 16, 25];
let result = numbers.every(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
console.log(result)

// In arrow funtion
// let number = [45,4,8,16,25];
// let result = number.every((val) =>val>18);
// console.log(result);

What does every() do?

👉 every() checks:

“Do ALL elements satisfy the condition?”

✔ If ALL are true → returns true
❌ If even ONE is false → returns false

Screenshot of the program:

JavaScript Callbacks.

Madhavan G — Tue, 14 Apr 2026 15:34:08 +0000

A JavaScript callback is a function passed as an argument to another function, which is then executed (or "called back") at a later point in time to complete a specific task.

This mechanism is fundamental to JavaScript's event-driven and asynchronous programming model.

What is a Callback Function?
A callback function is a function passed as an argument into another function.

A callback function is intended to be executed later.

Types of Callbacks
Asynchronous Callbacks:
Asynchronous callbacks are executed at a later time, allowing the main program to continue running without waiting.

This is essential for preventing the application from freezing during long-running tasks like network requests.

Synchronous Callbacks
Synchronous Callbacks are executed immediately within the outer function, blocking further operations until completion.

Array methods like map(), filter(), and forEach() use synchronous callbacks.

JavaScript Explained: From Basics to Data Types and Variables.

Madhavan G — Thu, 09 Apr 2026 18:05:09 +0000

WHAT IS JAVASCRIPT?

•JavaScript (JS) is a lightweight interpreted (or just-in-time compiled) programming language with first-class functions.

•It is most well-known as the scripting language for Web pages.

•Many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat.

•It is used for interact web application and supports both client side and server side development.

•Client side means code runs on the user's computer and server side means it's runs on the web browser.

•JavaScript is a single-threaded language that executes one task at a time.

⇒ What is Just-In-Time Compilation (JIT)
JIT (Just-In-Time Compilation) is a compilation process in which code is translated from an intermediate representation or a higher-level language (e.g., JavaScript or Java bytecode) into machine code at runtime, rather than prior to execution. This approach combines the benefits of both interpretation and ahead-of-time (AOT) compilation.

⇒ What is Scripting Language?
A scripting language is a programming language designed to write small programs (scripts) that automate tasks or control another program rather than building an entire standalone application.
Example:Javascript,PHP,Bash,Python,etc...

⇒ What is Programming Language?
A programming language is a formal language used to write instructions that a computer can execute, allowing developers to create software applications ranging from simple scripts to complex systems.
Example:Java,C,C#,C++,Rust,etc...

⇒What is datatypes in javascript?
•A data type tells the computer what kind of value a variable holds and what operations can be performed on it.

•In JS we have two main categories of Datatypes they are:
1.Primitive Data Type
2.Non-Primitive Data Type

⇒What is Primitive Data Type in javascript?

•A primitive data type is a basic, predefined data type provided by a programming language as a building block.

•In JavaScript, a primitive (primitive value, primitive data type) is data that is not an object and has no methods or properties.

•Primitive Datatypes are immutable because we cannot change the value of a primitive in memory. You can only reassign the variable.

•Memory Location: They are typically stored in the stack (execution context) because they have a fixed size.

•When comparing primitives, JS checks the actual value, not the
reference.

•Now let see about it types:

Number:
*Its using to denote numbers like
Example:10,23,17...

Boolean:
*Boolean denoted by true or false.

Bigint:
*Normally integer values are number,on the other hand bigint means big numbers.
Ex:784645959265262.

String:
*Strings are set of characters enclosed single' 'or double""quotes.
Example:"welcome to my Blog"

Undefined:
*Undefined is variable can be exist but not value assigned

Null:
Null is denoted by empty value or 0 value.

Symbol:
*Used to create unique identifiers, usually for object property keys.
*Guarantees uniqueness: no two symbols are equal, even if they have the same description.
Example:

const id1 = Symbol("id");
const id2 = Symbol("id");

console.log(id1 === id2); // false → unique!

⇒What is Non-Primitive Data Type in javascript?

•Non-primitive data types are complex, user-defined data types that store references (memory addresses) to objects, rather than the actual data values.

•Non-primitive data types are Mutable.

•Non-primitive types are stored in the heap the variable holds a reference (memory address) to the actual data. When you assign a non-primitive type to another variable, both variables point to the same memory location.

•Now let see about it types:

Object:

•Stores data as key-value pairs.
•Mutable — you can change properties without creating a new object.
Example:

const person = {
name: "Maddy",
age: 22,
};
console.log(person.name); // Maddy
person.age = 23;
console.log(person.age); // 23

Array:

•Ordered list of values.
•Mutable — you can add, remove, or change elements.
Example:

const numbers = [1, 2, 3, 4, 5];

numbers.push(6);

numbers[0] = 10;

console.log(numbers);

Function:

•Functions are objects in JavaScript.
•Can be stored in variables, passed around, and invoked.
Example:

function greet(name) {
return Hello, ${name}!;
}
console.log(greet("Maddy"));

Key Points:
⇒Primitive types are simple data types that store values directly. They are immutable, and each variable holds its own copy of the data.

⇒Non-primitive types are more complex, and variables store references to the data. Changes to one variable can affect others that reference the same data.

⇒what is Variables in Javascript?
•Variables are like containers that store information, such as numbers, text, or even complex data.

•In JavaScript, there are 4 ways to declare variables:
⇒const (Recommended)
⇒let (Recommended)
⇒var (Not Recommended)
⇒Automatically (Not Recommended)

•Each of these has its own rules.

const:
•Variables defined with const cannot be Redeclared.

•Variables defined with const cannot be Reassigned.

•Variables defined with const have Block Scope.

Example for const :
const n = 100;
// n = 200; This will throw an error
console.log(n)

let:
•The let keyword was introduced in ES6 (2015).

•Variables declared with let have Block Scope.

•Variables declared with let must be Declared before use.

•Variables declared with let cannot be Redeclared in the same scope.

Example for let :
let n= 10;
n = 20; // Value can be updated
// let n = 15; //can not redeclare
console.log(n)

var:
•Variables declared with the var always have Global Scope.

•Variables declared with the var keyword can NOT have block scope.

•Variables defined with var can be redeclared.

Example for var :
var n = 5;
console.log(n);

var n = 20; // reassigning is allowed
console.log(n);

Reference:https://developer.mozilla.org/en-US/docs/Web/JavaScript
Reference:https://www.geeksforgeeks.org/javascript/variables-datatypes-javascript/
Reference:https://www.w3schools.com/js/js_syntax.asp

DEV Community: Madhavan G

Understanding Constructors in Java: Why We Need Them and How They Solve Object Creation Problems.

This is the program we worked in the last blog

Program Without a Constructor

What Is the Problem with This Program?

Problem 1: One Object Contains Data for Multiple Students

Problem 2: Every Object Stores the Same Data

Problem 3: Not Scalable

Problem 4: Objects Cannot Store Unique Data

What is a Constructor?

How Constructors Solve These Problems

Program Using a Constructor

Program Using a Constructor screenshot:

How the Constructor Fixes the Problem

Understanding the Constructor

What Does the this Keyword Mean?

How Object Creation Works

Understanding the display() Method

Comparing Both Approaches

Static vs Instance Variables in Java: Explained with Real-Life Examples and Programs

What is a Static Variable?

Characteristics of Static Variables

Syntax

Real-Life Example

What is a Non-Static (Instance) Variable?

Characteristics of Instance Variables

Syntax

Real-Life Example

Example Program

Understanding the Program

1. Why are static variables accessed using the class name?

2. Why can't a static method access instance variables directly?

3. How do we access instance variables?

The Problem in This Program:

One Object Should Represent One Real-World Entity

How can we solve this problem:

Summary

Java Rules for Creating a Class, Data Types, and Static Variables

Java Rules for Creating a Class

Rules for Creating a Java Class

1. Class Name Should Start with a Letter

2. Use Pascal Case Naming Convention

3. Class Name Should Not Be a Java Keyword

4. Only One Public Class Per File

5. Curly Braces Define the Class Body

6. A Class Can Contain

Example of a Java Class

Java Data Types

1. Primitive Data Types

Integer Example

Double Example

Character Example

Boolean Example

2. Non-Primitive Data Types

Static Variable in Java

Syntax

Characteristics of Static Variables

Example of a Static Variable

Changing the Value of a Static Variable

Difference Between Static and Instance Variables

Programming Paradigms

Understanding useMemo in React.

Understanding useEffect in React with Simple Examples

Basic react about Jsx and Component.

What is JSX?

What are React Components?

Example

Basic about React,Library and Framwork.

Closure in javascript.

JavaScript Array Iterations.

JavaScript Callbacks.

JavaScript Explained: From Basics to Data Types and Variables.

WHAT IS JAVASCRIPT?

What Does the `this` Keyword Mean?

Understanding the `display()` Method