DEV Community: Mohan Mogi

useMemo Hook in React

Mohan Mogi — Wed, 10 Jun 2026 07:01:51 +0000

useMemo:

useMemo is a React Hook used for performance optimization.
It returns a memoized value by storing the result of an expensive calculation in memory (cache) and reusing it during rerenders.
React recalculates the value only when one of its dependencies changes, helping avoid unnecessary calculations and improve application performance.

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

useRef Hook

Mohan Mogi — Tue, 09 Jun 2026 08:01:03 +0000

useRef Hook:
useRef is a React Hook.Access and manipulate DOM elements directly.
Store values without causing a component re-render.

Syntax:
import { useRef } from "react";

function App() {
const inputRef = useRef(null);

return ;
}

output:

React useReducer Explained with Simple Examples

Mohan Mogi — Fri, 05 Jun 2026 07:30:15 +0000

useReducer Hook:
The useReducer Hook is similar to the useState Hook.Track of multiple pieces of state that rely on complex logic, useReducer may be useful.

Syntax
The useReducer Hook accepts three arguments.

useReducer(reducer, initialState, init)

Understanding the Parameters and Return Values of useReducer:

reducer
The reducer is a function that defines how the state should change in response to an action. It receives the current state and an action object as arguments and returns the next state.
initialState
The initialState is the value used to determine the initial state of the reducer. It can be any data type, such as a number, object, array, or string.

3.dispatch
The dispatch function is returned by useReducer and is used to send actions to the reducer. Whenever an action is dispatched, React executes the reducer, calculates the new state.The action object typically contains a type property and may include additional data.

4.state
The state value represents the current state managed by the reducer. It starts with the initial state and updates whenever an action is dispatched.

example:

output:

React Hooks Explained in Simple Terms

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

React Hooks:
Hooks are built-in React functions that allow Functional Components to use React features such as state management, lifecycle methods, context, references, and performance optimizations without writing Class Components.Hooks were introduced in React 16.8.

Why Use Hooks?

Reusing stateful logic between components
Managing complex component lifecycle code
Reducing the need for Class Components
Making components simpler and easier to understand.

Before Hooks, Functional Components could only receive props and render UI. They could not manage state or lifecycle behavior. Hooks changed that.

1.useState Hook:
The React useState Hook allows us to track state in a function component.State generally refers to data or properties that need to be tracking in an application.

Import useState
To use the useState Hook, first need to import it into component.

Example:
At the top of component, import the useState Hook.
import { useState } from "react";

useState accepts an initial state and returns two values:

*The current state.
*A function that updates the state.

import { useState } from "react";

function FavoriteColor() {
const [color, setColor] = useState("red");
}

explanation;
The first value, color, is current state.
The second value, setColor, is the function that is used to update state.

Read State explample:

output:

Update State

output:

2.useEffect Hook:

The useEffect Hook allows to perform side effects in components.
Some examples of side effects are: fetching data, directly updating the DOM, and timers.
useEffect accepts two arguments. The second argument is optional. useEffect(, )

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