DEV Community: Abinaya V

About Hookes in React

Abinaya V — Mon, 18 May 2026 20:32:14 +0000

React Hooks

React Hooks are special functions in React that let you use state and other React features inside functional components. Before Hooks, state was mainly used in class components. Hooks made functional components more powerful and easier to write.

Why Hooks are Used

Hooks help you:

Store data in components
Handle user actions
Manage lifecycle methods
Reuse logic
Work with APIs
Improve code readability

Common React Hooks
Used to store and update data.

Virtual DOM and Real DOM in React

 **Real DOM**
  The Real DOM is the actual webpage structure shown in the browser.

When HTML loads in the browser, the browser creates a tree structure called the DOM (Document Object Model).

**Example HTML**
   <h1>Hello</h1>

output
Document
└── h1
└── "Hello"

Problem with Real DOM
Updating the Real DOM is:

slow
expensive
Affects performance

Virtual DOM

The Virtual DOM is a lightweight copy of the Real DOM used by React.
React first updates the Virtual DOM, compares changes, then updates only the changed parts in the Real DOM.

Diffing Algorithm in React
The Diffing Algorithm is the process React uses to compare:

old virtual DOM
new Virtual DOM

and find what changed.

Basic function in React

Abinaya V — Thu, 14 May 2026 16:50:30 +0000

App jsx
App.jsx is the main component file in a React application created using Vite or Create React App.

Why .jsx?
.jsx means JavaScript XML

It allows writing HTML inside JavaScript:

example

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

JSX Rules in React

1. Return Only One Parent Element

2. Close All Tags

3. Use className Instead of class

4. Use Curly Braces {} for JavaScript

5. Inline CSS Uses Object

6. Attribute Names Use camelCase

7. JavaScript Expressions Allowed

8. Components Start with Capital Letter

9. Comments in JSX

10. Use htmlFor Instead of for.

Components in React
Components are reusable pieces of UI in React.
They help divide the application into small independent parts.

Examples

Header
Navbar
Footer
Login Form
Card

React in javascript

Abinaya V — Thu, 14 May 2026 08:38:21 +0000

React
React is a JavaScript library used to build user interfaces, especially web applications.

It was created by Meta (formerly Facebook).

Simple meaning
JavaScript → programming language
React → library built using JavaScript

** NPM Means:**
npm stands for Node Package Manager.

It is used to:

Install JavaScript packages/libraries
Manage project dependencies
Run scripts in projects

npm comes automatically when you install Node.js.

MPA

In web development, MPA means Multi-Page Application.

A Multi-Page Application loads a new HTML page from the server whenever the user moves to another page.

SPA

SPA means Single Page Application.

A Single Page Application loads only one HTML page initially, then updates content dynamically without reloading the entire page.

Difference between libraries and frameworks?

Promise in javascript

Abinaya V — Thu, 07 May 2026 11:26:45 +0000

A Promise in JavaScript is an object that represents the result of an asynchronous operation.

It helps handle tasks like:

API calls
File loading
Database requests
Timers (setTimeout)

Instead of waiting for the task to finish, JavaScript continues running other code.

Promise States

A Promise has 3 states:

Pending → Initial state
Resolved / Fulfilled → Operation successful
Rejected → Operation failed

Promise Methods

Method and Purpose

.then() -> Runs when promise is successful

.catch() -> Runs when promise fails

.finally() -> Runs always

output

Callback Hell.

output

Closure in JavaScript

Abinaya V — Wed, 06 May 2026 13:04:11 +0000

A closure is a function that remembers and accesses variables from its outer scope even after the outer function has finished executing.

Retains access to outer function variables.
Preserves the lexical scope.
Allows data encapsulation and privacy.
Commonly used in callbacks and asynchronous code.

For example

input

output

About DOM in JavaScript and basic interview questions

Abinaya V — Mon, 27 Apr 2026 17:50:00 +0000

DOM in JavaScript
The DOM (Document Object Model) is a programming interface that represents an HTML document as a tree structure. JavaScript uses it to access, modify, and manipulate web page content dynamically.

Think of it like this:

HTML → structure
DOM → tree representation of that structure
JavaScript → interacts with the DOM

Core DOM Concepts (Important Topics)

Selecting elements
(getElementById, querySelector)
Changing content
(innerHTML, textContent)
Modifying styles
(element.style)
Creating & deleting elements
(createElement, appendChild, remove)
Event handling
(addEventListener)
Traversing the DOM
(parent, child, sibling nodes)

DOM TREE

Basic interview questions

1. What is the DOM?
A tree-like representation of HTML that allows JavaScript to manipulate elements.

2. Difference between innerHTML and textContent?
- innerHTML → parses HTML tags
- textContent → only handles plain text

3.How do you select an element?
document.getElementById("id");
document.querySelector(".class");

4.Root Node
The top of the tree → document

5.Why does this fail?
document.getElementById("btn").addEventListener("click", fn);

6.What is a DOM tree?
A hierarchical structure where HTML elements are represented as nodes (parent, child, siblings).

7.What is the difference between parent, child, and sibling nodes?

Parent → contains other nodes
Child → inside a parent
Sibling → same parent

8.What is event delegation?
Handling events at a parent level instead of adding listeners to each child.

9.Difference between DOM and BOM?
The DOM represents the web page content, while the Browser Object Model (BOM) represents the browser environment outside the page, such as the window, history, and navigator objects.

10.What are the three types of DOM?

Core DOM - standard model for all document types.
XML DOM - standard model for XML documents.
HTML DOM - standard model for HTML documents.

Tell me about yourself

Abinaya V — Sat, 25 Apr 2026 09:38:11 +0000

My name is Abinaya

“Hi, I’m currently pursuing a Java Full Stack Development course. I have hands-on experience in HTML, CSS, and JavaScript, and I’ve built a few projects using these technologies.

I regularly write blogs on Dev.to about what I learn, and I push my code daily to GitLab, which helps me stay consistent and improve my development skills.

I also have basic knowledge of digital marketing, which gives me some understanding of user engagement.

Right now, I’m focusing on strengthening my backend skills in Java, and I’m looking forward to applying my knowledge in real-world projects and growing as a full stack developer.”

javascript scenario questions(Variables,Operators,conditional statements)

Abinaya V — Mon, 20 Apr 2026 17:37:33 +0000

1.you building a login system.store username and password in variables and check whether both are filled.

2.creat variables to store a product's name,price,and stock.print a message like:
"iphone cost ₹60000 and only 5 left in stock".

3.store a student's marks in 3 subject and calculate total.

4.Swap two numbers without using a third variable

5.Create a variable that stores whether a user is logged in or not and show a welcome message.

6.An e-commerce website gives a 10% discount.calculate final price.

7.Check whether a number is even or odd using operator.

8.Compare two passwords entered by user.

9.A person is eligible to vote if age>=18.write condition

10.Use logical AND to check:
-User is logged in
-User is admin
** Then allow dashboard acces**

11.Create a function that calculate total cart amount.

12.create a function to greet a user by name.

13.Create a function to convert celsius to Fahrenheit.

14.Create a function that returns the largest of two numbers.

15.Create a function to calculate EMI for a loan.(TBD)

16. If user role is "admin" show admin panel,else show user dashboard.

17. check if number is positive,negative, or zero.

*18. Check if a year is leap year. *

*19. Movie ticket pricing: Child(<12)-₹100 Adult-₹200. *

20. If marks >=90-Grade A 75-Grade B else-Fail.

METHODS OF ARRAY

Abinaya V — Wed, 08 Apr 2026 14:15:52 +0000

A method in an array (JavaScript) is simply a built-in function that works on arrays.
It helps you add, remove, search, or modify elements inside an array.

What is an Array Method?

    An array method is a function attached to an array object.

Example:

  let fruits = ["apple", "banana", "mango"];

  fruits.push("orange"); // push() is a method

  console.log(fruits);

basic Array Methods

1. push() → Add element at end

    let arr = [1, 2, 3];
    arr.push(4);
    console.log(arr); // [1, 2, 3, 4]

2. pop() → Remove last element

     let arr = [1, 2, 3];
     arr.pop();
     console.log(arr); // [1, 2]

3. shift() → Remove first element

    let arr = [1, 2, 3];
    arr.shift();
    console.log(arr); // [2, 3]

4. unshift() → Add element at beginning

   let arr = [1, 2, 3];
   arr.unshift(0);
   console.log(arr); // [0, 1, 2, 3]

5. length → Find size of array

 let arr = [10, 20, 30];
 console.log(arr.length); // 3

6. indexOf() → Find position

  let arr = ["a", "b", "c"];
  console.log(arr.indexOf("b")); // 1

7. includes() → Check value exists

 let arr = [1, 2, 3];
 console.log(arr.includes(2)); // true

8. slice() → Get part of array

 let arr = [1, 2, 3, 4];
 console.log(arr.slice(1, 3)); // [2, 3]

9. splice() → Add/Remove elements

 let arr = [1, 2, 3];
 arr.splice(1, 1); // remove 1 element at index 1
 console.log(arr); // [1, 3]

10. forEach() → Loop through array

let arr = [1, 2, 3];
arr.forEach(function(num) {
console.log(num);
});

OBJECT IN JAVA SCRIPT

Abinaya V — Wed, 08 Apr 2026 07:06:16 +0000

Simple Definition

An object is a container that holds properties (data) and methods (functions).

Example

let person = {
name: "Abi",
age: 21,
city: "Chennai"
};

console.log(person.name); // ABI

1. Different Types of Values

let keyName = "score";

let student = {
[keyName]: 100
};

console.log(student.score); // 100

2. Dynamic Keys

let keyName = "score";

let student = {
[keyName]: 100
};

console.log(student.score); // 100

Objects in JavaScript

Abinaya V — Tue, 07 Apr 2026 07:01:12 +0000

object means:

   In JavaScript, an object is a data type used to store multiple values in one variable. These values are stored as key–value pairs.

Think of an object like a real-world object.

**For example, a car has:**
   -color
   -brand
   -model

In JavaScript, that looks like this:

Here:
car → the object
color, brand, model → keys (also called properties)
"red", "Toyota", "Corolla" → values

CRUD means:

C → Create
R → Read
U → Update
D → Delete

1. CREATE (Add new data)

student.mark = 85;
console.log(student);
output
{ name: "Abi", age: 20, course: "JavaScript", mark: 85 }

2. READ (Get data)

console.log(student.name);       // Abi
console.log(student["course"]);

3. UPDATE (Modify data)

 student.age = 21;
 console.log(student.age); // 21

4. DELETE (Remove data)

 delete student.course;
 console.log(student);

output
{ name: "Abi", age: 21, mark: 90 }

“Function in JavaScript and its types”

Abinaya V — Sat, 04 Apr 2026 12:15:27 +0000

function

In JavaScript, a function is a block of code designed to perform a specific task. It runs only when it is called (invoked).
Think of a function as a reusable piece of code—you write it once and use it many times.

Basic Syntax

function functionName() {
// code to execute
}
Example
function greet() {
console.log("Hello!");
}

greet();

Function with Parameters

You can pass values (called parameters) into a function:
function greet(name) {
console.log("Hello " + name);
}

greet("abi");

output:
Hello abi

Function with Return Value

function add(a, b) {
return a + b;
}

let result = add(3, 5);

output:
8

Types of Functions in JavaScript

Function Declaration(version 1)

 function add (no1,no2){
    return no+1no+2;
 }

Function Expression(version 2)

 const add =function(no+no2){
    return no1+no2;

}

Arrow Function(version 3)

 function greeting(name){

return"good moring"+name;
}
short version for arrowtype

program 1 for use one argument

const greeting =name=>"good morning"+name;
console.log (greeting("abi"));

program 2 for use two argument

const add=(no1,no2)=>no1+no2
console.log(add(5,10);

Program for More than one line code

const add(no1,no2)=>{
let result=no1,no2;
return result;
}