DEV Community: Md Pervez Hossain

Event Loop in JavaScript

Md Pervez Hossain — Tue, 29 Apr 2025 06:42:48 +0000

🚀 Mastering JavaScript Event Loop — Simplified for Interviews

↔️ In JavaScript, everything starts with the Call Stack- a synchronous structure (Code Executes LIFO order ).

Because JavaScript is single-threaded, it leans on Browser Web APIs (like setTimeout, fetch, DOM APIs) to handle async operations.

🧠 Browser Superpowers (Web APIs)

Browsers provide extra features beyond the JavaScript engine, called Web

APIs, including :

setTimeout, setInterval
DOM Manipulation APIs
fetch (for network requests)
localStorage
console
location
Bluetooth access, Geolocation, etc.

These features are accessible via the window object in browsers.

When an asynchronous operation (like setTimeout or fetch) is triggered:

It is registered in the Web API Environment provided by the browser.
Once completed (like a timer expiring or a network request finishing), the corresponding callback is placed into queues — waiting for the Call Stack to be free.

🔥 Event Loop

The Event Loop continuously monitors:

If the Call Stack is empty.
If there are pending callbacks in the Queues.

Its main job:

When the Call Stack is empty, the event loop moves queued callback functions to the Call Stack for execution. Callback functions in the Microtask Queue are given priority and executed first Then Callback (Task) Queue.

🧩 Microtask Queue vs Callback (Task) Queue

There are two important types of queues:

Microtask Queue:

Higher priority than the Callback Queue.
Promise .then() / .catch() / .finally() handlers call back functions and MutationObserver callbacks function

Callback Queue (Task Queue) :

Lower priority.
Includes:
setTimeout , setInterval , UI rendering callbacks , DOM event callbacks

Important:

Before picking a task from the Callback Queue, the Event Loop empties all microtasks first.

Hydration Process In React

Md Pervez Hossain — Wed, 23 Apr 2025 07:44:52 +0000

🚀 React এ Hydration কী?

আমরা জানি, React মূলত একটি client-side library। কিন্তু Server-Side Rendering (SSR) এর মাধ্যমে আমরা React কম্পোনেন্টগুলো server এ রেন্ডার করে client এ static HTML পাঠাতে পারি। কিন্তু প্রশ্ন হচ্ছে:
React সেই static HTML কে interactive কিভাবে বানায়? 🤔
এটাই হলো Hydration!

🌊 Hydration কি?

Hydration হলো সেই প্রক্রিয়া, যেখানে server-rendered static HTML কে client-side এ interactive বানানো হয়, React এর মাধ্যমে। React event listeners এবং state যুক্ত করে এই HTML কে পুরোপুরি interactive করে তোলে।

কীভাবে কাজ করে?

Server Render: Server React কম্পোনেন্টগুলোকে HTML তে রেন্ডার করে এবং ব্রাউজারে পাঠায়।

Initial Load: ব্রাউজার সেই static HTML রিসিভ করে (এখনো React functionality নেই)।

Hydration: React ব্রাউজারে লোড হয়ে সেই HTML কে "hydrate" করে, ইভেন্ট লিসেনার এবং স্টেট যুক্ত করে।

Interactivity: এখন HTML পুরোপুরি interactive হয়ে ওঠে — বাটন ক্লিক করা, state পরিবর্তন হওয়া, React এর magic চলে আসে! 🎩✨

💡 Hydration কেন প্রয়োজন?

*Hydration নিশ্চিত করে যে : *

Static HTML যা server থেকে এসেছে, সেটি interactive হয়ে ওঠে ব্রাউজারে।
React তার Virtual DOM কে server-rendered HTML এর সাথে মিলিয়ে client-side React app কে কার্যকরী করে তোলে।
Hydration ছাড়া, তোমার পেজ static থাকবে, যেখানে ইউজার কোনো interactivity উপভোগ করতে পারবে না (যেমন, বাটনে ক্লিক করা, ফর্মে টাইপ করা, বা UI আপডেট হওয়া যাবে না)।

🔥 Hydration প্রক্রিয়া কীভাবে কাজ করে?

Initial Render: Server HTML রেন্ডার করে → ব্রাউজার static কন্টেন্ট পায়।
Hydration: React ইভেন্ট লিসেনার এবং স্টেট যুক্ত করে।
State Changes: React state এর পরিবর্তন অনুযায়ী UI আপডেট করে, যা dynamic interactivity দেয়।

⚠️ Hydration Error কখন হয়?

Hydration error তখন ঘটে যখন server-generated HTML এবং client-rendered HTML এর মধ্যে ম্যাচ না করে।

যেমন: যদি তুমি Math.random() ব্যবহার করো, তাহলে server-এ যে ভ্যালু তৈরি হবে তা client-এ তৈরি হওয়া ভ্যালুর সাথে মেলাবে না।
এই mismatch এর কারণে hydration error হয়, কারণ React আশা করে যে, server-rendered এবং client-rendered HTML এক হতে হবে।

🚀 Hydration প্রক্রিয়া: গুরুত্বপূর্ণ টিপস

Hydration শুধুমাত্র client-side প্রক্রিয়া, যা প্রথম রেন্ডার হওয়ার পর ঘটে।
React event listeners, state যোগ করে এবং অ্যাপটিকে interactive করে তোলে।
Hydration error তখন ঘটে, যখন server-generated HTML এবং client-rendered HTML এর মধ্যে mismatch হয়।

🔍 সংক্ষেপে:

Hydration হলো server-rendered static HTML কে dynamic, interactive React app এ পরিণত করার প্রক্রিয়া। এটা বুঝলে তুমি SSR (Server-Side Rendering) অ্যাপ্লিকেশনগুলোকে আরও ভালভাবে অপটিমাইজ করতে পারবে। 🚀

Promise of JavaScript

Md Pervez Hossain — Sat, 26 Oct 2024 16:08:18 +0000

Before the promise we use callBack function for asynchronous Task. which has two Major Issue

1.) Callback Hell (Pyramid of doom)
2.) Inversion of control

Inversion of control is overcome by using promise.

What is the Promise ?

A promise is an object that represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

It Has Three States 🎉

1.Pending State : The initial state, neither fulfilled nor rejected.

2.Fulfilled State : Operation Completed Successfully

3.Rejected State : Operation rejected

Key Points 👍 :

In a promise, we do not pass a function directly; instead, we attach a callback function to the promise. When the promise is settled, JavaScript guarantees that the callback function will be called automatically exactly once.
As soon as the promise is fulfilled/rejected , It updates the empty object which is assigned undefined in the pending state.
A promise resolves only once and it is immutable.
A promise provides a method, .then(), to handle the result of the asynchronous operation once it is settled. (fulfilled or rejected)
To avoid callback hell (Pyramid of doom) , We use promise chaining. This way our code expands vertically instead of horizontally.
.then() Method is used For Promises Chaining
In promise chaining, always use the return statement to pass a value from one promise to the next.

Promises provide a way to handle asynchronous tasks, allowing for more readable and maintainable code when dealing with operations that take time to complete, such as network requests, file reading, or database queries.

Promise Api

Promise.all() API 👍

Promise.all() is a powerful method in JavaScript that allows you to handle multiple promises at the same time.

Key Points 👍

Takes an Iterable Object: Promise.all takes iterable promises ( such as an array ) and returns a single promise.
Resolves Together: The returned promise resolves when all promises in the array have resolved.
Results Array: The resolved value is an array of results, in the same order as the original promises.
Error Handling: If any promise rejects, Promise.all immediately rejects with that error, and it won't wait for other promises to finish.

Promise.allSettled() API 👍

Key Points 👍

Takes an Iterable Object: Promise.allSettled takes an iterable object (such as an array) and returns a single promise.
Settles Together: The returned promise settles (resolves or rejects) when all promises in the iterable have settled (either resolved or rejected).
Results Array: The settled value is an array of result objects, in the same order as the original promises:
Each Settled result object contains a status property :
status: "fulfilled" if the promise was successfully resolved, along with a value property containing the resolved value.
status: "rejected" if the promise was rejected, along with a reason property containing the rejection reason.
No Interruption: Promise.allSettled waits for all promises to settle (resolve or reject).

Promise.race() API 👍

Promise.race() is a powerful method in JavaScript that allows you to handle multiple promises. It is crucial for scenarios where you need to act on the first settled (resolved or rejected) promise.

Key Points 👍

Promise.race takes iterable promises ( such as an array ) .
It returns a single promise with First Settled (resolve or reject ) promise with the First resolved value or the First reason of rejection.
it does not wait for the other promises to settle.

Promise.any() API 👍

Promise.any() is a powerful method in JavaScript that allows you to handle multiple promises.

Key Points 👍

Promise.any() takes iterable promises ( such as an array ) .
It returns a single promise with First Resolved ( success ) promise with the value
It does wait for promises to resolve but resolves as soon as one of them resolves. It does not wait for all promises to resolve or reject before returning.
If all promises in the iterable are rejected (none of them resolve successfully), Promise.any() returns a AggregateError which contains an array of all the rejection reasons from the original iterable.

call() , apply() and bind() Method In JavaScript

Md Pervez Hossain — Fri, 25 Oct 2024 20:17:29 +0000

What is the call() Method in js ?

call() method is a built-in javascript method that allows us to invoke a function with specified “this” context.

Key Features 👍

First parameter Sets “this” context value for the function.
Make a function Reusable.
Apply the same function to different objects.
Others parameter passed with comma seperated
It calls the function directly

What is the apply() Method in js ?

apply() method is a built-in javascript method that allows us to invoke a function with specified “this” context.

Key Features 👍

First parameter Sets “this” context value for the function.
Make a function Reusable.
Apply the same function to different objects.
Other parameters are passed as an array:
It calls the function Immediately

What is the bind() Method in js ?

The bind() method is a built-in JavaScript method that creates a copy of the original function and returns a new function with a specified this context, rather than invoking the original function immediately.

Key Features 👍

First parameter Sets “this” context value for the function.
Make a function Reusable.
Apply the same function to different objects.
Others parameter passed with comma seperated
creates a copy of the original function and returns a new function
Need to call the returned function to access the original functionality

Key Differences between call() , apply() and bind() Methods :

Execution Timing:

call() and apply() invoke the function immediately.
bind() returns a new function without invoking it, allowing deferred execution.

Arguments Handling:

call() accepts arguments as comma-separated values.
apply() requires arguments as an array.
bind() also uses comma-separated arguments, but these are pre-set for later when the function is invoked.

Return Value:

call() and apply() return the result of the function call.
bind() returns a new function with the specified this context.

Write down in the comment box your knowledge about the call(), apply(), and bind() methods.

Node.js Module System and require Function

Md Pervez Hossain — Tue, 15 Oct 2024 19:48:53 +0000

Global Objects in Node.js vs Browsers

In browsers, the global object is window.
In Node.js, the global object is global.
However, this in the global scope of a Node.js module points to module.exports, not global.
this keyword is an empty object ({}) in node js

Entry Point: Every Node.js project has a main file (e.g., index.js or app.js) that starts the application, setting up the environment and logic.

Node.js Modules Overview

In Node.js, modules help organize and encapsulate code. A module is simply a file containing JavaScript code that can be imported or exported using CommonJS or ESM systems.

Files as Modules: Each file in Node.js is a module with its own scope.

Types of Modules:

Core Modules: Built-in, no installation needed (const fs = require('fs');).
Third-Party Modules: Installed via npm (const express = require('express');).
Local Modules: Use relative paths (const myModule = require('./myModule');).

Modules Key Points:

Every file is a module.
require() Function: Used to import modules, loaded synchronously.
module.exports: Used to export functionality from a module.
Core and third-party modules don't need paths, but local modules do.
Modules protect their variables,functions,objects,and arrays from leaking by default unless exported.
variables,functions,objects,and arrays etc are scoped to their local module
When you export more than one, you need to wrap it into an object
In Node.js, this in the global scope refers to an empty object, while this inside a module refers to module.exports.

In JavaScript, a module is simply a file that contains code you want to use in other parts of your program. Modules help organize and encapsulate functionality, making your code more maintainable, reusable, and easier to manage .

There Two types of Module :

Common Js Module 👍
Es Module 👍

Common Js Module 👍

CommonJS is a module system used in Node.js to allow modular code by defining how to import and export modules.

Uses require() to import and module.exports to export.
Synchronous loading of modules.
Works in non-strict mode. ( Example: You can declare variables without var, let, or const, but it’s bad practice.)
IIFE (Immediately Invoked Function Expression) wraps modules for local scope.
Still widely used in Node.js, though ESM is preferred for new projects.
CommonJS allows you to break your code into reusable modules, making it more organized and maintainable.
default module system in older Node.js versions.

Useful built-in global variables available in every CommonJS module:

module.exports: To define what a module exposes.
require(): To load another module.
__dirname: The directory path of the current module.
__filename: The absolute path of the current module file.

Es Module 👍

ESM (ECMAScript Modules): This is the standard JavaScript module system, also referred to as ES Modules or MJS (for files with .mjs extension).

Uses import and export for modular code.
Standard in frameworks like React, Vue, and Angular.
Module loading is async, enabling better performance.
ESM enforces strict mode by default.
Must use var, let, or const for variable declarations.
Files use .mjs or "type": "module" in package.json for Node.js.
ESM supports await at the top level without needing to wrap it in an async function.
ESM uses import instead of require().
Supports named exports and default exports for flexibility.
Once exported, values cannot be re-assigned by the importer.

Differences between CommonJS and ESM

CommonJS is synchronous and can be used in Node.js without any configuration.
ESM is the standard in modern JavaScript and works both in the browser and in Node.js with a few extra steps (like setting "type": "module" in package.json or using the .mjs file extension).

Conclusion

Module: A reusable block of code (functions, variables, etc.) in a file.
Module System: The system used to manage, load, and export/import these modules.
Node.js: Primarily used the CommonJS module system, but now also supports ESM.
Benefits: Makes code modular, maintainable, and reusable across large applications.
In Node.js, module.exports is a special object that is used to export values (such as functions, objects, or variables) from a module, so that they can be imported and used in other files (modules).
When you write code in Node.js, each file is treated as a separate module. The module.exports object is what defines the public API of that module — meaning whatever you assign to module.exports will be accessible when you require() that module in another file.

Node.js require() Function Jobs :

Resolving the Module – Identifies the location of the module (file path, core module, or node_modules).
Loading the Module – Reads the content based on its file type.
Wrapping in IIFE – Encapsulates the module in a function to provide local scope and access to necessary variables.
Code Evaluation – Executes the module's code and returns the module.exports object.
Caching – Stores the module in memory for future require() calls to reuse.

"Node.js does not directly send module code to the V8 engine. Instead, it first takes the module content, wraps it inside an IIFE (Immediately Invoked Function Expression), and then sends this wrapped code to the V8 engine for execution."

Breakdown:

Module Wrapping: Node.js wraps the code of each module in a function (IIFE) to create a private scope and inject variables like exports, require, module, etc.
Execution in V8: After wrapping the module in an IIFE, Node.js sends the wrapped function to the V8 JavaScript engine, where it is parsed and executed.

What is IIFE in JavaScript ❓

IIFE stands for Immediately Invoked Function Expression. It's a JavaScript function that runs as soon as it is defined.
An IIFE is created by wrapping a function inside parentheses and This parentheses convert it from a function declaration into a function expression.
Immediately invoking it with another set of parentheses.

Why Do We Use IIFE ❓

Avoid Global Variable Pollution : IIFEs create a local scope, preventing variables from affecting the global scope, avoid naming conflicts and enhancing modularity.
Encapsulation of Code : IIFEs keep the code self-contained and inaccessible from outside, ensuring a cleaner codebase.
Private Variables : Variables inside an IIFE are private and can't be accessed externally, improving data security.
Initialization Code : IIFEs are ideal for executing code immediately, especially for one-time setups or initializations .

In Node.js, the module system is essential for organizing and encapsulating code. Node.js originally used the CommonJS module system with require() for importing and module.exports for exporting, making code reusable across different files. Now, with the rise of ES Modules (ESM), JavaScript has embraced a modern, standardized system using import and export with async loading and strict mode.

The primary goal of both systems is to improve maintainability, reusability, and modularity, but ESM is now favored for its performance benefits and alignment with browser-based JavaScript.

Super Power of Node Js

Md Pervez Hossain — Sat, 12 Oct 2024 07:40:09 +0000

What is a Server ? 🖥

A Server is a computer system or Program that provides resources or data to client Computers through a network. Essentially, a server is a machine (like any computer) which is located somewhere .

Every domain name (like google.com) is linked to a unique IP address, which points to the server (a computer or machine) where the website is hosted.
When you type a domain name in the browser, it sends a request to that server, which responds by delivering the requested content (e.g., a web page) .

Example : 💡

If you set up a web server on your computer and store websites on it, your computer will act as the server. When users type the website's domain name (URL) into their browser, the browser sends a request to your server (your computer). Your server then responds by sending back the requested web pages.

In this case, your computer is functioning as a web server.

Javascript is the main Language which is used in the web browser for client site interactive behavior. But after node js you can use javascript on the server.

Node.js is built using JavaScript and C++ . But End Of the day it's C++ Programe.
Node.js uses the V8 JavaScript engine, which was developed by Google.
The V8 engine is a C++ program that executes JavaScript code.
JavaScript Engine is not a Physical Machine , it is a piece of software ( Piece of code ) that executes JavaScript code.
The V8 engine can be embedded into any C++ application, which has significantly contributed to the creation of Node.js.
Computers don’t understand JavaScript code directly. We write JavaScript code, and the V8 engine reads and compiles it into machine code that the computer can execute.
This is why Ryan Dahl wrote Node.js in C++ and utilized the V8 engine for compilation.
Js Engines Follow ECMAScript standards.
ECMAScript (often abbreviated as ES) is a standard for scripting languages. It defines the syntax, semantics, rules and behavior of programming constructs in JavaScript.
ECMAScript ensures that different JavaScript engines (like V8, SpiderMonkey, and JavaScriptCore) interpret the language in a consistent manner.
This consistent manner allows developers to write code that works across various platforms and environments.
V8 cannot connect to databases, can not access the file system, can not perform network calls, or fetch images and resources.
Its main job is to execute JavaScript code according to the core ECMAScript standard.
Along With V8 Engine , Node Js also adding its own powerful features.

JavaScript Runtime Environment :

Node.js uses the V8 engine to execute JavaScript code, and it adds additional core features such as file system access, database connectivity, and networking.
These features extend the capabilities of JavaScript, creating a runtime environment that allows JavaScript to be used for server-side applications.
This combination of V8 and Node.js's built-in modules is known as the JavaScript Runtime Environment in Node.js.

Node.js Super Powers :

Non-Blocking, Asynchronous I/O: One of Node.js’s core strengths is its non-blocking I/O model, which allows it to handle multiple requests at the same time without waiting for one to finish before starting another. This makes Node.js extremely fast and efficient for tasks like file handling and network communication.

Event-Driven Architecture: Node.js has an event loop, which processes requests as per events. This architecture allows it to efficiently handle real-time data streams and applications like chat services or live dashboards.

Built-in Modules : Node.js provides many built-in modules (such as http, fs, path, etc.) that handle essential server-side functionalities like creating web servers, managing the file system, networking, and more. This allows developers to build powerful server applications quickly without needing external libraries.

http: Used to create web servers and handle HTTP requests.
fs: Used to interact with the file system (read/write files).
path: Used for working with and manipulating file paths in a cross-platform way.

Single-Threaded but Scalable: Although Node.js operates on a single thread, it can handle multiple operations concurrently due to its event loop and asynchronous nature. This allows Node.js to scale horizontally and handle large volumes of connections efficiently.

Cross-Platform: Node.js runs on various platforms, including Windows, Linux, and macOS. This makes it a versatile solution for different environments.

Full-Stack Development: Node.js allows developers to use JavaScript on both the client-side and server-side, enabling full-stack development with a single language

Streaming Capabilities: Node.js is excellent for handling data streaming applications, such as video streaming, file uploads, or real-time data transmission.

In Conclusion

Node.js is not just another JavaScript runtime. It is a powerful combination of the V8 JavaScript engine and C++-based extensions that provide server-side capabilities. By embedding V8, Node.js can execute JavaScript efficiently, but by adding features like file system access, database connectivity, and networking, it transforms into a full server environment.

Memory Location Behavior in JavaScript

Md Pervez Hossain — Mon, 01 Jul 2024 15:30:17 +0000

👍 Primitive Types
Primitive types in JavaScript include Number, String, Boolean, Null, Undefined, Symbol, and BigInt. These types are immutable and are stored directly in the variable's memory location.

👉 Memory Behavior :

When a primitive value is assigned to a variable, the value itself is stored in the variable's memory location.
When the variable is assigned to another variable, the value is copied. Changes to one variable do not affect the other.
When the variable is Re-assigned , the value is stored in the new memory location.

Explanation , of Above Example : 👇

The variable "a" is declared and initialized with the value 10. This means a directly stores the value 10 in its memory location.

The variable "b" is declared and initialized with the value of "a". Since "a" holds a primitive value, "b" gets a copy of that value. At this point, "b" also stores the value 10 in its own memory location. Now, both "a" and "b" have the value 10, but they are stored in separate memory locations.

Now variable "b" is reassigned with the value 20. This changes the value stored in b's memory location to 20. The variable "a" remains unchanged and still holds the value 10 because hey are stored in separate memory locations.

👍 Reference Types
Reference types include Object, Array, Function, and other objects created using the new keyword. These types are mutable and are stored as references to their memory locations.

👉 Memory Behavior :

When a reference type value is assigned to a variable, the variable stores a reference (or pointer) to the location in memory where the value is actually stored.
When the variable is assigned to another variable, only the reference is copied, not the value itself. Changes to one variable affect the other because they both reference the same object.

Explanation , of Above Example : 👇

Here "obj1" is a object . In JavaScript Object is Reference Data Types , meaning they are stored in memory, and variables store references (or pointers) to those objects. "obj1" is assigned a reference to an object with a property name set to "Alice".

"obj2" is assigned the same reference as "obj1". Now, both "obj1" and "obj2" point to the same object in memory.

Changing the name property of the object through "obj2" also affects "obj1" because both variables reference the same object.

This distinction between primitive values and objects/references is crucial for understanding how variables interact with memory in JavaScript, particularly when using let for variable declarations.

Callback Hell In JavaScript

Md Pervez Hossain — Mon, 10 Jun 2024 09:32:20 +0000

Callback Hell In JavaScript :

✍ When a function is passed as an argument to another function, it becomes a callback function. This process continues and there are many callbacks inside another's Callback function. The code grows horizontally instead of vertically .That mechanism is known as callback hell.

Callback Hell (Pyramid of Doom) , occurs in asynchronous programming when multiple callbacks are nested within one another . This pattern emerges when each asynchronous operation requires a callback function, and these callbacks contain further asynchronous operations that also need callbacks.

✍ Explanation :

createOrder Function:

When the createOrder function is called, a callback function is passed into it.
Example: createOrder(() => {}).
Inside createOrder, this callback function is executed after completing the createOrder operation.
By using this callback function, you can call paymentOfOrder inside the callback after createOrder is done.

paymentOfOrder Function:

When the paymentOfOrder function is called, a callback function is passed into it.
Example: paymentOfOrder(() => {}).
Inside paymentOfOrder, this callback function is executed after completing the payment operation.
By using this callback function, you can call orderSummary inside the callback after paymentOfOrder is done.

orderSummary Function:

When the orderSummary function is called, a callback function is passed into it.
Example: orderSummary(() => {}).
Inside orderSummary, this callback function is executed after completing the summary operation.
By using this callback function, you can call updateWallet inside the callback after orderSummary is done.

Complete Flow with Explanations
Here’s the complete flow with these explanations applied:

This expanded explanation should clarify how each function's callback is used to invoke the next function in the sequence, demonstrating the flow of execution and how callback functions are passed and executed at each step.

This nesting of callbacks is what leads to callback hell as it makes the code harder to read and maintain, especially as the number of nested operations grows.

Avoid callback hell, consider refactoring the code using Promises or async/await for better readability and maintainability, as previously demonstrated.

Next Blog will be Promises , How we solve the call back issue by promises.
Keep following . Thank You

State and Props In React

Md Pervez Hossain — Sun, 09 Jun 2024 09:15:07 +0000

What is The State In React ?

👉 State is a way to Keep Track of Data that can Change in your Application. State is a Plain JavaScript Object that holds information that may change during the components life cycle. this data directly Affects the Components behavior and appearance . When The state changes , React Re-renders the component with updated information , Ensuring the UI reflects the current State

key Points :✍

Internal : State is local to it's Components and isn't modified outside the Components
Dynamic : Sate Can be Modified Throughout the Component Lifecycle Allowing for interactive and responsive UI
Re-rendering : whenever the state Changes , React Retender the Component and reflecting the updating information on the UI

How State Works ? ✍

State is typically Initialized in the constructor of class components and using useState() hooks in Functional Components.
You Can directly access the state value using this.state in class components and state variable in functional components.
State Should never mutated Directly . instead of , use this.setState method for class components and state updater Function in Functional components.
when Updating State , Never modify the existing state , instead of , create a new object with desire changes and make a shallow a comparison for Re-renders.

👉 Props in React

Props are short for "properties" and are used to pass data from one component to another. They are read-only, meaning they cannot be modified by the receiving component. Props are typically used to pass data from a parent component to a child component.

key Points :✍

Immutability: Props are immutable. Once set by the parent component, the child component cannot change them.
Data Flow: Props enable a unidirectional data flow, meaning data flows from parent to child components.
Function Arguments: Props work similarly to function arguments. When you define a component, you can pass data to it through attributes, just like passing arguments to a function.

useState() Hooks In react , How it Works ?

Md Pervez Hossain — Sun, 09 Jun 2024 07:05:43 +0000

👉 useState() Hooks In React

useState() hooks is a function that allows you to add a state in functional components. When you call useState() hooks, it returns an array with two elements.

➡️ State Variable: The current value of the state.

➡️ State Updater Function: This function allows you to update the state variable.

👉 Example :

➡️ state: The current state value.

➡️ setState : A function to update the state.

➡️ initialState : The initial value of the state.

Key Points 👍 :

➡️ Initialization: When the component first renders, useState(initialState) sets up a state variable (state) and a function (setState) to update that state. The initialState can be any type of value: number, string, object, array, etc.

➡️ State Variable: The state variable holds the current state value. React keeps track of this variable internally and ensures it stays consistent across re-renders.

➡️ State Setter Function: The setState function allows you to update the state. When you call this function with a new value, React schedules a re-render of the component, during which the state variable is updated with the new value.

➡️ Re-rendering: When the state is updated, React re-renders the component to reflect the new state. This means the component function is called again, but the state variable will now hold the updated value.

➡️ Multiple State Variables: You can use multiple useState hooks within a single component to manage different state variables independently, providing greater flexibility and readability.

➡️ Functional Updates: Sometimes you need to update the state based on the previous state. In such cases, you can pass a function to the setState function. This function receives the previous state and returns the new state.

By using the functional form of setState, you ensure that the state update is based on the previous state, which is particularly important when updates depend on the previous state value

➡️ Lazy Initialization: If the initial state is the result of an expensive computation, you can pass a function to useState. This function will be called only once to compute the initial state.

By using this approach, you ensure that the expensive computation to determine the initial state is performed only once, rather than on every re-render of the component.

👉 Handling Objects and Arrays

When dealing with objects or arrays, you should remember that useState does not automatically merge updates. Instead, you need to manage merging state updates manually.

Updating an Object

Add an Array

useState is a versatile and powerful hook for managing state in functional components, providing an easy-to-use API that aligns with React's declarative nature. It simplifies state management, enhances readability, and contributes to more maintainable and scalable React applications.

Temporal Dead Zone In JavaScript

Md Pervez Hossain — Wed, 29 May 2024 18:47:52 +0000

During the memory creation phase of the execution context, variables declared with let and const are allocated memory in the block scope, not in the global scope. These variables cannot be accessed before they are initialized. Here Temporal Dead Zone (TDZ) Comes To In Picture.

👉 Temporal Dead Zone In JavaScript :
Temporal Dead Zone is a behavior in JavaScript where variables declared with let and const are inaccessible before their initialization.
Temporal Dead Zone (TDZ) is the time period in JavaScript when a variable declared with let or const has memory allocated but has not yet been initialized.

👇 Explanation Of Above Example :
During the memory creation phase, memory space is allocated for the variable 'a'. However, 'a' is not initialized yet. This marks the beginning of the Temporal Dead Zone (TDZ) for variable 'a'. The Temporal Dead Zone (TDZ) ends when variable 'a' is initialized with the value 1.

Attempting to access 'a' variable in its TDZ will Throw a ReferenceError.

Similarly, the TDZ applies to _const _variables as well

👇 Explanation Of Above Example :

Here, a is properly declared and initialized before we attempt to access it, so there is no TDZ violation, and the value of a (which is 1) is successfully printed to the console.

In summary, the TDZ is a period during which let and const variables exist but are not yet accessible. The TDZ ensures that variables are accessed only after they have been properly declared and initialized,

How Function And Variables Works in JavaScript : Behind the Scenes

Md Pervez Hossain — Wed, 29 May 2024 18:31:28 +0000

Function is The Heart Of JavaScript

Everything in JavaScript Happens Inside an Execution Context
All JavaScript code runs within an execution context, which provides an environment for the code execution. When JavaScript code runs, it first creates a Global Execution Context (GEC). The GEC ( Global Execution Context ) Put Into The Call Stack .

What is Call Stack In JavaScript ?

The call stack in JavaScript is a mechanism that helps the JavaScript engine keep track of function calls and their execution order. It follows the Last In, First Out (LIFO) principle, meaning that the last function called is the first one to complete execution and be removed from the stack.

It Has two main components:

Memory Component (Variable Environment)
Code Component (Thread of Execution)