DEV Community: Jaligama Satyaveer

How Browsers Render Webpages: A Deep Dive into Reflow, Paint, and Repaint

Jaligama Satyaveer — Sat, 21 Jun 2025 07:10:20 +0000

If you’ve ever built a webpage and noticed things getting a bit laggy after adding styles or dynamic elements, you’ve likely triggered something under the hood - like reflow, repaint, or paint.

Don’t worry - these terms might sound complex at first, but they’re actually pretty straightforward once you get the hang of them. Let’s break them down together with real-world examples you can relate to.

The Big Picture: How a Web Page is Rendered
When a browser loads a webpage, it follows a process:

Parses HTML → Creates the DOM Tree
Parses CSS → Builds the CSSOM Tree
Combines DOM + CSSOM → Builds the Render Tree
Performs Layout → Decides the size and position of each element
Paints → Fills in colors, borders, text, shadows
Composites → Draws everything on the screen

Reflow (aka Layout)

Reflow happens when the browser needs to figure out where and how elements should appear on the page - basically recalculating the layout.

Any time you change something that affects an element’s size or position - boom, reflow kicks in.

Example
Imagine you have a blog post with a Read more button. When someone clicks it, more content shows up, pushing the rest of the page down. The browser has to recalculate the layout to fit everything in - that’s reflow.

Paint

Paint is the step where the browser actually fills in the pixels - adding colors, borders, shadows, images, text… basically everything you see.

Repaint

Repaint is a type of paint that happens when an element’s visual appearance changes, but its size or position doesn’t.

So, if you change something like the color, opacity, or visibility of an element, the browser can skip layout calculations and just update the pixels.

Example
Think about switching your website from light mode to dark mode. Text becomes white, backgrounds turn black, but nothing shifts in layout. That’s repaint.

Think of your browser as an artist:

Reflow is sketching where everything goes.
Paint is coloring in those sketches.
Repaint is touching up the colors without redrawing everything.

When you understand what triggers these processes, you start to write better, faster code - and your users feel the difference.

Faster Loads with Smaller Bundles: The Power of Dynamic Imports in Next.js

Jaligama Satyaveer — Fri, 04 Apr 2025 19:11:32 +0000

In today’s web world, speed is everything. Users expect pages to load instantly, and even a slight delay can lead to frustration or bounce. One big factor that impacts performance is your app’s bundle size - the amount of JavaScript the browser has to download and execute before the page is usable.

So let’s talk about something simple, yet super effective: Dynamic Imports in Next.js

Why Should You Care About Bundle Size?

A large JavaScript bundle means:

Longer download times, especially on slow connections
Delays before the app becomes interactive
Poor performance scores and user experience

On the flip side, a smaller bundle means faster loads, snappier UI, and happy users.

What is a Dynamic Import?

In a typical React or Next.js app, components are imported at the top of the file like this:

import MyComponent from './MyComponent';

This means the component is bundled into the main JavaScript file, whether it’s used immediately or not.

With Next.js, you can use next/dynamic to import a component only when it’s needed:

const MyComponent = dynamic(() => import('./MyComponent'));

Example: With vs Without Dynamic Import

Let’s say we have a simple page that includes three components:

A Button
A Test Component
A Hidden Component (only shown after a button click)

Without Dynamic Import

"use client";
import { useState } from "react";
import HiddenComponent from "../components/HiddenComponent";
import TestComponent from "../components/TestComponent";

export default function WithoutDynamicImport() {
  const [displayHiddenComponent, setDisplayHiddenComponent] = useState(false);

  return (
    <div>
      <h3>Without Dynamic Import</h3>
      <button onClick={() => setDisplayHiddenComponent(!displayHiddenComponent)}>
        Show Hidden Component
      </button>
      <TestComponent />
      {displayHiddenComponent && <HiddenComponent />}
    </div>
  );
}

In this version, all components are imported statically. Even if the HiddenComponentis never shown, it still gets bundled and downloaded upfront

With Dynamic Import

"use client";
import dynamic from "next/dynamic";
import { useState } from "react";

const HiddenComponent = dynamic(() => import("../components/HiddenComponent"), {
  ssr: false,
});

const TestComponent = dynamic(() => import("../components/TestComponent"), {
  ssr: false,
});

export default function WithDynamicImport() {
  const [displayHiddenComponent, setDisplayHiddenComponent] = useState(false);

  return (
    <div>
      <h3>With Dynamic Import</h3>
      <button onClick={() => setDisplayHiddenComponent(!displayHiddenComponent)}>
        Show Hidden Component
      </button>
      <TestComponent />
      {displayHiddenComponent && <HiddenComponent />}
    </div>
  );
}

In this version, TestComponentand HiddenComponentare loaded only when needed. You’ll even notice separate .js files being fetched in the browser when these components render for the first time

What Happens Behind the Scenes?

When you use dynamic imports:

The component is excluded from the initial JS bundle.
A separate network request is made only the first time the component is needed.
Once loaded, the component is cached by the browser, so subsequent uses do not trigger another network request.
This leads to faster page load, and better user experience.

Code:- GitHub

Wrapping up

Dynamic imports are a smart and simple way to keep your Next.js app lean and fast. By loading components only when they're actually needed, you:

Reduce your initial JavaScript payload
Improve performance and speed
Make your app more scalable as it grows

Start using dynamic imports for any non-critical UI - like modals, charts, tooltips, and components hidden behind interactions.

Stop Storing Plain Text Passwords! Use Bcrypt for Security

Jaligama Satyaveer — Sat, 29 Mar 2025 19:14:02 +0000

When building an application that requires user authentication, one of the worst mistakes you can make is storing passwords in plain text. If your database gets hacked, attackers can see all user credentials instantly. That’s a huge security risk!

Instead, passwords should always be stored in a hashed format. Hashing transforms a password into an unreadable string, making it nearly impossible to reverse-engineer. But simple hashing isn’t enough, adding salting and key stretching makes passwords even more secure.

What Are Hashing, Salting, and Key Stretching?

Hashing
Hashing is a one-way function that converts a password into a fixed-length, irreversible string. This ensures that even if someone gains access to the database, they cannot retrieve the original password.

If we hash the password password123

EF92B778BAF9C3D1C6CFE1C4A7316C83E4F2E9F288D5A68B84BC7E0549A9AFA3

Salting
Salting adds a unique random value to each password before hashing. This ensures that even if two users have the same password, their hashes will be different.

Password: password123
Salt: X7!a9@
Hashed Output: Hash(password123 + X7!a9@)

Each time a password is stored, a different salt is generated, making attacks significantly harder.

Key Stretching
Key stretching is a technique that increases the computational time required to hash a password, making brute-force attacks more difficult. This is achieved by repeatedly applying the hashing algorithm multiple times.

Instead of hashing once:

Hash(password123)

We hash multiple times:

Hash(Hash(Hash(password123)))

This increases the time required for attackers to compute password hashes, thereby enhancing security.

Why Use Bcrypt?

Bcrypt is one of the best tools for hashing passwords, because it automatically includes salting and key stretching.

How Bcrypt coverts plain text into hash before storing in Database

Generate a salt (a random value).
Combine the password with the salt.
Apply multiple rounds of hashing (key stretching) to slow down attacks.
Store the final hashed password in the database.

const hashedPassword = await bcrypt.hash(password, 10);

How Bcrypt Compares Passwords
When a user logs in, we need to check if their password matches the stored hash.

Retrieve the stored hashed password from the database.
Extract the salt from the stored hash.
Hash the user-entered password using the extracted salt.
Compare the newly generated hash with the stored hash.
If they match, grant access; otherwise, deny access.

const isMatch = await bcrypt.compare(enteredPassword, storedHash);

Summing It Up

Security should never be an afterthought, especially when dealing with user passwords. Bcrypt makes it easy to implement strong password hashing with salting, key stretching, and adaptability. By using bcrypt, you can protect user data and significantly reduce the risk of password-related breaches.

How Token-Based Authentication Works: A Practical Walkthrough

Jaligama Satyaveer — Wed, 26 Mar 2025 19:03:13 +0000

Authentication is essential for securing web applications. In this article, I will explain token-based authentication using a real-world example of a login system built with React, Node.js, and MongoDB. If you're new to this, don't worry! I’ll guide you step by step.

How Does Token-Based Authentication Work?
Imagine you’re logging into an app. Here’s what happens behind the scenes:

You register an account by entering your email/phone, name, and password.
You log in by providing your email/phone and password.
If your credentials are correct, a token is generated and sent to your device.
Every time you access a protected page, your token is checked to verify your identity.
If the token is valid, you can proceed. If not, you’ll be asked to log in again.

This token acts like a temporary digital key, allowing access without needing to log in repeatedly.

Step 1: User Registration

When signing up, you provide details like your email/phone, name, and password. Your password is securely stored in the database using a method called hashing.

If your email or phone number is already registered, you’ll get an error message.
If everything is correct, your account is created, and you can log in.

Once registered, you can move to the login step.

Step 2: Logging In and Token Generation

When you log in:

Your credentials are sent to the server.
The server checks if the email/phone exists in the database.
If the user exists, it compares your entered password with the stored password.
If the password is correct, the server generates a JWT token and sends it back.

Code for Token Generation (Backend)

const token = jwt.sign(
  { userId: existingUser._id },
  process.env.JWT_SECRET_KEY!,
  { expiresIn: "15s" } // Token expires in 15 seconds
);

This token contains the user's ID and has an expiration time (15 seconds in this example, but in real-world apps, it is much longer).

Once received, the token is stored in the browser so the user doesn’t have to log in again immediately.

Step 3: Accessing a Protected Page

Now that you're logged in, you want to access a protected page (like your profile or dashboard). Here’s how it works:

You click on a button (e.g., "View Profile").
Your browser attaches the token to the request.
The server checks if the token is valid.
If the token is valid, the server allows access.
If the token is missing, invalid, or expired, the server denies access and redirects you to the login page.

Code for Token Validation (Backend)

const authMiddleware = (req, res, next) => {
  const token = req.headers.authorization?.split(" ")[1];
  if (!token) {
    return res.status(401).json({ message: "Unauthorized" });
  }
  try {
    const decodedToken = jwt.verify(token, process.env.JWT_SECRET_KEY!);
    req.user = decodedToken.userId;
    next();
  } catch (err) {
    return res.status(401).json({ message: "Unauthorized" });
  }
};

If the token is valid, you can access the page. Otherwise, you’re redirected to log in again.

Step 4: What Happens When the Token Expires?

Tokens are temporary for security reasons. When a token expires:

Your next request will be rejected with a 401 (Unauthorized) error.
You will be redirected to the login page to re-authenticate.

This ensures that only active users can access protected data.

Video

Repo Links

Frontend
Backend

Wrapping up

Token-based authentication is a modern and secure way to manage user sessions in web applications. Applications become more secure, scalable, and efficient, ensuring a smooth user experience while protecting sensitive data.

Optimizing JavaScript Event Handling: Bubbling and Delegation

Jaligama Satyaveer — Sat, 22 Mar 2025 07:47:38 +0000

JavaScript events are everywhere on the web. Clicking a button, typing in a text box, or even moving your mouse triggers an event. But have you ever wondered how these events travel through the DOM? That’s where event bubbling and event delegation come into play.

Let’s break it down in a way that actually makes sense!

What is an Event in JavaScript?

Before jumping into bubbling and delegation, let’s quickly define what an event is. An event is basically an action that happens in the browser, like a click or a key press. You can listen to these events using JavaScript and decide what happens when they occur.

Here’s a simple example of handling a button click:

const button = document.getElementById("myButton");
button.addEventListener("click", () => {
    alert("You clicked the button!");
});

What is Event Bubbling?

Event bubbling is when an event starts at the target element and moves up through its ancestors. Think of it like bubbles in water - once they are created, they rise to the top.

How Event Bubbling Works
Imagine this HTML structure:

<div id="parent">
    <button id="child">Click Me</button>
</div>

Now, let’s add event listeners to both the parent <div> and the child <button>:

document.getElementById("parent").addEventListener("click", () => {
    console.log("Parent clicked");
});

document.getElementById("child").addEventListener("click", () => {
    console.log("Child clicked");
});

What Happens When You Click the Button?
When you click the button, you’ll see:

Child clicked
Parent clicked

Why? Because the event first fires on the button and then bubbles up to the parent.

Stopping Event Bubbling
Sometimes, you don’t want an event to bubble up. You can stop it using event.stopPropagation()

document.getElementById("child").addEventListener("click", (event) => {
    console.log("Child clicked");
    event.stopPropagation();
});

Now, clicking the button will only log Child clicked and won’t trigger the parent’s event.

What is Event Delegation?

Instead of adding event listeners to multiple elements, you can use event delegation by placing a listener on a parent element and checking which child was clicked.

Why Use Event Delegation?

You don’t have to attach event listeners to each individual child element.
It works on dynamically added elements.
It improves performance when dealing with lots of elements.

Example: Handling Clicks on List Items
Consider this HTML:

<ul id="listContainer">
    <li class="list-item">Item 1</li>
    <li class="list-item">Item 2</li>
</ul>
<button id="addItem">Add Item</button>

Instead of adding an event listener to each list item, we add one to the parent <ul> and check which item was clicked:

document.getElementById("listContainer").addEventListener("click", (event) => {
    if (event.target.classList.contains("list-item")) {
        console.log("Clicked on: " + event.target.textContent);
    }
});

Now, let’s add new list items dynamically:

document.getElementById("addItem").addEventListener("click", () => {
    const newItem = document.createElement("li");
    newItem.classList.add("list-item");
    newItem.textContent = "New Item";
    document.getElementById("listContainer").appendChild(newItem);
});

Even though the new list items were added later, they will still trigger the click event. That’s the power of event delegation!

Wrapping Up

Understanding event bubbling helps you know how events travel up the DOM, and event delegation helps you manage events efficiently. Together, they make your JavaScript code cleaner and more optimized.

Understanding WebSockets: Real-Time Data Transfer Made Easy

Jaligama Satyaveer — Tue, 25 Feb 2025 21:12:53 +0000

WebSockets are commonly used in applications that require real-time updates and bidirectional communication between the client and server. They are ideal for chat applications, financial dashboards and payment status tracking. In this article, we will explore how WebSockets can be implemented to provide instant payment status updates in a web application.

In traditional systems, the frontend would need to keep checking the payment status through repeated API calls. With WebSockets, the server can emit events as soon as the payment is processed, reducing unnecessary API calls and improving efficiency.

Breaking Down the WebSockets Implementation

Frontend
1. Initializing WebSocket Connection

import { io } from "socket.io-client";

const socket = io(process.env.API_BASE_URL, { autoConnect: false });

The frontend initializes a WebSocket connection to the backend using io(process.env.API_BASE_URL, { autoConnect: false }).
autoConnect: false ensures that the socket does not connect automatically until explicitly called.

2. Handling Connection and Events

useEffect(() => {
  socket.connect();

  socket.on("socket-id", setSocketId);
  socket.on("payment-status", setPaymentStatus);

  return () => {
    socket.off("socket-id");
    socket.off("payment-status");
    socket.disconnect();
  };
}, []);

socket.connect() establishes the connection.
Listens for:
- socket-id: Receives and stores the unique identifier assigned by the server.
- payment-status: Updates the payment status in real-time.
Cleanup:
- socket.off(...) ensures that event listeners are removed when the component unmounts.
- socket.disconnect() properly closes the connection.

3. Sending Data to Backend

await axios.post(
  `${process.env.API_BASE_URL}/api/payments/make-payment-with-socket`,
  { amount: 1000, socketId }
);

The client sends a payment request to the backend API, including the socketId.
This ensures the server knows which client to send the payment status update to.

Backend
1. Setting Up WebSockets (socket.js)

const { Server } = require("socket.io");

let io;

const setupSocket = (server) => {
  io = new Server(server, {
    cors: { origin: "http://localhost:3000" },
  });

  io.on("connection", (socket) => {
    console.log(`User connected: ${socket.id}`);
    socket.emit("socket-id", socket.id);

    socket.on("disconnect", () =>
      console.log(`User disconnected: ${socket.id}`)
    );
  });
};

const emitPaymentStatus = (socketId, status) => {
  if (io) io.to(socketId).emit("payment-status", status);
};

module.exports = { setupSocket, emitPaymentStatus };

setupSocket(server): Initializes the WebSocket server.
Handles Connections:
- When a client connects, it assigns a unique socket.id.
- It sends the socket-id back to the client.
- It listens for disconnection events.
Emitting Events:
- The emitPaymentStatus function emits the payment-status event to a specific client using their socketId.

2. Integrating WebSockets with Express (index.js)

const express = require("express");
const http = require("http");
const { setupSocket } = require("./socket");

const app = express();
const server = http.createServer(app);
setupSocket(server);

server.listen(PORT, () => {
  console.log(`Backend server running on port ${PORT}`);
});

http.createServer(app): Creates an HTTP server to attach WebSockets to.
setupSocket(server): Passes the server to the WebSocket setup function.
server.listen(PORT): Starts the backend server.

3. Emitting Events After Payment (paymentRoutes.js)

const { emitPaymentStatus } = require("../socket");

router.post("/make-payment-with-socket", (req, res) => {
  const { socketId } = req.body;

  setTimeout(() => {
    emitPaymentStatus(socketId, true);
  }, 10000);

  res.status(200).json({ message: "Payment received, processing request" });
});

The backend receives the socketId from the frontend.
Simulates payment processing with setTimeout().
Calls emitPaymentStatus(socketId, true) to notify the client of a successful payment.

Check Payment status - Without WebSocket

Check Payment status - With WebSocket

Code
Frontend
Backend

Conclusion

WebSockets enable real-time, event-driven communication between the client and server, significantly reducing the need for repeated API polling. This improves efficiency, reduces server load, and enhances user experience. By implementing WebSockets in the payment processing system, we eliminate unnecessary requests and enable instant status updates.

Debouncing Made Simple: Improve React Performance with Delayed Execution

Jaligama Satyaveer — Sun, 16 Feb 2025 15:57:21 +0000

Debouncing is a programming technique used to limit the rate at which a function executes. It is particularly useful when dealing with events that fire frequently, such as keystrokes, API calls etc.

Why Debouncing?

For example, when users type in a search box, the input event is triggered every time a key is pressed. Without debouncing, an API call would be made on every keystroke, causing unnecessary network requests. Debouncing ensures that the function (e.g., API call) executes only after the user has stopped typing for a certain period.

Implementing Debouncing

1. Setting up state

const [fieldValue, setFieldValue] = useState("");

2. API Call Function

const getData = () => {
  console.log("----API Call----");
};

This function simulates an API call by logging "----API Call----" to the console.

3. Implementing Debouncing using useEffect

useEffect(() => {
  const apiCallTimeout = setTimeout(() => {
    getData();
  }, 2000);

  return () => clearTimeout(apiCallTimeout);
}, [fieldValue]);

Whenever fieldValue changes, the effect runs.
A setTimeout is set for 2000 milliseconds (2 seconds) to call getData().
If the user continues typing before the 2-second delay, the previous setTimeout is cleared, and a new one starts.
The cleanup function (return () => clearTimeout(apiCallTimeout);) ensures that only the last keystroke (after the user stops typing) triggers the API call.

4. Without Debouncing

// useEffect(() => {
//   getData();
// }, [fieldValue]);

If this version is used, getData() would run every time fieldValue changes, causing multiple API calls for every keystroke.
This leads to unnecessary network requests and potential performance issues.

5. Input Field

return (
  <div className="App">
    <input
      type="text"
      onChange={(e) => setFieldValue(e.target.value)}
      value={fieldValue}
      placeholder="Search"
    />
  </div>
);

Full Code

import { useEffect, useState } from "react";

function DebouncingExample() {
  const [fieldValue, setFieldValue] = useState("");

  const getData = () => {
    console.log("----API Call----");
  };

  // ------------------Debouncing--------------------
  useEffect(() => {
    const apiCallTimeout = setTimeout(() => {
      getData();
    }, 2000);

    return () => clearTimeout(apiCallTimeout);
  }, [fieldValue]);

  // ----------------Without debouncing------------------
  // useEffect(() => {
  //   getData();
  // }, [fieldValue]);

  return (
    <div className="App">
      <input
        type="text"
        onChange={(e) => setFieldValue(e.target.value)}
        value={fieldValue}
        placeholder="Search"
      />
    </div>
  );
}

export default DebouncingExample;

Debouncing is an essential technique to improve performance and avoid excessive function executions. In this case, it helps prevent multiple API calls on every keystroke by delaying execution until the user pauses typing.
It is widely used in search boxes, form validations, and resize events to improve efficiency and user experience.

The Deprecation of Create React App

Jaligama Satyaveer — Sun, 16 Feb 2025 06:52:03 +0000

On February 14, 2025, the React team officially announced the deprecation of Create React App (CRA) for new applications, urging developers to migrate to modern frameworks.

Back in 2016, setting up a new React app was complicated. Developers had to configure tools like Webpack, Babel, ESLint etc manually. To solve this, Create React App (CRA) was introduced as an all-in-one tool that provided a zero-config setup for React projects, making it easy to get started.

Why CRA is Being Deprecated

No Active Maintainers
Poor Performance for Production Apps
Lack of Modern React Features and due to several other limitations.

Limitations of CRA

Routing
CRA did not include a routing solution, developers had to manually install React Router or similar libraries.

With frameworks like Next.js, routing is built-in, making navigation seamless and structured from the start.

Code Splitting & Performance
CRA bundled all JavaScript files into a single large file, causing slow initial page loads. While manual code splitting was possible, it wasn’t the most efficient approach.

Newer frameworks like Next.js automatically handle code-splitting at the route level, ensuring users only download the code they need for the page they are visiting.

Poor Production Readiness
While CRA was excellent for prototyping, it lacked optimizations required for production applications. Features like SSR (Server-Side Rendering), static site generation (SSG) were completely missing.

Recommended Alternatives

Next.js
A feature-rich framework with SSR, SSG, API routes, and automatic code-splitting. Best for scalable web apps.

Vite
A fast, lightweight alternative for those who want a simple yet efficient build tool without extra complexity.

Conclusion

The deprecation of CRA marks a shift towards more optimized, performant, and scalable solutions for building React applications. While CRA played a vital role in React’s growth, modern frameworks like Next.js, and Vite provide a better developer experience and ensure production-grade performance.

Choosing the Right CSS Approach for Your React Application

Jaligama Satyaveer — Mon, 10 Feb 2025 16:39:22 +0000

When working on a React application, there are multiple ways to style components. The choice of approach depends on individual preference, project requirements, and team decisions. Below are the five common CSS approaches used in React applications.

Standard CSS
CSS Modules
Preprocessors (Sass/Scss)
Utility-First CSS Framework (Tailwind CSS)
CSS-in-JS (Styled Components)

Standard CSS

Writing CSS in external .css files and importing them into React components.

/* styles.css */
.button {
  background-color: blue;
  color: white;
  padding: 10px;
}

// App.js
import './styles.css';

function App() {
  return <button className="button">Click Here</button>;
}

export default App;

CSS Modules

A modular approach where CSS is scoped to a specific component, preventing global conflicts.

/* Button.module.css */
.button {
  background-color: blue;
  color: white;
  padding: 10px;
}

// Button.js
import styles from './Button.module.css';

function Button() {
  return <button className={styles.button}>Click Here</button>;
}

export default Button;

Preprocessors (Sass/Scss)

Extends standard CSS with features like variables, nesting, and mixins for better maintainability.

/* styles.scss */
$primary-color: blue;
.button {
  background-color: $primary-color;
  color: white;
  padding: 10px;
}

// App.js
import './styles.scss';

function App() {
  return <button className="button">Click Here</button>;
}
export default App;

Utility-First CSS Framework (Tailwind CSS)

A utility-based approach that provides pre-defined classes to style elements directly in JSX.

// App.js
function App() {
  return <button className="bg-blue-500 text-white p-2">Click Here</button>;
}

export default App;

CSS-in-JS (Styled Components)

Allows defining styles directly within JavaScript using template literals.

// Button.js
import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px;
`;

function App() {
  return <Button>Click Here</Button>;
}

export default App;

Conclusion

Each approach to styling in React has its benefits and drawbacks. The best choice depends on your project needs, team preferences, and maintainability concerns. For example:

Standard CSS for simple projects.
CSS Modules to prevent global style conflicts.
Sass/Scss for better maintainability in large projects.
Tailwind CSS for rapid UI development.
Styled Components for dynamic styling in component-based architecture.

Stack in Action: Building Undo and Redo Functionality in a Todo App

Jaligama Satyaveer — Sat, 08 Feb 2025 21:14:17 +0000

Introduction

When learning Data Structures and Algorithms (DSA), many developers struggle to find real-world applications for the concepts they study. One such fundamental data structure is the Stack. While it may seem theoretical at first, stacks have many practical applications, including implementing Undo and Redo functionality in apps.

In this article, we will explore the Stack data structure and see how it can be used to implement Undo/Redo in a simple Todo App.

What is a Stack?

A Stack is a linear data structure that follows the Last In, First Out (LIFO) principle. This means that the last item added to the stack is the first one to be removed.

Key Operations of a Stack:

Push: Adds an item to the top of the stack.
Pop: Removes the top item from the stack.
Peek (Top): Returns the top item without removing it.
isEmpty: Checks if the stack is empty.

Implementing Undo/Redo in a Todo App

Application Features:
Our Todo App will have the following features:

Text Field: Allows users to enter and add tasks.
Undo Button: Removes the last task and moves it to the redo stack.
Redo Button: Restores the last undone task from the redo stack.
Show Stacks Button: Displays the contents of both the Main Stack (tasks) and the Redo Stack.

Stack Implementation in the Todo App:
In this implementation, we use two stacks:

Main Stack: Stores the active tasks.
Redo Stack: Stores the undone tasks.

How Undo/Redo Works:

When a task is added, it is pushed onto the Main Stack.
When the Undo button is clicked, the top task is popped from the Main Stack and pushed onto the Redo Stack.
When the Redo button is clicked, the top task is popped from the Redo Stack and pushed back onto the Main Stack.
Clicking Show Stack will display both stacks, highlighting the top item with a darker shade.

Code:- GitHub Link

Conclusion

Stacks are a fundamental data structure with many real-world applications. Implementing Undo and Redo functionality in a Todo App is a practical way to understand stacks in action. By visualizing how tasks move between stacks, developers can better grasp the LIFO concept and its importance in application development.

Optimizing Performance with Infinite Scrolling in React

Jaligama Satyaveer — Thu, 06 Feb 2025 19:54:59 +0000

In our daily lives, we interact with many applications like Instagram, YouTube, LinkedIn, Facebook etc. If we observe carefully, the content loads continuously as we scroll. This seamless experience is achieved using infinite scrolling, a technique that keeps users engaged without interruptions.

Why Infinite Scrolling?

Loading or processing a huge amount of data all at once during page load is not a good idea. It can negatively impact:

Performance – Fetching large amounts of data at once can slow down the application.
User Experience – Users might face delays or lag while interacting with the application.

To avoid these issues, applications implement infinite scrolling. This approach enhances engagement and provides a smooth user experience by dynamically loading content as the user scrolls.

Implementing Infinite Scrolling in React

There are multiple ways to implement infinite scrolling in React. One of it is by using the react-infinite-scroll-component library.

This library helps manage infinite scrolling efficiently by handling API calls and updating the UI without affecting performance.

1. Define State variables

const [items, setItems] = useState([]);
const [hasMore, setHasMore] = useState(true);

items: Stores the list of items displayed on the page.
hasMore: A boolean that determines whether more data is available to load.

2. Function to Generate New Data
This function generates an array of 10 numbers, starting from a given number.

const generateArray = (startFrom) => {
  return Array.from({ length: 10 }, (_, index) => startFrom + index);
};

3. Fetching Initial Data on Component Mount
When the component mounts, it triggers getInitialData(), which simulates a delayed API call using setTimeout().

useEffect(() => {
  async function getInitialData() {
    setTimeout(() => {
      setItems(generateArray(1));
    }, 1000);
  }
  getInitialData();
}, []);

4. Handling Data Fetching on Scroll

const getData = async () => {
  if (items.length < 60) {
    console.log("Fetching the data after", items.length);
    setTimeout(() => {
      setItems((prevItems) => [
        ...prevItems,
        ...generateArray(prevItems.length + 1),
      ]);
      setHasMore(true);
    }, 1000);
  } else {
    console.log("-----------No More Data to show----------");
    setHasMore(false);
  }
};

This getData() function loads more data when the user scrolls down.
If items.length is less than 60, it fetches the next batch of 10 items.
If the length reaches 60, it stops loading more data by setting hasMoreto false.

5. InfiniteScroll Component

<InfiniteScroll
  dataLength={items.length}
  next={getData}
  hasMore={hasMore}
  loader={<p>Loading....</p>}
>
  {items.map((value, index) => (
    <div
      key={value + index}
      style={{
        height: "100px",
        fontSize: "20px",
        fontWeight: "bold",
        backgroundColor: `${index % 2 === 0 ? "" : "lightblue"}`,
        marginBottom: "10px",
      }}
    >
      {value}
    </div>
  ))}
</InfiniteScroll>

Full Code

import { useEffect, useState } from "react";
import InfiniteScroll from "react-infinite-scroll-component";

function InfiniteScrollDemo() {
  const [items, setItems] = useState([]);
  const [hasMore, setHasMore] = useState(true);

  const generateArray = (startFrom) => {
    return Array.from({ length: 10 }, (_, index) => startFrom + index);
  };

  useEffect(() => {
    async function getInitialData() {
      setTimeout(() => {
        setItems(generateArray(1));
      }, 1000);
    }
    getInitialData();
  }, []);

  const getData = async () => {
    if (items.length < 60) {
      console.log("Fetching the data after", items.length);
      setTimeout(() => {
        setItems((prevItems) => [
          ...prevItems,
          ...generateArray(prevItems.length + 1),
        ]);
        setHasMore(true);
      }, 1000);
    } else {
      console.log("-----------No More Data to show----------");
      setHasMore(false);
    }
  };

  return (
    <div className="App">
      <InfiniteScroll
        dataLength={items.length}
        next={getData}
        hasMore={hasMore}
        loader={<p>Loading....</p>}
      >
        {items.map((value, index) => (
          <div
            key={value + index}
            style={{
              height: "100px",
              fontSize: "20px",
              fontWeight: "bold",
              backgroundColor: `${index % 2 === 0 ? "" : "lightblue"}`,
              marginBottom: "10px",
            }}
          >
            {value}
          </div>
        ))}
      </InfiniteScroll>
    </div>
  );
}

export default InfiniteScrollDemo;

Key Takeaways

This implementation efficiently loads content in batches, ensuring that the app does not load excessive data at once. The benefits include:
Better performance – Only necessary data is loaded.
Smooth user experience – Users don’t have to wait for large data loads.
Engagement-friendly – Continuous scrolling keeps users active on the page.

React 19 : useOptimistic Hook

Jaligama Satyaveer — Wed, 01 Jan 2025 18:35:19 +0000

React 19 introduced several new features, including the useOptimistic hook.

useOptimistic help us in updating the UI when our async function is in progress.

Lets understand the use case of useOptimistic with an example

When a user likes a post on Instagram.
Client(Instagram app on user device) will make an API call to server for updating the number of likes. (asynchronous action)
Once client receives the response from the server, UI will be updated accordingly with correct number of likes.

If the server is slow, there may be a delay in receiving the response and updating the UI, leading to a poor user experience.

The best way to enhance user experience

User likes a post on Instagram.
UI will display updated likes count without any delay.
Client will make an API call to server. (asynchronous action)
If API call is success, there will be no change in the UI (because we are already displaying updated likes count).
If the API call is failed, like will be removed.

useOptimistic hook assists in managing likes while our asynchronous code (such as an API call in this case) is still underway.

API call Success

API call Failed

Code

import { HeartFilledIcon, HeartIcon } from "@radix-ui/react-icons";
import { Box, Strong, Text } from "@radix-ui/themes";
import { useOptimistic, useState, useTransition } from "react";

const UseOptimisticExample = () => {
  const [likes, setLikes] = useState(100);
  const [isPostLiked, setIsPostLiked] = useState(false);
  const [optimisticData, setOptimisticData] = useOptimistic(
    { likes, isPostLiked },
    (currentState, newLikes) => {
      return { likes: currentState.likes + newLikes, isPostLiked: true };
    }
  );
  const [, startTransition] = useTransition();

  const onLikeClick = () => {
    startTransition(async () => {
      setOptimisticData(1);
      //   Simulating API call
      await new Promise((resolve, reject) => {
        console.log("Request sent to server");
        setTimeout(() => {
          resolve(likes + 1); // To simulate API call success
          //   reject("API call failed"); // To simulate API call failure
        }, 8000);
      })
        .then((newLikes) => {
          console.log("API call success");
          setLikes(newLikes);
          setIsPostLiked(true);
        })
        .catch((error) => {
          console.error(error);
        });
    });
  };

  return (
    <Box py="1" px="2">
      {optimisticData.isPostLiked ? (
        <HeartFilledIcon
          color="red"
          style={{ height: "50px", width: "50px", cursor: "pointer" }}
          onClick={onLikeClick}
        />
      ) : (
        <HeartIcon
          style={{ height: "50px", width: "50px", cursor: "pointer" }}
          onClick={onLikeClick}
        />
      )}
      <br></br>
      <Text>
        <Strong>{optimisticData.likes} Likes</Strong>
      </Text>
    </Box>
  );
};

export default UseOptimisticExample;