DEV Community: smrpdl1991

Why Learning React Hooks is Exactly Like Running a Desi Household

smrpdl1991 — Fri, 19 Dec 2025 17:13:40 +0000

Hello Developers!

If you're just starting with React, "Hooks" and "Lifecycle" can sound intimidating. But what if I told you that you already understand React? If you've ever managed a joint family, handled monthly expenses, or dealt with relatives, you're already a React pro.

Let's break down every React hook using the logic of a South Asian (Desi) household with simple, real examples.

The "Daily Essentials" (Core Hooks)

1. `useState` — Your Wallet (Jeb Kharch)

What it does: Remembers and updates a value in your component.

Desi Analogy: Your pocket money. You start with ₹500. When you buy samosas, the amount changes, and you need to remember the new balance.

Real Example:

import { useState } from 'react';

function WalletApp() {
  const [balance, setBalance] = useState(500); // Start with ₹500

  return (
    <div>
      <h2>Current Balance: ₹{balance}</h2>
      <button onClick={() => setBalance(balance - 50)}>
        Buy Samosas (₹50)
      </button>
      <button onClick={() => setBalance(balance + 100)}>
        Mom gave money (₹100)
      </button>
    </div>
  );
}

When to use: Anytime you need to remember and update a simple value (numbers, text, true/false).

2. `useEffect` — The Water Motor (Pani ki Tanki)

What it does: Runs code AFTER your component appears on screen. Used for side effects like fetching data, timers, or subscriptions.

Desi Analogy: You turn ON the water motor when you wake up. The tank fills automatically. But before you sleep, you must turn it OFF (cleanup), or water will overflow and waste!

Real Example:

import { useEffect, useState } from 'react';

function MotorApp() {
  const [waterLevel, setWaterLevel] = useState(0);

  useEffect(() => {
    // Turn motor ON
    console.log("Motor started!");
    const motor = setInterval(() => {
      setWaterLevel(prev => prev + 10);
    }, 1000);

    // Cleanup: Turn motor OFF when component disappears
    return () => {
      console.log("Motor stopped!");
      clearInterval(motor);
    };
  }, []); // Empty array = Run only once when component appears

  return <h2>Water Level: {waterLevel}%</h2>;
}

When to use: Fetching data from API, setting up timers, subscribing to events.

3. `useContext` — Family Values (Gharelu Sanskaar)

What it does: Shares data across many components without passing props manually through each level.

Desi Analogy: Family reputation and values. You don't teach each cousin individually how to behave with guests. Everyone just knows because "it's in the family culture." The values are shared automatically.

Real Example:

import { createContext, useContext, useState } from 'react';

// Create family values
const FamilyContext = createContext();

function GrandpaHouse() {
  const [familyMotto] = useState("Respect elders, help others");

  return (
    <FamilyContext.Provider value={familyMotto}>
      <Parent />
    </FamilyContext.Provider>
  );
}

function Parent() {
  return <Child />;
}

function Child() {
  // Child directly accesses family motto (no prop drilling!)
  const motto = useContext(FamilyContext);
  return <h3>Our family says: {motto}</h3>;
}

When to use: Sharing theme (dark/light mode), user info, language settings across many components.

The "Efficiency Experts" (Performance Hooks)

4. `useMemo` — Ginger-Garlic Paste (Adrak-Lehsan ka Paste)

What it does: Saves the result of an expensive calculation. Only recalculates when needed.

Desi Analogy: Grinding ginger-garlic paste is hard work. You do it once and store it in the fridge. You only re-grind when you buy fresh ginger or garlic. You don't grind it fresh every single time you cook!

Real Example:

import { useMemo, useState } from 'react';

function SpiceShop() {
  const [ginger, setGinger] = useState("fresh");
  const [garlic, setGarlic] = useState("fresh");
  const [randomClicks, setRandomClicks] = useState(0);

  // Heavy grinding operation
  const paste = useMemo(() => {
    console.log("Grinding paste...");
    return `${ginger}-${garlic} paste ready!`;
  }, [ginger, garlic]); // Only re-grind if ginger or garlic changes

  return (
    <div>
      <h3>{paste}</h3>
      <button onClick={() => setGinger("old")}>Ginger got old</button>
      <button onClick={() => setRandomClicks(randomClicks + 1)}>
        Random click (count: {randomClicks})
      </button>
      {/* Paste doesn't re-grind on random clicks! */}
    </div>
  );
}

When to use: Expensive calculations, filtering large lists, complex math operations.

5. `useCallback` — The Tea Recipe Muscle Memory

What it does: Saves the function itself so it doesn't get recreated on every render.

Desi Analogy: You memorized the exact way to pour tea with perfect foam. Once learned, your hands "remember" the movement. You don't re-learn the pouring technique every time a guest arrives—your muscle memory does it.

Real Example:

import { useCallback, useState } from 'react';

function ChaiShop() {
  const [sugar, setSugar] = useState(2);

  // Save the tea recipe (function won't be recreated unless sugar changes)
  const makeTea = useCallback(() => {
    console.log(`Making tea with ${sugar} spoons of sugar`);
  }, [sugar]);

  return (
    <div>
      <button onClick={makeTea}>Make Tea</button>
      <button onClick={() => setSugar(sugar + 1)}>More Sugar</button>
      <ExpensiveChild onMakeTea={makeTea} />
    </div>
  );
}

// This child won't re-render unnecessarily
function ExpensiveChild({ onMakeTea }) {
  console.log("Child rendered");
  return <button onClick={onMakeTea}>Guest wants tea</button>;
}

When to use: Passing functions to child components (especially with React.memo), preventing unnecessary re-renders.

The "Management" Hooks

6. `useReducer` — Grandfather's Account Register (Dada-ji ka Hisaab)

What it does: Manages complex state with clear rules and actions.

Desi Analogy: In a joint family, money is with Grandfather. You can't just take it. You tell him the ACTION ("I need money for milk"). He checks his RULES (reducer function), updates the register, and gives you the amount.

Real Example:

import { useReducer } from 'react';

// Grandfather's rules
function moneyReducer(currentMoney, action) {
  switch(action.type) {
    case 'BUY_MILK':
      return currentMoney - 100;
    case 'BUY_VEGETABLES':
      return currentMoney - 200;
    case 'MONTHLY_SALARY':
      return currentMoney + 5000;
    default:
      return currentMoney;
  }
}

function FamilyAccount() {
  const [money, dispatch] = useReducer(moneyReducer, 10000); // Start with ₹10,000

  return (
    <div>
      <h2>Family Money: ₹{money}</h2>
      <button onClick={() => dispatch({type: 'BUY_MILK'})}>
        Buy Milk (-₹100)
      </button>
      <button onClick={() => dispatch({type: 'BUY_VEGETABLES'})}>
        Buy Vegetables (-₹200)
      </button>
      <button onClick={() => dispatch({type: 'MONTHLY_SALARY'})}>
        Salary Day! (+₹5000)
      </button>
    </div>
  );
}

When to use: Complex state with multiple related values, state that changes based on different actions.

7. `useRef` — The Junk Drawer (Kabaad ka Drawer)

What it does: Stores a value that persists but doesn't cause re-renders when changed. Also used to directly access DOM elements.

Desi Analogy: A drawer where you keep spare keys. You can change which key is in there anytime, but changing keys doesn't mean you repaint the whole house! It's just... there, waiting when needed.

Real Example 1 - Accessing DOM:

import { useRef } from 'react';

function FocusInput() {
  const inputRef = useRef(null);

  const focusOnInput = () => {
    // Directly grab the input element (like grabbing a key from drawer)
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} placeholder="Your name" />
      <button onClick={focusOnInput}>Focus on Input</button>
    </div>
  );
}

Real Example 2 - Storing Values:

function Timer() {
  const countRef = useRef(0);

  const handleClick = () => {
    countRef.current = countRef.current + 1;
    console.log(`Clicked ${countRef.current} times`);
    // Component doesn't re-render! Just silently remembers the count.
  };

  return <button onClick={handleClick}>Click me</button>;
}

When to use: Accessing input fields, storing timer IDs, keeping track of previous values without causing re-renders.

The Specialized Hooks

8. `useId` — Citizen Card for Components

What it does: Generates a unique ID for accessibility.

Desi Analogy: Every person needs a unique citizen
card so the government doesn't mix you up with your cousin who has the same name.

Real Example:

import { useId } from 'react';

function LoginForm() {
  const emailId = useId();
  const passwordId = useId();

  return (
    <form>
      <label htmlFor={emailId}>Email:</label>
      <input id={emailId} type="email" />

      <label htmlFor={passwordId}>Password:</label>
      <input id={passwordId} type="password" />
    </form>
  );
}

When to use: Connecting labels to inputs for accessibility.

9. `useTransition` — The Polite Host

What it does: Marks an update as non-urgent so UI stays responsive.

Desi Analogy: A guest arrives while you're doing laundry. You immediately greet them (urgent), but continue the laundry in the background (non-urgent). You're being a polite host—guest feels welcome, and laundry still gets done.

Real Example:

import { useTransition, useState } from 'react';

function SearchApp() {
  const [input, setInput] = useState('');
  const [list, setList] = useState([]);
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    setInput(e.target.value); // Update immediately (urgent)

    startTransition(() => {
      // Heavy filtering (non-urgent, can wait)
      const filtered = bigDataArray.filter(item => 
        item.includes(e.target.value)
      );
      setList(filtered);
    });
  };

  return (
    <div>
      <input value={input} onChange={handleChange} />
      {isPending && <p>Searching...</p>}
      <ul>{list.map(item => <li key={item}>{item}</li>)}</ul>
    </div>
  );
}

When to use: Heavy updates that shouldn't freeze the UI (searching, filtering large lists).

10. `useDeferredValue` — The Slow "Hanji, Aa Raha Hoon"

What it does: Shows an old value while the new one is loading.

Desi Analogy: Mom calls you. You reply "Coming!" immediately so she knows you heard. But you take a few seconds to actually finish your task and show up.

Real Example:

import { useDeferredValue, useState } from 'react';

function SearchWithDefer() {
  const [input, setInput] = useState('');
  const deferredInput = useDeferredValue(input);

  return (
    <div>
      <input 
        value={input} 
        onChange={(e) => setInput(e.target.value)} 
      />
      <p>Current: {input}</p>
      <p>Deferred: {deferredInput}</p>
      <ExpensiveList query={deferredInput} />
    </div>
  );
}

When to use: Similar to useTransition, but you defer a value instead of a state update.

11. `useSyncExternalStore` — The Cricket Score Ticker

What it does: Syncs your React component with an external data source.

Desi Analogy: Cricket match is happening outside. You have a ticker in your house that updates live. Your house (component) stays in sync with the outside world (external store).

Real Example:

import { useSyncExternalStore } from 'react';

// External store (not React state)
let currentOnlineStatus = navigator.onLine;
let listeners = [];

const onlineStore = {
  subscribe(callback) {
    listeners.push(callback);
    window.addEventListener('online', callback);
    window.addEventListener('offline', callback);
    return () => {
      window.removeEventListener('online', callback);
      window.removeEventListener('offline', callback);
    };
  },
  getSnapshot() {
    return navigator.onLine;
  }
};

function OnlineStatus() {
  const isOnline = useSyncExternalStore(
    onlineStore.subscribe,
    onlineStore.getSnapshot
  );

  return <h2>{isOnline ? 'Online' : 'Offline'}</h2>;
}

When to use: Connecting to browser APIs, Redux stores, or other external data sources.

What's New in React 19?

React 19 introduces hooks that handle forms and loading states automatically.

12. `useActionState` — The Passport Office Status

What it does: Tracks form submission status (pending, error, success) automatically.

Desi Analogy: You submit documents at the passport office. You get three statuses: "Processing" (pending), "Rejected" (error), or "Approved" (success).

Real Example:

import { useActionState } from 'react';

async function submitForm(prevState, formData) {
  const name = formData.get('name');
  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 2000));
  return { success: true, message: `Welcome ${name}!` };
}

function PassportForm() {
  const [state, formAction, isPending] = useActionState(submitForm, null);

  return (
    <form action={formAction}>
      <input name="name" placeholder="Your name" />
      <button disabled={isPending}>
        {isPending ? 'Processing...' : 'Submit'}
      </button>
      {state?.message && <p>{state.message}</p>}
    </form>
  );
}

When to use: Forms with loading states and server actions.

13. `useOptimistic` — Printing Wedding Cards Early

What it does: Shows success UI immediately while waiting for server confirmation.

Desi Analogy: Marriage is 99% fixed. You start printing wedding cards before the official stamp, because you're confident it'll happen. If it falls through (rare), you cancel the cards.

Real Example:

import { useOptimistic, useState } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (state, newTodo) => [...state, { id: Date.now(), text: newTodo, pending: true }]
  );

  const handleSubmit = async (e) => {
    e.preventDefault();
    const text = e.target.todo.value;

    // Show immediately (optimistic)
    addOptimisticTodo(text);

    // Actually save to server
    const saved = await saveTodoToServer(text);
    setTodos([...todos, saved]);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="todo" />
      <button>Add</button>
      <ul>
        {optimisticTodos.map(todo => (
          <li key={todo.id} style={{ opacity: todo.pending ? 0.5 : 1 }}>
            {todo.text}
          </li>
        ))}
      </ul>
    </form>
  );
}

When to use: Improving UX by showing changes immediately (likes, comments, todo additions).

14. `useFormStatus` — The Kitchen Busy Light

What it does: A child component can check if the parent form is submitting.

Desi Analogy: The kitchen has a "busy" light. When the main stove (parent form) is on, the light tells everyone else to wait.

Real Example:

import { useFormStatus } from 'react-dom';

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button disabled={pending}>
      {pending ? 'Saving...' : 'Save'}
    </button>
  );
}

function MyForm() {
  return (
    <form action={serverAction}>
      <input name="title" />
      <SubmitButton /> {/* Child knows parent form status */}
    </form>
  );
}

When to use: Disabling buttons or showing loaders based on parent form status.

15. `use` — Waiting for Mango Season

What it does: Suspends (pauses) the component until a Promise resolves.

Desi Analogy: You're waiting for mango season. You can't make mango pickle until the mangoes arrive. Your whole plan is on "pause" (suspended) until the promise (mangoes) is fulfilled.

Real Example:

import { use, Suspense } from 'react';

function MangoComponent({ mangoPromise }) {
  const mangoes = use(mangoPromise); // Waits for promise

  return <h2>Got {mangoes.length} mangoes!</h2>;
}

function App() {
  const mangoPromise = fetch('/api/mangoes').then(r => r.json());

  return (
    <Suspense fallback={<p>Waiting for mango season...</p>}>
      <MangoComponent mangoPromise={mangoPromise} />
    </Suspense>
  );
}

When to use: Reading promises or context inside components with Suspense.

📋 Quick Reference: When to Use Which Hook

Your Need	Hook to Use	Think of It As
Remember a value	`useState`	Your wallet
Run code after render	`useEffect`	Water motor (with cleanup)
Share data globally	`useContext`	Family values
Cache expensive calculation	`useMemo`	Ginger-garlic paste
Cache a function	`useCallback`	Tea-making muscle memory
Complex state logic	`useReducer`	Grandfather's account book
Access DOM elements	`useRef`	Junk drawer
Unique IDs	`useId`	National Citizen card
Non-urgent updates	`useTransition`	Polite host
Defer a value	`useDeferredValue`	"Coming!" response
External data sync	`useSyncExternalStore`	Cricket ticker
Form status	`useActionState`	Passport office
Optimistic UI	`useOptimistic`	Early wedding cards
Check form status (child)	`useFormStatus`	Kitchen busy light
Wait for data	`use`	Mango season wait

The Component Lifecycle in Desi Terms

React Phase	Desi Meaning	What Happens
Mounting	Shuruvaat (Guest enters)	Component appears on screen
Updating	Guzaara (Daily life)	State/props change, component re-renders
Unmounting	Vidaayi (Guest leaves)	Component removed, cleanup happens

Final Tips

Start simple: Begin with useState and useEffect. Master these first.
Don't optimize early: Only use useMemo and useCallback when you have actual performance issues.
Read the errors: React's error messages are actually helpful—they'll tell you what's wrong.
Practice: Build a todo app, a counter, a simple form. These cover 80% of real-world hooks.

Conclusion

React is just a digital version of managing a busy household. If you can manage family finances, handle the water motor, and remember where you kept the spare keys, you already understand Hooks!

Which hook do you find most confusing? Let's discuss in the comments!

Debounce vs Throttle in JavaScript (Explained Simply with Code)

smrpdl1991 — Sat, 13 Dec 2025 01:08:11 +0000

If you work with JavaScript long enough, you’ll face this problem:

Some events fire too frequently.

Examples:

input → every key press
scroll → dozens of times per second
resize → continuously while dragging the window

If you run expensive logic on every event, performance suffers.

That’s where debounce and throttle come in.

Let’s understand both with plain JavaScript and simple examples.

Debounce — Run after the user stops

Debounce delays the execution of a function until the user stops triggering an event for a specified time.

Common use cases

Search input
Form validation
Auto-save
API calls on typing

Debounce — JavaScript Implementation

function debounce(fn, delay) {
  let timer;

  return function (...args) {
    clearTimeout(timer);

    timer = setTimeout(() => {
      fn(...args);
    }, delay);
  };
}

Usage example (search input)

const search = debounce((text) => {
  console.log("Searching for:", text);
}, 500);

input.addEventListener("input", (e) => {
  search(e.target.value);
});

What’s happening?

Every keystroke clears the previous timer
A new timer starts
If the user keeps typing → function never runs
Once typing stops → function runs once

Throttle — Run at fixed intervals

Throttle ensures a function runs at most once every X milliseconds, no matter how many times the event fires.

Common use cases

Scroll events
Resize events
Drag & drop
Preventing button spam

Throttle — JavaScript Implementation

function throttle(fn, limit) {
  let isLocked = false;

  return function (...args) {
    if (isLocked) return;

    fn(...args);
    isLocked = true;

    setTimeout(() => {
      isLocked = false;
    }, limit);
  };
}

Usage example (scroll)

const handleScroll = throttle(() => {
  console.log("Scrolling...");
}, 1000);

window.addEventListener("scroll", handleScroll);

What’s happening?

First event runs immediately
Function gets locked
All events during the lock are ignored
Function unlocks after the time limit

Debounce vs Throttle (Quick Comparison)

Feature	Debounce	Throttle
When function runs	After user stops	At fixed intervals
Extra events	Cancelled	Ignored
Execution style	Delayed	Immediate
Best for	Input, search	Scroll, resize

Easy way to remember

Debounce → clear + wait
Throttle → lock + release

Final Thoughts

Debounce and throttle are small utilities, but they make a huge difference in:

performance
user experience
API efficiency

If you understand when to use which, you’re already writing better JavaScript than most.

Happy coding

The :has() Selector: Bringing Real Logic to CSS

smrpdl1991 — Fri, 12 Dec 2025 17:05:15 +0000

“If” logic in CSS — yes, it’s real.

We’ve all said:
“CSS can’t do logic.”

Turns out… that’s not true.

With :has(), CSS can behave like an if condition — letting you style an element based on what it contains or what’s happening inside it.

Example:

/* If a card has an image, add a border */
.card:has(img) {
 border: 2px solid hashtag#4f46e5;
}

In simple terms:
If a .card contains an img ,then apply the style.

Why this matters:
• Less JavaScript to manage UI state
• More reactive, intelligent layouts
• Cleaner, simpler component logic

AI Isn’t Replacing Frontend — It’s Evolving It

smrpdl1991 — Wed, 10 Dec 2025 17:00:48 +0000

I recently had coffee with a developer who said something interesting:

“I’m not focusing on frontend. AI will generate all of that in a few years.”

That didn’t scare me.
It actually told me something else:

They’ve probably never built a real product at scale.

Because frontend is not “styling buttons.”
The first time you work on a complex, user-facing application, that misconception disappears fast.

Yes, AI can write JSX, CSS, and components.
But that was never the hard part.

The real challenges in frontend look like this:

Understanding user behavior and unpredictable edge cases
Building accessible, inclusive interfaces (something AI still struggles with)
Designing state that doesn’t collapse under real-world data
Handling failure: slow networks, partial responses, broken APIs
Converting vague requirements into clear, usable screens

This isn’t about syntax.
This is about judgment, trade-offs, and product thinking.

AI is a powerful tool — but it doesn’t own responsibility.
It accelerates execution, but it doesn’t replace the engineering mindset required to ship real products.

If frontend were easy, big companies wouldn’t invest heavily in frontend teams.

Frontend isn’t dying.
It’s shifting into something bigger: Product Engineering.

And the people who understand users, systems, and business context will be the last ones replaced.

AI writes code.
Engineers build products.

The Frontend Developer Roadmap: Skills, Values, and Tools to Become a Competitive Engineer in 2025/2026

smrpdl1991 — Thu, 27 Nov 2025 21:15:42 +0000

Frontend development has evolved far beyond making static web pages. We're not just coding; we're crafting accessible, high-performance, and scalable digital experiences.

A modern frontend engineer is the ultimate bridge—connecting design, user experience (UX), and core engineering principles.

With an overwhelming number of tools and techniques available, it's easy to get lost.

This guide cuts through the noise to focus on the essential skills that build real value, mapped from Intern to Senior.

I. The Foundation

These are the bedrock skills that never go out of style.

HTML & Web Standards

HTML is the unshakeable foundation. Mastering it means building an inherently better product.

Core Skill	Why It Matters (The "Why")
Semantic HTML	Improves SEO, accessibility, and maintainability. Makes your structure clear to browsers, screen readers, and future developers. Use tags like `<header>`, `<main>`, `<article>`, and meaningful `<h1>...<h6>`.
Forms & Tables	Higher conversions and a better UX. Understand input types, labels, and built-in validation. Only use `<table>` for actual tabular data, not layout.
Media & Embeds	Directly impacts performance and accessibility. Know when to use `<picture>` for responsive images, and how to manage controls on `<video>` and `<audio>`.
Web Components	The ultimate in reusable, framework-agnostic UI building. Master Custom Elements, the Shadow DOM, and HTML Templates.
SSR / SSG Fundamentals	Awareness of how Server-Side Rendering and Static Site Generation boost Time to Interactive (TTI) and initial page load, crucial for modern performance.

Accessibility (a11y) — Building for Everyone

Accessibility is non-negotiable. It’s our professional responsibility, and often, a legal requirement.

ARIA Roles: Using aria-labels, roles, and states to accurately describe elements for screen readers.
Keyboard Navigation: Ensuring every interactive element is reachable and operable using only the keyboard (Tab, Enter, Space).
Testing: Go beyond automated tools (like Axe and Lighthouse). Manually test with a screen reader (e.g., VoiceOver, NVDA) to feel the user experience.

Better accessibility means better usability, a bigger user base, and reduced legal risk.

II. The Design Engine: CSS Mastery

Deep understanding of CSS layout systems is what separates a good developer from a great one. It translates directly into consistent design, fast iteration, and fewer styling bugs.

CSS Layout & Styling

Level	Key Skills
All Levels	Flexbox (for 1D layout), CSS Grid (for 2D layout), Selectors, Units (rem/em), Pseudo-elements (`::before`, `::after`).
Mid → Senior	CSS Custom Properties (variables), Pre-processors (SASS/LESS), Modern Methodologies (like BEM for scale or Tailwind for speed).
Senior	Advanced CSS Animations (keyframes) or specialized libraries like GSAP / Framer Motion.

SEO & Performance — Speed is a Feature

A fast, visible site is a high-converting, high-ranking site. This isn't just for the marketing team—it's core engineering.

SEO Basics: Structuring content with proper headings, setting relevant meta tags, and understanding robots.txt.
Performance Fundamentals: Reducing network requests, optimizing image delivery, and hitting high Lighthouse scores.
Core Web Vitals: The metrics that directly impact user experience and search ranking:
- LCP (Largest Contentful Paint): How fast the main content loads.
- FID (First Input Delay): How fast the site responds to the first user interaction.
- CLS (Cumulative Layout Shift): How stable the layout is during loading.

III. The Core Logic: JavaScript & TypeScript

JavaScript is the engine; TypeScript is the quality assurance layer.

JavaScript — The Engine

Level	Essential Concepts
Fundamentals	Variables, data types, scope, control flow, functions, basic error handling.
Associate → Mid	Closures, `async/await`, Promises (and error handling in them), ESM (Modules), understanding `this` binding.
Mid → Senior	OOP principles (classes, inheritance), Prototypes, Event Loop internals, Memory Model & Garbage Collection, advanced Design Patterns, and Functional Programming (FP) concepts like immutability.

TypeScript — Type Safety for Scale

TypeScript (TS) is essential for maintainable, large-scale projects.

Mastery: Types, interfaces, enums, Generics, utility types, and enabling Strict Mode in your projects.
The Benefit: Prevents bugs during compilation, makes code refactoring incredibly safe, and dramatically improves the developer experience with better tooling (IntelliSense).

IV. Application Engineering

This is where you move from building pages to building complex, scalable applications.

Framework Mastery (React, Vue, Angular)

You need to know your chosen framework inside and out.

Concept	Why It Matters
Core	Components, State, Props, Lifecycle, and conditional/list rendering.
Intermediate	Custom Hooks (React) / Composables (Vue), Context API / Dependency Injection, and methods for optimizing renders like Memoization.
Advanced	Understanding the Virtual DOM, concurrency features, reactivity systems, and modern architectural patterns like Server Components.

State Management — Handling Complexity

Great state management reduces bugs and unnecessary re-renders while increasing performance and predictability.

Essential: Local component state, Context API.
Modern Tools: Redux Toolkit (for robust global state), or lightweight alternatives like Zustand / Recoil.
Data Fetching State: Libraries like React Query / SWR are crucial for managing server state, caching, retries, and optimistic updates.
Senior Patterns: Store normalization, smart selectors, and implementing Optimistic Updates for a snappier UX.

API Integration — Connecting to the World

The frontend connects the user to the business logic.

Core: Handling REST APIs using fetch or Axios, gracefully managing loading/error states, pagination, and filtering.
Senior: Implementing Retries, controlling request frequency via Debouncing & Throttling, and using WebSockets or GraphQL Subscriptions for real-time data.

V. Professionalizing Your Workflow

These tools and processes enable a developer to deliver production-ready code reliably.

Tooling, Build Systems & DevOps Awareness

A competitive developer understands the ecosystem that delivers their code.

Build Tools: Mastery of package managers (npm / Yarn). Knowing how tools like Vite or Webpack bundle, optimize, and tree-shake your application.
Code Quality: Setting up ESLint and Prettier to enforce code style and catch issues before they become bugs.
Deployment: Basic awareness of Docker, and how your code moves through a CI/CD pipeline (e.g., GitHub Actions, GitLab CI).

Testing — Building Confidence

Testing is not a bottleneck; it’s a safety net that enables faster development and deployment.

Unit Tests: Testing small functions and business logic (Jest, Vitest).
Component Tests: Testing how components render and behave from a user's perspective (React Testing Library).
E2E (End-to-End) Tests: Simulating real user flows across the entire application (Cypress, Playwright).

Security — Protecting Users

A frontend developer's code runs directly in the user's browser, making security paramount.

Fundamentals: Protecting against XSS (Cross-Site Scripting) and CSRF (Cross-Site Request Forgery), along with proper input validation.
Advanced: Understanding CORS policies, implementing robust Content Security Policy (CSP) headers, and managing OAuth flows.

VI. The Senior Mindset

The final leap from a great coder to a technical leader is defined by these skills.

System Design & Architecture

A Senior developer designs for scale and maintainability.

Key Concepts: Designing a clear, logical file structure; maximizing reusability; understanding Design Systems (creating and consuming them); and knowing the trade-offs of using patterns like Microfrontends.

Soft Skills — The Hidden Superpower

Technical skills get your foot in the door; soft skills elevate you to a senior role and leadership.

Communication: Clearly explaining complex technical concepts to non-technical stakeholders.
Ownership: Taking initiative, not just completing tasks, but owning the outcome of a feature.
Mentorship & Documentation: Elevating the team by sharing knowledge and writing documentation that serves as a guide, not a burden.

Final Thoughts: Be a Builder of Experiences

The competitive frontend developer doesn't just "write code." They are builders of digital experiences—combining technical logic, design empathy, architectural strategy, and a relentless curiosity to make products that are fast, reliable, and a joy to use.

Master the fundamentals, embrace the modern tooling, and prioritize user experience above all else.

Merging the Main branch into your local branch

smrpdl1991 — Tue, 22 Oct 2024 07:40:45 +0000

To merge your local branch to the main branch , you need to follow these steps :

First, you need to ensure, you are on your local branch.
git checkout <your-branch>
Second, you need to fetch the latest changes from the remote.
git fetch origin
Now, let's merge Main branch into your local branch.
git merge origin/main
If there are any conflicts, then you need to manually edit the
conflicted file and resolve the conflict and then
git add <conflicted-file>
git commit -m "Merged main branch into <your-branch>"

Following these steps, you will be able to merge remote branch to your local branch.

Step-by-Step Guide to Rebasing Your Branch onto Dev

smrpdl1991 — Thu, 08 Aug 2024 03:24:34 +0000

If you want to rebase your branch onto dev instead of merging, you can use the following commands:

Fetch the latest changes from the remote repository:

git fetch origin

Switch to your branch (if you are not already on it):

git checkout your-branch

Rebase your branch onto dev:

git rebase origin/dev

Again, if there are any conflicts, you will need to resolve them manually.

Push the rebased branch to the remote repository (force push may be needed):

git push origin your-branch --force

Note : Using rebase can result in a cleaner project history, but it rewrites commit history, so be careful if you are working in a shared branch.

Beginner Guide to React Storybook

smrpdl1991 — Mon, 10 Jun 2024 08:24:17 +0000

## Storybook

Storybook is a powerful open source tool that allows developers to develop UI components isolated from business logic and context of app.

Storybook provides an interactive playground to develop and browse your component.

Change on one component won't affect the others.

Without embedding it to your app, it can serve as a workshop environment to see how components look and behave in various state.

## Getting Started with Storybook

Developing a reusable UI is important aspect for developing modern web app, which will enable us to efficient and streamlined development process.

In this article, we will explore how to create a robust UI components using React, Storybook, Typescript and tailwind.

## Setting up the environment

Install Node.js and npm (Node Package Manager) on your pc. You can
download it from (https://nodejs.org/en)
Create a New Folder with name learn_storybook for your ui library and
navigate to its terminal . Run following command:

npm create vite@latest my-storybook-project -- --template react-ts

This command will create a new react app with typescript template . Your project name here is my-storybook-project. You can change it if you want.

cd my-storybook-project

Installing dependencies

npx storybook@latest init

This will setup Storybook.

npm install -D tailwindcss postcss autoprefixer

This will install Tailwind css , postcss and autoprefixer.

## Configuring Tailwind css

Create tailwind.config.ts

export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: { 
    },
  },
  plugins: [],
};

create a postcss.config.js file in the project root

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Finally, import Tailwind css in your src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

In Storybook configuration folder i.e. .storybook, open preview.ts and add

import "../src/index.css";

Now , our environment is setup , we will now create a components inside src folder .

Lets create a folder called components (you can delete the stories folder, inside src which was created by default while we setup the storybook ,if you want).

You can create a new folder inside the components directory for each ui component which you want to work with.

Here , let's create a folder called breadcrumb inside components folder. We will now create a breadcrumb component and it's stories.

Inside breadcrumb folder , create Breadcrumb.tsx file and docs folder. Inside docs folder , create Breadcrumb.stories.tsx file as in the figure :

Now add this code inside BreadCrumb.tsx

import React, { ReactNode } from "react";

/* eslint-disable @typescript-eslint/no-explicit-any */
export function slugify(text: any) {
  return text
    .toString()
    .toLowerCase()
    .replace(/\s+/g, "-") // Replace spaces with -
    .replace(/[^\w-]+/g, "") // Remove all non-word characters
    .replace(/--+/g, "-") // Replace multiple - with single -
    .replace(/^-+/, "") // Trim - from start of text
    .replace(/-+$/, ""); // Trim - from end of text
}

interface BreadcrumbsProps {
  title: string | ReactNode;
  path?: { id: number; link: string; label: string }[];
  children?: ReactNode;
  previcon?: React.JSX.Element;
  onClick?: () => void;
}
const Breadcrumbs: React.FC<BreadcrumbsProps> = ({
  title,
  path,
  children,
  previcon,
  onClick,
}) => {
  return (
    <div
      className={`breadcrumb  bg-danger-0 px-6 py-4 flex  items-center gap-5 breadcrumb-${
        title ? slugify(title) : "default"
      }`}
    >
      {previcon && (
        <div
          className="icon w-[36px] h-[36px] inline-flex items-center justify-center border border-neutral-200 rounded cursor-pointer"
          onClick={onClick}
        >
          {previcon}
        </div>
      )}
      <div
        className={`inline-flex flex-wrap items-center justify-between  ${
          previcon ? "w-[calc(100%_-_50px)]" : "w-full"
        }`}
      >
        <div className="title-wrap">
          {title && (
            <h1 className="text-2xl text-neutral-500 font-semibold">{title}</h1>
          )}

          {path && (
            <ul className="breadcrumb list-none flex items-center gap-1">
              {path
                .filter((path) => path?.label !== "")
                .map((segment) => (
                  <>
                    {segment.label === "" ? undefined : (
                      <li
                        key={segment?.id}
                        className="breadcrumb-item font-normal text-sm inline-flex after:content-['/'] after:block last:after:content-none after:ml-1 after:text-gray-500"
                      >
                        {(() => {
                          switch (true) {
                            case segment?.id !== path.length - 1:
                              return (
                                <a
                                  href={segment?.link ?? "/"}
                                  className="text-gray-500"
                                >
                                  {segment?.label}
                                </a>
                              );
                            default:
                              return (
                                <span className="text-gray-800">
                                  {segment?.label}
                                </span>
                              );
                          }
                        })()}
                      </li>
                    )}
                  </>
                ))}
            </ul>
          )}
        </div>
        {children && (
          <div className="other-accessories ml-auto flex flex-wrap gap-4">
            {children}
          </div>
        )}
      </div>
    </div>
  );
};

export default Breadcrumbs;

This component accepts title , breadcrumb paths , prevIcon, children and onClick event to trigger prevIcon Icon.

Inside Breacrumb.stories.tsx, add :

import type { Meta, StoryObj } from "@storybook/react";
import React from "react";
import { fn } from "@storybook/test";
import Breadcrumbs from "../Breadcrumb";

// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction

const path = [
  {
    id: 0,
    link: "/",
    label: "Home",
  },
  {
    id: 1,
    link: "/news",
    label: "News",
  },
  {
    id: 2,
    link: "/nepal-win-the-race",
    label: "Nepal win the race",
  },
];
const PrevPageSvg = () => (
  <svg
    width="20"
    height="20"
    className="cursor-pointer"
    viewBox="0 0 20 20"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M17.5005 10.0003C17.5005 10.1661 17.4346 10.3251 17.3174 10.4423C17.2002 10.5595 17.0413 10.6253 16.8755 10.6253H4.63409L9.19268 15.1832C9.25075 15.2412 9.29681 15.3102 9.32824 15.386C9.35967 15.4619 9.37584 15.5432 9.37584 15.6253C9.37584 15.7075 9.35967 15.7888 9.32824 15.8647C9.29681 15.9405 9.25075 16.0095 9.19268 16.0675C9.13461 16.1256 9.06567 16.1717 8.9898 16.2031C8.91393 16.2345 8.83261 16.2507 8.75049 16.2507C8.66837 16.2507 8.58705 16.2345 8.51118 16.2031C8.43531 16.1717 8.36637 16.1256 8.3083 16.0675L2.6833 10.4425C2.62519 10.3845 2.57909 10.3156 2.54764 10.2397C2.51619 10.1638 2.5 10.0825 2.5 10.0003C2.5 9.91821 2.51619 9.83688 2.54764 9.76101C2.57909 9.68514 2.62519 9.61621 2.6833 9.55816L8.3083 3.93316C8.42558 3.81588 8.58464 3.75 8.75049 3.75C8.91634 3.75 9.0754 3.81588 9.19268 3.93316C9.30996 4.05044 9.37584 4.2095 9.37584 4.37535C9.37584 4.5412 9.30996 4.70026 9.19268 4.81753L4.63409 9.37535H16.8755C17.0413 9.37535 17.2002 9.4412 17.3174 9.55841C17.4346 9.67562 17.5005 9.83459 17.5005 10.0003Z"
      fill="#121212"
    />
  </svg>
);
const meta: Meta = {
  title: "components/BreadCrumb",
  component: Breadcrumbs,
  tags: ["autodocs"],
} satisfies Meta<typeof Breadcrumbs>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  args: {
    title: "Breadcrumb Page",
    path: path,
    children: <div>add anything here</div>,
    previcon: <PrevPageSvg />,
    onClick: fn(),
  },
};

This file defines stories of Breacrumb from where we can implement the path of the pages with title along with prev button and the children , where we can add anything we need more .

## Running Storybook

To run storybook, add following code :

npm run storybook

This will start storybook development server. Now, You can see the Breadcrumb component in the Storybook interface.

## Conclusion

We have now successfully created a react ui using storybook, typescript, tailwind using vite.

Now we can use this stories and component on your projects, share with others.

From this we came to know that , storybook provides a solid foundation for building scalable and maintainable ui component in react.

npm install stuck on idealtree builddeps on mac

smrpdl1991 — Wed, 01 May 2024 18:09:26 +0000

I was using MacBook Air M2 and I was installing the packages using

npm install

However , it got stuck illustrating

dealTree:social-app: sill idealTree buildDeps
and took me sometime to figure out the solution here .

What I did is I downgraded the node version . In my case I downgraded it to v16.2.0.

I opened the terminal and applied this

npm install -g n
sudo n 10.16.0

After this , I went to the project path on terminal and added

npm install

Now it works as expected .

Steps using useState Hooks in react app.

smrpdl1991 — Tue, 03 Jan 2023 15:47:38 +0000

To create steps using useState in React, you can define an array of step objects in your component and use useState to keep track of the current step. You can then use this state to render the appropriate step. Here's an example of how you might do this:

import { useState } from 'react';

function Steps() {
  const steps = [
    { label: 'Step 1', component: <Step1 /> },
    { label: 'Step 2', component: <Step2 /> },
    { label: 'Step 3', component: <Step3 /> }
  ];

  const [currentStep, setCurrentStep] = useState(0);
  const currentStepData = steps[currentStep];

  return (
    <div className="steps">
      <ul>
        {steps.map((step, index) => (
          <li key={step.label} className={index === currentStep ? 'active' : ''}>
            <button onClick={() => setCurrentStep(index)}>{step.label}</button>
          </li>
        ))}
      </ul>
      {currentStepData.component}
    </div>
  );
}

In this example, the steps array holds the data for each step, including the label to display in the step list and the component to render for each step. The currentStep state variable is used to keep track of the current step, and the setCurrentStep function is used to update the current step when the user clicks on a different step.

The step list is rendered using the steps array, with a li element for each step. The active class is added to the li element for the current step to highlight it. The step component is rendered below the step list using the currentStepData.component value.working

Quiz App using Javascript

smrpdl1991 — Sun, 10 Jul 2022 09:04:36 +0000

Reveal animation on Scroll using gsap and scrollTrigger on react app

smrpdl1991 — Sun, 10 Jul 2022 09:03:24 +0000

DEV Community: smrpdl1991

Why Learning React Hooks is Exactly Like Running a Desi Household

The "Daily Essentials" (Core Hooks)

1. useState — Your Wallet (Jeb Kharch)

2. useEffect — The Water Motor (Pani ki Tanki)

3. useContext — Family Values (Gharelu Sanskaar)

The "Efficiency Experts" (Performance Hooks)

4. useMemo — Ginger-Garlic Paste (Adrak-Lehsan ka Paste)

5. useCallback — The Tea Recipe Muscle Memory

The "Management" Hooks

6. useReducer — Grandfather's Account Register (Dada-ji ka Hisaab)

7. useRef — The Junk Drawer (Kabaad ka Drawer)

The Specialized Hooks

8. useId — Citizen Card for Components

9. useTransition — The Polite Host

10. useDeferredValue — The Slow "Hanji, Aa Raha Hoon"

11. useSyncExternalStore — The Cricket Score Ticker

What's New in React 19?

12. useActionState — The Passport Office Status

13. useOptimistic — Printing Wedding Cards Early

14. useFormStatus — The Kitchen Busy Light

15. use — Waiting for Mango Season

📋 Quick Reference: When to Use Which Hook

The Component Lifecycle in Desi Terms

Final Tips

Conclusion

Debounce vs Throttle in JavaScript (Explained Simply with Code)

Debounce — Run after the user stops

Common use cases

Debounce — JavaScript Implementation

Usage example (search input)

What’s happening?

Throttle — Run at fixed intervals

Common use cases

Throttle — JavaScript Implementation

Usage example (scroll)

What’s happening?

Debounce vs Throttle (Quick Comparison)

Easy way to remember

Final Thoughts

The :has() Selector: Bringing Real Logic to CSS

AI Isn’t Replacing Frontend — It’s Evolving It

The Frontend Developer Roadmap: Skills, Values, and Tools to Become a Competitive Engineer in 2025/2026

I. The Foundation

HTML & Web Standards

Accessibility (a11y) — Building for Everyone

II. The Design Engine: CSS Mastery

CSS Layout & Styling

SEO & Performance — Speed is a Feature

III. The Core Logic: JavaScript & TypeScript

JavaScript — The Engine

TypeScript — Type Safety for Scale

IV. Application Engineering

Framework Mastery (React, Vue, Angular)

State Management — Handling Complexity

API Integration — Connecting to the World

V. Professionalizing Your Workflow

Tooling, Build Systems & DevOps Awareness

Testing — Building Confidence

Security — Protecting Users

VI. The Senior Mindset

System Design & Architecture

Soft Skills — The Hidden Superpower

Final Thoughts: Be a Builder of Experiences

Merging the Main branch into your local branch

Step-by-Step Guide to Rebasing Your Branch onto Dev

Beginner Guide to React Storybook

Installing dependencies

npm install stuck on idealtree builddeps on mac

Steps using useState Hooks in react app.

Quiz App using Javascript

Reveal animation on Scroll using gsap and scrollTrigger on react app

1. `useState` — Your Wallet (Jeb Kharch)

2. `useEffect` — The Water Motor (Pani ki Tanki)

3. `useContext` — Family Values (Gharelu Sanskaar)

4. `useMemo` — Ginger-Garlic Paste (Adrak-Lehsan ka Paste)

5. `useCallback` — The Tea Recipe Muscle Memory

6. `useReducer` — Grandfather's Account Register (Dada-ji ka Hisaab)

7. `useRef` — The Junk Drawer (Kabaad ka Drawer)

8. `useId` — Citizen Card for Components

9. `useTransition` — The Polite Host

10. `useDeferredValue` — The Slow "Hanji, Aa Raha Hoon"

11. `useSyncExternalStore` — The Cricket Score Ticker

12. `useActionState` — The Passport Office Status

13. `useOptimistic` — Printing Wedding Cards Early

14. `useFormStatus` — The Kitchen Busy Light

15. `use` — Waiting for Mango Season