DEV Community: Mohan Mogi

React Hooks Explained in Simple Terms

Mohan Mogi — Tue, 02 Jun 2026 10:28:11 +0000

React Hooks: A Beginner-Friendly Guide

React Hooks are special functions introduced in React 16.8 that allow developers to use state and other React features inside functional components. Hooks make code simpler, cleaner, and easier to maintain compared to class components.

What Are React Hooks?

Hooks are built-in React functions that let you "hook into" React features such as state management, lifecycle methods, context, and more. They help developers write reusable and organized code without using class components.

Why Use Hooks?
Simpler and cleaner code
Better code reusability
Easier state management
Improved readability
No need for class components

Understanding useEffect in React:

Mohan Mogi — Fri, 29 May 2026 08:05:09 +0000

useEffect:
useEffect is a React Hook that lets you perform side effects in a functional component.
Common side effects are:
Fetching data from an API,Updating the document title,Setting timers (setInterval, setTimeout),Adding event listeners,Accessing local storage.useEffect accepts two arguments. The second argument is optional.useEffect(, ).

Understanding React Hooks with Practical Examples

Mohan Mogi — Thu, 28 May 2026 07:25:51 +0000

what is a hook in react?
A Hook is a special React function that allows functional components to use React features such as state, lifecycle behavior, refs, and context without using class components.
They provide a more direct API to React concepts like props, state, context, refs, and lifecycle.
Before Hooks, state and lifecycle methods could only be used in class components.
Hooks were introduced in React 16.8 to make functional components more powerful.

1.React useState hook:
The react usestate hook allows us to track state in a functional components.
State generally refers to data or properties that need to be tracking in an application.
useState is a React Hook used to store and update data (state) in a functional component.

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

code

output
three times click button.

How it works
Initial value:
count = 0

When button is clicked:
setCount(count + 1);

Value becomes:
count = 1
count = 2
count = 3

Why use useState?
React updates the screen whenever the state changes.Data changes, React automatically re-renders the component and updates the UI.

Understanding Closures in JavaScript: A Complete Beginner Guide

Mohan Mogi — Wed, 27 May 2026 06:20:41 +0000

closure;
In Javascript,closure is a feature.Closure is an inner function is retains accces to the variables of its outer(enclosing) function,even after that outer function has finished executing.A closure is the combination of a function and the lexical environment in which it was declared.

output:

Explanation:
Step 1:
outerFunction() runs
let count = 0;

Variable count is created.

Memory:

count = 0

Step 2:
innerFunction is created
function innerFunction() {
count++;
console.log("Count:", count);
}

innerFunction uses count from its parent function.

Step 3:
Return inner function
return innerFunction;
const counter = outerFunction();

Now counter stores innerFunction.

Normally outerFunction() would finish and remove its variables from memory.

But because innerFunction still needs count, JavaScript keeps count alive.

This is called Closure.

Step 4:
First call
counter();

Runs:

count++;

Before:

count = 0

After:

count = 1

Output:

Count: 1

flow view:
outerFunction()
|
count = 0
|
return innerFunction
|
counter()
|
count = 1

counter()
|
count = 2

counter()
|
count = 3

counter()
|
count = 4

JavaScript DOM Practice: Exercises for Beginners

Mohan Mogi — Wed, 29 Apr 2026 07:52:27 +0000

1.Change the Text and style

output

after click

2.toggle on off bulb

output

3.Count of the characters

Output

DOM Basic Interview Questions

Mohan Mogi — Tue, 28 Apr 2026 06:31:05 +0000

1.What is dom?
Dom stands for
D - Document
O - Object
M - Model
Dom is a programming interface for html documents.It represents the page as a tree of objects,so JavaScript can manipulate structure, style, and content dynamically.

2.What is difference between dom and html?
DOM
Dom is a tree-like object model.Represents the current state for interaction.Dynamic; it updates in real-time.Manipulated by JavaScript to change the page.

HTML
Html is a markup language.Defines the initial structure and content.Static; it doesn't change once sent.Written by developers, read by browsers.

3.what is difference betweenand getelementbyid and queryselector?
getelementbyid:
Only ID strings (e.g., 'myID').Single element matching the ID.Faster directly accesses the element by ID.Faster; directly accesses the element by ID.

queryselector
Any CSS selector (e.g., '#myID', '.myClass', 'div > p').The first element matching the selector.Slightly slower must parse CSS selectors.Available on document and any individual element.

4.How to change the content of HTML elements

output

after click

Object & Array scenario Questions

Mohan Mogi — Fri, 17 Apr 2026 06:22:32 +0000

1.User profile update
const user = {
name: "Vijay",
age:25,
email:"vijay@gmail.com"
};
Update email and add anew property isActive = true.

2.Shopping Cart Total
const cart = [
{name: "shirt", price:500},
{name: "shoes", price:1500},
{name: "cap", price:300}
];
Calculate total price.

3.Find Speccific Object
onst users = [
{ name: "Vijay, age:25"},
{ name: "Arun", age:30},
{ name: "Kumar", age:28}
];
From an array of users,find the user whose name is "arun".

4.count items in Object
const fruits = {
apple:2,
banana: 5,
mango: 3
};
fine the total number of fruits.

Javascript Array Iteration methods;

Mohan Mogi — Thu, 16 Apr 2026 09:05:33 +0000

Array Iteration Methods:
JavaScript array iteration means the process of going through each element of an array one by one and performing some operation on it.

Types of Array iteration Methods:
1.Array forEach
2.Array map()
3.Array flatMap()
4.Array filter()
5.Array reduce()
6.Array reduceRight()
7.Array every()
8.Array some()
9.Array from()
10.Array keys()
11.Array entries()
12.Array with()
13.Array Spread (...)
14.Array Rest (...)

1.Array forEach:
This method calls a fuction (call back function) once for each array element.No return value.

Syntax

👉 Explanation:
1)Run each element
2)Runs the function
3)Does not create a new array.

2.Array map()
This method creates a new array by performing function on each array element.It's not execute the function for array elements without values.this method not change the original array.it"s create a duplicate array.
the function takes 3 arguments:
The item value
The item index
The array.

Syntax

👉 Explanation:
1.Takes each value
2.Applies logic
3.Stores results in a new array.

3.Array flatMap()
This method first maps all elements of an array and then creates a new array by flattening the array.
syntax

👉 Explanation:
1.First maps values
2.Then flattens one level.

4.Array filter()
This method creates a new array with array elements that pass a test.
The function takes 3 arguments:
The item value
The item index
The array itself

Syntax

Why javascript is single Threaded

Mohan Mogi — Wed, 15 Apr 2026 05:24:02 +0000

The Origin: Designed for the Browser:
JavaScript was created by Brendan Eich in 1995 to run inside web browsers like Netscape Navigator.At that time, the goal was simple, Make web pages interactive (e.g., form validation, button clicks)To achieve this safely and simply, JavaScript was designed as:
Single-threaded run one task at a time.

Single-Threaded Mean?
Single-threaded is Only one operation runs at a time
No true parallel execution in the main thread.
Example:
console.log("A");
console.log("B");
console.log("C");
Output:
A
B
C

“JavaScript Array Methods Explained Simply”

Mohan Mogi — Thu, 09 Apr 2026 05:17:33 +0000

ARRAY:
An array is an object type,it is used for storing data collections.Multiple values store in a single variable.

FEATURES OF JAVASCRIPT ARRAYS are:

ELEMENT
An array a list of values are known as elements.
ORDERED
Array elements are ordered
Based on their index.
ZERO INDEXED
The first element is index 0,
Second element is 1.
HETEROGENEOUS
Arrays can store elements of different datatypes.
(Strings,numbers,objects and other arrays)

WHY USE ARRAY:

let a = 10;
let b = 20;
let c = 30;
This is ok for 3 variables,how can manage 200,300 variables?.So use array.An array can store many values under a single name,can acces the values by referring to an index number.

Array syntax
let numbers = [10, 20, 30];

console.log(numbers[1]);
Output 20

BASIC ARRAY METHODSS

Array length
Array toString() – Convert to string
Array at() –
Array join()
Array pop() – Remove last element
Array push() – Add at end
Array shift()
Array unshift()
Array isArray()
Array delete()
Array concat()
Array copyWithin()
Array flat()
Array slice()
Array splice()
Array toSpliced()

1.Array length
Array length means length property returns the length(count,size)of an array.

Explanation:
🔹The array has 3 values,so length is 3.
🔹Even though index starts at 0, length counts from 1.

2.Array tostring()
The tostring methods returns the elements as of array commas as a seperated string.

Explanation
🔹The .toString() method converts the array into a string
🔹It automatically adds commas ( , ) between values
🔹output (1o,20,30)

3.Array at()
The at() methods returns an indexed element from an array.Including negative index.

Explanation
🔹at(0) → first element
🔹at(1) → second element
🔹at(2) → third element
🔹output
10
20
30

4.Array join()
This method is joins all array element into a string.its react like array tostring(),but add in specify the seperator.

Explanation
🔹 Converts array to string
🔹 Does not change original array
🔹 output( 10 20 30 )

Add specify seperator

Explanation
🔹 add in specify seperator
🔹 output(10*20*30)

5.Array pop()
Array pop method remove the last element from an array.
The pop() method returns the value that was "popped out":

Explanation
🔹Removes the last element 30
🔹Returns the removed value 30
🔹Updates the array → [10, 20]
🔹Output:
30
[ 10, 20 ]

6.Array push()
Array push() method is one or more new element add to an array at the last.

Explanation
🔹Adds element to the end
🔹Updates the original array.

push() returns the new arraylength.
push()return value

Explanation
🔹Adds elements to the end
🔹Changes the original array
🔹Returns new length

7.Array shift()
This method is remove fisrt element from an array and shifts all other element to a lower index.The shift() method returns the value that was "shifted out":

Explanation
🔹Removes the first element → 10
🔹Returns the removed value → 10
🔹Updates the array → [20, 30]

8.Array unshift()
The unshift() method is used to add one or more elements to the beginning (start) of an array.

Explanatioon
🔹Adds element at the start
🔹Moves existing elements to the right

The unshift() method returns the new array length:

Explaation
🔹 Adds elements to the beginning
🔹 Changes the original array
🔹 Returns new length

9.Array isArray()
Array.isArray() is used to check whether a value is an array or not.

Explanation
🔹true means its array
🔹false means its not array

10.array delete()
It is a delete keyword, but it is not recommended for arrays
Because it removes the value but keeps an empty slot (hole).

Explanation
🔹Index still exists
🔹Creates empty (undefined) space

11.Array concat()
The concat() method creates a new array by merging (concatenating) existing arrays:

Explanation:
🔹arr1 contains [10, 20]
🔹arr2 contains [30]
🔹concat() joins both arrays and returns a new array
🔹Original arrays are not changed

JAVASCRIPT OBJECT FUCTIONS

Mohan Mogi — Wed, 08 Apr 2026 05:58:13 +0000

OBJECT CONSTRUCTOR FUNCTIONS:
The constructor method for creating and initailizing object.Sometimes create many object of the same type,to create an objecct constructor function.constructor functions with an first letter start with an upper case letter.

OBJECT LEARN CRUD METHODS

Mohan Mogi — Tue, 07 Apr 2026 06:30:43 +0000

OBJECT:
An object is stores a collection of key value pairs.
key is property name,value is store any datatypes.

CRUD:
C-Create (create object)

R-Read (read object)

U-Update (update values in object)

D-delete (delete values in object)