Frontend ki baat cheet

React Performance Optimization

paras jain — Tue, 31 Mar 2026 06:31:29 GMT

React Performance Optimization : Deep Dive into React.memo, useMemo, useCallback & Lazy Loading

When building scalable React apps, performance becomes critical.

React gives us powerful tools to:

Prevent unnecessary re-renders
Avoid expensive recalculations
Reduce bundle size

Let’s break them down deeply 👇

🧠 1. `React.memo` — Component Memoization

📌 What is it?

React.memo is a Higher Order Component (HOC) that prevents re-rendering of a component if props haven’t changed.

🔍 How React Normally Works

Whenever a parent re-renders: 👉 All child components re-render by default

Even if props are the same 😬

✅ Solution

const Child = React.memo(({ name }) => {
  console.log("Child Rendered");
  return {name};
});

⚙️ Under the Hood

Performs shallow comparison of props
If props unchanged → skips render

⚠️ Important Gotcha

❌ This will re-render every time Why? → New object reference on every render

✅ Fix

const user = useMemo(() => ({ name: "Paras" }), []);

🔥 When to Use

✔ Pure functional components ✔ Expensive UI rendering ✔ Large lists / tables

❌ When NOT to Use

❌ Small/simple components ❌ Props change frequently

🧠 2. `useMemo` — Value Memoization

📌 What is it?

Caches the result of a computed value and recalculates only when dependencies change.

🧠 Syntax

const memoizedValue = useMemo(() => computeFn(), [deps]);

🔥 Example

const sortedList = useMemo(() => {
  console.log("Sorting...");
  return items.sort((a, b) => a.price - b.price);
}, [items]);

⚠️ Without `useMemo`

Sorting runs on every render
Bad for large datasets

💡 Real Use Cases

Sorting / filtering lists
Expensive calculations
Derived state

⚠️ Common Mistake

const value = useMemo(() => num * 2, []);

❌ Missing dependency → stale value bug

🧠 Rule

👉 Always include all dependencies

🧠 3. `useCallback` — Function Memoization

📌 What is it?

Returns a memoized function (same reference unless dependencies change)

🧠 Syntax

const memoizedFn = useCallback(() => {}, [deps]);

🔥 Problem Without It

const handleClick = () => {};

👉 New function created every render 👉 Causes child re-renders

✅ With `useCallback`

const handleClick = useCallback(() => {
  console.log("Clicked");
}, []);

🔗 Real Use Case (Important)

const Child = React.memo(({ onClick }) => {
  console.log("Child rendered");
  return ;
});

const Parent = () => {
  const handleClick = useCallback(() => {
    console.log("Clicked");
  }, []);

  return ;
};

✔ Child will NOT re-render unnecessarily

⚠️ Important Insight

👉 useCallback is mainly useful with:

React.memo
Dependency arrays

🔁 `useMemo` vs `useCallback`

Feature	useMemo	useCallback
Returns	Value	Function
Use case	Expensive computation	Stable function reference
Internally	Runs function	Returns function

🚀 4. Lazy Loading & Code Splitting

📌 Problem

React apps bundle everything into one file → large bundle size → slow initial load

✅ Solution: Code Splitting

Load components only when needed

🔹 `React.lazy`

const Dashboard = React.lazy(() => import("./Dashboard"));

🔹 `Suspense`

Loading...}>

🧠 What Happens?

Component is NOT loaded initially
When needed → dynamically imported
Fallback UI shown while loading

🔥 Best Use Cases

Route-based splitting (React Router)
Heavy components (charts, dashboards)
Admin panels

⚠️ Limitation

❌ Works only with default exports

✅ Fix

const Dashboard = React.lazy(() =>
  import("./Dashboard").then(module => ({ default: module.Dashboard }))
);

⚡ Combining Everything (Real-World Pattern)

const List = React.memo(({ items, onSelect }) => {
  console.log("List rendered");
  return items.map(item => (
     onSelect(item)}>
      {item.name}
    
  ));
});

function App({ data }) {
  const sortedData = useMemo(() => {
    return data.sort((a, b) => a.name.localeCompare(b.name));
  }, [data]);

  const handleSelect = useCallback((item) => {
    console.log(item);
  }, []);

  return ;
}

⚠️ Over-Optimization Trap (VERY IMPORTANT)

Most beginners do this:

useMemo(() => value, []);
useCallback(() => {}, []);
React.memo(Component);

❌ Everywhere.

🧠 Reality:

These hooks also have a cost:

Memory overhead
Comparison cost

✅ Rule of Thumb

👉 Use only when:

Re-render is actually expensive
You see performance issues
Profiling shows bottlenecks

🧪 How to Decide? (Pro Tip)

Use React DevTools Profiler

👉 Check:

Which component re-renders
How often
How long it takes

🧠 Final Mental Model

Tool	Think Like
React.memo	"Skip re-render if same props"
useMemo	"Cache computed value"
useCallback	"Cache function reference"
React.lazy	"Load component later"

🏁 Conclusion

React performance optimization is not about using all tools everywhere — it’s about using the right tool at the right place.

First make it work. Then make it fast. 🚀

Project Setup - Webpack

paras jain — Sat, 07 Mar 2026 12:29:28 GMT

Create Project Folder

First create a clean project.

mkdir ecommerce-webpack
cd ecommerce-webpack

Now initialize npm.

npm init -y

This creates:

package.json

Why?

package.json manages:

dependencies
scripts
project metadata

Example later:

npm run dev
npm run build

Install Core Dependencies

Now install Webpack + loaders + tools.

npm install --save-dev \
webpack \
webpack-cli \
webpack-dev-server \
html-webpack-plugin \
mini-css-extract-plugin \
css-loader \
sass \
sass-loader \
style-loader \
handlebars \
handlebars-loader \
babel-loader \
@babel/core \
@babel/preset-env \
clean-webpack-plugin

What these do

Package	Purpose
webpack	bundler
webpack-cli	run webpack from terminal
webpack-dev-server	local development server
html-webpack-plugin	auto generate HTML
mini-css-extract-plugin	extract css into files
sass	SCSS compiler
sass-loader	lets webpack compile SCSS
css-loader	import css in JS
style-loader	inject css to DOM
handlebars	template engine
handlebars-loader	compile handlebars
babel-loader	convert ES6 to browser compatible JS
clean-webpack-plugin	cleans dist folder

Install Bootstrap

npm install bootstrap

We will import only SCSS parts.

Install Husky

Husky helps enforce clean commits.

npm install husky --save-dev

Enable husky:

npx husky install

Add prepare script.

Open package.json

"scripts": {
  "prepare": "husky install"
}

Create Folder Structure

Create folder structure, example:

ecommerce-webpack
│
├── src
│   ├── assets
│   │   ├── images
│   │   └── icons
│   │
│   ├── js
│   │   ├── api
│   │   ├── components
│   │   ├── pages
│   │   └── utils
│   │
│   ├── scss
│   │   ├── base
│   │   ├── components
│   │   ├── layout
│   │   └── main.scss
│   │
│   ├── templates
│   │   ├── components
│   │   └── pages
│   │
│   ├── index.html
│   └── index.js
│
├── webpack
│   ├── webpack.dev.js
│   └── webpack.prod.js
│
├── dist
└── package.json

Why this structure?

Folder	Purpose
assets	images/icons
js	all JS logic
scss	styles
templates	handlebars
pages	page specific code
components	reusable UI

This matches industry frontend architecture.

Create Entry File

Create:

src/index.js

Example:

import './scss/main.scss'

console.log("App started")

Create Base HTML

Create:

src/index.html

Example:




  
  E-Commerce

Webpack will inject JS automatically.

Setup SCSS Entry

Create:

src/scss/main.scss

Example:

@import "bootstrap/scss/bootstrap";

body{
  background:#f8f9fa;
}

Create Webpack Dev Config

Create:

webpack/webpack.dev.js

Example basic config:

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',

  entry: './src/index.js',

  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, '../dist'),
    clean: true
  },

  devServer: {
    static: './dist',
    port: 3000,
    open: true
  },

  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['style-loader','css-loader','sass-loader']
      },
      {
        test: /\.hbs$/,
        loader: 'handlebars-loader'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({
      template:'./src/index.html'
    })
  ]
}

Babel Config

Create:

.babelrc

{
 "presets": ["@babel/preset-env"]
}

Add Scripts

In package.json

"scripts": {
  "dev": "webpack serve --config webpack/webpack.dev.js",
  "build": "webpack --config webpack/webpack.prod.js"
}

Run Project

Start dev server:

npm run dev

Git & GitHub Branching

paras jain — Sat, 14 Feb 2026 14:12:18 GMT

If you're starting your developer journey (especially as a student or aspiring MERN stack dev), mastering Git workflow is non-negotiable.

In this guide, I’ll teach you step-by-step how to:

✅ Create a GitHub repository
✅ Create a develop branch
✅ Create a feature branch
✅ Commit your changes
✅ Push branches to GitHub
✅ Merge feature → develop
✅ Push updated develop
✅ Merge develop → main

This is a real-world workflow used in companies.

🧠 Why This Workflow?

Instead of working directly on main, professional teams follow:

main → production-ready code
develop → integration branch
feature/* → individual features

This keeps code clean and production safe.

🏗 Step 1: Create a GitHub Repository

Go to GitHub
Click New Repository
Name it (example: inventory-app)
Click Create repository

Now copy the HTTPS URL.

Example:

https://github.com/yourusername/inventory-app.git

💻 Step 2: Clone the Repository

git clone https://github.com/yourusername/inventory-app.git
cd inventory-app

Check branch:

git branch

By default, you’ll be on:

main

🌱 Step 3: Create a `develop` Branch

git checkout -b develop

Push it to GitHub:

git push -u origin develop

Now your repo has:

main
develop

✨ Step 4: Create a Feature Branch

Let’s say you're building a login feature.

git checkout develop
git checkout -b feature/login

Now you are working safely inside:

feature/login

📝 Step 5: Add & Commit Changes

After writing your code:

git add .
git commit -m "feat: add login functionality"

Pro Tip:
Use meaningful commit messages like:

feat: for features
fix: for bug fixes
refactor: for improvements

☁️ Step 6: Push Feature Branch

git push -u origin feature/login

Now go to GitHub → You’ll see a Compare & Pull Request option.

🔀 Step 7: Merge Feature → Develop

Option 1: Using GitHub (Recommended for Teams)

Open Pull Request
Base: develop
Compare: feature/login
Click Merge Pull Request

Done ✅

Option 2: Using Terminal

git checkout develop
git merge feature/login

🚀 Step 8: Push Updated Develop

After merging locally:

git push origin develop

Now develop contains your new feature.

🔥 Step 9: Merge Develop → Main (Release)

When your features are tested and stable:

git checkout main
git merge develop
git push origin main

Now production (main) is updated 🎉

📊 Final Branch Structure

main
develop
feature/login
feature/dashboard
feature/payment

🧼 Optional: Delete Feature Branch After Merge

git branch -d feature/login
git push origin --delete feature/login

Keeps your repo clean.

🎯 Real-World Flow Summary

1. Create repo
2. Create develop
3. Create feature branch from develop
4. Commit changes
5. Push feature
6. Merge feature → develop
7. Push develop
8. Merge develop → main

Building a Reusable Styled Table Using Web Components (Step-by-Step)

paras jain — Thu, 05 Feb 2026 06:44:24 GMT

Web Components allow us to create reusable, framework-free UI components using native browser APIs. In this article, we’ll build a styled table component that:

Works like a custom HTML tag
Has scoped CSS using Shadow DOM
Accepts headers via HTML attributes
Accepts data via JavaScript

No React. No Vue. Just pure JavaScript.

Step 1: `index.html` – Using the Custom Element




  
  Web Components Table

Explanation

is not a native HTML tag — we’ll define it ourselves.
data-headers is a configuration attribute that controls table headers.
type="module" is required to use ES module imports in the browser.

At this point, the browser doesn’t know what is — we’ll fix that next.

Step 2: `index.js` – Registering the Web Component

import { StyledTable } from "./components/styled-table.js";

customElements.define("styled-table", StyledTable);

const usersTable = document.getElementById("users");

const data = [
  ["8831", "dcode", "Australia"],
  ["8832", "paras", "India"]
];

usersTable.data = data;

Explanation

customElements.define() registers a new HTML tag.
Custom element names must contain a dash.
Once registered, the browser understands .

We also assign data using:

usersTable.data = ...

This works because the component exposes a setter, which we’ll implement later.

Step 3: Creating the Custom Element Class

components/styled-table.js

export class StyledTable extends HTMLElement {

  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

Explanation

extends HTMLElement tells the browser this is a custom HTML element.
super() is required to properly initialize the element.
attachShadow({ mode: "open" }) creates a Shadow DOM, which:
- Isolates HTML and CSS
- Prevents global styles from leaking in
- Keeps component styles scoped

Step 4: Lifecycle – `connectedCallback()`

  connectedCallback() {
    const headers = this.dataset.headers
      ?.split(",")
      .map(h => h.trim()) || [];

    this.shadowRoot.innerHTML = `
      

      
            ${headers.map(h => ``).join("")}
          
        
          ${h}
        
        
      
    `;
  }

Explanation

connectedCallback() runs when the element is added to the DOM.
this.dataset.headers reads data-headers from HTML.
split(",") + trim() converts the string into a clean array.
We generate elements dynamically using map().

This makes the component configurable from HTML.

Step 5: Scoped Styling with Shadow DOM

components/sl.css

table {
  border-collapse: collapse;
  font-family: Inter, sans-serif;
  font-size: 0.85rem;
  min-width: 400px;
}

thead tr {
  background-color: #009578;
  color: white;
  text-align: left;
}

th, td {
  padding: 6px 12px;
  font-weight: normal;
}

tbody tr {
  border-bottom: 1px solid #ddd;
}

tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

Explanation

The CSS is loaded inside the Shadow DOM.
These styles only affect this component.
No class names are needed — we can target elements directly.

This is one of the biggest advantages of Web Components.

Step 6: Passing Data via a Public API

Back in styled-table.js:

  set data(data) {
    const tbody = this.shadowRoot.querySelector("tbody");

    tbody.innerHTML = "";

    const rows = data.map(rowData => {
      const row = document.createElement("tr");

      const cells = rowData.map(cellData => {
        const cell = document.createElement("td");
        cell.textContent = cellData;
        return cell;
      });

      row.append(...cells);
      return row;
    });

    tbody.append(...rows);
  }
}

Explanation

We expose a setter called data.
This allows clean usage like:
```
  table.data = [...]
```
The component controls how the DOM is updated.
External code never touches internal markup.

This pattern makes the component safe, reusable, and maintainable.

Final Result

We now have:

A custom HTML tag
Scoped HTML and CSS
Dynamic headers via attributes
Dynamic rows via JavaScript
Zero frameworks

All using native browser APIs.

When Should You Use Web Components?

Web Components are perfect for:

Design systems
Reusable widgets
Framework-agnostic UI libraries
Projects where you want long-term maintainability

They can even coexist with React, Vue, or plain HTML.

Closing Thoughts

This example shows how powerful Web Components can be when used correctly. With Shadow DOM, lifecycle methods, and clean public APIs, we can build components that scale just like framework components — without the framework.

Pure CSS Carousel Walkthrough

paras jain — Thu, 05 Feb 2026 06:41:34 GMT

I have converted the testimonial carousel from a JavaScript-based implementation to a pure CSS solution using the radio button technique.

Changes Made

1. HTML Overhaul

Added Hidden Radio Buttons: Two radio buttons (#dot-1 and #dot-2) were added to the top of the testimonial section to track the carousel state.
Converted Dots to Labels: The navigation dots are now elements linked to the radio buttons using the for attribute. This allows clicking the dots to toggle the radio buttons without any JS.
Removed Script Tag: The dedicated

Frontend ki baat cheet

React Performance Optimization

🧠 1. React.memo — Component Memoization

📌 What is it?

🔍 How React Normally Works

✅ Solution

{name}

⚙️ Under the Hood

⚠️ Important Gotcha

✅ Fix

🔥 When to Use

❌ When NOT to Use

🧠 2. useMemo — Value Memoization

📌 What is it?

🧠 Syntax

🔥 Example

⚠️ Without useMemo

💡 Real Use Cases

⚠️ Common Mistake

🧠 Rule

🧠 3. useCallback — Function Memoization

📌 What is it?

🧠 Syntax

🔥 Problem Without It

✅ With useCallback

🔗 Real Use Case (Important)

⚠️ Important Insight

🔁 useMemo vs useCallback

🚀 4. Lazy Loading & Code Splitting

📌 Problem

✅ Solution: Code Splitting

🔹 React.lazy

🔹 Suspense

🧠 What Happens?

🔥 Best Use Cases

⚠️ Limitation

✅ Fix

⚡ Combining Everything (Real-World Pattern)

⚠️ Over-Optimization Trap (VERY IMPORTANT)

🧠 Reality:

✅ Rule of Thumb

🧪 How to Decide? (Pro Tip)

🧠 Final Mental Model

🏁 Conclusion

Project Setup - Webpack

Create Project Folder

Why?

Install Core Dependencies

What these do

Install Bootstrap

Install Husky

Create Folder Structure

Why this structure?

Create Entry File

Create Base HTML

Setup SCSS Entry

Create Webpack Dev Config

Babel Config

Add Scripts

Run Project

Git & GitHub Branching

🧠 Why This Workflow?

🏗 Step 1: Create a GitHub Repository

💻 Step 2: Clone the Repository

🌱 Step 3: Create a develop Branch

✨ Step 4: Create a Feature Branch

📝 Step 5: Add & Commit Changes

☁️ Step 6: Push Feature Branch

🔀 Step 7: Merge Feature → Develop

Option 1: Using GitHub (Recommended for Teams)

Option 2: Using Terminal

🚀 Step 8: Push Updated Develop

🔥 Step 9: Merge Develop → Main (Release)

📊 Final Branch Structure

🧼 Optional: Delete Feature Branch After Merge

🎯 Real-World Flow Summary

Building a Reusable Styled Table Using Web Components (Step-by-Step)

Step 1: index.html – Using the Custom Element

Explanation

Step 2: index.js – Registering the Web Component

🧠 1. `React.memo` — Component Memoization

🧠 2. `useMemo` — Value Memoization

⚠️ Without `useMemo`

🧠 3. `useCallback` — Function Memoization

✅ With `useCallback`

🔁 `useMemo` vs `useCallback`

🔹 `React.lazy`

🔹 `Suspense`

🌱 Step 3: Create a `develop` Branch

Step 1: `index.html` – Using the Custom Element

Step 2: `index.js` – Registering the Web Component

Step 4: Lifecycle – `connectedCallback()`