DEV Community: Akash Shukla

JavaScript — Pass by Reference and Pass by Value (Made Simple)

Akash Shukla — Wed, 05 Nov 2025 18:50:52 +0000

If you ever changed one variable and somehow another one also changed —
and sometimes it didn’t — then welcome.
You just met one of JavaScript’s most common confusions for beginners that is:
Pass by Value and Pass by Reference.

Let’s understand both of them clearly with small examples.

🔹 Primitive Types → Pass by Value

Primitive types in JavaScript are —
string, number, boolean, bigint, null, and undefined.

These are simple. When you assign or pass them,
JavaScript makes a copy of the actual value and allocates separate memory pointing to a new address.
That means changing one variable will never change the other.

let a = 12;
let b = a;

b = 13;

console.log(b, a); // 13, 12

👉 a and b are two different boxes.
They just happen to start with the same value.
Changing one box doesn’t touch the other.
So we can clearly say that —

Primitive = always copied by value

Now let’s discuss about Non-Primitive types.

🔹 Non-Primitives → Pass by Reference (kind of)

Now this is where confusion starts.
Objects, arrays, and functions don’t hold the real value.
They hold a reference (memory address) where the value is stored.

So when you assign one object or array to another variable,
the variable is not copying the data — it is copying the address.

That’s why when you change one, the other also changes.

🔸 Example 1 — Mutation Affects Both

const a = [1, 2, 3, 4, 5];
const b = a;

b.pop();

console.log(b, a); 
// both will print the same - [1, 2, 3, 4]

Here, both a and b point to the same array in memory.
When you remove one element from b,
you are actually removing it from that same array.
So both show the same result.

🧩 Changing (mutating) means both get affected.

But here’s the catch — Reassignment Does NOT Affect the Original.
What does it mean? Well, let’s see the example first.

🔸 Example 2 —

const x = [1, 2, 4, 5];
let y = x;

y = [12, 34, 45];

console.log(x, y);
// [1, 2, 4, 5] [12, 34, 45]

Here we did a reassignment of the y variable.
Mutation and reassignment are not the same thing — let’s understand it.

At the start, x and y were pointing to the same array.
But when we reassigned y = [12, 34, 45],
we didn’t edit that same array — we created a new one.
Now y points to a new address, and x is still pointing to the old one.

And here, reassignment breaks the connection — that’s why y is now referenced to this new array.
The same principle works with functions too.

So, a quick recap and for remembrance:

If we mutate, both variables change.
If we reassign, only your local variable changes.

JavaScript is always pass-by-value,
but for objects, the value that gets copied is the reference.

So when you pass an object and change its properties,
the change is visible outside because both share the same reference.
But when you reassign, you’re just pointing to a new memory address,

so the outer variable stays the same.

✨ Hope it clears your doubt. Happy Learning!

👥 How I Built a Secure and Clean User Impersonation Feature (ReactJS + NodeJS)

Akash Shukla — Thu, 07 Aug 2025 14:10:01 +0000

Hello Everyone, Welcome! Today I'll share something really useful.

Have you ever needed to see exactly what a user is seeing — without asking for their password?
Whether you're debugging an issue, providing customer support, or verifying role-based access — sometimes, the best way to help is by temporarily stepping into the user's shoes.

That’s where user impersonation comes in — and in this article, I’ll show you how to build it securely and cleanly using React, Node.js, and JWT.

What is user impersonation?
It’s a feature that allows admins to temporarily "become" another user, so they can:

Debug issues in the app
Help users in real-time
View permissions and flows as that user

In this article, I’ll walk you through how I built a secure impersonation system using:

✅ JWT (JSON Web Token)
✅ React (Frontend)
✅ Node.js + Express (Backend)
✅ HTTP Only Cookies for session control

🧠 Understanding the Concept First

Let’s take a real-life example:

Imagine you’re a Admin of an App. A customer says:

"I can’t find the report tab on my dashboard."

Now, instead of guessing or asking for screenshots, you can:

Click "Impersonate User"
Instantly log in as that user
See the exact issue
Help them — fast!

But impersonation also has risks, so it must be:

✅ Secure: Only admins should do it
✅ Trackable: You should know who did what
✅ Reversible: Admin can exit anytime

🔄 Flow Diagram

🧭 Step-by-Step Impersonation Flow

✅ Admin clicks "Impersonate" on the user list.
🔐 Backend generates a special JWT containing both:
- Target user’s data
- isImpersonating: true and impersonatedBy (admin info)
- The backend sets this JWT as an HTTP-only cookie, ensuring it's securely managed by the server and not accessible via client-side JavaScript.
🍪 Frontend sets the isImpersonating: true and redirects to the impersonated user’s dashboard.
👀 Dashboard detects impersonation flag (from cookies) and shows a banner like: "You're impersonating John Doe".
🚫 Admin clicks "Stop Impersonation", which:
- Calls stop API
- Resets JWT back to the original admin
- Redirects to admin dashboard

🛠️ Let's Implement It (Step-by-Step)

🔹 Step 1: Trigger Impersonation from React

We hit an API to start impersonating a user and save the JWT in cookies.

const startUserImpersonation = (userId: string) => {
  impersonateMutation.mutate(userId, {
    onSuccess: ({ data }) => {
      const { user, isImpersonating } = data;

      saveUserCookies({ roles: user.roles });
      Cookies.set('IMPERSONATION_ACTIVE', String(isImpersonating));

      toast.success("Impersonation started.");
      router.replace(resolveUserHome(user.roles)); 
    },
    onError: () => toast.error("Failed to impersonate user."),
  });
};

🔹 Step 2: Backend API to Start Impersonation

async function startImpersonation(req, res) {
  const user = await UserModel.findById(req.params.id);
  if (!user || user.roles.includes("admin")) {
    return res.status(400).json({ message: "Cannot impersonate this user." });
  }

  const tokenPayload = {
    _id: user._id,
    email: user.email,
    roles: user.roles,
    impersonationActive: true,
    impersonatedBy: {
      _id: req.user._id,
      email: req.user.email,
      roles: req.user.roles,
    },
  };

  const token = createJWT(tokenPayload, 1); // 1 hour expiry time
  res.cookie("auth_token", token, jwtCookieOptions);

  res.status(200).json({ message: "Impersonation started", data: { user, isImpersonating: true } });
}

Note: Make sure this API is protected by appropriate middleware, so that only authorized users (e.g., admins) have access to perform impersonation.

🔹 Step 3: Show "Stop Impersonation" Banner in React

{isImpersonating && (
  <div className="fixed top-2 left-1/2 -translate-x-1/2 bg-gray-900 text-white px-4 py-2 rounded">
    You're impersonating {userName}
    <button onClick={stopImpersonation} className="ml-2 underline">Stop</button>
  </div>
)}

And here’s the handler:

const stopImpersonation = () => {
  stopImpersonationMutation.mutate(undefined, {
    onSuccess: ({ data }) => {
      saveUserCookies({ roles: data.user.roles });
      Cookies.remove('IMPERSONATION_ACTIVE');
      toast.success("Impersonation stopped.");
      router.replace(resolveUserHome(data.user.roles));
    },
  });
};

🔹 Step 4: Middleware to Decode JWT

Here we check if the token has impersonation info.

async function decodeAuthToken(req, res, next) {
  const token = req.cookies.auth_token;
  if (!token) return next();

  const decoded = await verifyJWT(token);

  if (decoded.impersonationActive) {
    req.user = decoded.impersonatedBy;
    req.isImpersonating = true;
    return next();
  }

  // Normal user session
  req.user = await UserModel.findById(decoded._id);
  next();
}

🔹 Step 5: Stop Impersonation on the Backend

async function stopImpersonation(req, res) {
  if (!req.isImpersonating) {
    return res.status(400).json({ message: "Not currently impersonating." });
  }

  const adminUser = await UserModel.findById(req.user._id);
  const token = createJWT(adminUser);
  res.cookie("auth_token", token, jwtCookieOptions);

  res.status(200).json({ message: "Impersonation ended", data: { user: adminUser } });
}

✅ Bonus Tips to Improve It

To take this feature from “cool” to “production-ready,” here are some pro tips:

📌 Add Logs

Log who impersonated whom:

logger.info(`${req.user.email} impersonated ${user.email} at ${new Date()}`);

🚫 Block Dangerous Actions

For example, disallow deleting users while impersonating:

if (req.isImpersonating) {
  return res.status(403).json({ message: "This action is not allowed during impersonation." });
}

🧾 Save Audit Trails

(Optional) Store impersonation events in DB:

Who started
When
Actions taken

🧩 Final Thoughts

This impersonation system helps:

Debug user issues faster
Support customers better
View the app like your users do

It’s simple, powerful — and when done securely — a huge win for your team and product.

📁Uploading Multiple Files with Metadata in React and Node.js (Multer)

Akash Shukla — Fri, 11 Jul 2025 06:04:55 +0000

👋 Hey there, welcome!
Today, we’re diving into a very practical and essential feature in modern web development:

📂 Uploading multiple files along with metadata (text inputs).

This is a common requirement across many applications — from job portals and admin dashboards to content platforms. In this blog, I’ll guide you step-by-step on how to implement this feature using:

🔧 React (Frontend) — for collecting files and text inputs
🚀 Node.js with Express + Multer (Backend) — to handle and store the uploaded data

You'll see how to accept user inputs like "employment type" and "salary range" along with multiple file uploads, all in one request.

🚀 What You’ll Build

A form where the user can:

Upload up to 5 .pdf, .doc, or .docx files
Fill in metadata like employmentType, salaryRange, etc.
Submit everything to a backend that handles both file storage and metadata parsing

🧪 Frontend in React: Uploading Files + Metadata

We’ll use React Hook Form and FormData to handle file + text data submission.

📌 Form Inputs: Text + File Upload

<div className="col-span-1 space-y-2">
  <Label htmlFor="employmentType">Employment Type (Optional)</Label>
  <Input
    id="employmentType"
    type="text"
    placeholder="Enter here.."
    {...register("employmentType")}
  />
</div>

<div className="col-span-1 space-y-2">
  <Label htmlFor="salaryRange">Salary Range (Optional)</Label>
  <Input
    id="salaryRange"
    type="text"
    placeholder="Enter here.."
    {...register("salaryRange")}
  />
</div>

<div className="col-span-1 space-y-2">
  <Label htmlFor="sampleAds">Upload Sample Ads</Label>
  <Input
    id="sampleAds"
    className="cursor-pointer"
    placeholder="select here.."
    type="file"
    multiple
    onChange={handleFileUpload}
    accept={ACCEPTED_FILES} // ".pdf, .doc, .docx"
  />
</div>

🧠 Preparing FormData with Text + Files

const formData = new FormData();

formData.append("name", name.trim());
formData.append("about", about.trim());
formData.append("jobLocation", jobLocation);
formData.append("employmentType", employmentType);
formData.append("salaryRange", salaryRange);

formData.append("admins", JSON.stringify(adminsEmail));
formData.append("inviteAdmins", JSON.stringify(emails));
formData.append("twilioNumbers", JSON.stringify(twilioNumbers.map((num) => num.value)));

uploadedFiles?.forEach((file) => formData.append("files", file));

🔑 Tip: Always JSON.stringify() any arrays or objects you append to FormData.

🚀 Submitting FormData via Axios (React Query)

const useCreateCompany = useMutation({
  mutationFn: async (formData: FormData) => {
    const response = await apiClient.post(`${API_COMPANY_URL}`, formData, {
      headers: {
        "Content-Type": "multipart/form-data", 
      },
    });
    return response.data;
  },
});

📤 Backend in Node.js: Express + Multer

To handle multipart/form-data, we’ll use the multer package.

🧰 Setting Up Multer with Disk Storage

import multer from "multer";
import * as fs from "node:fs";
import * as path from "node:path";

// Create an upload folder if it doesn't exist
const uploadDir = path.join(process.cwd(), "upload");
if (!fs.existsSync(uploadDir)) {
  fs.mkdirSync(uploadDir);
}

// Disk storage config
const diskStorage = multer.diskStorage({
  destination: (req, file, cb) => cb(null, uploadDir),
  filename: (req, file, cb) => cb(null, file.originalname),
});

✅ File Filter (Allow Only .pdf, .doc, .docx)

const fileFilter = (req, file, cb) => {
  const allowedMimeTypes = [
    "application/msword",
    "application/pdf",
    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
  ];
  allowedMimeTypes.includes(file.mimetype)
    ? cb(null, true)
    : cb(new Error("Invalid file type. Only doc and PDFs are allowed."));
};

🧩 Final Multer Config

export const upload = multer({
  storage: diskStorage,
  limits: { fileSize: 5 * 1024 * 1024 }, // Max 5MB
  fileFilter: fileFilter,
}).array("files", 5); // Max 5 files allowed

📬 Route Setup with Middleware

this.router.post("/", upload, CompanyRoutes.createCompany);

📦 Reading Metadata + Files in Controller

const { name, about, jobLocation, employmentType, salaryRange } = req.body;

const admins = JSON.parse(req.body.admins);
const inviteAdmins = JSON.parse(req.body.inviteAdmins);
const twilioNumbers = JSON.parse(req.body.twilioNumbers);

const files = req.files as Express.Multer.File[];

if (files && files.length > 5) {
  return ErrorResponse(res, 422, {
    message: "Not more than 5 files are allowed",
  });
}

🧽 Bonus: Delete Uploaded Files After Processing

If you're using disk storage, files are saved on your server. After processing (like uploading to a cloud or OpenAI), you should delete them to avoid clutter.

import * as fs from "fs";
import * as path from "path";

// Delete files after processing
files.forEach((file) => {
  const filePath = path.join(process.cwd(), "upload", file.filename);

  fs.unlink(filePath, (err) => {
    if (err) {
      console.error(`Failed to delete file ${file.filename}:`, err);
    } else {
      console.log(`Deleted file: ${file.filename}`);
    }
  });
});

🏁 Conclusion

With this full-stack setup, you can reliably handle both multiple file uploads and structured metadata in your apps. Whether you're building a form for job ads, templates, or resumes — this pattern is scalable, secure, and easy to maintain.

💡 Pro Tip: If you're planning to use cloud storage (e.g., AWS S3, GCS, or OpenAI), process the file in-memory or store temporarily, then delete the local copy to save space.

Understanding React Context API: A Practical Guide

Akash Shukla — Sun, 22 Jun 2025 10:15:04 +0000

Hello there, Welcome!

If you’ve ever built a React app and found yourself tired of passing data from one component to another and then another... you’re not alone! This is called prop drilling, and it’s one of the most common hurdles developers face — especially in growing projects.

But worry not! React’s Context API is here to the rescue. It helps you share data like user info, themes, or language settings across your app — without all that prop-passing chaos.

In this guide, we’ll explore what the Context API is, why it’s useful, and how to use it with practical examples.

🚀 What is Context API?

The Context API is a built-in feature in React that allows data to be shared across the component tree without explicitly passing props at every level.

It’s like a global state manager for simple use cases like:

Authentication (user login/logout)
Theme switching (light/dark)
Language/Localization
Modal visibility

🔧 When Should You Use It?

Context is great when:

You have state that needs to be accessed by many components.
You want to avoid deeply nested prop passing.

But it’s not ideal for:

High-frequency updates (e.g., input fields) — it can cause unnecessary re-renders.
Complex state management — for that, use Zustand or Redux.

🛠️ How to Use the Context API

Let’s build an Auth context step-by-step to manage user login state.

Step 1: Create Context

import { createContext, useContext, useState } from "react";

const AuthContext = createContext();

Now that we've created our AuthContext,
When we call createContext, it returns an object with two parts:

Provider: Used to wrap our component tree and pass down values (like user, login, etc.) to all children.

Consumer: Used to access those values in older/class components (less common now).

In modern React (with hooks), we usually combine Provider with the useContext hook for simpler and cleaner access to context values. Consumer is mostly used in older React code or class components.

Step 2: Create a Provider Component

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  const login = (userData) => setUser(userData);
  const logout = () => setUser(null);

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

Step 3: Create a Custom Hook

export const useAuth = () => useContext(AuthContext);

This makes it easier to consume the context in any component:
When we call useAuth, It will automatically return AuthContext data.

const { user, login, logout } = useAuth();

🧪 Wrapping Your App

In main.jsx or _app.js (depending on your setup), wrap your app in the AuthProvider:

import { AuthProvider } from "./contexts/AuthContext";

const Root = () => (
  <AuthProvider>
    <App />
  </AuthProvider>
);

Now all components inside <App /> can access the auth context.

🧩 Real World Example

import { useAuth } from "./contexts/AuthContext";

const Dashboard = () => {
  const { user, login, logout } = useAuth();

  const handleLogin = ()=> {
    const userName = prompt("Please enter your name");
    login(userName); 
  }

  return user ? (
    <>
      <p>Welcome, {user.name}</p>
      <button onClick={logout}>Logout</button>
    </>
  ) : (
    <button onClick={handleLogin}>Login</button>
  );
};

✅ Best Practices

✅ Split contexts logically (e.g., AuthContext, ThemeContext).
✅ Use custom hooks for clean context consumption.
✅ Keep context value minimal (avoid putting huge data inside).
❌ Don’t use context for frequently updating values.

🏁 Conclusion

The Context API is a powerful tool when used right. For things like auth, theme, and global UI state, it's a clean, scalable way to manage state in your React app without external libraries.

Use it wisely — and when your app starts growing, consider combining it with local state or moving to more advanced state managers like Zustand or Redux.

Happy coding! 💻✨

Understanding coercion in JS

Akash Shukla — Sun, 15 Jun 2025 07:31:10 +0000

🚀 Hello Welcome, Everyone!

Today we’re diving into a very important concept in JavaScript that’s often ignored by beginners or misunderstood as something trivial:

🔍 What is Coercion in JavaScript?

Coercion in JS happens when one type of value is converted into another type—like from a number to a string, or from a boolean to a number.

There are two types of coercion:

Implicit Coercion – JavaScript does it automatically.
Explicit Coercion – The developer does it manually.

✅ For example:

To convert a false boolean into a number:

👉 Implicit Coercion

1 + "1"    // "11" → string
1 - "1"    // 0 → number

🧠 A key point:
When you use -, *, or / with non-number types, JavaScript implicitly coerces them to numbers to perform the math operation. Only with + the concatenation happens.

👉 Explicit Coercion

Number(false)  // 0
+false         // 0
+"1"           // 1

💡 Common Implicit Coercion Cases You Must Know

1. 🧵 String Coercion

When you use the + operator, if any operand is a string, JS converts the other to a string and concatenates.

"hello" + "JS"  // "helloJS"
1 + "2"         // "12"

2. ✅ Boolean Coercion (in Conditionals)

In conditionals like if(...), JavaScript implicitly converts the value into a boolean:

if (0) {
  // This block won't run because 0 is falsy
}

This brings us to another key topic:

🤔 What is Truthy and Falsy in JS?

JS converts values into booleans behind the scenes based on truthy/falsy rules.

There are exactly 7 falsy values in JavaScript:

0, null, undefined, "", false, NaN, -0

All other values are truthy, including:

[], {}, "0", "false"

3. ❗ `==` vs `===`

The difference lies in whether type coercion is allowed.

Loose Equality `==` (Allows coercion):

"5" == 5         // true
false == 0       // true
null == undefined // true

Strict Equality `===` (No coercion):

"5" === 5           // false
null === undefined  // false

Using === helps avoid unexpected bugs and is considered a best practice.

4. 🔗 Logical Operators Coerce to Boolean But Return Original Values

This is known as short-circuiting:

null || 'default'     // 'default' (returns first truthy)
'hello' && 123        // 123 (returns last truthy)
0 || false || 5       // 5

Here, JS coerces values into boolean context to evaluate them, but returns the actual value of the winning operand.

We discussed this concept in our previous blog as well.

5. ➕ Unary `+` Operator (Explicitly Converts to Number)

+"1"         // 1
+false       // 0
+null        // 0
+undefined   // NaN
+""          // 0
+{}          // NaN
+[]          // 0
+[5]         // 5

Even though null is of type object, when coerced into a number, JavaScript treats it as 0.
undefined becomes NaN because JS doesn't know how to convert it meaningfully into a number.

😵 Gotchas to Watch Out For

JavaScript coercion can be tricky! Here are some weird edge cases that trip up even experienced devs:

[] == false        // true
0 == false         // true
[] == ![]          // true 🤯

null == 0          // false
undefined == 0     // false
null >= 0          // true 😱

Why?
Because JavaScript does coercion + comparison behind the scenes, sometimes in strange orders. Always prefer === unless you're very sure what you're doing.

🧠 Quick Quiz (Test Yourself!)

What will the following return?

   [] + 1

What about:

   null == undefined

And this?

   '5' - true

✅ Answers:

'1' → [] becomes '', '' + 1 = '1'
true → both are loosely equal
4 → '5' - 1 = 4

🙌 Final Thoughts

Coercion is not just a footnote—it shapes how your code runs. Mastering it helps you:

Write predictable logic
Avoid strange bugs
Build strong fundamentals

Thank you for your time! Happy Coding!

Understanding Short Circuiting in JavaScript

Akash Shukla — Sun, 15 Jun 2025 06:28:02 +0000

Hey there, welcome!
Today, we’re diving into a crucial JavaScript concept — one that's often confusing for beginners and can lead to serious bugs when misunderstood:

👉 Short-circuiting in JavaScript

🧠 What Is Short-Circuiting?

Short-circuiting means JavaScript stops evaluating an expression as soon as it determines the final result. This can optimize performance and prevent unnecessary computation.

It’s most commonly used with:

|| (Logical OR)
&& (Logical AND)
?? (Nullish Coalescing)

Let’s break each one down with clear examples.

1️⃣ `||` OR Operator – Returns the First Truthy Value

The OR (||) operator evaluates from left to right and returns the first truthy value it encounters. If all values are falsy, it returns the last one.

console.log("" || false || 4); // ➝ 4

🔍 Why?

"" → falsy
false → falsy
4 → truthy ✅ → stops and returns 4

2️⃣ `&&` AND Operator – Returns the First Falsy Value

The AND (&&) operator evaluates from left to right and returns the first falsy value. If all values are truthy, it returns the last one.

console.log(1 && "JS" && 0 && "React"); // ➝ 0

🔍 Why?

1 → truthy
"JS" → truthy
0 → falsy ❌ → stops and returns 0

3️⃣ `??` Nullish Coalescing – Handles Only `null` and `undefined`

The Nullish Coalescing (??) operator is a safe fallback tool. It returns the right-hand value only if the left-hand value is null or undefined.

let name;
const age = 0;

console.log(name ?? "John"); // ➝ "John"
console.log(age ?? 25);      // ➝ 0 ✅

❗ Unlike ||, this does not treat 0, "", or false as missing values.

Example:

const name = user.name || "Guest"; // if name is "", fallback to "Guest"
const score = user.score ?? 0;     // if score is 0, keep it

🤯 Tricky Examples to Test Your Brain

Here are some interesting short-circuit behavior examples 👇

Example 1:

function sayHi() {
  console.log("Hi");
  return true;
}

function sayBye() {
  console.log("Bye");
  return false;
}

sayHi() || sayBye(); 
// Output: "Hi"

Why?

sayHi() returns true, so sayBye() never gets called due to short-circuiting.

Example 2:

console.log(null || undefined && "value" || "fallback");

Let’s break it down step-by-step:

undefined && "value" → undefined // due to JS operators precedence && evaluates first
null || undefined → undefined
undefined || "fallback" → "fallback" ✅

🧵 Conclusion

Short-circuiting makes JavaScript expressions cleaner and more efficient. But misusing these operators — especially || vs ?? — can cause subtle bugs.

✨ Always know what values you're trying to guard against — is it all falsy values or just null/undefined?

I once used || thinking it’d only skip null, and ended up skipping 0 — my pagination broke for hours. Learn from my pain 😅.

Why setState is delayed in React JS

Akash Shukla — Sat, 07 Jun 2025 06:32:43 +0000

Why `setState` Feels Delayed in React (And What You Can Do About It)

Hey everyone! If you’ve just started coding in React—creating components and managing state—I’m pretty sure you’ve run into this common issue:

You update the state using setState, and in the very next line, you're expecting the new value, right?


const [count, setCount] = useState(1);

const handleCount = () => {
  setCount(prev => prev + 1);
  console.log(count); // This won't log what you're expecting! It will still log the old value which is 1
};

Let’s explore why this happens and how you can deal with it effectively.

1. React is More Optimized Than You Might Think

React is designed with performance in mind. Every time a state changes, React re-renders the component to reflect that new changed value in the UI. It was very basic core of why react developed.

Now imagine calling setState multiple times in quick succession. Without optimization, this would trigger multiple re-renders—slowing things down and creating unnecessary work for the browser.

To avoid this, React batches these updates together and applies them all in a single re-render.

Yes, you heard that right! Under the hood, React uses a queue system to handle state updates. All state updates in an event handler are first queued, and only after that handler finishes, React processes them and re-renders the component.

You can think of it like ordering food at a restaurant. When you tell the waiter multiple items, they don’t rush to the kitchen after each one—they take the complete order first, then go and get everything. Similarly, React waits to collect all state updates, and then performs a single re-render.

This helps minimize unnecessary renders.

For example:

const handleCount = () => {
  setCount(prev => prev + 1);
  setCount1(prev => prev + 1);
  setCount2(prev => prev + 1);
};
console.log("Component rendered");

In this case, although you're updating three states, React renders the component only once—because all the updates are batched together.

So yes, setState may feel delayed, but it’s actually a smart performance feature.

2. But What If You Want the Updated Value Immediately?

If you need to use the updated value right after setting it, here’s a simple workaround:

const handleCount = () => {
  setCount(prev => prev + 1);
  const updatedCount = count + 1; // Use this if you need the "new" value immediately
  console.log(count); // This still shows the old value
};

Here, you can manually calculate the updated value and use it where needed. But remember, the actual state (count) will still update asynchronously as scheduled by React.

Recap

React batches state updates for performance reasons.
State doesn’t update immediately after setState—it updates on the next render.
Use functional updates (prev => prev + 1) when depending on the previous state.
Don’t expect updated values immediately in the same function body.
Use useEffect if you need to react to state changes after re-render.

Final Thoughts

React’s state handling may seem tricky at first, but it’s optimized for performance. Understanding why setState feels delayed will help you write better and more predictable code.

Hope this clears things up— happy learning!

DEV Community: Akash Shukla

JavaScript — Pass by Reference and Pass by Value (Made Simple)

🔹 Primitive Types → Pass by Value

🔹 Non-Primitives → Pass by Reference (kind of)

🔸 Example 1 — Mutation Affects Both

🔸 Example 2 —

so the outer variable stays the same.

👥 How I Built a Secure and Clean User Impersonation Feature (ReactJS + NodeJS)

🧠 Understanding the Concept First

🔄 Flow Diagram

🧭 Step-by-Step Impersonation Flow

🛠️ Let's Implement It (Step-by-Step)

🔹 Step 1: Trigger Impersonation from React

🔹 Step 2: Backend API to Start Impersonation

🔹 Step 3: Show "Stop Impersonation" Banner in React

🔹 Step 4: Middleware to Decode JWT

🔹 Step 5: Stop Impersonation on the Backend

✅ Bonus Tips to Improve It

📌 Add Logs

🚫 Block Dangerous Actions

🧾 Save Audit Trails

🧩 Final Thoughts

📁Uploading Multiple Files with Metadata in React and Node.js (Multer)

🚀 What You’ll Build

🧪 Frontend in React: Uploading Files + Metadata

📌 Form Inputs: Text + File Upload

🧠 Preparing FormData with Text + Files

🚀 Submitting FormData via Axios (React Query)

📤 Backend in Node.js: Express + Multer

🧰 Setting Up Multer with Disk Storage

✅ File Filter (Allow Only .pdf, .doc, .docx)

🧩 Final Multer Config

📬 Route Setup with Middleware

📦 Reading Metadata + Files in Controller

🧽 Bonus: Delete Uploaded Files After Processing

🏁 Conclusion

Understanding React Context API: A Practical Guide

🚀 What is Context API?

🔧 When Should You Use It?

🛠️ How to Use the Context API

Step 1: Create Context

Step 2: Create a Provider Component

Step 3: Create a Custom Hook

🧪 Wrapping Your App

🧩 Real World Example

✅ Best Practices

🏁 Conclusion

Understanding coercion in JS

🚀 Hello Welcome, Everyone!

🔍 What is Coercion in JavaScript?

✅ For example:

👉 Implicit Coercion

👉 Explicit Coercion

💡 Common Implicit Coercion Cases You Must Know

1. 🧵 String Coercion

2. ✅ Boolean Coercion (in Conditionals)

🤔 What is Truthy and Falsy in JS?

3. ❗ == vs ===

Loose Equality == (Allows coercion):

Strict Equality === (No coercion):

4. 🔗 Logical Operators Coerce to Boolean But Return Original Values

5. ➕ Unary + Operator (Explicitly Converts to Number)

😵 Gotchas to Watch Out For

🧠 Quick Quiz (Test Yourself!)

🙌 Final Thoughts

Understanding Short Circuiting in JavaScript

🧠 What Is Short-Circuiting?

1️⃣ || OR Operator – Returns the First Truthy Value

2️⃣ && AND Operator – Returns the First Falsy Value

3️⃣ ?? Nullish Coalescing – Handles Only null and undefined

Example:

🤯 Tricky Examples to Test Your Brain

Example 1:

Example 2:

🧵 Conclusion

Why setState is delayed in React JS

Why setState Feels Delayed in React (And What You Can Do About It)

1. React is More Optimized Than You Might Think

2. But What If You Want the Updated Value Immediately?

Final Thoughts

3. ❗ `==` vs `===`

Loose Equality `==` (Allows coercion):

Strict Equality `===` (No coercion):

5. ➕ Unary `+` Operator (Explicitly Converts to Number)

1️⃣ `||` OR Operator – Returns the First Truthy Value

2️⃣ `&&` AND Operator – Returns the First Falsy Value

3️⃣ `??` Nullish Coalescing – Handles Only `null` and `undefined`

Why `setState` Feels Delayed in React (And What You Can Do About It)