DEV Community: Visali Nedunchezhian

React Hooks

Visali Nedunchezhian — Sun, 24 Aug 2025 18:14:45 +0000

React Hooks are special functions that let you use React features (like state and lifecycle methods) inside functional components, without writing class components.

useState

The useState hook is used to declare state variables in functional components. It allows us to read and update the state within the component.

Syntax

const [state, setState] = useState(initialState);

state: The current value of the state.
setState: A function used to update the state.
initialState: The initial value of the state, which can be a primitive type or an object/array

useReducer: The useReducer hook is a more advanced state management hook used for handling more complex state logic, often involving multiple sub-values or more intricate state transitions.

Syntax

const [state, dispatch] = useReducer(reducer, initialState);

state: The current state value.
dispatch: A function used to dispatch actions that will update the state.
reducer: A function that defines how the state should change based on the dispatched action.
initialState: The initial state value.

useContext

The useContext hook in React is a powerful and convenient way to consume values from the React Context API in functional components. It allows functional components to access context values directly, without the need to manually pass props down through the component tree

const contextValue = useContext(MyContext);

The useContext hook takes a context object (MyContext) as an argument and returns the current value of that context.
The contextValue will hold the value provided by the nearest in the component tree.

useEffect:

The useEffect hook in React is used to handle side effects in functional components. It allows you to perform actions such as data fetching, DOM manipulation, and setting up subscriptions, which are typically handled in lifecycle methods like componentDidMount or componentDidUpdate in class components.

Syntax

useEffect(() => {
    // Side effect logic here
}, [dependencies]);

useEffect(() => { ... }, [dependencies]); runs side effects after rendering.
The effect runs based on changes in the specified dependencies.

useLayoutEffect: The useLayoutEffect is used when we need to measure or manipulate the lawet before the browser paints, ensuring smooth transitions and no flickering.

Syntax

useLayoutEffect(() => {
  // Logic to manipulate layout or measure DOM elements
}, [dependencies]);

useInsertionEffect: The useInsertionEffect is designed for injecting styles early, especially useful for server-side rendering (SSR) or styling libraries, ensuring styles are in place before the component is rendered visually.

Syntax

useInsertionEffect(() => {
    // Logic to inject styles or manipulate stylesheets
}, [dependencies]);

useRef

useRef is a React Hook that lets you create a mutable reference object.
It is often used to:

Access and control DOM elements directly.
Store values that don’t cause re-render when updated.

Syntax:

const refName = useRef(initialValue);

Returns an object: { current: initialValue }
The value inside current can be read or changed.

ReactJS Functional Components

Visali Nedunchezhian — Sun, 24 Aug 2025 17:22:37 +0000

In ReactJS, functional components are a core part of building user interfaces. They are simple, lightweight, and powerful tools for rendering UI and handling logic. Functional components can accept props as input and return JSX that describes what the component should render.

Example:

import React, { useState } from 'react';

function App() {
  const [message, setMessage] = useState("Hello World!");

  return (
    <div style={{ textAlign: "center", marginTop: "50px" }}>
      <h1>{message}</h1>
      <button onClick={() => setMessage("Welcome to React!")}>
        Click Me!
      </button>
    </div>
  );
}

export default App;

When a functional component receives input and is rendered, React uses props and updates the virtual DOM to ensure the UI reflects the current state.

Props: Functional components receive input data through props, which are objects containing key-value pairs.
Processing Props: After receiving props, the component processes them and returns a JSX element that defines the component's structure and content.
Virtual DOM: When the component is rendered, React creates a virtual DOM tree that represents the current state of the application.
Re-rendering: If the component's props or state change, React updates the virtual DOM tree accordingly and triggers the component to re-render.

Functional Component with Props

In React, a functional component with props is a JavaScript function that receives an object called props as its argument. Props (short for “properties”) are used to pass data from a parent component to a child component.

This allows components to be dynamic and reusable, as the data displayed can change based on what is passed in.

Example:

import React from 'react';
import ReactDOM from 'react-dom';

// Functional component with props
function Greet(props) {
  return <h2>Hello, {props.name}!</h2>;
}

// Rendering the component and passing a prop
ReactDOM.render(
  <Greet name="Aditi" />,
  document.getElementById('root')
);

Output:

Hello, Aditi!

When to Use ReactJS Functional Components

Functional components should be used whenever possible because they are simpler, easier to test, and more performant than class components. However, there are a few cases where functional components may not be suitable:

Stateful components: Functional components cannot hold state on their own. Therefore, if you need to maintain state within your component, you may need to use a class component.
Lifecycle methods: If you need to use lifecycle methods such as componentDidMount, componentDidUpdate, or componentWillUnmount, you will need to use a class component.

Node js installation

Visali Nedunchezhian — Fri, 08 Aug 2025 17:27:43 +0000

1. Download Node.js Installer

Visit the official Node.js website: Node.js Download Page
Choose the LTS version (recommended for stability).

2. Run the Installer

Double-click the .msi file.
Accept the license agreement.
Use default settings unless you have specific needs.
Ensure the box for npm package manager is checked.

3. Install Tools for Native Modules (Optional)

If prompted, allow installation of additional tools (like Python and Visual Studio Build Tools).
This is useful for packages that require compilation.

4. Finish Installation

Click “Finish” once setup is complete.

5. Verify Installation

Open Command Prompt or PowerShell.
Run:

node -v
npm -v

• You should see version numbers confirming successful installation

How to Create a New React App

Step 1: Open Your Terminal

Use Command Prompt

Step 2: Run the Create React App Command

npx create-react-app my-app

Explanation:

npx runs the package without installing it globally.
create-react-app sets up everything for you.
my-app is your project folder name (you can change it).

Step 3: Navigate into Your Project Folder

cd my-app

Step 4: Start the Development Server

npm start

This will:

Compile your React app
Open it in your default browser at http://localhost:3000

Folder Structure Overview

my-app/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   └── reportWebVitals.js
├── .gitignore
├── package.json
├── README.md
└── yarn.lock / package-lock.json

JavaScript Callback Functions

Visali Nedunchezhian — Thu, 07 Aug 2025 17:30:14 +0000

JavaScript Callbacks

A callback function is a function that is passed as an argument to another function and executed later.

A function can accept another function as a parameter.
Callbacks allow one function to call another at a later time.
A callback function can execute after another function has finished.

function greet(name, callback) {
    console.log("Hello, " + name);
    callback();
}

function sayBye() {
    console.log("Goodbye!");
}

greet("vishali", sayBye);

Output

Hello, Ajay
Goodbye!

Here, sayBye() is passed as a callback to greet(), which executes after the greeting.

How Do Callbacks Work in JavaScript?

JavaScript executes code line by line (synchronously), but sometimes we need to delay execution or wait for a task to complete before running the next function. Callbacks help achieve this by passing a function that is executed later.

Callbacks for Asynchronous Execution

console.log("Start");

setTimeout(function () {
    console.log("Inside setTimeout");
}, 2000);

console.log("End");

Output

Start
End
Inside setTimeout  (after 2 seconds)

setTimeout() is an asynchronous function that takes a callback to execute after 2 seconds.
The rest of the code continues executing without waiting.

Where Are Callbacks Used?

1. Handling Asynchronous Operations

Callbacks are widely used in

API requests (fetching data)
Reading files (Node.js file system)
Event listeners (clicks, keyboard inputs)
Database queries (retrieving data)

2. Callbacks in Functions Handling Operations

When a function needs to execute different behaviors based on input, callbacks make the function flexible.

function calc(a, b, callback) {
    return callback(a, b);
}

function add(x, y) {
    return x + y;
}

function mul(x, y) {
    return x * y;
}

console.log(calc(5, 3, add));    
console.log(calc(5, 3, mul));

Output

8
15

calculate() receives two numbers and a function (add or multiply).
The passed function is executed inside calculate().

3. Callbacks in Event Listeners

JavaScript is event-driven, and callbacks handle user interactions like clicks and key presses.

document.getElementById("myButton").addEventListener("click", function () {
    console.log("Button clicked!");
});

Here, the anonymous function is a callback that runs when the button is clicked.

4. Callbacks in API Calls (Fetching Data)

Callbacks are useful when retrieving data from APIs.

function fetch(callback) {
    fetch("https://jsonplaceholder.typicode.com/todos/1")
        .then(response => response.json())
        .then(data => callback(data))
        .catch(error => console.error("Error:", error));
}

function handle(data) {
    console.log("Fetched Data:", data);
}

fetch(handle);

fetchData() gets data from an API and passes it to handleData() for processing.

REACT Introduction

Visali Nedunchezhian — Thu, 07 Aug 2025 17:08:47 +0000

REACT

React is a front-end JavaScript library.
React was developed by the Facebook Software Engineer Jordan Walke.
React is also known as React.js or ReactJS.
React is a tool for building UI components.

How does React Work?

React operates by creating an in-memory virtual DOM rather than directly manipulating the browser’s DOM. It performs necessary manipulations within this virtual representation before applying changes to the actual browser DOM.

Here’s how the process works:

1. Actual DOM and Virtual DOM

Initially, there is an Actual DOM(Real DOM) containing a div with two child elements: h1 and h2.
React maintains a previous Virtual DOM to track the UI state before any updates.

2. Detecting Changes

When a change occurs (e.g., adding a new h3 element), React generates a New Virtual DOM.
React compares the previous Virtual DOM with the New Virtual DOM using a process called reconciliation.

3. Efficient DOM Update

React identifies the differences (in this case, the new h3 element).
Instead of updating the entire DOM, React updates only the changed part in the New Actual DOM, making the update process more efficient.

Key Features of React

React is one of the most demanding JavaScript libraries because it is equipped with a ton of features which makes it faster and production-ready. Below are the few features of React.

1. Virtual DOM

React uses a Virtual DOM to optimize UI rendering. Instead of updating the entire real DOM directly, React:

Creates a lightweight copy of the DOM (Virtual DOM).
Compares it with the previous version to detect changes (diffing).
Updates only the changed parts in the actual DOM (reconciliation), improving performance.

2. Component-Based Architecture

React follows a component-based approach, where the UI is broken down into reusable components. These components:

Can be functional or class-based.
It allows code reusability, maintainability, and scalability.

3. JSX (JavaScript XML)

React usesJSX, a syntax extension that allows developers to write HTML inside JavaScript. JSX makes the code:

More readable and expressive.
Easier to understand and debug.

4. One-Way Data Binding

React uses one-way data binding, meaning data flows in a single direction from parent components to child components via props. This provides better control over data and helps maintain predictable behavior.

5. State Management

React manages component state efficiently using the useState hook (for functional components) or this.state (for class components). State allows dynamic updates without reloading the page.

6. React Hooks

Hooks allow functional components to use state and lifecycle features without needing class components. Common hooks include:

useState: for managing local state.
useEffect: for handling side effects like API calls.
useContext: for global state management.

7. React Router

React provides React Router for managing navigation in single-page applications (SPAs). It enables dynamic routing without requiring full-page reloads.

Synchronous and Asynchronous in JavaScript

Visali Nedunchezhian — Mon, 04 Aug 2025 17:30:57 +0000

JavaScript is known for its ability to handle both synchronous and asynchronous operations. Understanding how these two things work is important for writing efficient, responsive, and user-friendly applications.

Synchronous JavaScript

In synchronous programming, operations are performed one after the other, in sequence. So, basically each line of code waits for the previous one to finish before proceeding to the next. This means that the program executes in a predictable, linear order, with each task being completed before the next one starts.

Example: In this example, we have shown the synchronous nature of JavaScript.

console.log("Hi");
console.log("Geek");
console.log("How are you?");

Output

Hi
Geek
How are you?

In the above code snippet, the first line of the code Hi will be logged first then the second line Geek will be logged and then after its completion, the third line will be logged How are you. So as we can see the codes work in a sequence. Every line of code waits for its previous one to get executed first and then it gets executed.

In synchronous code, every statement waits for the previous one to finish before it runs. This is straightforward and easy to follow, but it has some drawbacks, especially when dealing with time-consuming tasks like fetching data from a server or reading a large file. If such a task is included in the sequence, it will block the execution of the rest of the code until it’s finished, leading to potential delays and a bad user experience.

Asynchronous JavaScript

Asynchronous programming, on the other hand, allows multiple tasks to run independently of each other. In asynchronous code, a task can be initiated, and while waiting for it to complete, other tasks can proceed. This non-blocking nature helps improve performance and responsiveness, especially in web applications.

Example: In this example, we have shown the Asynchronous nature of JavaScript.

console.log("Hi");

setTimeout(() => {
    console.log("Geek");
}, 2000);

console.log("End");

Output

Hi
End
Geek

So, what the code does is first it logs in Hi then rather than executing the setTimeout function it logs in End and then it runs the setTimeout function.

At first, as usual, the Hi statement got logged in. As we use browsers to run JavaScript, there are the web APIs that handle these things for users. So, what JavaScript does is, it passes the setTimeout function in such web API and then we keep on running our code as usual. So it does not block the rest of the code from executing and after all the code its execution, it gets pushed to the call stack and then finally gets executed. This is what happens in asynchronous JavaScript.

JavaScript Local Storage

Visali Nedunchezhian — Mon, 04 Aug 2025 17:04:16 +0000

JavaScript Local Storage is a feature that allows you to store data in the user's browser persistently — the data doesn't get deleted when the browser is closed (unlike session storage).

Basic Local Storage Methods

Store Data

localStorage.setItem("username", "Adithi");

Get Data

let user = localStorage.getItem("username");
console.log(user);  // Output: Adithi

Remove a Key

localStorage.removeItem("username");

Clear All Storage

localStorage.clear();

Store Objects or Arrays

Since localStorage stores only strings, you need to convert objects/arrays:

let user = { name: "Adithi", age: 21 };

// Save object
localStorage.setItem("user", JSON.stringify(user));

// Get object
let storedUser = JSON.parse(localStorage.getItem("user"));
console.log(storedUser.name);  // Output: Adithi

HTML DOM Events

Visali Nedunchezhian — Wed, 23 Jul 2025 11:02:45 +0000

DOM Events allow JavaScript to add event listener or event handlers to HTML elements.

Examples
In HTML onclick is the event listener, myFunction is the event handler:

<button onclick="myFunction()">Click me</button>

In JavaScript click is the event, myFunction is the event handler:

button.addEventListener("click", myFunction);

Here's a categorized list of the most common DOM event types:

Mouse Events

Mouse events are DOM events that occur when a user interacts with the mouse—moving it, clicking, hovering, etc. These events let web pages respond to user behavior like clicking buttons, dragging items, or hovering over menus.

Event	Description
`click`	User clicks on an element
`dblclick`	User double-clicks on an element
`mousedown`	Mouse button is pressed down
`mouseup`	Mouse button is released
`mousemove`	Mouse is moved over an element
`mouseenter`	Mouse enters an element (does not bubble)
`mouseleave`	Mouse leaves an element (does not bubble)
`mouseover`	Mouse is moved onto an element or its children
`mouseout`	Mouse is moved out of an element or its children
`contextmenu`	Right-click opens the context menu

Keyboard Events

Keyboard events are DOM events that occur when a user interacts with the keyboard—pressing or releasing keys. These events are essential for handling things like shortcuts, form navigation, games, and custom input behavior.

Event	Description
`keydown`	Key is pressed down
`keyup`	Key is released
`keypress`	Key is pressed (deprecated – use `keydown`/`keyup`)

Input and Form Events

These events are specifically related to user interactions with form controls, like , , , and . They are used to capture user input, validate forms, and respond to changes in form fields.

Event	Description
`input`	User input changes (works with `<input>`, `<textarea>`, etc.)
`change`	Value of element changes (e.g., after losing focus)
`submit`	Form is submitted
`focus`	Element gains focus (does not bubble)
`blur`	Element loses focus (does not bubble)
`focusin`	Element gains focus (bubbles)
`focusout`	Element loses focus (bubbles)
`reset`	Form is reset

UI Events

UI events (short for User Interface events) are a category of DOM events that are triggered by changes in the browser's user interface—not necessarily due to direct user input like clicks or key presses, but due to things like page loading, resizing, scrolling, and visibility changes.

Event	Description
`load`	Element (e.g., image, iframe) finishes loading
`unload`	Page is unloaded (deprecated)
`resize`	Window is resized
`scroll`	Element or window is scrolled
`error`	Error occurs while loading a file

HTML DOM (Document Object Model)

Visali Nedunchezhian — Wed, 23 Jul 2025 10:36:54 +0000

The HTML DOM (Document Object Model) is a programming interface for HTML and XML documents. It represents the structure of a web page as a tree of objects, so that programming languages like JavaScript can access and manipulate the content, structure, and style of a website dynamically.

Key Concepts of the HTML DOM:

Document Structure The DOM represents an HTML document as a tree of nodes:

Document → the root node
Element nodes (like <html>, <body>, <div>)
Text nodes (text inside elements)
Attribute nodes (like id, class)

2. Common DOM Methods

Used with JavaScript to interact with the page:

- document.getElementById("myId");
- document.getElementsByClassName("myClass");
- document.querySelector("div > p");
- document.createElement("div");
- element.appendChild(newElement);
- element.removeChild(childElement);

3. DOM Events

document.getElementById("btn").addEventListener("click", function() {
  alert("Button clicked!");
});

4. Changing the DOM

You can modify elements using properties like:

element.innerHTML = "New content";
element.style.color = "red";
element.setAttribute("class", "highlight");

JavaScript Scope

Visali Nedunchezhian — Tue, 22 Jul 2025 10:28:27 +0000

Scoping in JavaScript refers to the accessibility or visibility of variables, functions, and objects in some particular part of your code during runtime. JavaScript has several types of scope:

Global Scope
Function Scope
Block Scope

1. Global Scope

Variables declared outside of any function or block are in the global scope and are accessible anywhere in the code.

let globalVar = "I am global";

function test() {
  console.log(globalVar); // Accessible here
}

test();
console.log(globalVar); // Also accessible here

** 2. Function Scope**

Variables declared inside a function are only accessible within that function.

function example() {
  let localVar = "I am local";
  console.log(localVar); // Accessible
}

example();
console.log(localVar); // ❌ ReferenceError

3. Block Scope

Variables declared with let or const inside a block ({}) are only accessible within that block.

{
  let blockVar = "Inside block";
  console.log(blockVar); // Accessible here
}

console.log(blockVar); // ❌ ReferenceError

Note: var does not have block scope—only function scope.

{
  var x = 10;
}
console.log(x); // ✅ 10

Functions in JavaScript

Visali Nedunchezhian — Tue, 22 Jul 2025 09:57:00 +0000

Functions in JavaScript are reusable blocks of code designed to perform specific tasks. They allow you to organize, reuse, and modularize code. It can take inputs, perform actions, and return outputs.

function sum(a, b) { 
    return a + b; 
}
console.log(sum(6, 9));     // output: 15

Function Syntax and Working

A function definition is sometimes also termed a function declaration or function statement. Below are the rules for creating a function in JavaScript:

Begin with the keyword function Keyword
A user-defined function name (In the above example, the name is sum)
A list of parameters enclosed within parentheses and separated by commas (In the above example, parameters are x and y)
A list of statements composing the body of the function enclosed within curly braces {} (In the above example, the statement is "return x + y").

Return Statement

A function can return a result using the return keyword. This is optional but useful when you want to send data back from the function.

Function Parameters

Parameters are input passed to a function. In the above example, sum(x , y) takes two parameters, x and y.

Calling Functions

After defining a function, the next step is to call them to make use of the function. We can call a function by using the function name separated by the value of parameters enclosed between the parenthesis.

// Function Definition
function welcomeMsg(name) {
    return ("Hello " + name + " welcome");
}

let nameVal = "user";

// calling the function
console.log(welcomeMsg(nameVal));

output

Hello User welcome

Function Expression

It is similar to a function declaration without the function name. Function expressions can be stored in a variable assignment.

const mul = function (x, y) {
    return x * y;
};
console.log(mul(4, 5));

Output

Arrow Functions

Arrow functions are a concise syntax for writing functions, introduced in ES6, and they do not bind their own this context.

const sum = (num1,num2) => {
return num1 + num2;
}
let result = sum(5,5)
console.log(result);

output

JavaScript Loops

Visali Nedunchezhian — Thu, 17 Jul 2025 18:00:53 +0000

Loops in JavaScript are used to reduce repetitive tasks by repeatedly executing a block of code as long as a specified condition is true. This makes code more concise and efficient.

Suppose we want to print 'Hello World' five times. Instead of manually writing the print statement repeatedly, we can use a loop to automate the task and execute it based on the given condition.

Output

1. JavaScript for Loop

The for loop repeats a block of code a specific number of times. It contains initialization, condition, and increment/decrement in one line.

Syntax

Output

In this example

Initializes the counter variable (let i = 1).
Tests the condition (i <= 3); runs while true.
Executes the loop body and increments the counter (i++).

2. JavaScript while Loop

The while loop executes as long as the condition is true. It can be thought of as a repeating if statement.

Syntax

Output

In this example

Initializes the variable (let i = 0).
Runs the loop body while the condition (i < 3) is true.
Increments the counter after each iteration (i++).

3. JavaScript do-while Loop

The do-while loop is similar to while loop except it executes the code block at least once before checking the condition.

Syntax

Output

In this example:

Executes the code block first.
Checks the condition (i < 3) after each iteration.