DEV Community: vishwa v

java-3

vishwa v — Thu, 24 Sep 2026 16:58:35 +0000

Understanding Constructors in Java

Java is an object-oriented programming language where objects are created from classes. Whenever an object is created, Java provides a special method called a constructor to initialize the object. Understanding constructors is essential for every Java developer.

What is a Constructor?

A constructor is a special method that is automatically called when an object of a class is created. Its primary purpose is to initialize object attributes.

Key Features of a Constructor
Has the same name as the class.
Does not have a return type, not even void.
Invoked automatically when an object is instantiated.
Can be overloaded with different parameter lists.

Constructor Overloading
A class can have multiple constructors with different parameter lists.

The this() Constructor Call

The this() keyword can be used to call another constructor within the same class.

Types of Constructors in Java

1.Default Constructor

A constructor with no parameters is called a default constructor.

2.Parameterized Constructor

A constructor that accepts arguments is known as a parameterized constructor.

3.Copy Constructor (User-Defined)

Java does not provide a built-in copy constructor like C++, but we can create one manually.

Java-2

vishwa v — Tue, 22 Sep 2026 15:32:38 +0000

Data types in Java define the type of data a variable can store. They help Java allocate memory efficiently and perform operations correctly.

What is a Data Type?

A data type specifies:

What kind of value a variable can hold
How much memory is required
What operations can be performed on the value

Types of Data Types in Java

Primitive Data Types
Non-Primitive (Reference) Data Types

Primitive Data Types

Java provides 8 primitive data types.

Data Type	Size	Description	Example
byte	1 byte	Small integer	`byte age = 20;`
short	2 bytes	Short integer	`short num = 1000;`
int	4 bytes	Integer value	`int marks = 90;`
long	8 bytes	Large integer	`long population = 8000000L;`
float	4 bytes	Decimal value	`float price = 99.99f;`
double	8 bytes	Large decimal value	`double salary = 50000.50;`
char	2 bytes	Single character	`char grade = 'A';`
boolean	1 bit	True or False	`boolean active = true;`

Non-Primitive Data Types

Non-primitive data types store references to objects.

Examples:

String
Arrays
Classes
Interfaces
Collections

Primitive vs Non-Primitive Data Types

Feature	Primitive	Non-Primitive
Stores	Actual value	Reference address
Size	Fixed	Variable
Created by Java	Yes	User-defined or Java classes
Can call methods	No	Yes
Example	int, double	String, Array

Java-1

vishwa v — Mon, 21 Sep 2026 15:58:52 +0000

Introduction
Java is one of the world's most popular and widely used programming languages. It was developed by Sun Microsystems in 1995 and is now maintained by Oracle. Java is known for its simplicity, security, platform independence, and object-oriented programming features.

One of Java's biggest advantages is its "Write Once, Run Anywhere" (WORA) capability. This means that a Java program can run on any device that has a Java Virtual Machine (JVM) installed, regardless of the operating system.

Java is widely used for developing:

Desktop applications
Web applications
Mobile applications (Android)
Enterprise software
Cloud-based applications
Games and embedded systems

Why Learn Java?

Java is a great language for beginners and professionals because it offers:

Easy-to-understand syntax
Strong community support
Platform independence
High security
Object-oriented programming concepts
Excellent career opportunities

Key Features of Java

Platform Independent

Java programs can run on Windows, Linux, and macOS without modification.

Object-Oriented

Java follows object-oriented programming principles such as:

Class
Object
Inheritance
Polymorphism
Encapsulation
Abstraction

Secure

Java provides a secure environment with features like bytecode verification and exception handling.

Robust

Strong memory management and error handling make Java a reliable programming language.

Multithreaded

Java supports running multiple tasks simultaneously, improving application performance.

react-11

vishwa v — Thu, 17 Sep 2026 12:23:24 +0000

useCallback and useReducer are two important React Hooks that help with performance optimization and state management.

useCallback

useCallback memoizes a function, meaning React will reuse the same function instance between renders unless its dependencies change.

Memoizes a function.
Prevents unnecessary function recreation.
Useful with React.memo and dependency arrays.

Why use it?

Normally, a function is recreated every time a component re-render
Every render creates a new handleClick function.
Now React reuses the same function reference.

Without useCallback:

Even though Child is wrapped with React.memo, it still re-renders because handleClick is a new function every render.

When NOT to use useCallback

Don't wrap every function in useCallback.
If the function isn't passed to memoized children or used as a dependency elsewhere, useCallback may add unnecessary complexity.

useReducer

useReducer is an alternative to useState for managing complex state logic.

Think of it like a simplified Redux inside a component.

Manages complex state using a reducer function.
State changes happen through dispatched actions.
Ideal when state logic becomes difficult to manage with multiple useState hooks

state → current state
dispatch() → sends an action
reducer() → decides how state changes

diff

useState	useReducer
Simple state	Complex state
Easy to learn	More structured
Few state variables	Many related state values
Direct update	Update through actions
Best for simple forms/counters	Best for workflows, forms, API states

react-10

vishwa v — Tue, 15 Sep 2026 13:34:07 +0000

Understanding useMemo and React.memo in React

Performance optimization is important in React applications, especially when components re-render frequently. React provides two useful tools for optimization: useMemo and React.memo.

What is useMemo?
useMemo is a React Hook that caches the result of an expensive calculation and recalculates it only when its dependencies change.

Why use useMemo?

Imagine your component performs a complex calculation every time it renders.

When to use useMemo

Expensive calculations
Large data filtering or sorting
Preventing unnecessary object or array recreation
Optimizing derived state

What is React.memo?

React.memo is a Higher-Order Component (HOC) that prevents unnecessary re-rendering of a component when its props haven't changed.

When to use React.memo

Pure functional components
Components receiving unchanged props frequently
Large UI trees
Expensive rendering logic

diff blw use memo and react memo

Feature	useMemo	React.memo
Purpose	Memoize a value	Memoize a component
Optimizes	Calculations	Component rendering
Type	Hook	Higher-Order Component
Used Inside Component	Yes	No
Returns	Cached value	Optimized component

react-9

vishwa v — Fri, 11 Sep 2026 17:44:39 +0000

Understanding useRef() and useParams() in React

React provides many powerful hooks that simplify development. Two commonly used hooks are useRef() and useParams(). Although both are hooks, they serve completely different purposes.

useRef() is used to store values and access DOM elements without causing re-renders.
useParams()is used to read URL parameters in React Router.

What is useRef()?

useRef() is a React Hook that creates a mutable reference that persists across component re-renders.

How it Works
useRef() creates a reference object.
The object contains a property called current.
React stores the actual DOM element inside current.
Calling focus() focuses the input field.

Why use useRef()?

Access DOM Elements
Focus input fields
Scroll to sections
Play videos
Measure element size
Store Values Without Re-rendering

useRef	useState
Does not re-render component	Re-renders component
Stores mutable values	Stores state values
Used for DOM access	Used for UI updates

What is useParams()?

useParams() is a React Router Hook used to access URL parameters from the current route.

Feature	useRef()	useParams()
Purpose	Store references and values	Read URL parameters
Package	React	React Router
Causes Re-render	No	No
Common Use	DOM access	Dynamic routes
Returns	Ref Object	Params Object

Conclusion

useRef() and useParams() solve different problems in React applications.

Use useRef() when you need to access DOM elements, store mutable values, or keep data without triggering re-renders.
Use useParams() when you need to read dynamic values from the URL, such as IDs, usernames, or product information.

Mastering these two hooks will help you build more interactive forms, dynamic routing, and real-world React applications efficiently.

react-8

vishwa v — Tue, 08 Sep 2026 14:26:25 +0000

Difference Between useState() and useEffect() in React

useState	useEffect
Used to manage state	Used to perform side effects
Stores data	Runs code after rendering
Causes re-render when state changes	Doesn't store data
Returns state and updater function	Executes a callback function

1. What is useState()?

useState() is used to create and manage state in a functional component.

What Happens?
Initial value = 0
Clicking button updates state
Component re-renders
Updated value appears on screen

What is useEffect()?

useEffect() is used to perform side effects after a component renders.

Side Effects Examples
API calls
Fetching data
Timers
Event listeners
DOM manipulation

react-7

vishwa v — Mon, 07 Sep 2026 13:58:57 +0000

What is BrowserRouter?
BrowserRouter is a wrapper component from react-router-dom.

It uses the HTML5 history API (pushState, replaceState) to keep your UI in sync with the URL.

In simple terms: it tells React Router to use the browser’s normal URL system for navigation.

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

When to Use
Always use BrowserRouter for modern web apps unless you specifically need HashRouter (for static file hosting without server-side support).

It’s the standard choice for React projects with proper server setup.

What is useNavigate?
useNavigate is a hook from React Router v6.

It lets you programmatically navigate between routes (instead of using or ).

Think of it as a function you call to change the URL and move to another page.

How to Use It

Import the Hook

jsx
import { useNavigate } from "react-router-dom";

Get the Navigate Function

jsx
function Home() {
  const navigate = useNavigate();

  const goToAbout = () => {
    navigate("/about");
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={goToAbout}>Go to About</button>
    </div>
  );
}

When you click the button, React Router changes the route to /about

When to Use useNavigate

After a form submission (e.g., redirect to dashboard).

After authentication (e.g., redirect to login if not logged in).

For conditional navigation (e.g., if user doesn’t have access, send them elsewhere).

react-6

vishwa v — Sun, 06 Sep 2026 16:26:53 +0000

What is useContext?
useContext is a React hook that lets you access values from a Context directly, without prop drilling.

It works with the Context API, which is React’s built-in way to share data across components without passing props manually.

How it Works
Create a Context

import React, { createContext } from "react";

const UserContext = createContext();

This creates a "box" to store shared data.

Provide the Context Value

function App() {
  return (
    <UserContext.Provider value="Saran">
      <Dashboard />
    </UserContext.Provider>
  );
}

Provider makes the value ("Saran") available to all child components.

Consume the Context with useContext

Why Use useContext?
Avoids Prop Drilling: No more passing props through multiple layers.

Cleaner Code: Components only use what they need.

Centralized State: Useful for themes, authentication, language settings, etc.

import React, { useContext } from "react";

function Profile() {
  const user = useContext(UserContext);
  return <p>Hello, {user}!</p>;
}

react-5

vishwa v — Sat, 05 Sep 2026 15:40:11 +0000

What is Prop Drilling?
Definition: Passing data (props) from a parent component down through several intermediate components until it reaches the child that actually needs it.

Problem: Intermediate components receive props they don’t use, cluttering the code and making debugging harder.

function Parent() {
  const message = "Hello from Parent";
  return <Child message={message} />;
}

function Child({ message }) {
  return <Grandchild message={message} />;
}

function Grandchild({ message }) {
  return <p>{message}</p>;
}

Solutions to Avoid Prop Drilling

React Context API

Provides a way to share values without passing props manually.

const UserContext = createContext();

function App() {
  return (
    <UserContext.Provider value="amount">
      <GrandChild />
    </UserContext.Provider>
  );
}

function GrandChild() {
  const user = useContext(UserContext);
  return <p>Hello, {user}!</p>;
}

react-4

vishwa v — Fri, 04 Sep 2026 16:05:42 +0000

What is Cleanup

When you use useEffect, sometimes you set up things that live outside your component:

Event listeners (window.addEventListener)

Subscriptions (like WebSocket or Firebase)

Timers (setInterval, setTimeout)

External resources (like API connections)

If you don’t remove them when the component unmounts, they keep running in the background → causing bugs, memory leaks, or duplicate behavior.

How Cleanup Works

React lets you return a function inside useEffect.
That function runs:

Before the component unmounts (to clean up resources).

Before the effect re-runs (to reset old setup before applying new one).

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

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

  useEffect(() => {

    const intervalId = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);


    return () => {
      clearInterval(intervalId);
      console.log("Interval cleared!");
    };
  }, []); 

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

export default TimerExample;

react(useEffect)

vishwa v — Wed, 02 Sep 2026 18:54:09 +0000

What does render mean in React?
Render = React drawing your component’s UI on the screen.

Every time React needs to show something new (like updated text, a new list item, or a changed button state), it re-runs your component function and updates the DOM (the browser’s page structure).

When does a render happen?
Initial render → when the component first appears on the page.
Example: opening your app → React draws .

Re-render → whenever state or props change.
Example: typing in the input → text state changes → React redraws the input with the new value.

Why useEffect
useEffect is not about re-rendering — it’s about running side effects after React finishes rendering.

State (useState) → controls your component’s data and triggers re-renders.

Effect (useEffect) → lets you run extra code after the render happens.

Think of it like this:

useState = “React, redraw my component with new data.”

useEffect = “React, after you finish drawing, also do this extra work.”

diff blw useEffect and useState
Rendering with useState:
Whenever you call setState (like setText), React must re-run your component function to update the UI.

Even if the change is small (like typing one letter), React redraws the component.

For a big component with lots of code, yes, React has to go through all of it again — but React is optimized to only update the parts of the DOM that actually changed. So it’s not as “heavy” as it sounds.

Where useEffect fits:
useEffect does not reduce rendering time.

Instead, it’s a place to put side effects (things outside the normal UI update, like fetching data, logging, timers, subscriptions).

The key difference:

useState → triggers re-render when data changes.

useEffect → runs extra code after React finishes rendering.

Cases
No dependency array

jsx
useEffect(() => {
  console.log("Runs after every render");
});

Runs after every render, no matter what changed.

Empty dependency array []

jsx
useEffect(() => {
  console.log("Runs only once (on mount)");
}, []);

Runs only once when the component first loads (like componentDidMount).

With specific dependencies

jsx
useEffect(() => {
  console.log("Text changed:", text);
}, [text]);

Runs only when text changes.
If you type in the input, it logs. If something else re-renders but text didn’t change, it won’t run.