DEV Community: Sarthak Chatterjee

Immutability vs Mutability in JavaScript

Sarthak Chatterjee — Thu, 24 Apr 2025 18:21:37 +0000

Understand the difference between how data is stored and manipulated in JavaScript with real-world examples.

🔹 What is Mutability?

In programming, mutability refers to whether or not a value can be changed after it's created.

Mutable: You can change it.
Immutable: You can't change it, you can only create a new copy.

JavaScript handles primitive and reference data types differently in terms of mutability. Let’s explore that.

🧾 Primitive Data Types (Immutable)

Primitive values in JavaScript include:

String
Number
Boolean
undefined
null
Symbol
BigInt

These are immutable – meaning, once a primitive value is created, it cannot be changed. Any operation that looks like it's changing a value actually creates a new value.

✅ Example:

let name = "John";
let newName = name;  // Copy by value

newName = "Doe";

console.log(name);     // John
console.log(newName);  // Doe

Here, changing newName doesn't affect name because strings are primitives and copied by value, not by reference.

📦 Reference Data Types (Mutable)

Reference types include:

Object
Array
Function

These are mutable, and when you assign them to a variable, you're assigning a reference to the object in memory, not the actual value.

✅ Example of Mutability:

let user = { name: "Alice" };
let newUser = user;  // Copy by reference

newUser.name = "Bob";

console.log(user.name);     // Bob
console.log(newUser.name);  // Bob

Even though we updated newUser, it also affected user because both point to the same object in memory.

✅ Making Reference Types Immutable (Using Spread Operator or `Object.assign`)

If you want to keep your reference data immutable (best for state management, especially in React), you need to create copies.

Example using Spread Operator:

let original = { city: "Paris" };
let copied = { ...original };

copied.city = "London";

console.log(original.city);  // Paris
console.log(copied.city);    // London

Here, changing copied does not affect original.

🧠 Why Immutability Matters?

Predictability: Code is easier to debug and reason about.
State Management: Essential in frameworks like React.
Avoid Side Effects: Prevent accidental changes in data.

⚡ Quick Summary

Type	Mutable?	Copied By	Example
`String`, `Number`	❌ No	Value	`let a = b`
`Object`, `Array`	✅ Yes	Reference	`let a = b`

💡 Final Thoughts

Understanding the difference between immutable and mutable values is a must-have skill for writing clean, bug-free JavaScript code. Stick to immutability where possible—it’ll save you a lot of headaches down the road.

Best Practices for Component Reusability in Large React Projects

Sarthak Chatterjee — Tue, 15 Apr 2025 15:26:34 +0000

Component reusability is one of the core strengths of React, but as projects grow in size, managing reusable components effectively becomes more challenging. In this blog post, we'll start with the basics and gradually dive into advanced strategies, using real-life examples and large-scale implementation tips.

🌱 Getting Started: What is Component Reusability?

At its core, component reusability means creating UI components that can be reused in different parts of your application without rewriting the same logic or layout.

Simple Example:

const Button = ({ label, onClick }) => {
  return <button onClick={onClick}>{label}</button>;
};

You can use this Button across your entire app just by changing label and onClick.

🧩 Step Up: Making Components More Flexible

As your app grows, your components need to handle different use cases.

Add Variants:

const Button = ({ label, onClick, variant = "primary" }) => {
  const styles = {
    primary: "bg-blue-500 text-white",
    secondary: "bg-gray-200 text-black",
  };

  return <button onClick={onClick} className={styles[variant]}>{label}</button>;
};

Now, you can use it like:

<Button label="Save" variant="primary" />
<Button label="Cancel" variant="secondary" />

Real-World Scenario:

Think of an e-commerce site. The same button might be used for "Add to Cart," "Buy Now," or "Remove from Wishlist." Instead of creating three separate buttons, one flexible Button component can handle all these cases.

📦 Organizing a Component Library

Folder Structure for Scalability:

src/
├── components/
│   ├── Button/
│   │   ├── Button.jsx
│   │   └── Button.module.css
│   ├── Modal/
│   │   └── Modal.jsx
│   └── index.js

This structure helps in:

Clear separation of concerns
Easy reusability
Scalability across teams

Index File Example:

export { default as Button } from './Button/Button';
export { default as Modal } from './Modal/Modal';

Now you can import easily:

import { Button, Modal } from '../components';

🎯 Advanced Technique for Reusability

Higher-Order Components (HOC)

A Higher-Order Component is a function that takes a component and returns a new enhanced component.

Think of it like a wrapper function that adds some extra behavior to your original component — without changing it.
Example:

const withLogger = (Component) => (props) => {
  console.log("Rendering", Component.name);
  return <Component {...props} />;
};

const LoggedButton = withLogger(Button);

withLoggeris a HOC that logs when the component is rendered.

LoggedButtonnow behaves like Button, but with extra logging.

Use Case:
Say you're building an analytics dashboard. You want to track when components render or user interactions happen — instead of adding console.log to each component, just use a HOC.

Real Life:

Authentication check (withAuth)
Error boundaries (withErrorBoundary)
Feature flags (withFeatureToggle)

Use HOCs to wrap logic around reusable components.

const withLogger = (Component) => (props) => {
  console.log("Rendering", Component.name);
  return <Component {...props} />;
};

const LoggedButton = withLogger(Button);

🏢 Real-Life Use Case: Large-Scale E-commerce Platform

Imagine building an e-commerce platform with:

Product Cards used on Home, Category, and Wishlist pages
Rating Stars used in Reviews, Product Cards, and Order History
Price Formatter used across checkout, cart, and product details

To avoid duplication:

Create generic ProductCard, Rating, and Price components.
Use props and slots to handle differences.
Manage styling via CSS modules or Tailwind variants.
Extract logic like currency conversion into custom hooks.

🚀 Tips for Scaling Component Reusability

✅ Use TypeScript to ensure prop safety
✅ Document components with Storybook
✅ Create a design system or UI library (e.g., using Tailwind + Radix)
✅ Keep business logic outside of UI components

🧠 Final Thoughts

Component reusability is not just about DRY (Don’t Repeat Yourself) — it’s about building systems that are scalable, maintainable, and easy to collaborate on. Start simple, but always design with flexibility in mind.

The more your app grows, the more important reusability becomes. Treat every component like it might be reused 100 times — because in large projects, it just might be.

Happy coding! 💻

ReactJS Performance Optimization: Best Practices

Sarthak Chatterjee — Mon, 03 Feb 2025 09:41:21 +0000

In today’s fast-paced digital world, users expect websites and applications to be lightning-fast and highly responsive. For developers working with ReactJS, ensuring optimal performance is crucial to providing a seamless user experience.
In this blog, we’ll explore simple yet effective strategies to boost the performance of your ReactJS applications. Whether you’re a beginner or a seasoned developer, these tips will help you write cleaner, faster, and more efficient React code. Let’s dive in!

1. Optimizing Large Imports in React with Lazy Loading

When working with large files in a React project, importing them directly into a component can cause significant performance issues. The application may become sluggish, especially when rendering the component for the first time.

The Problem

Consider the following example where a large JSON file is imported into a component:

// components/MyComponent.js
import React from "react";
import largeData from "../data/largeData.json";

const MyComponent = () => {
  return (
    <div>
      <h2>Large Data</h2>
      <pre>{JSON.stringify(largeData, null, 2)}</pre>
    </div>
  );
};

export default MyComponent;

And in the main file:

import React from "react";
import MyComponent from "./components/MyComponent";

const App = () => {
  return (
    <div>
      <h1>My App</h1>
      <MyComponent />
    </div>
  );
};

export default App;

Since MyComponent is imported directly, the large JSON file is loaded immediately, potentially slowing down the initial render of the app.

The Solution: Lazy Loading with React.lazy()

A better approach is to use lazy loading. This ensures that MyComponent (and the large JSON file) is only loaded when needed.

Optimized Code

Modify the App.js file to use React.lazy() and Suspense:

import React, { Suspense } from "react";

const LazyComponent = React.lazy(() => import("./components/MyComponent"));

const App = () => {
  return (
    <div>
      <h1>My App</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
};

export default App;

How This Helps

Reduces Initial Load Time: The component and large JSON file are only loaded when they are needed.
Improves Performance: The main bundle remains small, making the app more responsive.
Enhances User Experience: The fallback UI (Loading...) ensures that the user sees something while waiting.
Efficient Resource Management: Suspense ensures that resources are loaded only when required, preventing unnecessary memory usage and improving overall app performance.

By implementing lazy loading, we significantly enhance our React app's performance, making it more efficient and user-friendly.

2. Using `useMemo` in React

Imagine you are a student preparing for an exam. You have a big book with 500 pages, and you need to find the same answer again and again. Instead of reading through the entire book each time, you decide to write down the answer on a sticky note so that you can quickly check it when needed. This simple trick saves you a lot of time and effort.

In the world of React, useMemo does something similar—it remembers the result of a function so that React doesn’t have to recalculate it every time a component renders.

What is `useMemo`?

useMemo is a React Hook that helps optimize performance by memoizing a computed value. It prevents expensive calculations from running on every render unless the dependencies change.

The Problem: Expensive Calculations

Consider this example where we have a function that performs a heavy calculation every time the component renders:

import React, { useState } from "react";

const slowFunction = (num) => {
  console.log("Running slow function...");
  for (let i = 0; i < 1000000000; i++) {} // Simulating a slow calculation
  return num * 2;
};

const App = () => {
  const [number, setNumber] = useState(5);
  const [count, setCount] = useState(0);

  const result = slowFunction(number);

  return (
    <div>
      <h1>useMemo Example</h1>
      <p>Result: {result}</p>
      <button onClick={() => setCount(count + 1)}>Re-render</button>
    </div>
  );
};

export default App;

In this case, even when we update count, the slowFunction runs again unnecessarily.

Optimizing with `useMemo`

We can use useMemo to ensure that the function only runs when number changes:

import React, { useState, useMemo } from "react";

const slowFunction = (num) => {
  console.log("Running slow function...");
  for (let i = 0; i < 1000000000; i++) {}
  return num * 2;
};

const App = () => {
  const [number, setNumber] = useState(5);
  const [count, setCount] = useState(0);

  const result = useMemo(() => slowFunction(number), [number]);

  return (
    <div>
      <h1>useMemo Example</h1>
      <p>Result: {result}</p>
      <button onClick={() => setCount(count + 1)}>Re-render</button>
    </div>
  );
};

export default App;

How This Helps

Improves Performance: useMemo ensures the expensive function only runs when necessary.
Avoids Unnecessary Computations: It caches the result and prevents re-execution unless dependencies change.
Enhances User Experience: Faster renders make the app feel more responsive.

Just like saving important answers on sticky notes for quick reference, useMemo helps React remember the answers to calculations, making your application smoother and more efficient.

For reference, you can find the complete code in this GitHub repository: Learning-useMemo-in-React. 🚀

3. Using `useCallback` in React

Imagine you love ordering pizza from your favorite restaurant. Every time you place an order, you call the restaurant and repeat your address. But wouldn’t it be easier if the restaurant remembered your address so you didn’t have to say it every time? That’s exactly what useCallback does in React—it helps React remember functions so that they don’t get re-created unnecessarily.

What is `useCallback`?

useCallback is a React Hook that memoizes a function, meaning it returns the same function instance between renders unless its dependencies change. This optimization is especially useful when passing functions as props to child components.

The Problem: Unnecessary Function Re-Creation

Consider this example where a function is created inside a component on every render:

import React, { useState } from "react";

const Button = ({ handleClick }) => {
  console.log("Button component re-rendered");
  return <button onClick={handleClick}>Click me</button>;
};

const App = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    console.log("Button clicked");
    setCount(count + 1);
  };

  return (
    <div>
      <h1>useCallback Example</h1>
      <p>Count: {count}</p>
      <Button handleClick={handleClick} />
    </div>
  );
};

export default App;

What’s Wrong?

The handleClick function is re-created every time App re-renders.
The Button component unnecessarily re-renders even though its logic hasn't changed.

Optimizing with `useCallback`

We can use useCallback to ensure that handleClick is only re-created when count changes:

import React, { useState, useCallback } from "react";

const Button = ({ handleClick }) => {
  console.log("Button component re-rendered");
  return <button onClick={handleClick}>Click me</button>;
};

const App = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log("Button clicked");
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <h1>useCallback Example</h1>
      <p>Count: {count}</p>
      <Button handleClick={handleClick} />
    </div>
  );
};

export default App;

How This Helps

Prevents Unnecessary Function Re-Creation: useCallback ensures handleClick remains the same across renders unless count changes.
Optimizes Child Component Rendering: Button doesn’t re-render unnecessarily because the function reference remains the same.
Improves Performance: Helps optimize React apps by reducing unnecessary re-renders.

Just like how a restaurant remembers your address to make ordering easier, useCallback helps React remember functions to make rendering more efficient. 🚀

What is liquid (Shopify) ?

Sarthak Chatterjee — Fri, 30 Aug 2024 14:58:16 +0000

Introduction

Liquid is a template language created by Shopify. It's available as an open source project on GitHub, and is used by many different software projects and companies.
This reference documents the Liquid tags, filters, and objects that you can use to build Shopify Themes.

But what is Shopify?

Shopify is an e-commerce platform that allows individuals and businesses to create and manage their online stores. Here's what Shopify does:

Store Creation: Shopify provides tools to easily set up an online store without needing deep technical knowledge. Users can choose from various themes and templates to design their store's appearance.
Product Management: Store owners can add, organize, and manage products, including details like descriptions, pricing, and images. Shopify also supports product variants, such as different sizes or colors.
Payment Processing: Shopify integrates with multiple payment gateways, allowing businesses to accept payments from customers through various methods, including credit cards, digital wallets, and more. Shopify Payments is their in-house solution, but they also support third-party providers.
Order and Inventory Management: Shopify helps businesses manage their orders and inventory, tracking what products are available and what needs to be restocked. Orders can be fulfilled and shipped directly through the platform.
Marketing and SEO: Shopify offers built-in marketing tools, including SEO features, social media integrations, email marketing, and promotional campaigns to help businesses attract and retain customers.
Analytics and Reporting: Users can access detailed reports and analytics about their store's performance, including sales, customer behavior, and traffic sources. This helps in making data-driven decisions.
App Integrations: Shopify's app store offers a wide range of apps to extend the functionality of a store, from advanced marketing tools to inventory management systems and customer support solutions.
Mobile and Multi-Channel Selling: Shopify supports mobile commerce, enabling customers to shop from mobile devices. It also allows businesses to sell across multiple channels, including social media platforms, marketplaces like Amazon, and even in physical stores with Shopify POS (Point of Sale).
Customer Support: Shopify provides 24/7 customer support, helping users troubleshoot issues and optimize their stores.

Overall, Shopify is designed to be a comprehensive solution for businesses of all sizes to run and scale their online operations efficiently.

Liquid is an open-source template language created by Shopify. It serves as the backbone for Shopify themes and is used to dynamically generate content on storefronts.

What is a template language?

A template language is like a special set of instructions that helps you fill in the blanks on a webpage. Imagine you have a coloring book, but instead of colors, you have places where you can put in words or pictures that can change. The template language tells the computer where to put those words or pictures, so each page can look different even though you're using the same book. It’s like magic instructions that make your website do what you want!

A template language is a type of programming language used to generate dynamic content on websites or applications. It allows you to create a single template to host static content and dynamically insert information depending on where the template is rendered, making it easier to manage and display content that changes based on specific conditions or data.

Key Features of a Template Language:

Dynamic Content Rendering: Template languages enable the generation of HTML (or other markup languages) that includes dynamic content, such as user information, product details, or other data that might change.
Separation of Logic and Presentation: Template languages help separate the presentation layer (how things look) from the business logic (how things work). This separation makes it easier to manage and update websites or applications.
Use of Variables: Templates often use variables to represent data that will be dynamically inserted into the page. For example, in an e-commerce site, a variable might represent the price of a product.
Control Structures: Like traditional programming languages, template languages include control structures such as loops (for, while) and conditionals (if, else). These allow developers to control what content is displayed based on specific conditions.
Integration with Data Sources: Template languages typically integrate with data sources, such as databases, APIs, or other backend services, to pull in the necessary data for rendering.
Syntax and Tags: Template languages use special syntax, often including tags or delimiters, to define dynamic content, control flow, and other logic within a template.

Examples of Template Languages:

Liquid (used in Shopify): Liquid is a template language used in Shopify themes to dynamically generate HTML content based on Shopify data (e.g., products, collections).
ERB (Embedded Ruby): ERB is a template language in Ruby on Rails that allows Ruby code to be embedded within HTML. It’s commonly used to generate views in Rails applications.
EJS (Embedded JavaScript): EJS allows embedding JavaScript directly into HTML templates, making it a popular choice for generating dynamic content in Node.js applications.
Twig (used in Symfony, Drupal): Twig is a template engine for PHP, used in frameworks like Symfony and CMS platforms like Drupal.
Handlebars.js: Handlebars is a JavaScript-based template engine that allows for logic-less templates, often used in web development to create dynamic views in client-side applications.

Key Features of Liquid

Template Language: Liquid is used to create dynamic templates in Shopify. It allows developers to mix static HTML with dynamic content, making it possible to display different information depending on the context (e.g., product details, collections, customer data).
Tags: Liquid uses tags to create logic and control the flow of the template. For example:
- Control Flow Tags: {% if %}, {% else %}, {% endif %} allow conditional logic.
- Iteration Tags: {% for %}, {% endfor %} loop through collections of objects like products or blog posts.
- Variable Assignment: {% assign %} is used to create and set variables.
Objects: Liquid objects represent the dynamic content that can be rendered in a template. Examples include:
- {{ product.title }} to display a product's title.
- {{ collection.description }} to show a collection's description.
Filters: Filters are used to modify the output of Liquid objects. For instance:
- {{ product.price | money }} converts the price to a properly formatted currency string.
- {{ title | upcase }} converts the text to uppercase.
Outputs: Liquid's output syntax uses double curly braces {{ }} to output the content of variables or objects directly to the page.
Built for Shopify: While Liquid can be used in other contexts, it's specifically tailored for Shopify. It interacts seamlessly with Shopify’s database, allowing access to products, collections, customer data, and more.

Use Cases:

Theme Development: Liquid is heavily used in Shopify theme development to control what content is displayed and how it is displayed. For example, a theme might use Liquid to loop through products in a collection and render them on the homepage.
Customization: Store owners can customize their stores using Liquid without touching the underlying logic of Shopify itself. They can add custom features, tweak layouts, or create entirely new sections.
Email Templates: Liquid is also used to create dynamic content in Shopify's transactional emails, such as order confirmations and shipping notifications.

Example:

Here's a basic example of Liquid in a Shopify theme:

{% for product in collection.products %}
  <div class="product">
    <h2>{{ product.title }}</h2>
    <p>{{ product.price | money }}</p>
    <a href="{{ product.url }}">View Product</a>
  </div>
{% endfor %}

This code would loop through all the products in a specific collection and display their title, price, and a link to the product page.

Liquid Basics

Liquid is a template language used to dynamically display objects and their properties on web pages. You can modify how this content is displayed by using tags to create logic or by applying filters to directly change the output. In Liquid, objects and their properties are represented using six basic data types. Additionally, Liquid provides basic logical and comparison operators that can be used within tags to control the flow and content of your templates.

<title>
  {{ page_title }}
</title>
{% if page_description %}
  <meta name="description" content="{{ page_description | truncate: 150 }}">
{% endif %}

Output:

<title>
  Health potion
</title>
<meta name="description" content="Are you low on health? Well we've got the potion just for you! Just need a top up? Almost dead? In between? No need to worry because we have a ...">

Liquid logic with tags

Liquid tags are used to define logic that tells templates what to do. Text within tag delimiters doesn’t produce visible output when the webpage is rendered.

{% %} - Curly brace percentage delimiters denote logic and control flow.

For example:

{% if product.title == 'Summer Vibes' %}
  Effortless Beachwear and Accessories!
{% endif %}

Output:

Effortless Beachwear and Accessories!

Modifying output with filters

Liquid filters are tools used to change how information is displayed on a webpage. If you have a piece of information, like a price or a date, and you want to format it differently, you use filters.

Here's how it works:

Applying a Filter: To modify how information looks, you add a filter inside the curly braces {{ }} where the information is being shown. You start with the information, then add a pipe character |, followed by the filter name and any extra details needed for that filter.
Using Multiple Filters: You can also apply more than one filter to the same piece of information. Filters are applied one after the other, from left to right. For example, you might first format a date and then change its style.

Example:

Imagine you have a price that you want to format as currency and then add a symbol. Here’s how you’d do it:

{{ product.price | money | prepend: "$" }}

{{ product.price }} is the information (the price).
| money is a filter that formats the price as currency.
| prepend: "$" is another filter that adds a dollar sign before the price.

So, filters help you control exactly how information appears on your website, making it look just the way you want!

Objects

In Liquid, objects are like special containers that hold information you can use to build and customize your website. Here's a clearer breakdown:

Types of Objects:

Store Resources: These objects represent important parts of your store. For example:
- Collections: Groups of products, like a "Summer Sale" collection.
- Products: Individual items in your store, with details like price, description, and images.
Standard Content: These are built-in objects used to power Shopify themes. Examples include:
- content_for_header: A placeholder for content that appears in the header of your site.
Functional Elements: These help add interactive features to your site, like:
- paginate: Controls how your content is divided across multiple pages.
- search: Handles search functionality, allowing users to find products or content on your site.

Using Objects:

Double Curly Braces: To display the information from an object on your site, you use double curly braces {{ }}. For example, {{ product.title }} shows the title of a product.

Scope:

Global vs. Local Access: Some objects are available everywhere on your site (global), while others are only accessible in specific places (local). For example, {{ product.title }} might only work on a product page.

Creating Your Own Variables:

Variables: You can create your own variables to store and reuse data within your templates. This is done with variable tags. Once created, these variables can be used just like the built-in objects. For example:

  {% assign my_variable = "Hello, World!" %}
  {{ my_variable }}

In summary, Liquid objects and variables help you control and display different kinds of information on your website, making it easy to customize and build your store.

Some important resources

Summary

Liquid is a template language used to create dynamic and customizable websites. It lets you display and modify information using objects, such as products and collections, and apply filters to adjust how this information appears. With Liquid, you can create your own variables to store and reuse data. It helps you build and personalize your site by combining static content with dynamic elements, making it both functional and visually appealing.

Promise in JavaScript

Sarthak Chatterjee — Wed, 19 Jul 2023 19:42:10 +0000

Introduction

According to MDN documentation "The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value."
You may think that what is written over here. Yeah! It is really hard to understand specially for someone who is pretty new at JavaScript programming, web development and stuffs like that. But now let's understand the Promise together in the simplest way.

Concept of Promise in the simplest way: Imagine, Promise is a magical box that you send on a mission to fetch a toy from a toy store. The box will bring back the toy you want, but it may take some time because the store is far away.

While the box is on its way to the store, you can do other things, like playing with your other toys, instead of just waiting for the box. Once the box returns, it will either have the toy you wanted (success) or tell you that it couldn't find it (failure).

So, a Promise is like a magical box that helps you get things done while it's working on your request, and when it's done, it tells you if it succeeded or not.

Now I am sure, if you read the MDN definition again you will get atleast an idea about promise. It's time to dive deeper into it.

What is Promise?

Promise is used to handle async operations in JavaScript. Now what is an async operation?
In JavaScript, an async operation is a non-blocking operation that allows the program to perform tasks asynchronously, ensuring that the main execution thread remains responsive. Here's a short example of an async operation using the modern async/await syntax:

// Creating an async operation that resolves after a short delay
function createAsyncOperation() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Async operation complete!');
    }, 2000); // 2 seconds delay
  });
}

// An async function to handle the async operation
async function doAsyncTask() {
  console.log('Start of async task');
  const result = await createAsyncOperation();
  console.log(result);
  console.log('End of async task');
}

doAsyncTask();

Don't get confused by this code, I will explain everything.
In this example, the createeAsyncOperation() function returns a Promise that resolves with the message "Async operation complete!" after a 2-second delay. The doAsyncTask() function uses the await keyword to pause its execution until the promise returned by createAsyncOperation() is resolved. The message is then logged to the console.
When you run this code, you'll see the following output:

Start of async task
(2-second delay)
Async operation complete!
End of async task

Notice that during the 2-second delay, other code (if any) could continue to execute, and the main thread remains responsive. This is the concept of asynchronous operations in JavaScript.
So Promise is used to handle these types of async operations in JavaScript.

Promise is a part of the ES6 (ECMAScript 2015) standard and provides a cleaner way to work with asynchronous code compared to traditional callback-based approaches.
It is a built-in JavaScript object that represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.

The Promise object has three possible states:

1. Pending: The initial state when the Promise is created and the asynchronous operation is still ongoing.

2. Fulfilled: The state when the asynchronous operation is successfully completed, and the Promise has a resolved value.

3. Rejected: The state when the asynchronous operation encounters an error or fails, and the Promise has a reason for rejection.

When to use it?

In JavaScript, you should use a Promise when dealing with asynchronous operations, such as network requests, file operations, or any task that may take some time to complete. Promises offer a clean and structured approach to manage asynchronous code, making it easier to handle callbacks and avoid the pitfalls of callback hell.
A Promise is used to wrap an asynchronous operation and allows you to handle its outcome using then() and catch() methods. When the operation completes, the Promise either calls the resolve() function (for success) or the reject() function (for failure) to transition to the appropriate state.

How to use it?

Suppose we have cart of shopping items.

 const cart = ['item1', 'item2', 'item3'];

We have three functions, createOrder(), orderId() and proceedToPayment().
First let us see the call back approach for a simple shopping system starting from cart to a successful payment:

// Cart array
const cart = ['item1', 'item2', 'item3'];
// Imagine all functions are defined somewhere
// Using callbacks to handle the async operations
createOrder((order) => {
  orderId(order, (orderId) => {
    console.log('Order ID:', orderId);
    proceedToPayment(orderId, (paymentStatus) => {
      console.log(paymentStatus);
    });
  });
});

With out promise we can face the callback hell, inversion of control.

Callback Hell : Callback hell refers to the situation in asynchronous JavaScript programming where multiple nested callbacks make the code difficult to read, maintain, and understand. This happens when one asynchronous operation depends on the result of another, leading to deeply nested functions.

Example of Callback Hell:

asyncFunction1((result1) => {
  asyncFunction2(result1, (result2) => {
    asyncFunction3(result2, (result3) => {
      // More nested callbacks...
    });
  });
});

Inversion of Control : Inversion of Control (IoC) in asynchronous programming means letting external functions or libraries control when certain parts of your code execute. Callbacks are a basic form of IoC where you hand over control to functions you pass as callbacks.
By using Promises or async/await, the flow of execution is controlled by the Promise library or the JavaScript runtime, respectively, which allows you to write asynchronous code in a more sequential and readable manner. This helps avoid callback hell and leads to more maintainable and easier-to-understand code.
Now we will see the promise approach of the same code we've seen (shopping) :

// Cart array
const cart = ['item1', 'item2', 'item3'];

// Using Promises to handle the async operations
createOrder()
  .then((order) => orderId(order))
  .then((orderId) => {
    console.log('Order ID:', orderId);
    return proceedToPayment(orderId);
  })
  .then((paymentStatus) => {
    console.log(paymentStatus);
  })
  .catch((error) => {
    console.error('Error occurred:', error);
  });

In this example, we've refactored the callback-based code into Promise-based code. The createOrder(), orderId(), and proceedToPayment() functions now return Promises, allowing us to chain them together using then() to handle the results of each async operation. If any error occurs at any stage, the catch() method will catch and handle it. This approach makes the code more readable and avoids callback hell.

Creating a Promise

Remember the "Magical box"?
Creating a Promise in JavaScript is like making a promise to do something and giving the magical box to someone else to fulfill that promise. The magical box represents the Promise object, and it can be in three states: pending (waiting to fulfill the promise), fulfilled (successfully completed the promise), or rejected (couldn't fulfill the promise).

To create a Promise, you use the new Promise() constructor and pass a function with two parameters: resolve and reject. Inside this function, you do the task you promised, and then you call resolve() when it's successful or reject() when it's not.

Here's a simple example:

const magicBox = new Promise((resolve, reject) => {
  // Do something (e.g., fetching data from a server)
  // If successful, call resolve with the result
  // If there's an error, call reject with the error
});

Once you create the Promise, you can use .then() to handle the successful result and .catch() to handle the error:

magicBox
  .then((result) => {
    // Handle the successful result
  })
  .catch((error) => {
    // Handle the error
  });

JavaScript functions that return Promises

Functions are designed to perform tasks that may take some time, such as reading files, making network requests, or interacting with databases return Promise. By returning a Promise, these functions allow you to work with the results of the asynchronous task once it is completed, using then() and catch() methods.
Here are some examples of functions that return Promises:

Fetching data from a server using fetch() (a built-in function that returns a Promise).
Making an HTTP request using a library like Axios (Axios itself returns a Promise).
In MongoDB, using Promises can be particularly useful when dealing with asynchronous operations, such as querying the database, inserting data, or updating records. MongoDB itself doesn't return Promises by default, but many modern MongoDB drivers, like Mongoose, support Promises natively or can be easily wrapped in Promises for better handling of asynchronous operations.

Summary

In simple words, a Promise in JavaScript is a way to handle tasks that take some time, like fetching data from the internet. It's like making a promise to get the data, and when the data is ready, the Promise will let you know if it succeeded or if there was a problem. Promises help you keep your code organized and avoid getting stuck waiting for tasks to finish.

DEV Community: Sarthak Chatterjee

Immutability vs Mutability in JavaScript

🔹 What is Mutability?

🧾 Primitive Data Types (Immutable)

✅ Example:

📦 Reference Data Types (Mutable)

✅ Example of Mutability:

✅ Making Reference Types Immutable (Using Spread Operator or Object.assign)

Example using Spread Operator:

🧠 Why Immutability Matters?

⚡ Quick Summary

💡 Final Thoughts

Best Practices for Component Reusability in Large React Projects

🌱 Getting Started: What is Component Reusability?

Simple Example:

🧩 Step Up: Making Components More Flexible

Add Variants:

Real-World Scenario:

📦 Organizing a Component Library

Folder Structure for Scalability:

Index File Example:

🎯 Advanced Technique for Reusability

Higher-Order Components (HOC)

🏢 Real-Life Use Case: Large-Scale E-commerce Platform

🚀 Tips for Scaling Component Reusability

🧠 Final Thoughts

ReactJS Performance Optimization: Best Practices

1. Optimizing Large Imports in React with Lazy Loading

2. Using useMemo in React

What is useMemo?

The Problem: Expensive Calculations

Optimizing with useMemo

How This Helps

3. Using useCallback in React

What is useCallback?

The Problem: Unnecessary Function Re-Creation

What’s Wrong?

Optimizing with useCallback

How This Helps

What is liquid (Shopify) ?

Introduction

Key Features of Liquid

Use Cases:

Example:

Liquid Basics

Liquid logic with tags

Modifying output with filters

Objects

Types of Objects:

Using Objects:

Scope:

Creating Your Own Variables:

Some important resources

Summary

Promise in JavaScript

Introduction

What is Promise?

When to use it?

How to use it?

Creating a Promise

JavaScript functions that return Promises

Summary

✅ Making Reference Types Immutable (Using Spread Operator or `Object.assign`)

2. Using `useMemo` in React

What is `useMemo`?

Optimizing with `useMemo`

3. Using `useCallback` in React

What is `useCallback`?

Optimizing with `useCallback`