Forem: Rahul Kumar

What is the React useEffect cleanup function, and how it works?

Rahul Kumar — Thu, 06 Feb 2025 17:22:59 +0000

Detailed explanation about React’s useEffect cleanup function works.

Imagine that you have a React component that displays a list of items from an API. Every time the component is rendered, it fetches the latest list of items from the API and displays them to the user.

Let’s say the user decides to navigate away from this component to a different part of the app. The component is no longer being rendered, so there’s no need to continue fetching the list of items from the API. However, the fetch request is still ongoing in the background.

This is where the useEffect cleanup function comes in. The cleanup function is a function that is called when the component is unmounted (i.e., when it is no longer being rendered). It allows you to perform any necessary cleanup tasks, such as cancelling an ongoing API request.
To use the cleanup function, you can pass it as a return value from the useEffect hook. For example:

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch(url);
    // do something with the response
  };
  fetchData();
  return () => {
    // cleanup function goes here
  };
}, [url]);

In this example, the fetchData function is called when the component is rendered. When the component is unmounted, the cleanup function is called, allowing you to cancel the ongoing fetch request if necessary.

First Example

Here are two examples of how you might use the useEffect cleanup function to cancel an ongoing API request in a real-world application:


import { useEffect, useState } from 'react';

function ExampleComponent() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const interval = setInterval(() => {
      setCount(count + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, [count]);
  return <div>{count}</div>;
}

In this example, the useEffect hook sets up an interval that increments the count state variable every second. The cleanup function returned by the useEffect hook cancels this interval by calling clearInterval when the component unmounts or re-renders. This ensures that the interval is not still running in the background after the component is no longer being used.

Second Example

This example will explain the absolute need for this cleanup function and how it can improve the performance of our application.
The useEffect cleanup function can be crucial when working with async operations, such as API requests because it allows you to cancel any ongoing async tasks before the component is unmounted.

Consider the following example:

import { useEffect, useState } from 'react';

function UserProfile() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    const fetchUser = async () => {
      const response = await fetch(`/api/users/${userId}`);
      const data = await response.json();
      setUser(data);
      setLoading(false);
    };
    fetchUser();
  }, [userId]);
  if (loading) {
    return <LoadingIndicator />;
  }
  return (
    <div>
      <h1>{user.name}</h1>
      {/* render other user data */}
    </div>
  );
}

In this example, the UserProfile component fetches and displays information about a particular user. If the component is unmounted (for example, if the user navigates away from the component), the ongoing API request will still be in progress in the background. This can cause unnecessary network traffic and potentially result in data inconsistencies if the response from the API is received after the component has been unmounted.

By using a useEffect cleanup function, you can cancel the ongoing API request when the component is unmounted, like so:

import { useEffect, useState } from 'react';

function UserProfile() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;
    const fetchUser = async () => {
      const response = await fetch(`/api/users/${userId}`, { signal });
      const data = await response.json();
      setUser(data);
      setLoading(false);
    };
    fetchUser();
    return () => {
      controller.abort();
    };
  }, [userId]);
  if (loading) {
    return <LoadingIndicator />;
  }
  return (
    <div>
      <h1>{user.name}</h1>
      {/* render other user data */}
    </div>
  );
}

>

In this version of the UserProfile component, the useEffect cleanup function cancels the ongoing API request by calling the abort method on the AbortController instance. This ensures that the request is stopped when the component is unmounted, helping to prevent unnecessary network traffic and data inconsistencies.

Final Wording

The cleanup function can perform any necessary cleanup before the component is unmounted or cancel any ongoing processes that were started during the component’s lifecycle. This can be useful for ensuring that resources are adequately managed and that the component does not continue to run in the background after it is no longer being used.

Monolithic Architecture vs. Microservices: Which One to Choose?

Rahul Kumar — Thu, 06 Feb 2025 08:18:53 +0000

_ In the world of software development, Monolithic Architecture and Microservices are two widely used approaches for designing applications. Choosing the right architecture is crucial for scalability, maintainability, and performance. This article explores both architectures, their advantages and disadvantages, and when to use them._

What is Monolithic Architecture?

A Monolithic Architecture is a traditional software development approach where the entire application is built as a single, unified unit. All components—UI, business logic, and database—are tightly coupled and operate within the same codebase.

Key Characteristics:

✅ Single codebase
✅ Shared database
✅ Tightly integrated components
✅ Deployed as one unit

Advantages of Monolithic Architecture

✔ Simple Development & Deployment – Since everything is in a single codebase, development and deployment are straightforward.
✔ Easier Debugging – Debugging and testing are simpler since all components are in one place.
✔ Better Performance – Internal calls between components are faster as they run in the same memory space.

Disadvantages of Monolithic Architecture

❌ Scalability Issues – Scaling a monolith requires deploying the entire application, even if only one component needs more resources.
❌ Hard to Maintain – As the application grows, it becomes difficult to manage and update.
❌ Slower Deployment – A small change requires redeploying the entire application, increasing downtime.

What is Microservices Architecture?

A Microservices Architecture breaks down an application into multiple independent services, each handling a specific function. These services communicate via APIs and can be developed, deployed, and scaled independently.

Key Characteristics:

✅ Decoupled, independent services
✅ Separate databases for each service
✅ Communication through APIs (REST, gRPC, or messaging queues)
✅ Can be deployed and scaled independently

Advantages of Microservices Architecture

✔ Scalability – Each service can be scaled independently based on demand.
✔ Faster Development – Different teams can work on separate services in parallel.
✔ Technology Flexibility – Each service can use different programming languages, databases, or frameworks.
✔ Improved Fault Isolation – Failure in one service does not bring down the entire system.

Disadvantages of Microservices Architecture

❌ Increased Complexity – Managing multiple services, APIs, and databases adds operational overhead.
❌ Higher Infrastructure Cost – More services mean more servers, leading to increased cloud or hardware costs.
❌ Latency & Network Issues – Since services communicate over a network, API calls introduce latency and potential failures.

Monolithic vs. Microservices: Key Differences

When to Choose Monolithic or Microservices?

✅ Choose Monolithic Architecture if:

You’re building a small or medium-sized application.

Your team is small and wants to focus on fast development.

You don’t need frequent scaling or independent service updates.

✅ Choose Microservices Architecture if:

You’re developing a large-scale, distributed system.

Your team is large, and different teams handle different modules.

You need high scalability, fault tolerance, and flexibility in technology.

Conclusion

Both Monolithic and Microservices architectures have their pros and cons. Monolithic is easier to develop but harder to scale, while Microservices offer flexibility and scalability at the cost of complexity. The right choice depends on your application’s size, team structure, and scalability needs.

Fetch vs. Axios HTTP Requests In JavaScript

Rahul Kumar — Thu, 28 Nov 2024 05:52:14 +0000

Fetch:

Fetch is a newer way to send HTTP requests. Before Fetch, XMLHttpRequest was a very popular way to send requests. In fact, it was the only way to send HTTP requests in the early days of JavaScript. XMLHttpRequest does not support promises and mostly relies on callbacks if we have nested requests, which could be too repetitive and hard to read. That’s when Fetch entered.

Fetch supports promises. It is way cleaner and readable than XMLHttpRequest requests, at least in my experience. Here is an example of fetch request:

fetch('URL')   //instead of URL use which ever URL you want to send a request
.then((response) => {
    if (!response.ok)
       throw new Error(`Status Code Error: ${response.status}`)
    response.json() //parse json
.then((data) => {
    for (let student of data.results) {   //assuming data is list of students and has property name
        console.log(student.name)
    }
})
.catch((err) => {
    console.log('SOMETHING WENT WRONG WITH FETCH!');
    console.log(err);
 })
});

Here, the first .then gives us a response object, it resolves but we can not access the data yet. The data we need is inside the body key with the value ReadableStream. To access the data we use response.json() as shown above which parses JSON and we get the data we need. Now the second .then gives us the data and we are looping through it to display the student’s name. This is the scenario of when the promise resolves, but what happens when something goes wrong with the URL and the promise gets rejected? In that case, we handle it with .catch like above. You might be thinking what is that if statement for? Well, adding .catch doesn’t catch the error if something goes wrong with fetch. It will give us a 404 status response instead of catching the error because the response.json() line fails if the response gets rejected, so we are trying to parse something that doesn’t exist. So by adding the if statement, we are checking if we have the response, and only then parse JSON. To read more about Fetch you can refer to this documentation.

Axios:

Axios is a library for making HTTP Requests. It’s one of the most popular libraries that simplifies the process of making HTTP Requests. Unlike fetch it’s not a built-in option. It’s an external library that uses fetch behind the scenes. It is promise-based like fetch which means we don’t have to deal with a lot of callbacks. One nice feature Axios has is, it can be used on the server-side as well with node.js.

To use Axios, you can add a script tag on the Html file like so:

Using jsDelivr CDN:


<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Using unpkg CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Or you can download it with the following commands:

Using npm:

$ npm install axios

Using bower:

$ bower install axios

Using yarn:
$ yarn add axios

Now let’s make the same GET Request from the above example with Axios:

axios.get(‘URL’).then((response) => {   
   console.log(response.data)
   for (let student of data.results) {  
     console.log(student.name)
    }
 }).catch((error) => {
    console.log(error)
})

Much cleaner and less code than with Fetch. Two key difference between Fetch and Axios are:

We don’t have to manually check the response of the status code as we did in a fetch request. Axios knows to display the catch error if the status code is not 200 - ok.
We don’t have to parse JSON to retrieve data like Fetch.

Express.js Applications with Middleware

Rahul Kumar — Sat, 23 Nov 2024 10:46:23 +0000

Introduction

Middleware in Express.js is a powerful mechanism that allows you to intercept incoming requests and outgoing responses. It provides a flexible way to extend the functionality of your application without modifying the core routing logic. In this blog post, we'll delve into the concept of middleware, explore its various types, and demonstrate how to implement it effectively.

Understanding Middleware

Middleware functions are essentially functions that have access to the request (req), response (res), and next middleware in the chain (next). They can perform various tasks, such as:

Logging: Record incoming requests and outgoing responses for analysis and debugging.
Authentication: Verify user credentials and authorize access to protected routes.
Error Handling: Catch and handle errors that occur within your application.
Parsing Request Bodies: Parse incoming request bodies (e.g., JSON, form data).
Setting Response Headers: Set custom headers in outgoing responses (e.g., CORS headers).

Types of Middleware

Application-Level Middleware:

Applied to all incoming requests to the Express app.
Typically used for global configurations, logging, and error handling.


const express = require('express');
const app = express();

// Application-level middleware
app.use((req, res, next) => {
    console.log('Request URL:', req.url);
    next();
});

Router-Level Middleware:

Applied to specific routes or groups of routes.
Useful for route-specific authentication, authorization, or data validation.

const express = require('express');
const router = express.Router();

// Router-level middleware
router.use((req, res, next) => {
    console.log('Router-level middleware');
    next();
});

router.get('/users', (req, res) => {
    // ...
});

Error-Handling Middleware:

Designed to handle errors that occur within the application.
Must have four arguments: err, req, res, and next.

  app.use((err, req, res, next) => {
    console.error(err.stack);
    res.status(500).send('Internal Server Error');
});

Conclusion

By effectively utilizing middleware, you can enhance the security, performance, and overall functionality of your Express.js applications. Understanding the different types of middleware and their appropriate use cases will empower you to create robust and scalable web applications.

Mastering JavaScript's Array Powerhouses: forEach, map, filter, reduce, spread, and rest

Rahul Kumar — Sat, 23 Nov 2024 04:15:50 +0000

forEach: Iterating Over Elements

The forEach method iterates over each element in an array, executing a provided callback function for each element.

const numbers = [1, 2, 3, 4, 5]; numbers.forEach(num => { console.log(num); });

map: Transforming Elements

The map method creates a new array by applying a provided function to each element of the original array.

const numbers = [1, 2, 3, 4, 5]; const doubledNumbers = numbers.map(num => num * 2); console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]

filter: Selecting Elements

The filter method creates a new array containing only the elements that pass a test implemented by the provided function.

const numbers = [1, 2, 3, 4, 5]; const evenNumbers = numbers.filter(num => num % 2 === 0); console.log(evenNumbers); // Output: [2, 4]

reduce: Accumulating Values

The reduce method reduces an array to a single value by applying a function against an accumulator and each element in the array.

const numbers = [1, 2, 3, 4, 5]; const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); console.log(sum); // Output: 15

spread Operator (...): Expanding Elements

The spread operator expands an iterable (array, string, object) into its individual elements.

const numbers = [1, 2, 3]; const newArray = [...numbers, 4, 5]; console.log(newArray); // Output: [1, 2, 3, 4, 5]

rest Operator (...): Gathering Elements
The rest operator collects remaining elements into an array.

function sum(...numbers) { return numbers.reduce((total, num) => total + num, 0); } console.log(sum(1, 2, 3, 4)); // Output: 10

Practical Examples:

Filtering Even Numbers:

const numbers = [1, 2, 3, 4, 5, 6]; const evenNumbers = numbers.filter(num => num % 2 === 0); console.log(evenNumbers); // Output: [2, 4, 6]

Creating a New Array with Squared Numbers:

const numbers = [1, 2, 3, 4, 5]; const squaredNumbers = numbers.map(num => num * num); console.log(squaredNumbers); // Output: [1, 4, 9, 16, 25]

Summing Array Elements:

const numbers = [1, 2, 3, 4, 5]; const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); console.log(sum); // Output: 15

Flattening a Nested Array:

const nestedArray = [[1, 2], [3, 4], [5]]; const flattenedArray = nestedArray.flat(); console.log(flattenedArray); // Output: [1, 2, 3, 4, 5]