DEV Community: shelly agarwal

Compound Components: Advance React Patterns 👩🏻‍💻

shelly agarwal — Thu, 08 May 2025 04:25:23 +0000

1. What are Advanced React Patterns?
In advanced React development, design patterns help you write more maintainable, reusable, and testable code. These patterns abstract common logic, improve scalability, and offer flexibility when building complex apps.

2. What are Compound Components?
Related components share state implicitly via a parent.

3. Why Compound components matter in real-world apps?
✅ 1. Improves Component API Ergonomics
It allows you to design components that behave like native HTML elements with children—such as with . Consumers can use your components in a way that feels natural:

<PizzaBuilder>
  <PizzaBuilder.SizeSelector />
  <PizzaBuilder.ToppingSelector />
  <PizzaBuilder.Preview />
</PizzaBuilder>

✅ 2. Enables Shared State Without Prop Drilling
All subcomponents share context from the parent component (PizzaBuilder), so you don’t need to pass down props manually through multiple layers.

📉 Without compound:

<ToppingSelector toppings={toppings} toggle={toggleTopping} />

📈 With compound:

<PizzaBuilder.ToppingSelector />

✅ 3. Highly Composable & Flexible
Consumers can choose what parts to render, in any order. You’re not forcing a specific UI layout or coupling logic and markup tightly.

✅ 4. Encapsulates Logic While Exposing Control
State is managed internally in the parent, but child components expose controlled interfaces to change it—kind of like useReducer but through UI.

✅ 5. Ideal for Custom Layouts and Dynamic UIs
This pattern is excellent for building things like:

Wizards / Steppers
Forms with multiple sections
Tab panels
Charts with tooltips and legends
Builders/editors (e.g., a pizza builder!)

✅ 6. Used in Real Libraries
You’ll see this pattern used in libraries like:

🧱 Radix UI
🧭 React Aria
📦 Headless UI

They use compound components to let developers build fully customized but accessible UI primitives.

Use Cases: Tabs, accordions, dropdowns.

Examples -

<Tabs>
  <Tabs.Tab label="One" />
  <Tabs.Tab label="Two" />
</Tabs>

----------------

<select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>

Without Compound Components

This version hardcodes the structure and logic inside a single component. It's rigid and harder to scale or customize.

function PizzaBuilder() {
  const [size, setSize] = useState('medium');
  const [toppings, setToppings] = useState([]);

  const toggleTopping = (toppin) =>
    setToppings((prev) =>
      prev.includes(toppin) ? prev.filter((x) => x !== toppin) : [...prev, toppin]
    );

  return (
    <div>
      <h2>Select Size</h2>
      {['small', 'medium', 'large'].map((s) => (
        <button key={s} onClick={() => setSize(s)}>{s}</button>
      ))}

      <h2>Select Toppings</h2>
      {['cheese', 'pepperoni', 'mushrooms'].map((t) => (
        <label key={t}>
          <input
            type="checkbox"
            checked={toppings.includes(t)}
            onChange={() => toggleTopping(t)}
          />
          {t}
        </label>
      ))}

      <h3>Pizza: {size} with {toppings.join(', ') || 'no toppings'}</h3>
    </div>
  );
}

❌ Not very reusable. What if you want to separate size and topping selectors?

Let's build a Pizza Builder 🍕 using Compound Component pattern so that you can understand better.

Note: I’ve added more logic so you can see the pizza in the making!

Here are the screenshots of what this small project will look like -

import React, {
    createContext,
    useContext,
    useState,
    type ReactNode,
} from 'react'

// Define context type
type PizzaContextType = {
    size: string
    setSize: (size: string) => void
    toppings: string[]
    toggleTopping: (t: string) => void
}

type ToppingConfig = {
    name: string
    image: string
    positions: {
        top?: string
        bottom?: string
        left?: string
        transform?: string
    }[]
    style?: React.CSSProperties
}

type Position = {
    top?: string
    left?: string
    right?: string
    bottom?: string
    transform?: string
}

const POSITION_PRESETS = {
    center: { top: '50%', left: '50%', transform: 'translate(-50%, -50%)' },
    mushroomCenter: {
        top: '50%',
        left: '40%',
        transform: 'translate(-50%, -50%)',
    },
    topLeft: { top: '25%', left: '15%' },
    topRight: { top: '25%', right: '20%' },
    cheeseTopLeft: { top: '25%', left: '22%' },
    cheeseTopRight: { top: '25%', right: '25%' },
    bottomLeft: { bottom: '25%', left: '20%' },
    bottomRight: { bottom: '25%', right: '20%' },
    mushroomBottomLeft: { bottom: '30%', left: '25%' },
    mushroomBottomRight: { bottom: '30%', right: '25%' },
    midLeft: { top: '50%', left: '5%', transform: 'translateY(-50%)' },
    midRight: { top: '50%', right: '16%', transform: 'translateY(-50%)' },
    topCenter: { top: '10%', left: '50%', transform: 'translateX(-50%)' },
    mushroomTopCenter: { top: '22%', left: '50%', transform: 'translateX(-50%)' },
    bottomCenter: { bottom: '10%', left: '50%', transform: 'translateX(-50%)' },
} satisfies Record<string, Position & { transform?: string }>

// Create context with correct type (use null + type guard for safety)
const PizzaContext = createContext<PizzaContextType | null>(null)

// 🛠️ Hook to safely use context
const usePizza = () => {
    const ctx = useContext(PizzaContext)
    if (!ctx)
        throw new Error('Pizza components must be used inside <PizzaBuilder>')
    return ctx
}

// Main wrapper
function PizzaBuilder({ children }: { children: ReactNode }) {
    const [size, setSize] = useState('medium')
    const [toppings, setToppings] = useState<string[]>([])

    const toggleTopping = (toppin: string) =>
        setToppings((prev) =>
            prev.includes(toppin)
                ? prev.filter((x) => x !== toppin)
                : [...prev, toppin],
        )

    const value: PizzaContextType = { size, setSize, toppings, toggleTopping }

    return (
        <PizzaContext.Provider value={value}>
            <div className="pizza-builder">{children}</div>
        </PizzaContext.Provider>
    )
}

// Compound component: SizeSelector
PizzaBuilder.SizeSelector = function SizeSelector({
    options,
}: {
    options: string[]
}) {
    const { size, setSize } = usePizza()
    return (
        <div>
            <h2>Select Size</h2>
            {options.map((option) => (
                <button
                    key={option}
                    onClick={() => setSize(option)}
                    style={{ fontWeight: option === size ? 'bold' : 'normal' }}
                >
                    {option}
                </button>
            ))}
        </div>
    )
}

// Compound component: ToppingSelector
PizzaBuilder.ToppingSelector = function ToppingSelector({
    options,
}: {
    options: string[]
}) {
    const { toppings, toggleTopping } = usePizza()
    return (
        <div>
            <h2>Select Toppings</h2>
            {options.map((option) => (
                <label key={option} style={{ display: 'block' }}>
                    <input
                        type="checkbox"
                        checked={toppings.includes(option)}
                        onChange={() => toggleTopping(option)}
                    />
                    {option}
                </label>
            ))}
        </div>
    )
}

// Compound component: Preview
PizzaBuilder.Preview = function Preview() {
    const { size, toppings } = usePizza()
    const isSmall = size === 'small'
    const isLarge = size === 'large'
    const isMedium = size === 'medium'

    const renderWidth = () => {
        if (isSmall) {
            return 150
        }
        if (isMedium) {
            return 250
        }
        if (isLarge) {
            return 350
        }
    }

    const renderPizza = () => {
        const getPizzaSize = () => {
            if (isSmall) return { width: 150 };
            if (isMedium) return { width: 250 };
            if (isLarge) return { width: 350, marginLeft: -17 };
            return null;
        };

        const sizeStyle = getPizzaSize();

        if (!sizeStyle) return null;

        return (
            <img
                src="/images/largePizza.png"
                alt="Pizza"
                style={sizeStyle}
            />
        );
    };

    const TOPPING_CONFIGS: ToppingConfig[] = [
        {
            name: 'cheese',
            image: '/images/cheese.png',
            positions: [
                POSITION_PRESETS.cheeseTopLeft,
                POSITION_PRESETS.cheeseTopRight,
                POSITION_PRESETS.bottomCenter,
            ],
            style: { width: 20 },
        },
        {
            name: 'mushrooms',
            image: '/images/mushrooms.png',
            positions: [
                POSITION_PRESETS.mushroomTopCenter,
                POSITION_PRESETS.midLeft,
                POSITION_PRESETS.midRight,
                POSITION_PRESETS.mushroomBottomLeft,
                POSITION_PRESETS.mushroomBottomRight,
                POSITION_PRESETS.mushroomCenter,
            ],
            style: { width: 22, borderRadius: 11 },
        },
        {
            name: 'tomato',
            image: '/images/tomato.png',
            positions: [
                POSITION_PRESETS.center,
                POSITION_PRESETS.topLeft,
                POSITION_PRESETS.topRight,
                POSITION_PRESETS.bottomLeft,
                POSITION_PRESETS.bottomRight,
                POSITION_PRESETS.topCenter,
            ],
            style: { width: 30, borderRadius: 10 },
        },
    ]

    const renderImages = (
        positions: Position[],
        style?: React.CSSProperties,
        image?: string,
        name?: string,
    ) => {
        return positions.map((pos, index) => (
            <div
                key={index}
                style={{
                    position: 'absolute',
                    ...pos,
                    ...(pos.transform ? { transform: pos.transform } : {}),
                }}
            >
                <img src={image} alt={name} style={style} />
            </div>
        ))
    }

    const renderToppings = () => {
        return TOPPING_CONFIGS.map(
            ({ name, image, positions, style }) =>
                toppings.includes(name) && (
                    <div key={name}>{renderImages(positions, style, image, name)}</div>
                ),
        )
    }

    return (
        <h3>
            Pizza: {size} with {toppings.length ? toppings.join(', ') : 'no toppings'}
            <div style={{ position: 'relative', width: renderWidth() }}>
                <div>
                    {renderPizza()}
                    {renderToppings()}
                </div>
            </div>
        </h3>
    )
}

export default PizzaBuilder

✅ Flexible layout
✅ Fully decoupled concerns
✅ Easy to reuse or extend (e.g., add <PizzaBuilder.CrustSelector>)

Feel free to use your creativity to expand the functionality and improve the UI.

The main objective is for you to understand how we're applying Advanced React Patterns.

If this article helped you, I would greatly appreciate your support in the form of claps ❤️.
Try implementing it yourself!

How to create cool project using ElectronJS framework ✿

shelly agarwal — Thu, 03 Apr 2025 10:57:32 +0000

📚📖 Recently I read a blog where electron.js was mentioned so I got curious to see what that framework or library is, so I started exploring more on that.

Electron.js is a super cool framework if you are working on a product where you are mainly focusing on deep OS integration, file handling, or system monitoring.
It has full Node.js access.

Let me explain the use cases if you want to choose between ReactJS and ElectronJS (Assuming most of the devs are using Reactjs 😉)

Electron:

Directly Access the File System (Read, modify and delete local files.)
Work with different extensions like .txt, .json, .csv and even images & videos.

React (Web) is sandboxed and can’t interact with the file system beyond limited browser storage (IndexedDB, LocalStorage).

Electron:

Execute Shell Commands & Automate Tasks: Run terminal commands like ls, mkdir, git, or even npm install.
Automate repetitive tasks like downloading files, executing scripts, or launching apps.

React apps can’t execute shell commands due to browser security restrictions.

Electron:

System Monitoring & Hardware Control
Get real-time CPU, RAM, and Disk usage.
Monitor battery status, network activity, and system processes.

React (Web) can’t access system-level data without a backend service.

But but but, that doesn't mean you need to use this, understand your requirements and then only choose.

I wanted to explore Electron using a cute theme, so I used a pixel-based image (of a living room) as a background. (You can use yours)

Sharing folder structure and my code how I did it. Try it out and let me know how it goes 🚀😃

Features:
1) Write & save notes to a local file
2) Encrypt & decrypt notes for privacy
3) Fun UI with a "lock/unlock" effect

Install Electron

npm init -y
npm install electron

Run the app

npm electron .

Electron doesn’t hot-reload CSS like a browser. You can use multiple ways to handle hot-reloading (electron-reloader/electron-reload), I am skipping going into detail in this blog for now.

Let's see the folder structure

index.html (handles frontend UI)

Fun UI with a Lock/Unlock Button

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Secret Notes 📝🔐</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
            background-color: #222;
            color: white;
            margin-top: 50px;
            background: url("background.png") center center/cover;
        }
        textarea {
            width: 80%;
            height: 200px;
            padding: 10px;
            font-size: 16px;
        }
        button {
            margin-top: 10px;
            padding: 10px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>🔒 Secret Notes</h1>
    <textarea id="note" placeholder="Write your secret here..."></textarea><br>
    <button id="saveBtn" style="border-radius: 25px; color:orange; border: 1px solid orange;">Save & Lock 🔐</button>
    <button id="loadBtn" style="border-radius: 25px; color:orange;border: 1px solid orange;">Unlock & Load 🔓</button>
    <script>
        document.getElementById("saveBtn")?.addEventListener("click", async () => {
            const noteText = document.getElementById("note").value;
            await window?.electronAPI?.saveNote(noteText);
            alert("Note saved & encrypted!");
            document.getElementById("note").value = "";
        });

        document.getElementById("loadBtn")?.addEventListener("click", async () => {
            const decryptedText = await window?.electronAPI?.loadNote();
            if (decryptedText) {
                document.getElementById("note").value = decryptedText;
                alert("Note unlocked!");
            } else {
                alert("No saved note found!");
            }
        });
    </script>
</body>
</html>

main.js (Electron Main Process)

Handle File Read/Write with Encryption
Create a main.js file to handle file operations securely.

const { app, BrowserWindow, ipcMain } = require("electron");
const fs = require("fs");
const path = require("path");
const CryptoJS = require("crypto-js");

let mainWindow;

app.whenReady().then(() => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      preload: path.join(__dirname, "preload.js"),
    },
  });

  mainWindow.loadFile("index.html");
  mainWindow.webContents.openDevTools();
});

// Secret key for encryption
const SECRET_KEY = "***"; // use your secret key

// Handle writing encrypted notes
ipcMain.handle("save-note", (_, text) => {
  const encryptedText = CryptoJS.AES.encrypt(text, SECRET_KEY).toString();
  fs.writeFileSync("secret-note.txt", encryptedText, "utf-8");
});

// Handle reading and decrypting notes
ipcMain.handle("load-note", () => {
  if (fs.existsSync("secret-note.txt")) {
    const encryptedText = fs.readFileSync("secret-note.txt", "utf-8");
    const bytes = CryptoJS.AES.decrypt(encryptedText, SECRET_KEY);
    return bytes.toString(CryptoJS.enc.Utf8);
  }
  return "";
});

package.json

{
  "name": "fun-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "crypto-js": "^4.2.0",
    "electron": "^35.1.2",
    "fs": "^0.0.1-security",
    "path": "^0.12.7"
  },
  "devDependencies": {
    "nodemon": "^3.1.9"
  }
}

preload.js (Securely Expose Functions)

const { contextBridge, ipcRenderer } = require("electron");

contextBridge.exposeInMainWorld("electronAPI", {
  selectFile: () => ipcRenderer.invoke("select-file"),
  saveNote: (text) => ipcRenderer.invoke("save-note", text),
  loadNote: () => ipcRenderer.invoke("load-note"),
});

renderer.js (Handles frontend logic)

document.getElementById("selectFile").addEventListener("click", async () => {
  try {
    const filePath = await window.electron.selectFile(); // Use the exposed function
    if (filePath) {
      const audioPlayer = document.getElementById("audioPlayer");
      audioPlayer.src = `file://${filePath}`;
      audioPlayer.play();
    }
  } catch (error) {
    console.error("Error selecting file:", error);
  }
});

Finished product 🤩

How to use this app?

Follow these steps

Type any secret key of yours (Maybe your favourite song, dish, favourite series/movies, anything you like).
Hit on Save & Lock (It will gets disappeared)
Click on Unload & Load (It will reappear and you can play with it, change it if you want and then hit Save & Lock)

I hope you find the reason whether to try this framework or not as per the use case 🎯

splice() vs toSpliced() which one to prefer in javascript?

shelly agarwal — Mon, 31 Mar 2025 17:48:26 +0000

JavaScript has two similar array methods: splice() and toSpliced(). But they behave differently! Let’s break it down.

How to understand which method to use when?

using toSpliced() – Returns a New Array (Immutable)

const toSplicedResponse =[1,2,3,4];
toSplicedResponse.toSpliced(0,1);
console.log("toSplicedResponse",toSplicedResponse)

toSplicedResponse: [2,3,4]

Works like splice() only but doesn't mutate toSplicedResponse array.
Returns a new array (immutable approach)

using splice() – Mutates the Original Array
You need to use spread operator in order to avoid mutating existing array.

const data =[1,2,3,4];
const splicedResponse = [...data];
splicedResponse.toSpliced(0,1);
console.log("splicedResponse",splicedResponse)
console.log("data",data)

splicedResponse: [2,3,4]
data: [1,2,3,4]

If you don't use spread operator, it will cause data manipulation of actual state.

const data =[1,2,3,4];
data.toSpliced(0,1);
console.log("data",data);

data: [2,3,4]

data is now manipulated and we can't go back.

Removes 1 element starting at index 0
Modifies the original array!

📌 Use splice() when you need to modify an array in place.
📌 Use toSpliced() when you prefer immutability (React, functional programming).

Which one do you use more? Let’s discuss! 🙋‍♀️

Understand the Basics of Memory Management in javascript

shelly agarwal — Sun, 23 Mar 2025 10:30:15 +0000

Memory management is very crutial in javascript for applications running on browsers or Nodejs. Unlike C/C++, in javascript memory gets allocated deallocated automatically using Garbage Collection mechanism.

In this blog, I will explain all the concepts with proper examples where you can actually relate.

Understanding how memory management can be done is needed in order to avoid memory leaks and performance optimization.

Understand Memory Life Cycle:

Memory life cycle follows 3 main steps (Irrespective of any programming language)-
1. Allocation of memory: Memory is allocated when objects, variables, functions are created.
2. Use allocated memory: Allocated memory is being used during execution (read/write) operations.
3. Deallocate (Release the) memory: Once it is no longer required, it will be released (Garbage collected).

What is Garbage Collection 🗑️
JavaScript automatically manages memory using garbage collection (GC), meaning developers don’t need to manually allocate and free memory. However, understanding how it works helps prevent memory leaks and improve performance.

How Garbage Collection Works?
JavaScript uses the Mark-and-Sweep algorithm to clean up memory:

🔍 Mark → GC identifies objects still in use (reachable from the root, like window or global).
🧹 Sweep → Unreachable objects are deleted, freeing up memory.

GC runs automatically, but you can optimize memory usage by reducing unnecessary object references.

Types of Memory:

1. Stack Memory:

It is used for primitive data types like boolean, string, number etc.
Operates on a LIFO basis.

function firstFunction() {
  let a = 10; // Stored in stack
  console.log("Inside firstFunction");
  secondFunction();
}

function secondFunction() {
  let b = 20; // Stored in stack
  console.log("Inside secondFunction");
  thirdFunction();
}

function thirdFunction() {
  let c = 30; // Stored in stack
  console.log("Inside thirdFunction");
}

// Call firstFunction
firstFunction();

How Stack Works in This Example:

firstFunction() is called → Execution context is pushed to the stack.
secondFunction() is called inside firstFunction → New execution context is added.
thirdFunction() is called inside secondFunction → Another execution context is added.
Execution completes from thirdFunction → It is popped from the stack.
secondFunction finishes → It is popped from the stack.
firstFunction finishes → It is popped from the stack.

Stack Flow (LIFO - Last In, First Out)

Call firstFunction()
Stack: [firstFunction]

Call secondFunction()
Stack: [firstFunction, secondFunction]

Call thirdFunction()
Stack: [firstFunction, secondFunction, thirdFunction]

thirdFunction() returns → Removed from Stack
Stack: [firstFunction, secondFunction]

secondFunction() returns → Removed from Stack
Stack: [firstFunction]

firstFunction() returns → Removed from Stack
Stack: []

Points to take-
1. Stack memory is used for function execution contexts and primitive values.
2. Functions are pushed when called and popped when finished (LIFO).
3. Stack memory is fast but limited (can cause stack overflow with deep recursion).

2. Heap Memory: (Reference Data Types)
1. Used for Objects, Functions, Arrays.
2. This memory is allocated dynamically and accessed via references.

let obj1 = { name: "Shelja", age: 11 }; // Stored in heap
let obj2 = obj1; // obj2 points to the same memory location

obj2.age = 30;
console.log(obj1.age); // 30 (because both obj1 and obj2 reference the same object)

What happens here is { name: "Shelja", age: 11 } stored in heap memory and both obj1 & obj2 holds the reference to the same object.

Examples of some of the common memory issues -
1. Problem -
Accidentally declaring a variable without let, const, or var makes it a global variable, keeping it in memory throughout the app's lifetime.

function createLeak() {
    leakedVar = "I am a memory leak"; // No `let`, `const`, or `var`
}
createLeak();
console.log(leakedVar); 
// Exists globally, won't be garbage collected

Solution -
Always use let or const:

function createLeak() {
    let leakedVar = "I am a memory leak"; // scope it properly
}
createLeak();
console.log(leakedVar);

2. Problem -
Timers keep references to objects, preventing them from being garbage collected.

function startLeak() {
    let data = { value: "Leaking data" };
    setInterval(() => {
        console.log(data.value); // `data` is never cleared
    }, 1000);
}
startLeak(); // Runs forever, even if `data` is no longer needed

Solution -
Always clear intervals when no longer needed.

function startSafe() {
    let data = { value: "No leak" };
    let interval = setInterval(() => {
        console.log(data.value);
    }, 1000);

    // Clear interval after some time
    setTimeout(() => {
        clearInterval(interval);
        data = null; // Remove reference
    }, 5000);
}
startSafe();

3. Problem -
If you attach an event listener but never remove it, the function reference persists in memory.

function attachEvent() {
    let button = document.getElementById("clickMe");
    button.addEventListener("click", () => {
        console.log("Clicked!");
    });
}
attachEvent(); // If called multiple times, multiple listeners accumulate!

Solution -
Always remove event listeners when they’re no longer needed.

function attachSafeEvent() {
    let button = document.getElementById("clickMe");
    function handleClick() {
        console.log("Clicked!");
    }
    button.addEventListener("click", handleClick);

    // Remove listener when no longer needed
    setTimeout(() => {
        button.removeEventListener("click", handleClick);
    }, 5000);
}
attachSafeEvent();

There are many more examples where we will find memory leak can happen and we need to more sure to prevent it to run applications smoothly and fast.

Key takeaways -

Use Chrome DevTools’ Memory Profiler (Performance > Memory) to track memory leaks.
Mark-and-Sweep finds and removes unused objects from the heap.
Manually clear references when an object is no longer needed.

Do like and comment if this was helpful :)

Optimise performance in Javascript: Part 2

shelly agarwal — Sun, 16 Mar 2025 04:22:06 +0000

Hey developers! Welcome to my second blog on JavaScript performance.

In this post, Beforing walking you through optimizing long tasks in JavaScript in this post to prevent performance bottlenecks, I recommend reading the previous post Part 1 of performance in Javascript

We'll dive into DevTools' Performance tab to analyze slow-performing functions, identify bottlenecks, and improve execution time effectively.
Let’s explore how to make your JavaScript code more efficient!

In Login/index.tsx file, I have added a long task

function heavyComputation() {
    let total = 0;
    for (let i = 0; i < 1e9; i++) {  // Heavy loop
      total += i;
    }
    console.log("Computation done:", total);
  }

    useEffect(() => { 
      heavyComputation();  // UI freezes while processing
      console.log("Task complete!")
    },[])

On clicking "Event Log" tab, we can see "Function call" and on expanding it, it shows heavyComputation details (Look carefully at right side, index.tsx:203:12 Same you can see on the right side) -> It is showing exact line from where this heavy operation is happening.
Total Time: ~1023ms

Now we can see below 👇, for loop is taking almost 2 sec to complete the operation and it is blocking our main thread.😵‍💫

🔴 Issues:

The UI freezes while the computation runs.
No interactions or rendering updates happen until the task completes.

🟢 Solution:

Create a worker.js file under public folder👇

self.onmessage = () => {
  let total = 0;
  for (let i = 0; i < 1e9; i++) {
    // Heavy computation
    total += i;
  }
  self.postMessage(total); // Send result back
};

Import worker.js and set result in the component whenever it is ready

 useEffect(() => {
    const worker = new Worker(new URL('./public/worker.js', 
import.meta.url));
    worker.onmessage = (e) => {
      setResult(e.data);
      console.log('Task complete!', e.data);
    };

    worker.postMessage('start'); // Start computation
    return () => worker.terminate(); // Cleanup
  }, []);

Now, retry performance recording and see the result -

💡 Benefits:

Total time reduced significantly.
UI remains responsive (no blocking of the main thread).
Computation runs in a separate thread, preventing UI freezes.
Better user experience and faster interactions.

Alternative solution instead of using "worker"? 💡
If Web Workers aren’t an option, we can also chunk the computation to run only during idle time. (Using requestIdleCallback approach)

useEffect(() => {
  let total = 0;
  let i = 0;

  function processChunk(deadline) {
    while (i < 1e9 && deadline.timeRemaining() > 0) {
      total += i;
      i++;
    }

    if (i < 1e9) {
      requestIdleCallback(processChunk);
    } else {
      console.log('Computation done:', total);
    }
  }

  requestIdleCallback(processChunk);
}, []);

What deadline.timeRemaining means in requestIdleCallback?
deadline.timeRemaining() is a method inside requestIdleCallback that tells us how much time (in milliseconds) is left in the current idle period. It helps split heavy tasks into smaller chunks that run only when the browser is idle, keeping the UI responsive.

✔ Key Takeaways from this blog?

Use Web Workers for CPU-heavy tasks 🧠
Use requestIdleCallback for lower-priority tasks ✔️
Never block the main thread in Javascript/ReactJS! 👍

Comment down your go to solution 👇

Optimise performance in Javascript: Part 1

shelly agarwal — Sat, 15 Mar 2025 04:38:45 +0000

Hello devs, I'm sure you've heard it before— "We need to optimize this code or flow; it's taking too long and hurting the user experience!" Sounds familiar? You’ve got this! 😎🚀

What does optimization actually means..

If your pages are loading slowly, tasks are taking too long to return results, or your landing page is sluggish—chances are users won’t stick around to see what your website has to offer. That’s a clear sign it’s time for optimization!

How?
1. Don't block the main thread
2. Break up your long tasks

You need to understand what tasks are and how browser handles them

What tasks are?

Task is a piece of work that the browser does.
That task includes rendering, parsing HTML and CSS, running javascript and other type of work that you might not have direct control over. Of all of this, javascript you write is perhaps the largest source of tasks.

What is a main thread?

1. It is a thread where almost all javascript code you write executes and most tasks are run in the browser.
2. It process tasks 1 by 1 in a queue

Tasks taking more than 50 ms is considered as long task
Task's blocking time: Total time taken by a task - 50 ms

Should we start with running Long task?

function longTask() {
  for (let index = 0; index < 30_000; index++) {
    // Emulate CPU load, as using console.log
    // with open devtools is a very CPU-intensive operation.
    console.log(index);
  }
}

Let's try this out..
You will see performance like this 👇 (Go to performance tab by inspecting the element)

It says, long task took 2.55 s. in RED color, it means, the task took more than what was expected as an ideal time.

Any task exceeding 50ms is a long task
Example 1

function task(name, num = 5_000) {
  console.log(`Starting task: ${name}`);

  for (let index = 0; index < num; index++) {
    console.log({index});
  }
}

function longTask() {
    task('1');
    task('2');
    task('3');
    task('4');
    task('5');
    task('6');
  }

  useEffect(() => { 
    longTask()
  },[])

Example 2: After breaking long tasks into smaller tasks.

useEffect(() => {
  function longTask() {
  // Critical tasks.
  task('1');
  task('3');

  // Deferring set of tasks.
  setTimeout(() => {
    task('2');
    task('4');
    task('5');
    task('6');
  });
}

longTask()
  },[])

Now as you can see below, one long Task is divided into 4 sub tasks (63.46 ms + 836.75 ms + 520.72 ms + 510.94 ms)

This technique is known as yielding, works best with sequential tasks.
(In simple terms - setting a setTimeOut in a series of functions is known as yielding.)
It helps dividing the tasks into subtasks, so that critical tasks can be executed first then in next task non-critical ones.

Example 3:

async function saveSettings () {
  // Do critical work that is user-visible:
  task('1');
  task('3');

  // Yield to the main thread:
  await scheduler.yield()

  // Work that isn't user-visible, continued in a separate task:
    task('2');
    task('4');
    task('5');
    task('6');
}

Alternative of setTimeOut -

scheduler.yield() is an API specifically designed for yielding to the main thread in the browser.
Use scheduler library link

To summarize in short:

Look what are the priority tasks that will affect user experience.
Yield to the main thread for crutial tasks.
Minimize work per function upto 10ms and below 50ms to avoid blocking the thread.

Using these approaches you can improve your web performance effectively.

Go check out part 2 of my exciting blog series on JavaScript performance! 🚀 🤯

If you enjoyed this blog (short and sweet), check out my other blogs too! -

👍 Like and drop a comment if you have any questions or if you find it useful!

Ternary Operators in JavaScript: Overused or Just Right?

shelly agarwal — Sat, 08 Mar 2025 16:23:08 +0000

As a senior developer of 5+ years and working on multiple projects, I have seen many developers use ternary operators on a daily basis, but is it worth using every single time? 🤔

I am quite comfortable using it to be honest, it is really simple to use and easy to write but there are many cases when we must avoid it in order to avoid bugs in a complex condition.

Example 1.

Use case:
There is only 1 condition.

const flashStatus = `Flash ${buttonType === 'flash' ? "on" : "off"}`

Any problem you can see? ☝️
None

Example 2.

Use case:
If multiple conditions are present.

const shutterCallBack =
  selectedOption === 'Video' ? (isRecording ? stopRecordingVideo : recordVideo) : takePhoto;

Any problem you can see? ☝️
Yes

If any new team member joins the team, they won't know what the condition is doing and they can actually break the code by adding more conditions if they don't understand it in the first place.
It is really hard to debug the condition if any issue occurs because you need to identify each condition output before you make any changes.
Maintainability Issues of course.

What is the solution then? 💡

Keep your conditions simple and easy to understand.
Use either switch statement or if/else in order to maintain these dependent conditions
Add necessary comments to provide context what these conditions are doing.

You can avoid nested ternary operators and change the condition like this ->
1. ✔️ If-Else Statements (More Readable)

let shutterCallBack;

if (selectedOption === 'Video') {
  if (isRecording) {
    shutterCallBack = stopRecordingVideo;
  } else {
    shutterCallBack = recordVideo;
  }
} else {
  shutterCallBack = takePhoto;
}

2. ✔️ Object Mapping (When Dealing with Categories)

const shutterActions = {
  Video: isRecording ? stopRecordingVideo : recordVideo,
  Photo: takePhoto,
};

const shutterCallBack = shutterActions[selectedOption] || takePhoto;

Ternary operators are obviously not dead but you need to make sure use these only for precise conditions and not on multiple or complex conditions.

What do you think? Comment your thoughts..

A Frontend Engineer’s Guide to Code Refactoring and Code Reviews

shelly agarwal — Mon, 03 Mar 2025 14:59:05 +0000

1. Introduction

In software development, code refactoring and code reviews play crucial roles in maintaining a high-quality codebase. These practices ensure that code is clean, efficient, and easy to maintain over time. This blog explores the importance of code refactoring in software, with my personal experiences of how refactoring can improve code quality.

In this blog, we’ll dive into why these practices matter and how they can transform your development process. Working with different clients across various industries, I’ve seen firsthand how important refactoring code is. It’s a simple but powerful process that every developer should follow to keep their code clean, efficient, and easy to work with.

2. What is Code Refactoring?

Refactoring code is the process of improving the internal structure of the code without altering its external behavior. It’s like reorganizing a cluttered room; everything works the same but looks and functions much better.

Key Benefits of Code Refactoring:

Improves readability
Reduces complexity
Facilitates maintenance

3. When Should You Refactor?

Consider refactoring when you see:
Duplicate code
Long, complicated functions or methods
Complex conditional logic
Performance issues
Difficulties with testing and debugging
A transition to newer technologies or libraries

4. Top 5 Benefits of Refactoring Code

Improves Code Readability Readable code is easier to understand and maintain. Some examples:

// Before Refactoring:

const orderStatus = isPaid
  ? isShipped
    ? isDelivered
      ? "Delivered"
      : "Shipped"
    : "Paid"
  : isCancelled
  ? "Cancelled"
  : "Pending";

Problems:

Hard to read, understand conditions and debug.
Adding a new condition later makes it even worse.

// After Refactoring:

const getOrderStatus = ({isPaid, isShipped, isDelivered, isCancelled}) => { if (isCancelled) return "Cancelled"; 
if (isPaid) { 
   if (isShipped) { 
      return isDelivered ? "Delivered" : "Shipped"; 
   }
   return "Paid";
 }
 return "Pending"; 
}; 
const orderStatus = getOrderStatus(isPaid, isShipped, isDelivered, isCancelled);

Benefits:

The if statements clearly define conditions, making it easier to understand.
Debugging is now easy as compared to nested ternary operators
The function-based approach allows easy modifications. For example, if more statuses need to be handled, you can extend the logic without restructuring the entire expression.
The getOrderStatus function can be reused elsewhere in the code.

2. Enhances Maintainability
Breaking down reusable components or logic improves maintainability.

// Before Refactoring

const convertToExcelDataWithError = async function (records, errors, file) {
  const headersCheck = await parseHeaderFromFile(file.buffer, file.mimetype);

  /*there is no constant here, need to use the same string again and again in multiple files which is irrelevant. */
  const fieldMapping = {
    Category: 'Task',
    Farm: 'Farm'
  };
};

Problems:

Names were hardcoded across multiple files, requiring manual updates in each file if a change was needed.
If a string needs to be changed (e.g., "Farm address" → "Farm Address"), you must manually update it everywhere in the code.
If you need to support multiple languages, hardcoded strings prevent easy translation.

// After refactoring:

const convertToExcelDataWithError = async function (records, errors, file) {
  const headersCheck = await parseHeaderFromFile(file.buffer, file.mimetype);
  // use constant here
  const { TASK, FARM} = COLUMN_HEADINGS;
  const fieldMapping = {
    Category: TASK,
    Farm: FARM
  };
};

Benefits:

Using constants or enums makes your life easy
Typos or inconsistencies are minimized when using predefined constants instead of manually typing strings everywhere.
If a string needs to change (e.g., from "Farm address" → "Farm Address"), you only update it in one place instead of searching through the entire codebase.

3. Reduces Technical Debt
Refactoring removes inefficient or outdated code, reducing the burden of technical debt.

Your codebase might contain legacy packages/libraries.
Conditions are wrong but never caught by anyone.
Hard coded values due to time constraints or any other reason.
Poorly Named Variables & Functions. Not having enough comments to understand what that means.
Generic issue - duplicated code
Long & Complex Functions
Not using appropriate zIndex values (Not having this can cause multiple issues like Large z-index numbers might be ignored or cause inconsistencies across different browsers.)

Example 1
Unnecessary “&&” conditions

// Before refactoring

if (user && user.profile && user.profile.email) {
console.log(user.profile.email);
}

// After refactoring

if (user?.profile?.email) {
console.log(user.profile.email);
}

Example 2
Wrong condition on array:

// Before refactoring

const farmsData = [];
if( !!farmsData){
console.log("Farm has data");
}

// After refactoring

const farmsData = [];
if(farmsData?.length){
console.log("Farm has data");
}

4. Optimizes Performance
Refactoring can streamline logic to boost performance.

// Before refactoring

function getUniqueElements(arr) {
  let unique = [];
  for (let i = 0; i < arr.length; i++) {
    if (!unique.includes(arr[i])) {
      unique.push(arr[i]);
    }
  }
  return unique;
}

// After refactoring:

function getUniqueElements(arr) {
  return [...new Set(arr)];
}

Below is the chart showing Before Refactoring using “For loop” vs After Refactoring using Set” (Depends on number of data, currently using 1000000)

I've noticed that many developers install unnecessary packages—sometimes even two or three different libraries for the same use case—without considering the impact on application size and performance. It's crucial to be mindful of this and prioritize using only essential, lightweight packages to keep the codebase maintainable in the long run.
While working on the XYZ client project, I encountered this issue where multiple libraries were used without evaluating their effect on performance. When I was given the task, during optimization, I replaced all redundant packages with a single, lightweight alternative and implemented custom functions where applicable, significantly improving efficiency.

5. Simplifies Testing and Debugging

Simpler, modular code is easier to test and debug. Use techniques like:
Red-Green-Refactor Cycle: Write tests, implement just enough code to pass them, and then refactor.
Red - Write a failing test that exposes the issue or required functionality.
Ex: We’ll write a test for a Counter that doesn’t exist yet.
Error: ReferenceError: Counter is not defined

Green - Write the minimum code necessary to pass the test.
Ex: Now, implement the Counter to make the test pass.
Refactor- Improve the code while keeping the test green (i.e., without breaking the functionality).
Ex: Add prop types for better type checking.

This cycle of red-green-refactor is repeated for each new feature or bug fix, promoting a development process where the code is continuously tested and refactored, resulting in higher-quality and more reliable software.

Simplifying Methods: Break down long functions into smaller, more focused ones.

// Before refactoring

function manageFarm(farm) {
    // Feed animals
    farm.animals.forEach(animal => {
        if (animal.hungry) {
            animal.hungry = false;
        }
    });

    // Water crops
    farm.crops.forEach(crop => {
        if (!crop.watered) {
            crop.watered = true;
        }
    });

    // Harvest crops
    farm.crops.forEach(crop => {
        if (crop.readyToHarvest) {
            crop.harvested = true;
        }
    });
}

// After refactoring

function feedAnimals(animals) {
    animals.forEach(({hungry}) => {
        if (hungry) {
            console.log(`Feeding ${animal.name}...`);
            hungry = false;
        }
    });
}

function waterCrops(crops) {
    crops.forEach(({watered}) => {
        if (!watered) {
            console.log(`Watering ${crop.name}...`);
            watered = true;
        }
    });
}

function harvestCrops(crops) {
    crops
        .filter({readyToHarvest} => readyToHarvest) // Only process crops that are ready
        .forEach(({harvested}) => {
            console.log(`Harvesting ${crop.name}...`);
            harvested = true;
        });
}

function manageFarm({animals, crops}) {
    console.log("Starting farm management...");

    feedAnimals(animals);
    waterCrops(crops);
    harvestCrops(crops);

    console.log("Farm management completed.");
}

5. Disadvantages of Refactoring Code -
Although code refactoring has many positive effects, there are also certain drawbacks. In fact, significant time and resources are needed during the refactoring process, hence it may push back feature development. Without detailed planning, it can break existing features. Even some of the most advanced refactoring techniques for code are challenging to master with inexperienced developers.

Although code refactoring is an important part of software development, excessive refactoring without clear goals leads to unnecessary work. Reviewing examples of code refactoring ensures developers apply best practices effectively.

6. Key takeaways from code refactoring-

Avoid nested ternary operations in general. Keep the return statements clean.
Maintain sub-components in a main component
Ensure to maintain constants everywhere wherever applicable.
Avoid using indexes in the key field for any component.
Always use meaningful names with needed comments (if any)

7. Why Code Reviews Are Important

Code reviews go hand-in-hand with refactoring. They ensure quality, encourage collaboration, and promote consistency within the team.

8. Key Benefits of Code Reviews

a. Ensures Code Quality
Ex: Replace hard-coded values with constants.

b. Promotes Knowledge Sharing
Ex: Teach better ways to handle asynchronous operations.

c. Encourages Consistency
Ex: Enforce arrow function usage.

d. Facilitates Collaboration
Ex: Discuss architectural changes like adopting Redux or Context API for state management.

9. Steps for Effective Code Refactoring and Reviews

For Refactoring:

Identify code smells.
Plan refactoring tasks.
Refactor incrementally.
Test thoroughly after changes.
Document updates.

For Reviews:

Establish clear coding standards.
Prepare by understanding the changes.
Provide constructive feedback.
Prioritize critical issues.
Use reviews as a platform for discussion and learning.

10. Conclusion
Code refactoring and code reviews are essential practices in software development. By continually improving and reviewing code, teams can maintain a high-quality codebase that is easy to maintain, extend, and scale.

The importance of code refactoring in software development cannot be overstated—it helps prevent technical debt and ensures long-term project sustainability. Additionally, reviewing code refactoring examples can provide valuable insights into best practices.

Ultimately, this refactoring code approach fosters collaboration and results in a more efficient, scalable, and robust software system.

Have your own experiences with code refactoring or reviews? :)