DEV Community: banti kevat

React Router me Link aur NavLink Kaise Use Karein

banti kevat — Sat, 18 Jul 2026 05:49:35 +0000

React Router me Link aur NavLink kaise use karein? Is Hindi guide me navigation, active styling aur single page app routing ko detail me seekhein.

क्या आप भी React App बनाते समय Navigation के लिए traditional HTML anchor tags यानी \ का use कर रहे हैं और हर click पर आपका browser full reload हो रहा है? दोस्तों, Single Page Application (SPA) का असली मज़ा तब तक नहीं आता जब तक pages बिना reload हुए पलक झपकते ही न बदलें! आज हम इसी समस्या को हमेशा के लिए खत्म करेंगे।

⚡ Quick Answer: React App में बिना page reload किए smooth client-side navigation के लिए React Router के Link और NavLink Components का use किया जाता है। Link normal navigation के लिए use होता है, जबकि NavLink का use active page link को CSS class या inline style देकर visually highlight करने के लिए किया जाता है।

इस comprehensive tutorial में हम गहराई से समझेंगे कि ReactJS में internal links को smooth बनाने के लिए Link\ और NavLink\ का सही उपयोग कैसे किया जाता है, इन दोनों के बीच का अंतर क्या है, और industry-level best practices क्या हैं।

---

React Router में traditional HTML Anchor Tag (<a>) का use क्यों नहीं करना चाहिए?

जब हम HTML में standard navigation करते हैं, तो हम [\ का use करते हैं। लेकिन React component के अंदर anchor tag का use करना एक बहुत बड़ी भूल हो सकती है। चलिए समझते हैं ऐसा क्यों है:

जब भी user किसी anchor tag पर click करता है, तो browser default behavior के तहत dynamic request server पर भेजता है। इसके बाद server से पूरा का पूरा HTML document, CSS, और JavaScript files फिर से load होती हैं।

इस structure को समझने के लिए नीचे दिए गए flow diagram को देखिए:

🏗️ Navigation comparison Flow

Anchor Tag (<a>)
→
Full Page Reload
→
State Lost ❌

Router <Link>
→
Client-Side Routing
→
State Preserved ✅

Diagram: Comparison of Standard Navigation vs Client-Side Navigation in React

Anchor Tag के नुकसान:

State Loss: अगर आपने Redux, React Context API, या local React component state में कोई data store करके रखा है, तो anchor tag के reload होते ही वह सारा dynamic data हवा में गायब हो जाएगा।
Slow User Experience: User को बार-बार loading screen देखनी पड़ेगी, जो modern user experience के नियमों के खिलाफ है।
Server Load: बार-बार एक ही assets के लिए server को request भेजने से application performance पर भी असर पड़ता है।

यहीं पर काम आता है **React Router** का magical routing structure, जो e.preventDefault()\ का behind-the-scenes use करके browser reload को रोकता है और URL के हिसाब से components को dynamically switch कर देता है।

---

React Router Navigation Setup करने का Step-by-Step तरीका क्या है?

दोस्तों, चलिए एकदम scratch से setup करते हैं ताकि आपको zero configuration errors आएं। हम React Router v6 का use करेंगे जो अभी current standard है।

Step 1: Install React Router DOM

सबसे पहले अपने project directory में terminal खोलिए और React Router library को install कर लीजिए:

npm install react-router-dom

Step 2: Wrap Application inside BrowserRouter

अब अपने application की wrapper file (आमतौर पर main.jsx\ या index.js\) में BrowserRouter\ को wrap करना होगा। इसके बिना dynamic links काम नहीं करेंगे।

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.createRoot(document.getElementById('root')).render(





);

Step 3: Define Routes in App.jsx

अब App.jsx\ में जाकर अपने routes set कर लेते हैं। हम Home, About, और Contact pages बनाएंगे।

import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
import Navbar from './components/Navbar';

function App() {
  return (










  );
}

export default App;

---

<Link> Component क्या है और इसे कैसे use करें?

Link\ component React Router का basic block है। इसका use user-triggered state navigation के लिए किया जाता है। React Router behind the scenes इस Link\ को standard [\ anchor tag में ही convert करता है, लेकिन इसके default navigation payload को modify कर देता है ताकि page refresh न हो।

Link Component का basic syntax:

import { Link } from 'react-router-dom';

// Component के अंदर इस तरह use करें:
<Link to="/about">About Us</Link>

यहां to\ attribute anchor tag के href\ attribute की तरह काम करता है। इसमें आप target URL reference define करते हैं।

Link के Advanced Attributes (Props):

to (String or Object): यह destination specify करता है। आप इसमें string के अलावा configuration object भी pass कर सकते हैं:

<Link to={{ pathname: "/about", search: "?tab=details" }}>About</Link>

replace (Boolean): अगर आप Browser History stack में current page को replace करना चाहते हैं, तो इसका use करें। इसे true करने पर, back click करने पर user previous path पर वापस नहीं जा पाएगा:

<Link to="/dashboard" replace>Go to Dashboard</Link>

state (Any): यह feature सोने पर सुहागा है! इसकी मदद से आप बिना URL query params change किए location object में secure components dynamic raw state data pass कर सकते हैं:

<Link to="/contact" state={{ fromHomepage: true }}>Contact</Link>

---

<NavLink> Component क्या है और यह <Link> से कैसे अलग है?

अब बात करते हैं बड़े भाई यानी NavLink\ की। दोस्तों, सोचिए आप एक navigation menu बना रहे हैं। जब user "About" page पर हो, तो navigation header में "About" link active, highlighted या underlined दिखना चाहिए ताकि user को पता रहे कि वह अभी website के किस section में है।

यही काम करने के लिए NavLink\ का creation हुआ है। यह built-in features के साथ आता है जो check करता है कि browser का active URL component के target dynamic endpoint to\ से match हो रहा है या नहीं।

NavLink का default dynamic behavior:

जब browser URL और NavLink\ का to\ match करता है, तो NavLink\ component HTML output में automatically active\ class inject कर देता है।

// Browser default output dynamically when on /about:
<a href="/about" class="active">About</a>

Dynamic Styling apply करने के तरीके:

आप NavLink\ में className\ या style\ dynamic arguments dynamic render features (functions) के ज़रिए styling control कर सकते हैं।

1. Custom dynamic class handle करना:

import { NavLink } from 'react-router-dom';

function Navigation() {
  return (
    <NavLink 
      to="/about" 
      className={({ isActive }) => isActive ? 'my-custom-active-class' : 'normal-class'}
    >
      About
    </NavLink>
  );
}

2. Dynamic inline styles handle करना:

<NavLink 
  to="/contact" 
  style={({ isActive }) => ({
    color: isActive ? '#06b6d4' : '#64748b',
    fontWeight: isActive ? 'bold' : 'normal'
  })}
>
  Contact
</NavLink>

3. end prop का use (Very Important!):

ध्यान देने वाली बात ये है कि अगर आपका home link /\ है, तो वह हर path (जैसे /about\, /contact\) के साथ match हो जाएगा, क्योंकि /\ सभी routes के base structure में मौजूद होता है। इससे Home link हमेशा active दिखाई देगा!

इसे रोकने के लिए हमें end\ prop का use करना होता है:

<NavLink to="/" end className={({ isActive }) => isActive ? "active" : ""}>
  Home
</NavLink>

end\ prop यह ensure करता है कि default check process exact browser endpoints को strict match करे।

---

<Link> vs <NavLink> में क्या अंतर है? (Comparison Table)

दोनों Components के behaviors को deep contrast में समझने के लिए, आइए इस performance properties comparison check table को देखते हैं:

Features / Properties	<Link> Component	<NavLink> Component
Primary Purpose	General element page jumps या simple navigation hyperlinks.	Navigation menu bars, sidebars, links highlights toggles.
Active Class Insertion	No (कोई automated style check injection नहीं होता)	Yes (Automatically injects `active` class name matches)
Dynamic Props Functionality	className attributes accept standard statically declared string.	Supports standard strings and JavaScript arrow functions `({ isActive }) => ...`
Performance Metric	Slightly faster runtime comparison (no URL processing check overhead)	Marginal dynamic string comparisons internally process regular routing.
Match Restriction Prop	Not Applicable	Supports `end` prop behavior for absolute matching resolution.

इस comparison से साफ़ है कि अगर आपको sidebar, header navbar menu build करना है तो NavLink\ ही सर्वश्रेष्ठ option है। और general internal anchors, card-clicks list elements redirection या text hyperlinking के लिए Link\ component का usage optimal है।

---

Complete Implementation Code (Production-Ready)

चलिए दोस्तों, अब सब कुछ मिलाकर एक functional working Navbar, CSS files और components structure code setup complete write-up देखते हैं ताकि आप इसे direct use कर सकें।

1. Navbar.jsx Component

import { NavLink } from 'react-router-dom';
import './Navbar.css';

export default function Navbar() {
  return (
    <nav className="main-navbar">
      <div className="nav-logo">
        <h2>DevPortal</h2>
      </div>
      <ul className="nav-links">
        <li>
          <NavLink 
            to="/" 
            end 
            className={({ isActive }) => isActive ? "nav-item active-link" : "nav-item"}
          >
            Home
          </NavLink>
        </li>
        <li>
          <NavLink 
            to="/about" 
            className={({ isActive }) => isActive ? "nav-item active-link" : "nav-item"}
          >
            About
          </NavLink>
        </li>
        <li>
          <NavLink 
            to="/contact" 
            className={({ isActive }) => isActive ? "nav-item active-link" : "nav-item"}
          >
            Contact
          </NavLink>
        </li>
      </ul>
    </nav>
  );
}

2. Navbar.css Stylesheet

इस CSS code को create कर अपने layout files path reference mappings से bind करें:

.main-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #0f172a;
  padding: 15px 30px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.nav-logo h2 {
  color: #06b6d4;
  margin: 0;
  font-family: sans-serif;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.nav-item {
  color: #94a3b8;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.nav-item:hover {
  color: #f8fafc;
  background-color: #1e293b;
}

/* Active Class Dynamic Styles styling injected by NavLink */
.active-link {
  color: #ffffff !important;
  background-color: #06b6d4;
  box-shadow: 0 4px 10px rgba(6, 182, 212, 0.3);
}

इस component architecture के flow parameters checks dynamic changes verify करने के लिए React App run करें (npm run dev\)। आप देखेंगे कि route transitions instantaneous हैं, browser refresh wheel move नहीं करता, और static/active dynamic changes instantly style render attributes update process accurate display कर रहे हैं।

---

Common Routing Errors और उन्हें कैसे Fix करें?

जब developers React Router config build-out करते हैं, तो कुछ errors standard benchmarks में बार-बार आते हैं। चलिए देख लेते हैं कि उन्हें conceptual resolution mechanism से कैसे fix error stack handle करेंगे।

1. "useHref() may be used only in the context of a <Router> component"

यह common runtime error तब आता है जब आप Link\ या NavLink\ component का use BrowserRouter\ components dynamic wrapper contextual boundaries के बाहर कर देते हैं।

* Solution: Check करें कि क्या आपकी layout navigation files root files nested references (App.jsx\ setup) dynamic initialization sequence BrowserRouter\ के wrapper child tree hierarchy boundary limits के dynamic block elements bounds inside structure loop contain कर रही है। BrowserRouter\ को हमेशा highest setup levels level (main.jsx\) पर configuration declare करें।

2. Dynamic state updates missing components payload values

यदि navigation routes context values empty display process parameters data flow parameters errors catch correct attributes pass verify fail block return instances reflect runtime loops check:

// Send details correctly object
<Link to="/profile" state={{ role: "admin", id: 2050 }}>Profile</Link>

Target routes dynamic file components load structures references variables state context fetch with useLocation\ react hook correctly sequence fetch verify template syntax check:

import { useLocation } from 'react-router-dom';

const Profile = () => {
  const location = useLocation();
  const dataReceived = location.state; // dynamically fetches: { role: "admin", id: 2050 }
  return <div>Role: {dataReceived?.role}</div>;
};

---

React Router Performance Best Practices

Code Splitting: Large component files bundles scale optimizations performance load decrease route components dynamic splits with lazy loads apply structures. Use React.lazy()\ configuration dynamically:

import { lazy, Suspense } from 'react';
const Home = lazy(() => import('./pages/Home'));

Prefetching: Users card item view transition triggers dynamic trigger events updates can mouse hover layouts preload optimization techniques trigger updates handles can boost web loading speeds!
Relative Paths: Deep-nested sub-directory component structures require flexible matching dynamically. Use relative paths to write flexible navigation components. Official document guide specs rules patterns can be detailed from React Router Documentation.

---

तो दोस्तों, आज हमने सीखा कि dynamic context systems के inner mechanisms architecture configuration checks elements parameters values mapping dynamic React configurations structures navigation elements setup workflow details step-by-step guidelines process layout templates flow controls parameters properties updates easily कैसे complete parameters resolve structure handle कर सकते हैं!

Link\ component dynamic routing setups performance render fast dynamic structures parameters handles perfectly standard page transitions components setups structures templates. वही active states toggles logic side layouts highlight handles menu setup configurations design features default properties provide high class performance.

इन principles templates examples rules setup definitions structure elements codes patterns parameters values integration standard benchmarks scale optimize structure setups codes complete copy test features integrations build! Happy hacking, दोस्तों!

---

Frequently Asked Questions (FAQs)

Q1: Link और NavLink में सबसे मुख्य अंतर क्या है?
Link का use general routes redirection hyperlinks text navigation loops references set dynamically create करने के लिए किया जाता है। इसके विपरीत, NavLink component current screen matching active states verify automatically class inject configuration supports options handle करता है, जो menu active link highlights setups configurations build render support parameters dynamic controls rules apply features structure complete templates use values build structures patterns control components setup logic features dynamically templates provides interfaces.
Q2: NavLink में exact या end prop का dynamic function checks relevance क्या है?
base layout route structure paths '/' values always common dynamic components URL validations nested match sequence handles correct outputs templates patterns validation criteria fail control instances check loop process default structures automatically matches dynamic trigger systems templates configurations errors fix setup block elements render features. end parameters limits active class updates patterns criteria strictly root checks define properties structure handles constraints templates models context values active display checks properties rules setups configuration design updates properties features parameters dynamically rules match limits accurate layout blocks context parameters.
Q3: dynamic routing links structure handle elements dynamically parameter components values send state pass patterns correct formats details methods setup updates check rules structures parameters checks triggers options parameters?
Yes. React Router provides absolute security configurations properties controls handles easily options values patterns directly setup variables parameters context state to objects state attributes format values properties. link tag component to standard string variables dynamically variables formats direct mapping inputs state property elements object structure send patterns handle structures template.
Q4: HTML links standard anchor tags context load models inside context errors triggers routing checks handles issues parameters definitions standard system designs?
useHref errors patterns triggers dynamic elements links setup outer component wraps check boundary constraints. browser initialization contexts configurations always browser-router context limits check validation controls rules parameters setup boundary parameters dynamic levels elements loops patterns correctly define setup loops errors triggers definitions resolves options handles elements structure parameters properly.
Q5: custom attributes values configuration styling controls parameters custom arrow functions components structure templates rules matches check dynamic elements parameters logic dynamically setups options defines updates?
Yes. classes definitions supports custom functions triggers active flag checks configurations custom arrow functions attributes dynamic structures elements definitions parameter values returns. matching setups checks boolean conditions options updates classes values render strings layout components templates interfaces correctly formats properties definitions values parameters checks design dynamic updates structures control values profiles perfectly.](...)](/about)

React Router Kya Hai aur Kaise Setup Karein

banti kevat — Fri, 17 Jul 2026 12:44:50 +0000

React Router kya hai aur kaise setup karein? Is Hindi step-by-step guide me single-page routing, dynamic routes aur hooks ko basic se advanced seekhein.

दोस्तों, सोचिए कि आप एक बहुत ही शानदार Web Application बना रहे हैं। आपने ReactJS का use करके सुंदर-सुंदर UI Screens भी बना ली हैं। लेकिन जैसे ही आप "About Us" या "Contact" page पर जाने के लिए किसी button पर click करते हैं, तो क्या होता है? आपका पूरा browser refresh हो जाता है! अगर ऐसा हो रहा है, तो आपका application एक Single Page Application (SPA) नहीं रह जाता, बल्कि वो traditional multi-page website की तरह react करने लगता है।

एक असली Web Application में user experience एकदम smooth, dynamic और super-fast होना चाहिए, जहाँ बिना browser refresh किए instantaneous page transition हो। इसी Problem को solve करने के लिए हमारी React Ecosystem की सबसे popular library जन्म लेती है, जिसे हम React Router कहते हैं। चलिए, आज चाय की चुस्की के साथ बिल्कुल आसान शब्दों में समझते हैं कि React Router का setup और implementation एक professional structure में कैसे किया जाता है।

⚡ Quick Answer: React Router एक standard library है जो ReactJS applications में dynamic client-side routing को handle करती है। बिना full page reload किए seamless dynamic transitions और multiple URL navigation options enable करने के लिए React Router का use किया जाता है।

---

React Router क्या है और इसका Use क्यों किया जाता है?

React Router एक standard, light-weight library है जो React applications में routing और navigation को manage करती है। Traditional websites में जब हम किसी link पर click करते हैं, तो browser server को एक fresh HTML document के लिए Request भेजता है। Server नया page भेजता है, और पूरा page reload होता है।

लेकिन React application एक single index.html file पर load होता है। यहाँ React Router browser के address bar के URL को track करता है और बिना page reload किए JavaScript की मदद से screen पर dynamic React components को switch (swap) कर देता है। इसे हम Client-side Routing कहते हैं।

React Router का use करने के मुख्य कारण:

No Page Reloads: Navigation instant और super smooth हो जाता है।
State Preservation: Page change होने पर भी application की global state refresh होकर reset नहीं होती।
Dynamic Nested Routing: Layouts के अंदर layouts (sub-pages) render करना बच्चों का खेल बन जाता है।
SEO-Friendly URL Patterns: Custom paths जैसे /products/:id बनाना बेहद आसान हो जाता है।

🏗️ Client-Side Routing Flow

URL Changes (/about)
→
React Router Intercepts
→
Swap Component (No Reload)

Diagram: React Router tracks URL changes and swaps components instantly without refreshing the browser.

---

React Router v5 vs React Router v6 में क्या अंतर है?

अगर आप पुराने articles या tutorials पढ़ेंगे, तो वहाँ पुराने React Router v5 का syntax मिलेगा। लेकिन आज के समय में production-level apps में React Router v6 का ही use किया जाता है, जो काफी light-weight है और modern hooks के साथ fully optimized है।

इन दोनों versions के बड़े differences को इस table से समझते हैं:

Feature	React Router v5	React Router v6 (Modern)
Main Container	`<Switch>`	`<Routes>`
Route Render Syntax	`<Route component={Home} />`	`<Route element={<Home />} />`
Navigation Hook	`useHistory()`	`useNavigate()`
Exact Matching	`exact` prop required	Automatic matching (No exact required)

---

React Router को Step-by-Step अपने Project में कैसे Setup करें?

चलिए, अब zero से start करते हैं। हम एक complete working React application setup करेंगे जिसमें different pages (Home, About, Dashboard) होंगे, Dynamic Routing होगी, और modern navigation techniques का use होगा।

Step 1: React Project Create करें (Vite के साथ)

सबसे पहले अपने terminal में जाएँ और नीचे दिए गए command की मदद से एक fresh Vite + React project generate करें:

npm create vite@latest my-routing-app -- --template react
cd my-routing-app
npm install

Step 2: React Router DOM Package Install करें

React Router को custom web apps के लिए support करने के लिए हमें react-router-dom package install करना होता है। अपने project terminal में इसे run करें:

npm install react-router-dom

Step 3: Component Structure Design करें

हमारा application professional दिखे, इसलिए हम clear folder structure follow करेंगे। अपने src directory के अंदर नीचे दिए गए format में components और pages create करें:

src/
 ├── components/
 │    └── Navbar.jsx
 ├── pages/
 │    ├── Home.jsx
 ├── pages/
 │    ├── About.jsx
 ├── pages/
 │    ├── Profile.jsx
 ├── pages/
 │    ├── NotFound.jsx
 ├── App.jsx
 └── main.jsx

---

Production-Ready React Router Implementation (Complete Code)

ध्यान देने वाली बात ये है कि React Router को configure करने के लिए हमें application को <BrowserRouter> wrapper के अंदर wrap करना पड़ता है। चलिए, एक-एक करके सभी files को pure code के साथ code करते हैं।

1. Root Entry Config: `src/main.jsx`

यहाँ हम पूरे React application को React Router context provide करने के लिए <BrowserRouter> component setup करेंगे।

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import { BrowserRouter } from 'react-router-dom';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')).render(





);

2. Dynamic Components Setup: Pages

अब हमारे dynamic routes के लिए screens (pages) generate करते हैं।

File: `src/pages/Home.jsx`

import React from 'react';

export default function Home() {
  return (

      # 🏡 Home Page


      React Router Masterclass में आपका स्वागत है! यह हमारा landing page है।



  );
}

File: `src/pages/About.jsx`

import React from 'react';

export default function About() {
  return (

      # ℹ️ About Page


      हम यहाँ React applications में seamless routing handle करना सीख रहे हैं।



  );
}

File: `src/pages/Profile.jsx` (Dynamic Component)

हम dynamic routing के concept को show करने के लिए Route URLs से parameter parse करने वाले component का handle setup करेंगे।

import React from 'react';
import { useParams } from 'react-router-dom';

export default function Profile() {
  // useParams Hook URL dynamically match context parse karta hai
  const { username } = useParams();

  return (

      # 👤 User Profile Page


      Welcome back, {username}!



  );
}

File: `src/pages/NotFound.jsx` (404 Fallback Component)

import React from 'react';
import { useNavigate } from 'react-router-dom';

export default function NotFound() {
  const navigate = useNavigate();

  return (

      # 404


      ## Oops! Page Not Found


      जिस page को आप ढूँढ रहे हैं, वो अस्तित्व में नहीं है।


       navigate('/')} 
        style={{
          background: '#06b6d4',
          color: '#fff',
          border: 'none',
          padding: '10px 20px',
          borderRadius: '5px',
          cursor: 'pointer',
          fontWeight: 'bold'
        }}
      >
        Go to Home


  );
}

3. Global Navigation Layout: `src/components/Navbar.jsx`

Pro-Tip: कभी भी direct HTML anchor tags (<a href="...">) का use React Router में मत करना। Anchor tags browser refresh trigger कर देते हैं। इसकी जगह हमेशा <Link> या <NavLink> component का ही use करना चाहिए जो internal application transitions manage करते हैं।

import React from 'react';
import { NavLink } from 'react-router-dom';

export default function Navbar() {
  // Active route styling definition
  const linkStyle = ({ isActive }) => ({
    textDecoration: 'none',
    color: isActive ? '#06b6d4' : '#333',
    fontWeight: isActive ? 'bold' : 'normal',
    marginRight: '20px',
    fontSize: '18px'
  });

  return (

      MyRouterApp

        Home
        About
        My Profile


  );
}

4. Route Handler Mapping: `src/App.jsx`

यहाँ हम अपने component mapping को finalize करेंगे। <Routes> tag के अंदर specific configurations dynamic control flow create करती हैं।

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Navbar from './components/Navbar';
import Home from './pages/Home';
import About from './pages/About';
import Profile from './pages/Profile';
import NotFound from './pages/NotFound';

export default function App() {
  return (



      {/* Route paths selection setup */}

        } />
        } />

        {/* Dynamic Route: 'username' value state parameters map context create karegi */}
        } />

        {/* Wildcard 404 Fallback: Matching default route */}
        } />


  );
}

---

Dynamic Routing और Standard Hooks को कैसे समझें?

React Router v6 हमें powerful core hooks provide करता है, जो application components के dynamic context manipulation को बेहद आसान बना देते हैं। चलिए, इन essential hooks के working patterns को practical code use-case के साथ समझते हैं।

1. `useParams()` Hook

जब dynamic URL structure render करनी हो (जैसे Product display: /product/:productId, User profiles: /profile/:id), तब useParams hook route values direct map करता है।

// URL context structure: '/product/9988'
const { productId } = useParams();
// output validation: 9988

2. `useNavigate()` Hook

यदि user interaction (जैसे Form submit button click, successful login API feedback) के validate होने पर programmatically navigate करना हो, तो useNavigate hook direct transition inject कर देता है।

const navigate = useNavigate();

const handleLogin = () => {
  // Login implementation logic executes...
  navigate('/dashboard');
};

3. `useLocation()` Hook

यह hook complete browser window position tracking state dynamic monitor करता है। इसके state logic property parameters path analytics record verify करने में help करते हैं।

import { useLocation } from 'react-router-dom';

const location = useLocation();
console.log(location.pathname); // console outputs: current URL path context

---

React Router में आने वाले 2 Common Errors और उनके Solutions

जब developers React Router setup करना शुरू करते हैं, तो वे अक्सर कुछ errors का सामना करते हैं। चलिए, देखते हैं कि वे error क्यों आते हैं और उन्हें कैसे solve किया जाता है।

Error 1: "Cannot read property 'pathname' of undefined" या "useNavigate() can only be used in the context of a <Router>"

कारण: यह error तब आता है जब आप React Router के hooks (जैसे useNavigate, useLocation) का use ऐसे component में करते हैं जो <BrowserRouter> wrapper context के बाहर defined है।

Solution: सुनिश्चित करें कि आपकी complete file tree में <BrowserRouter> root component scale पर nested component properties को full wrapping pattern dynamic coverage provide कर रहा हो (जैसे हमने main.jsx में wrapper handle context apply किया है)।

Error 2: Production Hosting पर Page Refresh करने पर "404 Not Found" Error

कारण: Local server पर routing perfect चलती है, लेकिन Netlify, Vercel या AWS S3 पर project host करने पर dynamic pages को refresh करने पर browser 404 error देता है। ऐसा इसलिए होता है क्योंकि static page hosting server direct URL handle request (जैसे /about) browser window layout file level fallback config verify नहीं कर पाता।

Solution: आपको host server redirects file configuration write करनी होती है जो सभी route inputs को fallback index.html default fallback map redirection processing coordinate path logic pass करेगी:

For Netlify: Root public path folder layout inside configuration file _redirects write करें और उसमें यह command line save करें:

/*    /index.html   200

For Vercel: Root file path configurations location pattern vercel.json check configuration parameters definition handle करें:

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

---

Scalability & Performance Best Practice: Lazy Loading and Suspense

जब dynamic routing applications का content load size bundle memory metrics scale cross करने लगता है, तब React code performance optimization strategies का implement verify dynamic scale handle validation structure provide करता है।

सभी components को core load bundle initial configuration level render execution logic map pass runtime download processing save use behavior runtime system improve provide strategy pattern logic support block load dynamic definition compile render code setup:

import React, { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';
import Navbar from './components/Navbar';

// Performance optimization setup using lazy component definitions
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Profile = lazy(() => import('./pages/Profile'));

export default function App() {
  return (


      {/* Route code-splitting with boundary loader wrapper */}
      Loading page dynamic content...}>

          } />
          } />
          } />



  );
}

ऊपर दिया गया snippet component levels load configurations structure state scale improve runtime execution control block optimize dynamic support logic structure verify runtime system level apply करता है।

---

तो दोस्तों, आज हमने सीखा कि React Router क्या है, Single Page Applications (SPA) के लिए यह क्यों आवश्यक है, v5 और v6 में क्या अंतर है, और dynamic routing, nested layouts व custom performance parameters को hooks की मदद से कैसे manage किया जाता है। Routing implementation logic configure करते समय official guidelines help pattern integration rules references tracking metrics layout process setup detail standard study rules standard setup track verification follow system pattern access scale structure code documentation metrics review dynamic optimize configurations support guidelines check React Router Official Documentation resource link help verify complete pattern validation support process update load logic block optimize update standard analyze structure verification control execution state check check verify build load setups perform complete update layout rules design process build clear track check can guide.

Frequently Asked Questions (FAQs)

Q1: React Router DOM package install करना क्यों आवश्यक है, direct standard react-router module install क्यों नहीं करते?
react-router core package है जिसमें routing की common functionality (hooks, routes match logic) होती है। Web browsers पर app development करने के लिए हमें DOM support integrations runtime components control logic bindings mapping logic की ज़रूरत होती है, जो सिर्फ react-router-dom container libraries package API functions configuration support patterns map provides handle details verification flow verify provide access use scale structure coordinate metrics define logic standard check verify can system setup scale execution control base.
Q2: standard React Link component and anchor standard element a tag href properties logic match base difference verification rules criteria specify use check handle metrics load parameter detail options context specify access verify kya features options logic setup pattern perform use level?
Anchor link elements direct dynamic user requests browser refresh default window parameters check reload parameters perform flow reset actions track execution state processing verify behavior validation control pattern level layout execution map process trigger apply coordinates. Link element navigation block browser click target capture dynamic client routing system state background configurations changes dynamic component render execute complete without performance issues speed browser memory configurations optimize dynamic.
Q3: Dynamic Nested routes dynamic nesting Outlet handle context verify layouts process control pattern setup configuration structure rules kaise parameters implementation system design track apply?
Nested layout support setups dynamic route nesting level structure handle path verification parameter validation control setup use Outlet nested child routes components location space parameters display runtime template dynamically perform child page swapping dynamic layouts process manage structures handle support metrics code scale levels verify performance options coordinates pattern use setups verify parameters render dynamic coordinates structure verify system.
Q4: useParams update use params values read component levels properties standard values access syntax update design configuration kaise details analyze logic track handle validation patterns parameters verify execute?
useParams component standard logic runtime variable path variable keys tracking map access structure control check logic process dynamic keys tracking validation pattern values map setup configuration system profiles routes parameters like (path: "/profile/:username") handle process parameter read destruct variable like: const { username } = useParams() handle direct parsing verification output dynamically details check provide standard.
Q5: Dynamic React context component configuration nested structure error dynamic page refresh routing control state production site issues resolve parameter rules kaise performance track configurations system execute?
Production server systems index entry default target check file request system redirect standard config control maps file coordinates support verification configurations design runtime mapping handle like _redirects dynamic instructions static parameters deployment structures setups verification track fallback files dynamic map layout support check patterns instructions.

React Server Actions Complete Guide (React 19 in (Hindi)

banti kevat — Fri, 17 Jul 2026 10:16:36 +0000

React Server Actions सीखें! React 19 की इस हिंदी गाइड में सीखें बिना API endpoints के सीधे database queries और state updates कैसे करते हैं।

क्या आप भी React Applications में form submit करने के लिए बार-बार API Routes और Controllers बनाकर थक चुके हैं? सोचिए अगर आप Client Component के बटन क्लिक पर सीधे Server का function execute कर सकें, वो भी बिना किसी Fetch request या Axios के! सुनने में जादू जैसा लगता है न? लेकिन React 19 ने इसी जादू को हकीकत बना दिया है।

⚡ Quick Answer: React Server Actions, React 19 का एक क्रांतिकारी Feature है जो बिना किसी manual REST API endpoints के, Client-side Components से सीधे Server-side code (जैसे Database operations या Authentication) को asynchronous functions के ज़रिए call करने की अनुमति देता है। यह development speed को बढ़ाता है और client state management को आसान बनाता है।
दोस्तों, इस Master-class tutorial में हम ReactJS के सबसे शक्तिशाली Feature—React Server Actions को बिल्कुल गहराई से समझेंगे। अगर आप एक senior developer की तरह clean और scalable code लिखना चाहते हैं, तो यह guide आपके लिए ही है। चलिए शुरू करते हैं!

---

React Server Actions क्या है और React 19 में इसकी क्यों ज़रूरत पड़ी?

पुराने दिनों को याद कीजिए जब हमें एक Simple Login Form बनाना होता था। हम क्या करते थे? पहले client-side पर form state manage करते थे (जैसे useState), फिर server-side पर NodeJS या ExpressJS में एक API Route बनाते थे, फिर fetch() या axios.post() का use करके request भेजते थे, और अंत में loading, error, और success states को manually handle करते थे।

इस traditional workflow में दो बड़ी परेशानियां थीं:

Client-Server Disconnect: Server और Client के बीच data type synchronization का कोई direct तरीका नहीं था। अगर API Schema में कोई बदलाव हुआ, तो Client Code टूटने का डर हमेशा रहता था।
Redundant State Management: सिर्फ एक Form Submit करने के लिए हमें isLoading, error, और data जैसी अनगिनत states बनानी पड़ती थीं, जिससे code काफी verbose हो जाता था।

React 19 ने Server Components की ताकत को आगे बढ़ाते हुए React Server Actions को introduce किया। अब आप सीधे Server-side functions को Client Components में bind कर सकते हैं। जब Client उस function को call करता है, तो React background में एक network request (POST Request) खुद handle करता है।

---

React Server Actions कैसे काम करता है? (Under the Hood Architecture)

ध्यान देने वाली बात ये है कि React Server Actions कोई magic नहीं है, बल्कि यह एक highly-optimized abstraction है। जब आप किसी function के top पर "use server" directive लिखते हैं, तो React compiler समझ जाता है कि इस code को server पर ही रखना है और client bundle में export नहीं करना है।

🏗️ React Server Actions Architecture

Client Form (UI)
➔
Auto-Generated POST Request
➔
Server Action Function
➔
Direct Database Query

Diagram: Client triggering a Server Action, passing serialized arguments, and executing securely on Server.

जब user form submit करता है, तो React background में dynamic reference creation के ज़रिए parameters को serialize करता है और server पर transfer करता है। Server Action execute होने के बाद UI dynamically update हो जाती है, वो भी बिना full page reload के।

---

React Server Actions vs Traditional API Fetching

आइए इन दोनों approach को आमने-सामने रखकर देखते हैं ताकि आपको अंतर साफ समझ आ जाए:

Feature	Traditional API Fetching	React Server Actions
API Route Boilerplate	हाँ, अलग से route handlers (/api/route) बनाने पड़ते हैं।	नहीं, सीधे JS/TS function की तरह call होता है।
Security	API endpoints public होते हैं, CORS और CORS validation ज़रूरी है।	यह server-only environment में चलता है, code client bundle में लीक नहीं होता।
State Hook Redundancy	Multiple states (loading, errors, status) manual manage करनी पड़ती हैं।	React 19 Hooks जैसे `useActionState` और `useFormStatus` से automatic handle होता है।
Bundle Size	Client-side libraries (जैसे Axios) bundle size बढ़ाती हैं।	Zero client-side JS weight, React framework handles networking.

---

React Server Actions का Setup और Implementation (Step-by-Step)

तो दोस्तों, अब practical coding का समय आ गया है। हम एक real-world, production-ready product catalog system बनाएंगे, जहां हम MongoDB या Database में data save करेंगे। इसके लिए हम NextJS या vanilla React 19 architecture का use करेंगे।

Step 1: Project Structure setup करें

सबसे पहले अपने project में files को इस तरह organize करें:

src/
├── actions/
│   └── productActions.js  <-- Server Actions File (with "use server")
├── components/
│   └── AddProductForm.jsx <-- Client component (Form UI)
└── database/
    └── dbConnect.js       <-- Simulated database connection

Step 2: Database Connection File (dbConnect.js)

हम एक clean database simulation utility बनाएंगे जो production environments जैसी query handling और delay mimic करेगी:

// src/database/dbConnect.js

// Mock database storage
let productsDatabase = [
  { id: 1, name: "Mechanical Keyboard", price: 4999, category: "Electronics" }
];

export async function saveProductToDB(productData) {
  // Database saving simulation (2 seconds network latency)
  await new Promise((resolve) => setTimeout(resolve, 2000));

  const newProduct = {
    id: productsDatabase.length + 1,
    ...productData,
    price: parseFloat(productData.price)
  };

  productsDatabase.push(newProduct);
  return newProduct;
}

export async function fetchAllProducts() {
  return [...productsDatabase];
}

Step 3: Server Action Define करें (productActions.js)

यहाँ सबसे महत्वपूर्ण ध्यान देने वाली बात ये है कि file के बिल्कुल शीर्ष (top) पर "use server" लिखना अनिवार्य है।

// src/actions/productActions.js
"use server";

import { saveProductToDB } from "../database/dbConnect";

export async function addNewProductAction(prevState, formData) {
  try {
    const name = formData.get("name");
    const price = formData.get("price");
    const category = formData.get("category");

    // Server-side Validation
    if (!name || name.trim().length < 3) {
      return {
        success: false,
        error: "Product का नाम कम से कम 3 characters का होना चाहिए।"
      };
    }

    if (!price || isNaN(price) || parseFloat(price) <= 0) {
      return {
        success: false,
        error: "कृपया एक वैध और positive price डालें।"
      };
    }

    // Direct Database Operation on the Server!
    const savedProduct = await saveProductToDB({ name, price, category });

    return {
      success: true,
      data: savedProduct,
      message: `${savedProduct.name} को database में सफलतापूर्वक save कर दिया गया है!`
    };

  } catch (err) {
    return {
      success: false,
      error: "सर्वर पर कुछ गड़बड़ हो गई: " + err.message
    };
  }
}

Step 4: Client Form Component बनाना (AddProductForm.jsx)

अब हम React 19 के नए React Hook useActionState का उपयोग करेंगे, जो server actions के response और pending states को manage करने में हमारी मदद करता है।

// src/components/AddProductForm.jsx
"use client";

import React, { useActionState } from "react";
import { addNewProductAction } from "../actions/productActions";

// Custom submit button inside client form to leverage pending status
function SubmitButton() {
  // We can write additional UI states or handle loader here
  return (
    <button 
      type="submit" 
      style={{
        padding: "12px 24px",
        background: "#2563eb",
        color: "#ffffff",
        border: "none",
        borderRadius: "6px",
        fontSize: "16px",
        cursor: "pointer",
        fontWeight: "600"
      }}
    >
      Product Add करें
    </button>
  );
}

export default function AddProductForm() {
  // useActionState Hook syntax in React 19:
  // const [state, actionTrigger, isPending] = useActionState(serverAction, initialState);
  const [state, formAction, isPending] = useActionState(addNewProductAction, null);

  return (
    <div style={{ maxWidth: "500px", margin: "40px auto", fontFamily: "sans-serif" }}>
      <h2 style={{ color: "#1e293b", borderBottom: "2px solid #e2e8f0", paddingBottom: "10px" }}>
        🛡️ Add New Product (React 19 Server Action)
      </h2>

      <form action={formAction} style={{ display: "flex", flexDirection: "column", gap: "16px", marginTop: "20px" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: "6px" }}>
          <label style={{ fontWeight: "600", color: "#475569" }}>Product Name:</label>
          <input 
            type="text" 
            name="name" 
            placeholder="जैसे: Gaming Mouse" 
            required
            style={{ padding: "10px", borderRadius: "6px", border: "1px solid #cbd5e1" }}
          />
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: "6px" }}>
          <label style={{ fontWeight: "600", color: "#475569" }}>Price (INR):</label>
          <input 
            type="number" 
            name="price" 
            placeholder="जैसे: 1500" 
            required
            style={{ padding: "10px", borderRadius: "6px", border: "1px solid #cbd5e1" }}
          />
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: "6px" }}>
          <label style={{ fontWeight: "600", color: "#475569" }}>Category:</label>
          <select name="category" style={{ padding: "10px", borderRadius: "6px", border: "1px solid #cbd5e1" }}>
            <option value="Electronics">Electronics</option>
            <option value="Accessories">Accessories</option>
            <option value="Books">Books</option>
          </select>
        </div>

        {isPending ? (
          <p style={{ color: "#d97706", fontWeight: "600" }}>⏳ Database में saving चल रही है...</p>
        ) : (
          <SubmitButton />
        )}

        {/* State messages handling */}
        {state && !state.success && (
          <div style={{ color: "#dc2626", background: "#fee2e2", padding: "12px", borderRadius: "6px", fontWeight: "500" }}>
            ⚠️ {state.error}
          </div>
        )}

        {state && state.success && (
          <div style={{ color: "#16a34a", background: "#dcfce7", padding: "12px", borderRadius: "6px", fontWeight: "500" }}>
            🎉 {state.message}
          </div>
        )}
      </form>
    </div>
  );
}

शानदार! इस approach का सबसे बड़ा फायदा देखा आपने? हमें client components में loading state handle करने के लिए useState(false) या toggling functions नहीं लिखने पड़े। React 19 के useActionState ने isPending flag automatic handle कर लिया।

इसके बारे में गहराई से जानने के लिए आप आधिकारिक React Documentation को refer कर सकते हैं जो comprehensive standards provide करता है।

---

React Server Actions के Common Errors और उन्हें Debug/Fix करने का तरीका

दोस्तों, जब आप production apps पर काम कर रहे होंगे, तो कुछ आम error आ सकते हैं। आइए देखते हैं उन्हें चुटकियों में कैसे fix error किया जाता है:

1. "Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components"

कारण: यह React 19 का Serialization error है। जब आप Server Action से कोई ऐसा complex object return करते हैं जिसमें functions, custom class instances, या dates होती हैं, तो React उन्हें serialize नहीं कर पाता।

समाधान: हमेशा database response से clean raw JSON return करें। उदाहरण के लिए, Mongoose documents या SQL results को send करने से पहले destructuring या copy कर लें:

// ❌ गलत तरीका
return { user: userDoc }; // userDoc contains database functions

//  सही तरीका
return { 
  user: {
    id: userDoc._id.toString(),
    name: userDoc.name,
    email: userDoc.email
  } 
};

2. "Error: Action expected to be run on server but executed on client"

कारण: आपने Server action file के top पर "use server" directive लगाना भूल गए हैं या file extension proper manage नहीं है।

समाधान: सुनिश्चित करें कि आपकी Action files में शीर्ष पर "use server" line single quotes या double quotes में लिखी हुई हो, और वह blank spaces से पहले हो।

---

Best Practices: Performance, Security, और Scalability

एक senior developer होने के नाते मैं आपको हमेशा सलाह दूंगा कि इन best practices का पालन करें:

Zod Schema से Validation करें: Client-side validation को आसानी से bypass किया जा सकता है। इसलिए Server Actions के अंदर Zod जैसी libraries का उपयोग करके parameters का schema validate ज़रूर करें।
Rate Limiting लगाएं: चूंकि Server Actions asynchronous API endpoints की तरह behave करते हैं, वे DDOS attacks के प्रति vulnerable हो सकते हैं। Client requests को session tokens के साथ match करें और limit constraints लागू करें।
Optimistic Updates का उपयोग करें: जब user interface पर instantaneous feedback ज़रूरी हो, तो React 19 के useOptimistic hook का उपयोग करें ताकि dynamic states fast load हो सकें।

---

तो दोस्तों, हमने आज सीखा कि कैसे React Server Actions ने React Development Architecture को बिल्कुल बदलकर रख दिया है। अब हमें REST API endpoints बनाने, payloads serialize करने, और loading states की फिक्र करने की कोई आवश्यकता नहीं है। इस Guide के core code blocks को अपने machine पर run करें, modify करें और production apps में apply करें। ऐसे ही मजेदार React 19 concepts सीखते रहिए!

---

Frequently Asked Questions (FAQs)

Q1: क्या React Server Actions का use सिर्फ Next.js में ही हो सकता है?
नहीं, हालांकि Next.js इसे out-of-the-box support करता है, लेकिन Server Actions React 19 runtime का core spec feature है। इसे किसी भी Server-Components architecture support करने वाले Bundler या Framework (जैसे Remix, Expo, Parcel) के साथ implement किया जा सकता है।
Q2: Server Actions, API Routes से ज़्यादा secure क्यों माने जाते हैं?
क्योंकि Server Actions का code client bundle में कभी compile होकर नहीं जाता। इसमें dynamic tokens और database queries directly use हो सकती हैं, जो security leaks और endpoint sniffing को 100% block करती हैं।
Q3: क्या Server Actions का use file upload करने के लिए किया जा सकता है?
हाँ, बिल्कुल! आप FormData object में binary image/video metadata directly accept कर सकते हैं और Server Action के अंदर AWS S3 या Cloudinary SDK call करके direct uploads handle कर सकते हैं।
Q4: क्या "use server" का मतलब code backend (NodeJS) पर run होगा?
हाँ, जब किसी function या file के top पर "use server" लिखा जाता है, तो React runtime उसे केवल node environments या edge servers पर compile करता है। Browser उसे execute करने के लिए specialized network layer request का सहारा लेता है।
Q5: useActionState और useFormStatus hooks में क्या मुख्य अंतर है?
useActionState form lifecycle response (data, pending flow) को complete control करता है, जबकि useFormStatus एक context hook है जो children components को deep context level पर submit element state (जैसे pending loading states) directly pass करता है।

React 19 Server Components Kya Hain (Deep Guide in (Hindi)

banti kevat — Fri, 17 Jul 2026 06:01:39 +0000

React 19 Server Components kya hain? Is complete Hindi guide me Server Components, Client Components aur practical integration step-by-step seekhein.

दोस्तों, अगर आप वेब डेवलपमेंट की दुनिया में एक्टिव हैं, तो आपने React 19 के शोर-शराबे में "Server Components" का नाम ज़रूर सुना होगा। जब हम पहले ReactJS में काम करते थे, तो हमारा सारा कोड Browser यानी Client-side पर चलता था। लेकिन React 19 ने पूरी गेम ही बदल दी है। अब हमारे पास Server पर सीधे render होने वाले Components की जादुई ताकत है।

क्या आपने कभी सोचा है कि जब आपकी React App बड़ी होती जाती है, तो उसका bundle size भी भारी हो जाता है और slow network पर load होने में सदियां लगा देता है? इसी बड़ी समस्या को हल करने के लिए React टीम ने Server Components का कॉन्सेप्ट पेश किया है। आज हम और आप साथ मिलकर इस विषय की गहराई में उतरेंगे, कोडिंग करेंगे, और यह समझेंगे कि यह नया आर्किटेक्चर हमारी ऐप्स को सुपर-फ़ास्ट कैसे बनाता है।

⚡ Quick Answer: React 19 Server Components (RSC) ek naya paradigm hai jo components ko client ke bajay direct server par render karta hai. Isse client-side javascript bundle size zero ho jata hai, security badhti hai, aur data fetching seedhe database se bina kisi extra API endpoints ke behatar speed se hoti hai.

---

React 19 Server Components क्या हैं और ये क्यों ज़रूरी हैं?

सरल शब्दों में कहें तो, React Server Components (RSC) ऐसे Components हैं जो सिर्फ और सिर्फ Web Server पर Execute होते हैं। इनका HTML और JSON Representation सर्वर पर ही तैयार हो जाता है और फिर उसे Browser को भेजा जाता है।

पारंपरिक React (Client-side Rendering - CSR) में, जब कोई यूजर आपकी वेबसाइट पर आता है, तो ब्राउज़र सबसे पहले एक खाली HTML फाइल डाउनलोड करता है। उसके बाद, भारी-भरकम JavaScript Bundle डाउनलोड होती है, फिर React library लोड होती है, API से डेटा fetch होता है, और आखिरकार स्क्रीन पर कुछ दिखाई देता है। इस पूरी प्रोसेस में यूजर को "Loading..." स्पिनर देखना पड़ता है।

ध्यान देने वाली बात ये है कि React 19 Server Components इस पूरी प्रोसेस को उलट देते हैं:

Zero Bundle Size: जो Third-party Libraries (जैसे marked या date-fns) आप Server Component में यूज़ करते हैं, वे यूजर के ब्राउज़र में डाउनलोड ही नहीं होतीं। ब्राउज़र को सिर्फ साफ़-सुथरा UI मिलता है।
Direct Backend Access: अब आपको Server Component के अंदर से डेटा fetch करने के लिए अलग से ExpressJS या NodeJS API बनाने की ज़रूरत नहीं है। आप सीधे Database (जैसे PostgreSQL या MongoDB) से Query कर सकते हैं।
Better SEO & Core Web Vitals: चूंकि सर्वर से पहले से रेंडर किया हुआ कंटेंट आता है, इसलिए Google के Search Crawlers को तुरंत कंटेंट मिल जाता है, जिससे SEO रैंकिंग बेहतरीन हो जाती है।

---

Server Components और Client Components में क्या अंतर है?

यहाँ पर बहुत से डेवलपर्स कंफ्यूज हो जाते हैं। उन्हें लगता है कि Server Components आने के बाद Client Components (जो हम सालों से लिखते आ रहे हैं) खत्म हो जाएंगे। ऐसा बिल्कुल नहीं है! दोनों का अपना अलग-अलग काम है और ये दोनों मिलकर एक बेहतरीन Ecosystem बनाते हैं।

चलिए इन दोनों के अंतर को इस साफ़-सुथरी Table के ज़रिए समझते हैं:

Feature / Capability	React Server Component (RSC)	Client Component (CC)
Execution Environment	केवल Server पर	Browser (Client) और Server (Prerender) पर
React Hooks (useState, useEffect)	नहीं कर सकते (Not Allowed)	हाँ, पूरी तरह कर सकते हैं
Direct Database / File System access	हाँ, सीधे Access कर सकते हैं	नहीं, Security Risk है
Browser APIs (window, localStorage)	नहीं (Server पर window नहीं होता)	हाँ, एक्सेस कर सकते हैं
Client-side Bundle Size	Zero (0 bytes)	Component code के साइज़ पर निर्भर करता है

---

React 19 Server Components कैसे काम करते हैं? (Architecture Explained)

इसे समझने के लिए हमें इसके फ्लो को देखना होगा। जब यूजर किसी पेज को रिक्वेस्ट करता है, तो बैकएंड पर क्या-क्या घटनाएं घटती हैं, इसे इस आर्किटेक्चर डायग्राम से समझिए:

🏗️ RSC Rendering Architecture Flow

User Request
→
React Server (Runs RSC)
→
Direct DB Fetch / Node.js
→
RSC Payload (JSON-like)
→
Browser (Hydration)

Diagram: Server-side database logic compilation and dynamic streaming of React elements to client.

चलिए इस प्रोसेस को आसान शब्दों में समझते हैं:

Step 1: Request Init: यूजर आपकी वेबसाइट के एक specific path पर विजिट करता है।
Step 2: Server Execution: React सर्वर-साइड पर आपके Server Components को रेंडर करना शुरू करता है। अगर इस कंपोनेंट में कोई Database Query या API Call है, तो उसे सर्वर पर ही Execute कर दिया जाता है।
Step 3: Generating Payload: React एक विशेष फ़ॉर्मेट में आउटपुट जेनरेट करता है जिसे "RSC Payload" कहते हैं (यह शुद्ध HTML नहीं होता, बल्कि एक JSON-like स्ट्रक्चर होता है जो वर्चुअल DOM को दर्शाता है)।
Step 4: Stream to Client: इस पेलोड को ब्राउज़र में स्ट्रीम किया जाता है। ब्राउज़र इसे पार्स करके UI रेंडर करता है और जहाँ भी Client Components होते हैं, उन्हें Interactive बनाता है (Hydration)।

---

Practical Code: Server Components को React 19 में कैसे implement करें?

अब समय आ गया है कि हम अपनी कोडिंग स्किल्स का इस्तेमाल करें और एक वर्किंग, प्रोडक्शन-रेडी उदाहरण देखें। हम एक ई-कॉमर्स "Product Catalog Dashboard" बनाएंगे।

इस प्रोजेक्ट में हम दो मुख्य चीज़ें बनाएंगे:

ProductDashboard (Server Component): यह सर्वर पर चलेगा, सीधे डेटाबेस या एक्सटर्नल API से प्रोडक्ट्स लाएगा और इसे बिना किसी JavaScript ओवरहेड के रेंडर करेगा।
InteractiveCounter & SearchFilter (Client Component): ये इंटरैक्टिविटी को हैंडल करेंगे जैसे कि लाइक बटन, सर्च बार, और यूज़र इनपुट।

चूंकि React 19 में कंपोनेंट डिफ़ॉल्ट रूप से Server Component होते हैं (अगर आप Next.js या React Server DOM का उपयोग कर रहे हैं), हमें Client Components के टॉप पर "use client" डायरेक्टिव लिखना होता है।

Step 1: Client Component बनाना (Interactive UI Element)

यह हमारा लाइक और सर्च कंपोनेंट होगा जो ब्राउज़र पर चलेगा। इसके टॉप पर "use client" लिखना अनिवार्य है।

// ClientComponent.jsx
"use client";

import React, { useState } from "react";

export function InteractiveCounter({ initialLikes, productName }) {
  const [likes, setLikes] = useState(initialLikes);

  const handleLike = () => {
    setLikes(prev => prev + 1);
  };

  return (


        {productName} has {likes} 👍 likes!




        Like this product


  );
}

Step 2: Server Component बनाना (Database / API Fetcher)

यह कंपोनेंट सीधे सर्वर पर चलेगा। यहाँ हम async/await का सीधे उपयोग कर सकते हैं, जो कि पारंपरिक क्लाइंट कंपोनेंट्स में संभव नहीं था।

// ProductDashboard.jsx
import React from "react";
import { InteractiveCounter } from "./ClientComponent";

// Mock Database Fetch Function (सोचिए यह सीधे MongoDB या Postgres से जुड़ा है)
async function getProductsFromDB() {
  // रियल-वर्ल्ड में यहाँ आप DB.query() लिखेंगे
  // सर्वर-साइड डिले को दर्शाने के लिए Promise का उपयोग किया गया है
  await new Promise((resolve) => setTimeout(resolve, 1000)); 

  return [
    { id: 1, name: "Developer Mech Keyboard", price: "$120", likes: 45, description: "Blue switches for satisfying clicks." },
    { id: 2, name: "UltraWide Ergonomic Monitor", price: "$450", likes: 112, description: "34-inch curved screen for massive productivity." },
    { id: 3, name: "Noise Cancelling Headphones", price: "$299", likes: 89, description: "Block out bugs and client noises effortlessly." }
  ];
}

export default async function ProductDashboard() {
  // सीधे Database से डेटा मंगाया बिना किसी Client-Side useEffect के!
  const products = await getProductsFromDB();

  return (

      # 🚀 Developer Store Dashboard (React 19 Server Components)



        यह पूरा कंपोनेंट सर्वर पर रेंडर हुआ है। ब्राउज़र में 0 bytes का एक्स्ट्रा डेटा फेचिंग कोड गया है!





        {products.map((product) => (


              ## {product.name}


              {product.price}

            {product.description}



            {/* Server Component के अंदर Client Component को Nest करना */}


        ))}


  );
}

ध्यान देने वाली बात ये है कि ProductDashboard एक async फंक्शन है। यह मुमकिन हुआ है केवल React 19 के Server Components की बदौलत! ब्राउज़र को सिर्फ अंतिम HTML मिलता है, और जो डेटाबेस सीक्रेट्स या सर्वर क्रेडेंशियल्स आप यहाँ इस्तेमाल करेंगे, वे कभी भी क्लाइंट-साइड बंडल में एक्सपोज़ नहीं होंगे।

---

React 19 Server Components में Common Errors और उन्हें कैसे Fix करें?

जब आप नया-नया काम शुरू करते हैं, तो कुछ गलतियाँ होना लाज़मी है। चलिए देखते हैं कि वे कौन सी बड़ी गलतियाँ हैं जिन्हें आपको करने से बचना है।

1. Error: "useState is not defined" in Server Component

यह सबसे आम error है जो नए डेवलपर्स फेस करते हैं। यदि आप किसी Server Component के अंदर useState या useEffect का उपयोग करने की कोशिश करेंगे, तो React कंपाइलर चिल्ला उठेगा!

Solution: समझें कि सर्वर पर स्टेट नहीं बदल सकती। यदि आपको स्टेट, इवेंट लिसनर्स (जैसे onClick, onChange), या लाइफसाइकल मेथड्स चाहिए, तो कंपोनेंट को एक अलग फाइल में रखें और उसके टॉप पर लिखें:

"use client";
// अब आप यहाँ useState का बेझिझक इस्तेमाल कर सकते हैं

2. Error: Passing Non-Serializable Props to Client Components

जब आप एक Server Component से Client Component को डेटा भेजते हैं (Props के रूप में), तो वह डेटा Serializable होना चाहिए। इसका मतलब है कि आप Functions, Custom Classes, या Symbols को Props के तौर पर पास नहीं कर सकते।

गलत तरीका:

// Server Component के अंदर
<InteractiveCounter handleLike={() => console.log("Liked")} /> 
// Error: Server Components cannot pass functions to Client Components

सही तरीका:

// केवल प्रिमिटिव डेटा जैसे String, Number, Array, Objects पास करें
<InteractiveCounter initialLikes={10} productName="Keyboard" />

---

RSC Performance Best Practices क्या हैं?

अगर आप अपनी ऐप्लिकेशन को नेक्स्ट-लेवल पर ले जाना चाहते हैं, तो इन बेस्ट प्रैक्टिसेस को गाँठ बाँध लीजिए:

Keep Client Components at the Leaves: अपनी कंपोनेंट ट्री में क्लाइंट कंपोनेंट्स को जितना हो सके 'लीफ' (leaves - आख़िरी छोर) पर रखें। उदाहरण के लिए, पूरे हेडर को क्लाइंट कंपोनेंट बनाने के बजाय, केवल सर्च इनपुट या लॉगिन बटन को क्लाइंट कंपोनेंट बनाएं।
Use Suspense for Streaming: भारी डेटा फेचिंग वाले Server Components को React के <Suspense> के साथ रैप करें ताकि यूजर को तब तक एक खूबसूरत कंकाल (Skeleton Loader) दिखाई दे, जब तक डेटा सर्वर से लोड हो रहा है।
Share Data Safely: सुरक्षा का विशेष ध्यान रखें। किसी भी डेटाबेस क्रेडेंशियल को कभी भी गलती से भी क्लाइंट कंपोनेंट में इंपोर्ट न करें। इसके लिए आप server\-only\ लाइब्रेरी का इस्तेमाल कर सकते हैं जो कंपाइल टाइम पर ही एरर थ्रो कर देगी।

अधिक जानकारी और गहराई से सीखने के लिए आप React Official Documentation पर जाकर उनके RSC स्पेक्स देख सकते हैं।

---

Toh dosto, humne aaj seekha...

दोस्तों, आज हमने React 19 Server Components के इस मास्टर-क्लास ट्यूटोरियल में समझा कि कैसे यह तकनीक वेब डेवलपमेंट के पुराने तौर-तरीकों को बदल रही है। यह न केवल ब्राउज़र के लोड को कम करती है, बल्कि हमारे वेब पेजों को बिजली की तरह तेज़ बनाती है। हमें अब डेटा फेचिंग के लिए लंबे-चौड़े Boilerplate कोड और API endpoints लिखने की आवश्यकता नहीं है, हम डायरेक्ट सर्वर से सुरक्षित रूप से डेटा ला सकते हैं।

उम्मीद है कि इस व्यावहारिक कोडिंग उदाहरण और गहराई से की गई चर्चा के बाद अब आपको React 19 के इस नए आर्किटेक्चर को समझने में कोई हिचकिचाहट नहीं होगी। अब आप अपने अगले बड़े प्रोजेक्ट में बिना झिझक इसका इस्तेमाल कर सकते हैं और अपनी ऐप्लिकेशन की स्पीड को 10x बढ़ा सकते हैं। हैप्पी कोडिंग, दोस्तों!

---

Frequently Asked Questions (FAQs)

Q1: क्या React 19 में आने के बाद Client Components ख़त्म हो जाएंगे?
नहीं, बिल्कुल नहीं! React Server Components और Client Components एक दूसरे के पूरक (complementary) हैं। जहां Server Components डेटा फेचिंग और स्टेटलेस UI के लिए बेहतरीन हैं, वहीं Client Components इंटरएक्टिव एलिमेंट्स (जैसे Forms, Buttons, State toggles) के लिए बेहद ज़रूरी हैं।
Q2: क्या मैं React Server Component में API calls के लिए Fetch का उपयोग कर सकता हूँ?
हाँ, आप सीधे Fetch का उपयोग कर सकते हैं। वास्तव में, Server Components में Fetch का उपयोग करना क्लाइंट की तुलना में अधिक सुरक्षित और तेज़ होता है क्योंकि यह सीधे सर्वर-टू-सर्वर कम्युनिकेट करता है जिससे लेटेंसी कम हो जाती है।
Q3: "use client" डायरेक्टिव का असली काम क्या है?
"use client" डायरेक्टिव React बंडलर को बताता है कि यह फाइल और इसके सभी इम्पोर्ट्स केवल क्लाइंट (ब्राउज़र) साइड पर ही लोड और रन होने चाहिए। यह सर्वर-ओनली कोड और ब्राउज़र-ओनली कोड के बीच की सीमा रेखा तय करता है।
Q4: क्या RSC के इस्तेमाल से हमारी वेबसाइट का SEO बेहतर होता है?
हाँ, बिल्कुल! चूंकि Server Components का रेंडरिंग आउटपुट सीधे सर्वर से प्री-रेंडर होकर आता है, इसलिए सर्च इंजन क्रॉलर्स (जैसे Googlebot) को पूरा कंटेंट तुरंत मिल जाता है। इससे SEO परफॉरमेंस और इंडेक्सिंग स्पीड बहुत बेहतर हो जाती है।
Q5: क्या हम Server Components में UseContext Hook का उपयोग कर सकते हैं?
नहीं, Context API का उपयोग केवल Client Components में ही किया जा सकता है क्योंकि Context मूल रूप से क्लाइंट-साइड स्टेट शेयरिंग और डायनामिक री-रेंडरिंग पर निर्भर करता है, जो सर्वर पर उपलब्ध नहीं होता।

React Concurrent Mode Kya Hai (React 18 Feature in (Hindi)

banti kevat — Thu, 16 Jul 2026 13:02:42 +0000

React Concurrent Mode kya hai aur ye aapke applications ko kaise super fast banata hai? Is complete Hindi guide me React 18 ke is revolutionary feature ko step-by-step code examples ke saath samjhein.

Doston, jab hum koi badi React application banate hain, toh aksar humein "lag" ya UI "freeze" hone jaisi problems face karni padti hain. Kya aapne kabhi socha hai ki jab browser bhari-bhari calculations kar raha ho, tab humara UI responsive kaise reh sakta hai? Yahi wo jagah hai jahan React Concurrent Mode picture me aata hai.

⚡ Quick Answer: React Concurrent Mode ek aisa mechanism hai jo React ko ek sath multiple versions of UI par kaam karne ki permission deta hai. Isse heavy rendering ke dauran UI block nahi hota, jisse application smooth aur highly responsive bani rehti hai. Yeh feature rendering ko "interruptible" banakar performance optimize karta hai.

React Concurrent Mode kya hai aur ye kyun zaroori hai?

Pehle ke React versions me, rendering ek "blocking" process thi. Matlab agar ek baar rendering shuru ho gayi, toh jab tak wo poori nahi hoti, browser koi aur input (jaise button click ya typing) process nahi kar sakta tha. Isse user experience kharab ho jata tha.

Concurrent Mode ka matlab hai "Concurrently" kaam karna. React ab rendering process ko "pause" kar sakta hai, dusre important tasks (jaise user input) ko priority de sakta hai, aur phir wapas wahi se render continue kar sakta hai jahan se choda tha.

React Concurrent Mode kaise kaam karta hai?

🏗️ Architecture Diagram

User Event
→
Interruptible Render
→
Smooth UI

Diagram: React rendering pipeline jo user interactions ko priority deti hai.

React 18 me Concurrent Features ka use karne ke liye humein useTransition aur useDeferredValue jaise hooks milte hain. Ye developer ko control dete hain ki kaunsa update "urgent" hai aur kaunsa "background" me hona chahiye.

React 18 me Concurrent Mode ka implementation kaise karein?

Chaliye, ek practical example dekhte hain. Maan lijiye hum ek search filter bana rahe hain jahan input change hote hi bahut saara data render hota hai.

import React, { useState, useTransition } from 'react';

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

  const handleChange = (e) => {
    const value = e.target.value;
    setInput(value);

    // Urgent update (input field)
    // Background update (list filtering)
    startTransition(() => {
      const filtered = performHeavyFiltering(value);
      setList(filtered);
    });
  };

  return (
    <div>
      <input type="text" value={input} onChange={handleChange} />
      {isPending ? <p>Loading...</p> : <ul>{/* Render items here */}</ul>}
    </div>
  );
}

Yahan startTransition ka kaam ye hai ki wo React ko batata hai ki list update hona "non-urgent" hai. Isse aapka input field hamesha responsive rahega aur UI hang nahi hoga.

React Concurrent Mode vs Traditional Rendering

Feature	Traditional Mode	Concurrent Mode
Rendering	Blocking (Synchronous)	Interruptible (Asynchronous)
User Priority	Low (Input lag possible)	High (Seamless interaction)
State Updates	Everything is urgent	Separated into urgent/transitions

React components me performance optimization ke best practices

Doston, Concurrent Mode magic nahi hai, ye ek tool hai. Ise sahi se use karne ke liye kuch baatein dhyan rakhein:

Keep Logic Pure: Rendering function pure hona chahiye kyunki React use multiple times call kar sakta hai.
Avoid Side Effects during Render: useEffect ka use karein side effects ke liye, render cycle me nahi.
Use Profiler: React DevTools ka use karke identify karein ki kahan performance bottleneck hai.
Agar aap ReactJS seekh rahe hain, toh samajhiye ki hooks ka sahi istemaal hi aapki app ko scale karega.

Common errors aur debugging (Fix Error)

Kai baar developers ko "suspense" ya "concurrent mode" related error face karne ko milte hain. Aam taur par ye tab hota hai jab aap async operations ko correctly handle nahi karte. Agar aapko koi error milta hai, toh check karein ki kya aapne ErrorBoundary ka use kiya hai? Suspense components ko hamesha ErrorBoundary ke andar wrap karna recommended hai.

Frequently Asked Questions (FAQs)

Q1: Kya Concurrent Mode ke liye code me koi bada badlav karna hoga?
Nahi, React 18 me Concurrent Mode by default enable hota hai. Aapko sirf startTransition ya useDeferredValue hooks ka use karna hota hai jahan performance improve karni ho.
Q2: Isse app ki memory consumption badhti hai?
Concurrent mode render trees ko memory me hold karta hai, toh slight memory usage badh sakta hai, lekin UX itna better ho jata hai ki ye trade-off worth it hai.
Q3: Kya mujhe har jagah useTransition use karna chahiye?
Bilkul nahi! Sirf un updates ke liye use karein jo heavy hain aur jinke kaaran UI freeze ho raha hai. Normal state updates ke liye iski zaroorat nahi hai.
Q4: Kya yeh feature Next.js me kaam karta hai?
Ji haan, Next.js 13+ React 18 par hi based hai, isliye aap wahan bhi in concurrent features ka pura labh utha sakte hain.
Q5: Concurrent Mode ko debug kaise karein?
React DevTools ka "Profiler" tab best hai. Wahan aap dekh sakte hain ki kaunsa component render ho raha hai aur kitna samay le raha hai.

Toh dosto, aaj humne seekha ki kaise React Concurrent Mode humari applications ko modern aur responsive banata hai. Ye feature sirf naya nahi hai, balki React ke kaam karne ka nazariya badal deta hai. Ise apni agali project me try zaroor karein!

React Suspense aur Lazy Loading Complete Guide

banti kevat — Thu, 16 Jul 2026 10:24:53 +0000

React Suspense aur Lazy Loading complete guide: Apni web app ki performance badhayein, bundle size kam karein aur users ko lightning-fast experience dein.

दोस्तों, सोचिए कि आपने बहुत मेहनत करके एक बेहतरीन, फीचर-रिच वेब एप्लीकेशन बनाई है। आपने उसमें ढेरों खूबसूरत React components, भारी-भरकम चार्ट्स, डैशबोर्ड्स और सेटिंग्स पेज जोड़ दिए हैं। लेकिन जैसे ही आप उसे प्रोडक्शन सर्वर पर डिप्लॉय करते हैं, तो क्या होता है? पहली बार वेबसाइट लोड होने में 5 से 10 सेकंड का समय लग जाता है! यूजर चिढ़कर आपकी साइट बंद कर देता है।

आखिर ऐसा क्यों हुआ? क्योंकि आपकी पूरी एप्लीकेशन का कोड कंपाइल होकर एक ही भारी-भरकम JavaScript Bundle में सिमट गया था, जिसे यूजर के ब्राउज़र को पूरा डाउनलोड करना पड़ा। इसी बड़ी समस्या का सबसे बेहतरीन और आसान समाधान है React Suspense और Lazy Loading। चलिए, आज एक सीनियर डेवलपर की तरह बैठकर इस कॉन्सेप्ट को गहराई से समझते हैं और अपनी ऐप को सुपर-फास्ट बनाते हैं।

⚡ Quick Answer: React Suspense aur Lazy Loading एक ऐसी पॉवरफुल तकनीक है जिससे हम अपनी React App के मुख्य JavaScript bundle को छोटे-छोटे टुकड़ों (chunks) में तोड़ देते हैं। React.lazy() की मदद से components को तभी लोड किया जाता है जब उनकी जरूरत होती है, और React Suspense लोडिंग के दौरान एक सुंदर Fallback UI दिखाता है।

React Application में Bundle Size और Slow Loading की समस्या क्या है?

जब हम एक ट्रेडिशनल ReactJS एप्लीकेशन बनाते हैं, तो बिल्ड प्रोसेस (जैसे Vite या Webpack) हमारे सारे कोड, फाइल्स और थर्ड-पार्टी पैकेज को मिलाकर एक ही सिंगल JavaScript File बना देती है। इसे हम "Monolithic Bundle" कहते हैं।

अब मान लीजिए, एक नया यूजर आपकी वेबसाइट के सिर्फ "Landing Page" या "Home Page" पर आता है। लेकिन क्योंकि आपका बंडल सिंगल फाइल है, इसलिए यूजर का ब्राउज़र बैकग्राउंड में "Admin Dashboard", "Payment Gateway", "Analytics Graphs" और "Settings" का कोड भी डाउनलोड करने लगता है, जिसकी उसे उस समय कोई जरूरत ही नहीं थी! इससे आपका Initial Page Load Time बहुत बढ़ जाता है, खासकर कमजोर मोबाइल नेटवर्क्स पर।

इसी समस्या को हल करने के लिए हम "Code Splitting" का इस्तेमाल करते हैं। कोड स्प्लिटिंग का मतलब है अपने बड़े बंडल को छोटे-छोटे हिस्सों (Chunks) में बांटना, ताकि ब्राउज़र सिर्फ उसी कोड को डाउनलोड करे जो स्क्रीन पर दिखाना जरूरी है।

Code Splitting कैसे काम करती है?

नीचे दिए गए आर्किटेक्चर डायग्राम से समझिए कि नॉर्मल बंडलिंग और लेजी लोडिंग के साथ कोड स्प्लिटिंग में क्या अंतर होता है:

🏗️ Code Splitting & Lazy Loading Flow

Main App Bundle (1.5 MB)
➔ Splits into ➔
Home Chunk (100 KB)
+
Dashboard Chunk (400 KB)
+
Settings Chunk (200 KB)

Diagram: dynamic import का उपयोग करके भारी बंडल को ऑन-डिमांड चंक्स में विभाजित करना।

जब यूजर पहली बार वेबसाइट पर आएगा, तो ब्राउज़र सिर्फ Home Chunk (100 KB) डाउनलोड करेगा, जिससे पेज पलक झपकते ही लोड हो जाएगा। जब यूजर 'Dashboard' बटन पर क्लिक करेगा, केवल तभी Dashboard Chunk लोड होगा।

React.lazy और React Suspense क्या हैं?

कोड स्प्लिटिंग को आसानी से लागू करने के लिए React हमें दो बेहतरीन टूल्स देता है: React.lazy और React Suspense।

1. React.lazy क्या है?

React.lazy() एक इन-बिल्ट फंक्शन है जो हमें Dynamic Import का इस्तेमाल करके कंपोनेंट्स को आलसी (Lazy) तरीके से रेंडर करने की अनुमति देता है। यह कंपोनेंट को तभी रेंडर करता है जब उसकी सच में जरूरत होती है।

नॉर्मल स्टेटिक इम्पोर्ट (Static Import):

import PremiumDashboard from './components/PremiumDashboard';

लेजी डायनेमिक इम्पोर्ट (Lazy Dynamic Import):

import React, { lazy } from 'react';
const PremiumDashboard = lazy(() => import('./components/PremiumDashboard'));

2. React Suspense क्या है?

जब ब्राउज़र इंटरनेट से PremiumDashboard कंपोनेंट के कोड को डाउनलोड कर रहा होगा, उस छोटे से टाइम गैप (Delay) के दौरान स्क्रीन पर क्या दिखेगा? अगर हम कुछ नहीं दिखाएंगे, तो यूजर को लगेगा कि हमारी ऐप हैंग हो गई है।

यहीं पर काम आता है Suspense कंपोनेंट! Suspense एक ऐसा रैपर (Wrapper) है जो लेजी लोड होने वाले कंपोनेंट को घेरता है। जब तक वह कंपोनेंट बैकग्राउंड में डाउनलोड हो रहा होता है, तब तक Suspense अपने fallback प्रॉप में दिए गए UI (जैसे कि Loading Spinner या Skeleton Screen) को दिखाता है।

Static Import बनाम Lazy Import: मुख्य अंतर

आइए इन दोनों के बीच के बड़े अंतर को एक आसान टेबल के जरिए समझते हैं:

विशेषता (Features)	Static Import (नॉर्मल)	Lazy Import (Dynamic)
Loading Time	शुरुआत में धीमा (Slow Initial Load)	बेहद तेज (Lightning-fast Initial Load)
Bundle Size	एक बड़ा सिंगल बंडल (Monolithic)	छोटे-छोटे कई चंक्स (Chunks)
Network Requests	सिर्फ एक मुख्य रिक्वेस्ट	जरूरत पड़ने पर ऑन-डिमांड रिक्वेस्ट्स
User Experience	कमजोर कनेक्शन पर बुरा प्रभाव	एकदम स्मूथ, बिना लैग के

React.lazy और Suspense का Step-by-Step Implementation

अब थ्योरी बहुत हो गई, चलिए सीधे कोड एडिटर खोलते हैं और इसे प्रैक्टिकली करके देखते हैं। हम एक ऐसी एप्लीकेशन बनाएंगे जिसमें रूट-बेस्ड कोड स्प्लिटिंग (Route-based Code Splitting) होगी।

स्टेप 1: भारी-भरकम कंपोनेंट्स बनाना

सबसे पहले हम दो कंपोनेंट्स बनाएंगे। पहला Home.jsx जो तुरंत लोड होना चाहिए, और दूसरा AnalyticsDashboard.jsx जो एक बड़ा कंपोनेंट है और इसे हम आलसी तरीके से लोड करेंगे।

फाइल: src/components/Home.jsx

import React from 'react';

const Home = () => {
  return (

      # स्वागत है हमारी सुपर-फास्ट वेबसाइट पर! 🚀


      यह हमारा लैंडिंग पेज है जो तुरंत बिना किसी देरी के लोड हो जाता है।



  );
};

export default Home;

फाइल: src/components/AnalyticsDashboard.jsx

import React from 'react';

const AnalyticsDashboard = () => {
  // हम मान लेते हैं कि यह कंपोनेंट बहुत भारी लाइब्रेरीज़ का इस्तेमाल करता है
  return (

      ## 📊 Analytics & Premium Dashboard


      यह बहुत भारी कंपोनेंट है जो बैकग्राउंड में लोड हुआ है! इसमें कई जटिल ग्राफ और चार्ट्स शामिल हैं।


      - Active Users: 14,234
- Conversion Rate: 4.8%
- Monthly Revenue: $48,900



  );
};

export default AnalyticsDashboard;

स्टेप 2: App.jsx में Lazy Loading और Suspense सेटअप करना

अब हम अपने मेन App.jsx कंपोनेंट में इन दोनों फाइलों को डायनेमिकली इम्पोर्ट करेंगे और Suspense के साथ लोड करेंगे। लोडिंग के वक्त यूजर को एक अच्छा लोडिंग एनीमेशन दिखाने के लिए हम एक साधारण Spinner कंपोनेंट भी बनाएंगे।

फाइल: src/App.jsx

import React, { useState, lazy, Suspense } from 'react';
import Home from './components/Home';

// AnalyticsDashboard को आलसी (Lazy) तरीके से इम्पोर्ट किया गया है
const AnalyticsDashboard = lazy(() => import('./components/AnalyticsDashboard'));

// एक सुंदर लोडिंग स्पिनर कंपोनेंट
const LoadingSpinner = () => (


    कृपया प्रतीक्षा करें, भारी डेटा लोड हो रहा है...


);

function App() {
  const [showDashboard, setShowDashboard] = useState(false);

  return (



       setShowDashboard(prev => !prev)}
        style={{
          background: '#06b6d4',
          color: '#ffffff',
          border: 'none',
          padding: '12px 24px',
          fontSize: '16px',
          borderRadius: '6px',
          cursor: 'pointer',
          marginTop: '10px',
          fontWeight: 'bold',
          transition: 'background 0.3s'
        }}
      >
        {showDashboard ? 'Dashboard छुपाएं' : 'Premium Analytics Dashboard लोड करें'}


      {showDashboard && (
        // Suspense की मदद से हम लोडिंग स्टेट को आसानी से संभालते हैं



      )}

  );
}

export default App;

ध्यान देने वाली बात ये है कि जब आप पहली बार "Premium Analytics Dashboard लोड करें" बटन पर क्लिक करेंगे, तब ब्राउज़र के Network Tab में आपको एक नया .js चंक फाइल लोड होता हुआ दिखाई देगा। इसके बाद अगली बार क्लिक करने पर यह तुरंत दिखेगा क्योंकि ब्राउज़र इसे पहले ही कैशे (Cache) कर चुका होगा!

Edge Cases और Common Errors: इनसे कैसे बचें?

दोस्तों, प्रोडक्शन एनवायरनमेंट में जब आप Lazy Loading का इस्तेमाल करते हैं, तो कुछ ऐसी समस्याएं आती हैं जो आपकी पूरी ऐप को क्रैश कर सकती हैं। आइए उन समस्याओं को पहचानें और उनका पक्का इलाज ढूंढें।

1. Network Failure और ChunkLoadError

मान लीजिए आपके यूजर का इंटरनेट कनेक्शन अचानक कमजोर हो गया या टूट गया जब वह किसी नए पेज या टैब पर क्लिक करता है। ऐसे में ब्राउज़र सर्वर से वह नया JavaScript चंक डाउनलोड नहीं कर पाता और रिएक्ट एक भयानक ChunkLoadError फेंक देता है।

समाधान: Error Boundary का इस्तेमाल करें!

हमें हमेशा अपने Suspense कंपोनेंट को एक सुरक्षित घेरे में रखना चाहिए जिसे हम Error Boundary कहते हैं। अगर चंक लोड होने में कोई भी error आती है, तो यह यूजर को क्रैश स्क्रीन दिखाने के बजाय एक साफ-सुथरा एरर मैसेज या रीलोड बटन दिखाता है।

आइए एक रियलिस्टिक ErrorBoundary.jsx कंपोनेंट बनाते हैं:

फाइल: src/components/ErrorBoundary.jsx

import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // अगले रेंडर पर फॉलबैक यूआई दिखाने के लिए स्टेट अपडेट करें
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // आप यहाँ अपने एनालिटिक्स सर्विस (जैसे Sentry) पर एरर लॉग कर सकते हैं
    console.error("ErrorBoundary caught an error:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (

          ### ⚠️ नेटवर्क कनेक्शन में समस्या आ रही है!


          शायद आपका इंटरनेट धीमा है या सर्वर अपडेट हुआ है। कृपया पेज को रीफ्रेश करने का प्रयास करें।


           window.location.reload()}
            style={{
              background: '#991b1b',
              color: '#fff',
              border: 'none',
              padding: '8px 16px',
              borderRadius: '4px',
              cursor: 'pointer',
              fontWeight: 'bold'
            }}
          >
            पेज दोबारा लोड करें


      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

अब अपनी ऐप में इसका इस्तेमाल इस तरह करें:

<ErrorBoundary>
  <Suspense fallback={<LoadingSpinner />}>
    <AnalyticsDashboard />
  </Suspense>
</ErrorBoundary>

2. Named Exports के साथ React.lazy का काम न करना

एक बहुत ही कॉमन गलती जो नए डेवलपर्स करते हैं, वह यह है कि वे Named Exports को React.lazy के साथ लोड करने की कोशिश करते हैं।

गलत तरीका ❌:

// यह काम नहीं करेगा अगर Dashboard.jsx में Default Export नहीं है!
const Dashboard = lazy(() => import('./Dashboard'));

सही तरीका (The Default Export Rule) :

React.lazy केवल उन्हीं कंपोनेंट्स का समर्थन करता है जो default export होते हैं। अगर आपका कंपोनेंट Named Export (जैसे export const Dashboard = ...) है, तो आपको प्रॉमिस चेन में उसे डिफॉल्ट के रूप में रीजॉल्व करना होगा:

// Named Export को लेजी लोड करने का नायाब नुस्खा
const Dashboard = lazy(() => 
  import('./Dashboard').then(module => ({ default: module.Dashboard }))
);

React Application Optimization के लिए Best Practices

अगर आप अपनी स्केलेबल MERN Stack एप्लीकेशन को वर्ल्ड-क्लास परफॉरमेंस देना चाहते हैं, तो इन रणनीतियों को याद रखें:

रूट-बेस्ड स्प्लिटिंग सबसे पहले (Route-based Splitting First): अपनी पूरी एप्लीकेशन में हर कंपोनेंट को लेजी लोड करने की जरूरत नहीं है। सबसे सही तरीका यह है कि आप अपने मेन रूट्स (Pages) जैसे- Home, Dashboard, Profile, Settings को ही आलसी तरीके से इम्पोर्ट करें।
होवर पर प्री-लोडिंग (Preloading on Hover): जब यूजर किसी लिंक या बटन पर माउस होवर (Hover) करे, तो आप बैकग्राउंड में ही उस चंक को डाउनलोड करना शुरू कर सकते हैं। इससे जब यूजर क्लिक करेगा, तो उसे कोई लोडिंग स्पिनर तक नहीं देखना पड़ेगा!
Server-Side Rendering (SSR) का ध्यान रखें: अगर आप NextJS या किसी अन्य SSR फ्रेमवर्क का इस्तेमाल कर रहे हैं, तो ध्यान दें कि पारंपरिक React.lazy और Suspense को सर्वर-साइड रेंडरिंग के दौरान विशेष ध्यान की आवश्यकता होती है। NextJS में इसके लिए next/dynamic का उपयोग किया जाता है जो कि रिएक्ट लेजी का ही एक एडवांस्ड रैपर है।

निष्कर्ष और महत्वपूर्ण सीख

तो दोस्तों, आज हमने सीखा कि कैसे React Suspense और Lazy Loading हमारी वेब एप्लीकेशन के बंडल साइज को एकदम छोटा और परफॉरमेंस को सुपरफास्ट बना देते हैं। कोड स्प्लिटिंग न केवल आपके यूजर्स को एक बेहतरीन यूजर एक्सपीरियंस देती है, बल्कि आपके सर्वर के बैंडविड्थ कॉस्ट को भी काफी हद तक बचाती है।

आधिकारिक डॉक्यूमेंटेशन के लिए आप React official docs देख सकते हैं। अपनी ऐप में इसे आज ही ट्राई कीजिए और मुझे बताइए कि आपकी लोडिंग स्पीड में कितना अंतर आया!

Frequently Asked Questions (FAQs)

Q1: React.lazy और React Suspense में क्या अंतर है?
React.lazy का काम कोड को डायनेमिक रूप से विभाजित (Code Splitting) करना और ऑन-डिमांड कंपोनेंट इम्पोर्ट करना है। वहीं, React Suspense एक रैपर है जो लोडिंग की अवधि के दौरान एक वैकल्पिक फॉलबैक यूआई (जैसे प्रोग्रेस बार या स्पिनर) दिखाता है।
Q2: क्या हमें हर एक छोटे कंपोनेंट को Lazy Load करना चाहिए?
बिलकुल नहीं! छोटे कंपोनेंट्स को लेजी लोड करने से बहुत सारे छोटे-छोटे नेटवर्क रिक्वेस्ट्स जेनरेट होंगे, जिससे परफॉरमेंस सुधरने की बजाय बिगड़ जाएगी। हमेशा केवल बड़े रूट्स (Pages) और भारी लाइब्रेरीज वाले कंपोनेंट्स को ही लेजी लोड करें।
Q3: React.lazy के इस्तेमाल पर एरर क्यों आता है और इसे कैसे ठीक करें?
यह एरर आमतौर पर दो वजहों से आता है: पहला, आपका कंपोनेंट 'Default Export' नहीं है, या दूसरा, नेटवर्क कनेक्शन फेल हो जाने के कारण ब्राउज़र चंक लोड नहीं कर पाया। इसे ठीक करने के लिए एरर बाउंड्री (Error Boundary) और डिफ़ॉल्ट एक्सपोर्ट का उपयोग करें।
Q4: क्या React Suspense सर्वर साइड रेंडरिंग (SSR) के साथ काम करता है?
React 18 से Suspense सर्वर पर आंशिक रूप से स्ट्रीमिंग और सिलेक्टिव हाइड्रेशन का समर्थन करता है। हालांकि, अगर आप Next.js का उपयोग कर रहे हैं, तो अधिक अनुकूलित और सुरक्षित लोडिंग के लिए 'next/dynamic' का उपयोग करने की सलाह दी जाती है।
Q5: Dynamic Imports से हमारी एप्लीकेशन की SEO रैंकिंग पर क्या असर पड़ता है?
डायनेमिक इम्पोर्ट्स से पेज लोडिंग स्पीड बहुत बढ़ जाती है। क्योंकि Google Core Web Vitals (विशेषकर LCP - Largest Contentful Paint) को रैंकिंग फैक्टर मानता है, इसलिए लेजी लोडिंग अप्रत्यक्ष रूप से आपके SEO को काफी हद तक सुधारती है।

React Portals Use Cases Modals aur Tooltips

banti kevat — Thu, 16 Jul 2026 06:02:56 +0000

React Portals in Hindi: Modals aur Tooltips banane ke liye DOM hierarchy ko bypass karne ka sahi tarika aur complete code examples ke saath samjhein.

तो दोस्तों, क्या आपके साथ कभी ऐसा हुआ है कि आपने बहुत मेहनत से एक सुंदर सा Modal या Tooltip बनाया, लेकिन जैसे ही उसे open किया, वो CSS के overflow: hidden या z-index के मकड़जाल में फंसकर आधा कट गया? या फिर पैरेंट डिब (Parent Div) की styling की वजह से उसकी position ही बिगड़ गई? यह एक ऐसा सिरदर्द है जिससे हर ReactJS डेवलपर कभी न कभी जरूर परेशान होता है।

⚡ Quick Answer: React Portals एक ऐसी feature है जो हमें किसी भी React component को उसके normal parent DOM hierarchy से बाहर, DOM में किसी भी अन्य जगह (जैसे document.body या किसी custom div) पर render करने की आजादी देती है, बिना React component tree के logical state और event system को प्रभावित किए।

React Portals क्या है और इसकी जरूरत क्यों पड़ती है?

आमतौर पर जब हम React components बनाते हैं, तो वे एक nested tree structure का पालन करते हैं। इसका मतलब है कि अगर Component B, Component A के अंदर है, तो HTML DOM में भी Component B का Element, Component A के DOM Node के अंदर ही render होगा।

लेकिन ज़रा सोचिए, Modals, Tooltips, Custom Dropdowns, और Loaders जैसी UI elements के मामले में यह behavior मुसीबत बन जाता है। मान लीजिए आपके पास एक Sidebar component है जिसमें overflow: hidden लगा हुआ है। अब अगर आप इस Sidebar के अंदर एक Tooltip render करेंगे, तो वो Tooltip Sidebar की boundary के बाहर निकलते ही छिप (hide) जाएगा।

यहीं पर काम आता है React Portals। यह हमें एक "पोर्टल" या जादुई रास्ता देता है जिसके जरिए हम component को लिखते तो उसी nested structure के अंदर हैं (ताकि React state और props आसानी से pass हो सकें), लेकिन असल में HTML DOM में वह component उड़कर किसी दूसरी जगह (जैसे <body> के direct child के रूप में) जाकर render हो जाता है।

🏗️ React Portal DOM Flow Diagram

#root (Main App)
→
Nested Sidebar (Overflow Hidden)
⚡ Portal
#portal-root (Modal/Tooltip)

Diagram: React Portal components render outside the parent root div directly into a dedicated DOM node.

createPortal API का Syntax क्या है?

React Portals का इस्तेमाल करने के लिए हमें react-dom package से createPortal function को import करना होता है। इसका syntax बहुत ही सरल और सीधा है:

import ReactDOM from 'react-dom';

ReactDOM.createPortal(child, container);

चैंपियन, यहाँ इन दो parameters का मतलब समझो:

child: यह कोई भी renderable React component, element, string, या fragment हो सकता है जिसे आप render करना चाहते हैं।
container: यह वह HTML DOM element है जहाँ आप उस child को भेजना चाहते हैं (जैसे: document.getElementById('portal-root'))।

React Portals vs Normal Components में क्या अंतर है?

कई बार लोग सोचते हैं कि हम normal rendering से भी तो काम चला सकते हैं, फिर इसकी क्या जरूरत? चलिए इस comparison table से असली फर्क को समझते हैं:

Feature / Property	Normal Components Rendering	React Portals Rendering
DOM Positioning	Parent element के अंदर ही nested render होता है।	Parent tree से बाहर किसी भी DOM node में render हो सकता है।
CSS Styling Constraints	Parent के `overflow`, `z-index`, और `position` से प्रभावित होता है।	Parent CSS rules से बिल्कुल आजाद होता है।
Event Bubbling	Normal React event hierarchy के अनुसार bubble करता है।	DOM में बाहर होने के बावजूद, React Virtual DOM tree के अनुसार bubble करता है।
Best Use Case	Standard layout components (Headers, Cards, Buttons).	Global overlay components (Modals, Tooltips, Popovers).

React Portals की मदद से Modal Component कैसे बनाएं?

चलिए, अब सीधे काम की बात पर आते हैं और एक real-world, production-ready Modal component बनाते हैं। हम इसे step-by-step समझेंगे ताकि कोई भी कन्फ्यूजन न रहे।

Step 1: HTML File में Portal Target Element जोड़ें

सबसे पहले हमें अपने React project की main HTML file (आमतौर पर Vite प्रोजेक्ट्स में index.html या Public folder में) में जाना होगा और <div id="root"></div> के ठीक नीचे एक नया div element जोड़ना होगा:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React Portals Demo</title>
  </head>
  <body>
    <div id="root"></div>
    <!-- Portal Target Node -->
    <div id="portal-root"></div>
  </body>
</html>

Step 2: Modal Component का Code लिखें

अब हम एक Modal.jsx फ़ाइल बनाएंगे। ध्यान देने वाली बात ये है कि हम यहाँ clean CSS styles भी inline या stylesheet के रूप में handle करेंगे ताकि यह बाहर क्लिक होने पर बंद हो सके, और escape key दबाने पर भी close हो सके (जो कि accessibility के लिए बहुत जरूरी है)।

import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ isOpen, onClose, title, children }) => {
  // Escape key दबाने पर modal बंद करने के लिए useEffect hook
  useEffect(() => {
    const handleKeyDown = (event) => {
      if (event.key === 'Escape') {
        onClose();
      }
    };

    if (isOpen) {
      document.body.style.overflow = 'hidden'; // Screen scroll block handle karein
      window.addEventListener('keydown', handleKeyDown);
    }

    return () => {
      document.body.style.overflow = 'unset';
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, [isOpen, onClose]);

  // Agar modal open nahi hai to kuch render na karein
  if (!isOpen) return null;

  // Modal target node ko select karein
  const portalNode = document.getElementById('portal-root');
  if (!portalNode) return null;

  // CSS Styles in Object
  const backdropStyle = {
    position: 'fixed',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(0, 0, 0, 0.7)',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 1000,
  };

  const modalStyle = {
    background: '#ffffff',
    padding: '24px',
    borderRadius: '12px',
    maxWidth: '500px',
    width: '90%',
    boxShadow: '0 10px 25px rgba(0,0,0,0.2)',
    position: 'relative',
  };

  const closeBtnStyle = {
    position: 'absolute',
    top: '15px',
    right: '15px',
    background: 'none',
    border: 'none',
    fontSize: '20px',
    cursor: 'pointer',
    color: '#64748b',
  };

  return ReactDOM.createPortal(
    <div style={backdropStyle} onClick={onClose}>
      <div style={modalStyle} onClick={(e) => e.stopPropagation()}>
        <button style={closeBtnStyle} onClick={onClose}>&times;</button>
        <h3 style={{ marginTop: 0, color: '#1e293b' }}>{title}</h3>
        <div style={{ color: '#475569', lineHeight: '1.6' }}>
          {children}
        </div>
      </div>
    </div>,
    portalNode
  );
};

export default Modal;

Step 3: App.jsx में Modal को Use करना

अब अपने main container component में इस Modal को import करते हैं और state के जरिए control करते हैं:

import React, { useState } from 'react';
import Modal from './Modal';

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div style={{ padding: '40px', fontFamily: 'sans-serif', textAlign: 'center' }}>
      <h1>React Portals Modal Tutorial</h1>
      <p>यह बटन दबाकर देखें कि कैसे modal direct body tag ke niche render hota hai.</p>

      <button 
        onClick={() => setIsModalOpen(true)}
        style={{
          padding: '12px 24px',
          fontSize: '16px',
          backgroundColor: '#2563eb',
          color: '#fff',
          border: 'none',
          borderRadius: '8px',
          cursor: 'pointer',
          fontWeight: '600'
        }}
      >
        Open Magic Modal
      </button>

      <Modal 
        isOpen={isModalOpen} 
        onClose={() => setIsModalOpen(false)} 
        title="बधाई हो, पोर्टल काम कर रहा है!"
      >
        <p>दोस्तों, यह modal HTML DOM में "#root" div के बाहर "portal-root" में render हो रहा है, लेकिन React Component Tree में यह अभी भी App component का ही हिस्सा है।</p>
      </Modal>
    </div>
  );
}

export default App;

React Portals का use करके Tooltip कैसे बनाएं?

Modals के बाद, Tooltips दूसरी सबसे बड़ी चुनौती होती हैं। मान लीजिए आपके पास एक card layout है जिसका overflow dynamic है। वहाँ standard tooltips कट जाते हैं। चलिए, React Portal का use करके एक positioning-aware Tooltip बनाते हैं।

import React, { useState, useRef } from 'react';
import ReactDOM from 'react-dom';

const Tooltip = ({ text, children }) => {
  const [show, setShow] = useState(false);
  const [coords, setCoords] = useState({ top: 0, left: 0 });
  const triggerRef = useRef(null);

  const handleMouseEnter = () => {
    if (triggerRef.current) {
      const rect = triggerRef.current.getBoundingClientRect();
      // Tooltip position setup (Element ke thik upar center me)
      setCoords({
        top: rect.top + window.scrollY - 40,
        left: rect.left + window.scrollX + rect.width / 2,
      });
      setShow(true);
    }
  };

  const handleMouseLeave = () => {
    setShow(false);
  };

  const tooltipStyle = {
    position: 'absolute',
    top: `${coords.top}px`,
    left: `${coords.left}px`,
    transform: 'translateX(-50%)',
    backgroundColor: '#1e293b',
    color: '#ffffff',
    padding: '6px 12px',
    borderRadius: '6px',
    fontSize: '12px',
    whiteSpace: 'nowrap',
    pointerEvents: 'none',
    zIndex: 9999,
    boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
  };

  return (
    <span 
      ref={triggerRef} 
      onMouseEnter={handleMouseEnter} 
      onMouseLeave={handleMouseLeave}
      style={{ display: 'inline-block', cursor: 'pointer', textDecoration: 'underline' }}
    >
      {children}
      {show && ReactDOM.createPortal(
        <div style={tooltipStyle}>
          {text}
        </div>,
        document.body
      )}
    </span>
  );
};

export default Tooltip;

देखा आपने? हमने Tooltip को document.body में सीधे render किया है ताकि CSS layout rules उस पर हावी न हो सकें।

React Portals का use करते समय Event Bubbling कैसे काम करती है?

अब आप सोच रहे होंगे, "भाई, अगर DOM node बिल्कुल अलग जगह पर है, तो Event Bubbling कैसे काम करेगी? क्या child button पर click करने से parent element का click handler trigger होगा?"

हाँ, बिल्कुल होगा! और यही React की सबसे बड़ी खूबसूरती है।

भले ही Portal का DOM Node आपके main root tree से बाहर कहीं भी हो, React के perspective से यह अभी भी उसी React Component Tree का हिस्सा है। इसलिए React Event System (SyntheticEvents) वैसे ही काम करता है जैसे वो normal nested layout में करता।

इसे समझने के लिए इस मजेदार उदाहरण को देखें:

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

function ParentComponent() {
  const [clickCount, setClickCount] = useState(0);

  // Yeh click handler Portal child par click hone par bhi trigger hoga!
  const handleParentClick = () => {
    setClickCount((prev) => prev + 1);
  };

  return (
    <div 
      onClick={handleParentClick} 
      style={{ padding: '20px', border: '2px dashed #a855f7', background: '#faf5ff' }}
    >
      <h3>Parent Component (Clicks: {clickCount})</h3>
      <p>Portal child par click karne se bhi yeh count badhega, kyunki React Event Bubbling normal rehti hai!</p>

      <PortalChild />
    </div>
  );
}

function PortalChild() {
  const portalTarget = document.getElementById('portal-root') || document.body;

  return ReactDOM.createPortal(
    <div style={{ 
      background: '#10b981', 
      color: 'white', 
      padding: '12px', 
      marginTop: '20px',
      borderRadius: '6px' 
    }}>
      <p>Main Portal Node ke andar hoon, par Parent standard element me bubble up karega.</p>
      <button style={{ padding: '6px 12px', cursor: 'pointer' }}>Click Me</button>
    </div>,
    portalTarget
  );
}

export default ParentComponent;

अगर आप चाहते हैं कि Portal element का click event parent तक न पहुँचे, तो आपको child layout के handler में e.stopPropagation() का use करना होगा, जैसा हमने ऊपर Modal Component वाले code में किया है।

React Portals use करते समय Common Errors और उन्हें कैसे Solve करें?

काम करते वक्त error आना तो तय है, लेकिन घबराइए मत! यहाँ कुछ आम गलतियाँ और उनके solutions दिए गए हैं:

1. "Target container is not a DOM element" Error

वजह: यह exception तब आता है जब React, DOM render करने की कोशिश करता है लेकिन उसे document.getElementById('portal-root') जैसी specific node मिलती ही नहीं (शायद spelling mistake हो या element load न हुआ हो)।

Solution: हमेशा double check करें कि आपकी index.html फ़ाइल में वह element exist करता हो। इसके अलावा, SSR frameworks (जैसे Next.js) में rendering से पहले client-side check जरूर लगाएं:

const [mounted, setMounted] = useState(false);
useEffect(() => {
  setMounted(true);
  return () => setMounted(false);
}, []);

if (!mounted) return null;
return ReactDOM.createPortal(<Child />, document.getElementById('portal-root'));

2. Dynamic Mount / Cleanup issue

वजह: अगर आप dynamically element create करके portal attach कर रहे हैं और component unmount होने पर उसे clean नहीं कर रहे हैं, तो memory leak हो सकता है।

Solution: useEffect में dynamic divs को clean करना सीखें। clean-up function में container को document.body.removeChild(el) के जरिए clear करें।

Best Practices और Performance Tips क्या हैं?

Accessibility (A11y) का ध्यान रखें: जब भी Modal open हो, screen readers के लिए parent element को hide (aria-hidden="true") करें और keyboard focus को Modal के अंदर ही lock (Focus Trap) करें। इसके लिए आप React Official Docs के guidelines का पालन कर सकते हैं।
SSR compatibility: Server-side rendering में document element server पर available नहीं होता। इसलिए ऊपर बताए गए mounted state approach का इस्तेमाल करें ताकि build fail न हो।
Z-Index Management: Portal nodes के लिए CSS में एक standard stack बनाएं (जैसे Modals के लिए z-index: 1000, tooltips के लिए 1100) ताकि UI overlap control में रहे।

तो दोस्तों, हमने आज सीखा कि कैसे React Portals बड़े ही जादुई ढंग से DOM hierarchy को तोड़कर हमारे Modals और Tooltips को position-independent और flexible बनाते हैं। अगली बार जब CSS overflow या z-index आपके design को बिगाड़ने की कोशिश करे, तो बिना झिझक React Portals का इस्तेमाल करें और इस समस्या को जड़ से खत्म करें।

Frequently Asked Questions (FAQs)

Q1: React Portals का use कब करना चाहिए?
जब भी आपको ऐसा UI element बनाना हो जो parent CSS wrapper styles (जैसे overflow: hidden, relative width, ya z-index limits) से बाहर निकलकर स्क्रीन पर दिखे, जैसे Modals, Popovers, Tooltips, Global Loaders, और Side-drawers.
Q2: क्या React Portal use करने से event listeners काम करना बंद कर देते हैं?
बिल्कुल नहीं! React Synthetic Event system, React virtual component tree के design पर काम करता है, न कि real DOM architecture पर। इसलिए Portal node पर होने वाले events भी parent level पर bubble up होते हैं।
Q3: React Portals और standard components में से performance के लिहाज से कौन सा बेहतर है?
दोनों की performance में कोई खास अंतर नहीं होता है। React Portals सिर्फ insertion target बदलते हैं, rendering cycle और updates सामान्य components की तरह ही fast और optimized रहते हैं।
Q4: क्या Next.js या Server-Side Rendering (SSR) में React Portals काम करते हैं?
हाँ, वे काम करते हैं। लेकिन क्योंकि server पर 'window' या 'document' object accessible नहीं होता, आपको Client Side mount check (useEffect) का इस्तेमाल करके ensure करना होगा कि Portal सिर्फ client browser पर ही execute हो।
Q5: क्या हम एक React Component में multiple portals का इस्तेमाल कर सकते हैं?
हाँ, आप एक ही component में या पूरी application में जितने चाहें उतने Portals का use कर सकते हैं। ये सभी अलग-अलग target containers में render किए जा सकते हैं।

React Portals Kya Hain aur Kaise Use Karein

banti kevat — Wed, 15 Jul 2026 12:51:52 +0000

React Portals kya hain aur inhe modal, tooltip ke liye kaise use karein? Is Hindi guide me code examples ke sath step-by-step seekhein!

हैलो दोस्तों! जब हम ReactJS में काम करते हैं, तो कभी-न-कभी हमारे सामने एक ऐसी सिचुएशन ज़रूर आती है जहाँ CSS की वजह से हमारी रातों की नींद उड़ जाती है। मान लीजिए आप एक बहुत ही ख़ूबसूरत Modal, Dropdown, या Tooltip बना रहे हैं। सब कुछ बढ़िया चल रहा है, लेकिन अचानक आप देखते हैं कि आपका Modal अपने Parent Component के overflow: hidden या z-index की वजह से आधा कट रहा है या स्क्रीन के पीछे छिप रहा है।

आप CSS की प्रॉपर्टीज़ बदलते हैं, सर खुजलाते हैं, लेकिन बात नहीं बनती। ऐसे ही समय पर React के डेवलपर्स ने हमारे लिए एक जादुई दरवाज़ा खोला था, जिसे हम React Portals कहते हैं। चलिए, आज चाय की चुस्की के साथ बिल्कुल आसान भाषा में समझते हैं कि यह React Portals आखिर क्या बला है और इसे प्रोडक्शन-रेडी कोड में कैसे इस्तेमाल किया जाता है।

⚡ Quick Answer: React Portals ReactJS ka ek unique feature hain jo components ko HTML DOM hierarchy ke bahar kisi bhi doosre DOM node me render karne ki azadi deta hai. Iska primary use modals, tooltips aur dropdowns banane me hota hai taaki overflow aur z-index stacking issues ko aasani se solve kiya ja sake.

---

React Portals क्या हैं (What are React Portals)?

साधारण शब्दों में कहें तो, React Portals हमें अपने React components को उनके Default Parent DOM Tree से बाहर निकालकर, DOM (Document Object Model) के किसी भी दूसरे हिस्से में Render करने की सुविधा देते हैं।

आमतौर पर, जब आप React में कोई Component रेंडर करते हैं, तो वह अपने Parent Component के अंदर ही एक Nested Child बनकर HTML में दिखाई देता है। लेकिन Portal का इस्तेमाल करके, आप उस Component को React Component Tree में तो उसी जगह रख सकते हैं (जिससे State और Context का एक्सेस बना रहे), लेकिन HTML structure में उसे किसी बिल्कुल अलग जगह पर भेज सकते हैं (जैसे कि सीधे <body> के नीचे)।

इसके बारे में अधिक विस्तार से जानने के लिए आप React Portal Official Documentation भी पढ़ सकते हैं।

---

React Portals की ज़रूरत क्यों पड़ती है (Why do we need them)?

दोस्तों, इसे समझने के लिए एक क्लासिक वेब डिज़ाइनिंग की प्रॉब्लम को देखते हैं। मान लीजिए आपके पास एक Sidebar component है जिसकी CSS कुछ इस तरह है:

.sidebar {
  width: 250px;
  position: relative;
  overflow: hidden; /* यहाँ असली विलेन छुपा है! */
}

अब इस Sidebar के अंदर आपने एक <ProfileTooltip /> component डाला है। जैसे ही यूजर प्रोफाइल पर होवर करता है, आप चाहते हैं कि Tooltip साइडबार से बाहर निकलकर स्क्रीन पर दिखे। लेकिन चूंकि Sidebar पर overflow: hidden लगा हुआ है, आपका Tooltip साइडबार की सीमाओं (borders) के अंदर ही कट जाएगा!

यही नहीं, कई बार z-index का ऐसा झंझट खड़ा होता है कि लाख कोशिशों के बाद भी आपका Modal बैकड्रॉप (overlay) के पीछे ही रह जाता है। इन सभी समस्याओं का एकमात्र और सबसे साफ़-सुथरा समाधान है React Portals। यह आपके Element को उठाकर सीधे Root DOM के समानांतर (parallel) खड़ा कर देता है, जिससे सारे CSS constraints खत्म हो जाते हैं।

---

React Portals कैसे काम करते हैं (How do they work)?

React Portals के पीछे का आर्किटेक्चर बहुत ही दिलचस्प है। यह React की वर्चुअल ट्री (React Tree) और असली ब्राउज़र ट्री (HTML DOM Tree) के बीच एक ब्रिज की तरह काम करता है।

🏗️ React Portals DOM Flow Architecture

App Root (#root)
Standard React Tree

⇢ (React Portal)

Portal Node (#portal-root)
Rendered Outside Parent CSS

Diagram: component logic stays in App Tree, but HTML renders in #portal-root node.

ध्यान देने वाली बात ये है कि भले ही आपका Component फिजिकल DOM में कहीं भी रेंडर हो रहा हो, वह React Tree के अंदर अपने पेरेंट के साथ ही जुड़ा रहता है। इसका मतलब है कि React Context API, custom hooks, और State Props वैसे ही काम करेंगे जैसे वे नॉर्मल Components के लिए करते हैं।

---

React Portals vs Normal Rendering में क्या अंतर है?

चलिए इन दोनों के अंतर को एक बार साफ़-साफ़ कंपैरिजन टेबल से समझ लेते हैं ताकि कोई कन्फ़्यूजन न रहे:

फ़ीचर / अंतर	Normal Rendering	React Portals
DOM Insertion	Parent Component के अंदर ही nested होता है।	Target DOM Node (जैसे `body`) में बाहर रेंडर होता है।
CSS Isolation	Parent के `overflow` और `z-index` से प्रभावित होता है।	Parent के CSS रूल्स से पूरी तरह आज़ाद रहता है।
Event Bubbling	नॉर्मल DOM के अनुसार ऊपर की तरफ बबल करता है।	React Tree के अनुसार ही बबल करता है, भले ही DOM स्ट्रक्चर अलग हो।
Best Used For	Regular UI Layouts (Buttons, Inputs, Cards).	Modals, Tooltips, Global Popups, Dropdowns.

---

React Portals को Step-by-Step कैसे implement करें (With Code)?

अब कोडिंग का समय आ गया है! हम एक पूरी तरह से फंक्शनल, रेस्पॉन्सिव और खूबसूरत Modal Component बनाएंगे जो React Portals का इस्तेमाल करेगा।

Step 1: HTML फ़ाइल में Target Node बनाना

सबसे पहले, हमें अपने React App की मुख्य HTML फ़ाइल (आमतौर पर public/index.html या Vite प्रोजेक्ट्स में index.html) को खोलना है और वहाँ हमारे React Root Div के बिल्कुल नीचे एक नया Anchor Container बनाना है।

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React Portal Modal Demo</title>
  </head>
  <body>

    <div id="root"></div>


    <div id="portal-root"></div>
  </body>
</html>

Step 2: ReactDOM createPortal का Syntax समझना

React Portals बनाने के लिए हम react-dom पैकेज से createPortal मेथड का उपयोग करते हैं। इसका बेसिक सिंटैक्स कुछ ऐसा होता है:

import ReactDOM from 'react-dom';

ReactDOM.createPortal(child, containerInstance);

child: कोई भी रेंडर करने योग्य React Child (जैसे JSX, Element, Component, String या Array)।
containerInstance: वह असली DOM एलिमेंट जहाँ आप इस Child को पहुँचाना चाहते हैं (जैसे document.getElementById('portal-root'))।

Step 3: reusable Modal Component बनाना

अब हम अपना Modal.jsx कंपोनेंट तैयार करेंगे। ध्यान दें कि हम इसे पूरी तरह से सेफ बनाने के लिए कुछ चेक भी लगाएंगे ताकि सर्वर-साइड रेंडरिंग (SSR) के समय कोई error न आए।

import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';

// Modal component styles in JS for clean demo
const BACKDROP_STYLES = {
  position: 'fixed',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  backgroundColor: 'rgba(0, 0, 0, 0.7)',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  zIndex: 1000,
};

const MODAL_STYLES = {
  background: '#ffffff',
  padding: '30px',
  borderRadius: '12px',
  boxShadow: '0 10px 25px rgba(0, 0, 0, 0.2)',
  maxWidth: '500px',
  width: '90%',
  zIndex: 1001,
  fontFamily: 'sans-serif',
};

const CLOSE_BUTTON_STYLES = {
  marginTop: '20px',
  padding: '10px 20px',
  border: 'none',
  background: '#ef4444',
  color: 'white',
  borderRadius: '6px',
  cursor: 'pointer',
  fontWeight: 'bold',
};

export default function Modal({ isOpen, onClose, children }) {
  // अगर modal ओपन नहीं है, तो कुछ भी रेंडर न करें
  if (!isOpen) return null;

  // React Portals को 'portal-root' div में माउंट करें
  const portalNode = document.getElementById('portal-root');

  if (!portalNode) {
    console.error("The element #portal-root was not found in the DOM.");
    return null;
  }

  return ReactDOM.createPortal(
    <div style={BACKDROP_STYLES} onClick={onClose}>
      <div style={MODAL_STYLES} onClick={(e) => e.stopPropagation()}>
        <div>{children}</div>
        <button style={CLOSE_BUTTON_STYLES} onClick={onClose}>
          Close Modal
        </button>
      </div>
    </div>,
    portalNode
  );
}

Step 4: App Component में Modal का उपयोग करना

अब हमारे मुख्य App Component में हम इस Modal को कॉल करेंगे और इसकी Open/Close state को हैंडल करेंगे।

import React, { useState } from 'react';
import Modal from './Modal';

export default function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const containerStyle = {
    padding: '40px',
    textAlign: 'center',
    fontFamily: 'sans-serif',
  };

  const buttonStyle = {
    padding: '12px 24px',
    fontSize: '16px',
    backgroundColor: '#3b82f6',
    color: '#fff',
    border: 'none',
    borderRadius: '8px',
    cursor: 'pointer',
    transition: 'background-color 0.2s',
  };

  return (
    <div style={containerStyle}>
      <h1>React Portals Live Demo</h1>
      <p>यह बटन दबाकर देखें कि कैसे पोर्टल की मदद से मॉडल सीधे बॉडी के नीचे रेंडर होता है!</p>

      <button 
        style={buttonStyle} 
        onClick={() => setIsModalOpen(true)}
      >
        Open Beautiful Modal
      </button>

      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
        <h2 style={{ marginTop: 0, color: '#1e293b' }}>बधाई हो! 🎉</h2>
        <p style={{ color: '#64748b', lineHeight: '1.6' }}>
          यह मॉडल DOM ट्री के अंदर <code>#portal-root</code> में मौजूद है, न कि <code>#root</code> में! 
          इस कारण इसपर पेरेंट के CSS रूल्स और लिमिटेशन्स का कोई असर नहीं पड़ेगा।
        </p>
      </Modal>
    </div>
  );
}

---

React Portals Event Bubbling: ध्यान देने योग्य खास बात!

अब एक बहुत ही महत्वपूर्ण बात जिसे जानना हर सीनियर डेवलपर के लिए आवश्यक है। इंटरव्यू में अक्सर यह सवाल पूछा जाता है: "अगर कोई Component Portal के माध्यम से DOM में कहीं दूर रेंडर हुआ है, तो क्या उसके Events पेरेंट Component तक बबल करेंगे?"

जवाब है: हाँ, बिल्कुल करेंगे!

भले ही पोर्टल द्वारा रेंडर किया गया Element फिजिकल HTML DOM में कहीं भी हो, वह React के Virtual DOM Hierarchy में उसी जगह रहता है जहाँ उसे कोड में लिखा गया है। इसलिए, जब भी कोई Event (जैसे click, keydown) पोर्टल के अंदर ट्रिगर होता है, तो वह React Component Tree के अनुसार ही बबल (Bubble) करके ऊपर जाएगा।

उदाहरण के लिए, ऊपर दिए गए कोड में अगर हमारे <App /> component के ऊपर कोई onClick लिसनर लगा होता, तो जब आप Modal के अंदर किसी चीज़ पर क्लिक करते, तो वह क्लिक इवेंट भी App के लिसनर को ट्रिगर कर देता। यदि आप इसे रोकना चाहते हैं, तो आपको चाइल्ड एलिमेंट पर e.stopPropagation() का इस्तेमाल करना पड़ेगा, जैसा कि हमने ऊपर कोड में किया है।

---

React Portals का Use करते वक्त कौन-सी Common Errors आती हैं?

जब भी डेवलपर्स नए-नए Portals का उपयोग करना शुरू करते हैं, तो वे कुछ ऐसी गलतियाँ कर बैठते हैं जिससे एप्लीकेशन क्रैश हो जाती है या अजीब बिहेवियर शो करती है। चलिए उन्हें समझकर fix error करने के तरीके सीख लेते हैं:

1. "Target container is not a DOM element" Error

यह एरर तब आती है जब React आपके स्पेसिफाइड DOM node (जैसे #portal-root) को ढूँढ नहीं पाता। ऐसा अक्सर तब होता है जब:

आपने index.html में वह div बनाना भूल गए हैं।
आपका कोड सर्वर पर रेंडर (Next.js / SSR) हो रहा है जहाँ document ऑब्जेक्ट उपलब्ध नहीं होता।

सोल्यूशन: सर्वर साइड रेंडरिंग के समय हमेशा चेक करें कि document मौजूद है या नहीं। आप इसके लिए useEffect या useState का इस्तेमाल कर सकते हैं, जिससे पोर्टल सिर्फ क्लाइंट-साइड पर ही रेंडर हो:

import { useEffect, useState } from 'react';

const [mounted, setMounted] = useState(false);

useEffect(() => {
  setMounted(true);
  return () => setMounted(false);
}, []);

if (!mounted) return null;

2. Accessibility (a11y) की समस्या

चूंकि आप अपने एलिमेंट को फिजिकली स्क्रीन के किसी दूसरे कोने में फेंक रहे हैं, कीबोर्ड से नेविगेट करने वाले यूज़र्स (जैसे Tab की का इस्तेमाल करने वाले) के लिए फ़ोकस मैनेजमेंट बिगड़ सकता है।

सोल्यूशन: हमेशा ध्यान रखें कि जब Modal ओपन हो, तो फ़ोकस Modal के पहले एलिमेंट पर चला जाए, और बंद होने पर वापस उसी बटन पर आए जिसने इसे खोला था। आप इसके लिए focus\-trap\ लाइब्रेरी का इस्तेमाल भी कर सकते हैं।

---

Best Practices: प्रदर्शन और मापनीयता (Performance & Scalability)

Cleanups का हमेशा ध्यान रखें: अगर आप डायनामिकली कोई नया DOM Node बनाकर पोर्टल अटैच कर रहे हैं, तो Component के Unmount होते समय उस Node को DOM से रिमूव ज़रूर करें ताकि मेमोरी लीक न हो।
Semantic HTML का पालन करें: पोर्टल के अंदर रेंडर होने वाले मॉड्यूल्स को हमेशा सही HTML टैग्स (जैसे <dialog>, <aside>) के साथ रैप करें ताकि स्क्रीन रीडर्स उन्हें आसानी से पहचान सकें।
Styling Modular रखें: चूंकि पोर्टल्स ग्लोबल स्कोप में जाते हैं, उनके क्लास नेम्स बहुत ही स्पेसिफिक रखें ताकि ग्लोबल स्टाइलिंग क्लैश न हो। CSS Modules या Styled Components इसके लिए सबसे बेहतरीन विकल्प हैं।

---

तो दोस्तों, आज हमने क्या सीखा?

आज की इस डिटेल्ड चर्चा में हमने सीखा कि React Portals किस तरह मुश्किल से मुश्किल CSS ओवरफ़्लो और लेआउट प्रॉब्लम्स को चुटकियों में हल कर देते हैं। हमने देखा कि React Tree के अंदर लॉजिकल पैरेंटिंग बरकरार रखते हुए भी हम HTML DOM स्ट्रक्चर में अपनी मनपसंद जगह पर डेटा कैसे रेंडर कर सकते हैं। यह न सिर्फ आपके कोड को क्लीन और मेंटनेबल बनाता है, बल्कि बड़ी एप्लिकेशन्स को स्केल करने में भी बहुत मदद करता है।

अब समय आ गया है कि आप अपने पुराने प्रोजेक्ट्स को खोलें और जहाँ भी आपने जुगाड़ लगाकर CSS के ज़रिए मोडल्स संभाले थे, उन्हें React Portals के साथ रिप्लेस करें! कोडिंग करते रहिए, सीखते रहिए और कोई भी डाउट हो तो बेझिझक पूछिए!

---

Frequently Asked Questions (FAQs)

Q1: React Portals और CSS position absolute/fixed में क्या अंतर है?
CSS fixed/absolute पोजीशन सिर्फ विज़ुअल लेआउट बदलती हैं, लेकिन यदि पैरेंट एलिमेंट पर overflow: hidden\ लगा हो, तो वे एलिमेंट अभी भी कट जाते हैं। React Portals एलिमेंट को सीधे फिजिकल DOM के दूसरे नोड में भेज देते हैं जिससे इस तरह की सभी CSS लिमिटेशन्स पूरी तरह खत्म हो जाती हैं।
Q2: क्या React Portals में React Context और Redux Store का एक्सेस मिलता है?
हाँ, बिल्कुल मिलता है! भले ही पोर्टल के ज़रिए एलिमेंट DOM में अलग जगह रेंडर होते हैं, लेकिन React Component Tree में वे अपनी मूल जगह पर ही रहते हैं। इसलिए, पेरेंट प्रोवाइडर के Context, State और Props उन्हें नॉर्मल तरीके से मिलते रहते हैं।
Q3: Next.js (SSR) में React Portals का उपयोग करते समय "document is not defined" एरर क्यों आती है?
यह एरर इसलिए आती है क्योंकि Next.js कोड को पहले सर्वर पर रेंडर करता है जहाँ window\ या document\ ऑब्जेक्ट मौजूद नहीं होता। इसे सॉल्व करने के लिए आपको यह सुनिश्चित करना होगा कि पोर्टल केवल तभी रेंडर हो जब कंपोनेंट क्लाइंट-साइड पर माउंट (useEffect के ज़रिए) हो चुका हो।
Q4: क्या एक ही React App में मल्टीपल Portals का यूज़ किया जा सकता है?
हाँ, आप एक ही एप्लीकेशन में और यहाँ तक कि एक ही पेज पर जितने चाहें उतने Portals का उपयोग कर सकते हैं। आप उन्हें document.body\ या अलग-अलग custom divs में जहाँ चाहें माउंट करा सकते हैं।
Q5: क्या React Portals का इस्तेमाल परफॉर्मेंस को धीमा करता है?
बिल्कुल नहीं! React Portals रिएक्ट के कोर इंजन का ही एक हिस्सा हैं जो अत्यधिक ऑप्टिमाइज़्ड है। इनका इस्तेमाल करने से कोई अतिरिक्त ओवरहेड नहीं होता, बल्कि यह आपके UI रेंडरिंग और CSS पेंटिंग परफॉर्मेंस को बेहतर ही बनाता है।

---

React Error Boundaries Kaise Banayein

banti kevat — Wed, 15 Jul 2026 10:19:44 +0000

React Error Boundaries kaise banayein? Is complete Hindi guide me seekhein components ko crash hone se bachana aur robust production apps banana.

सोचिए, आपने हफ़्तों की मेहनत के बाद एक बेहतरीन वेब एप्लीकेशन बनाई। यूजर बड़े चाव से आपकी ऐप का इस्तेमाल कर रहा है, तभी अचानक डेटाबेस से कोई अजीब रिस्पांस आता है, या फिर किसी छोटे से कंपोनेंट में कोई अनचाहा अनहैंडल्ड एरर आ जाता है। नतीजा? पूरी की पूरी स्क्रीन गायब, और यूजर के सामने आ जाता है एक सूना, सफेद पन्ना—जिसे हम डेवलपर की दुनिया में White Screen of Death कहते हैं।

यह किसी भी यूजर एक्सपीरियंस के लिए एक दुःस्वप्न (nightmare) जैसा है। एक प्रोफेशनल डेवलपर के रूप में, हमारी जिम्मेदारी सिर्फ कोड लिखना नहीं है, बल्कि उस कोड को सुरक्षित और सहनशील (fault-tolerant) बनाना भी है। यहीं पर एंट्री होती है React Error Boundaries की। तो मेरे भाई, आज इस इन-डेप्थ गाइड में हम और आप मिलकर सीखेंगे कि कैसे हम अपनी ऐप को इस भयंकर क्रैश से बचा सकते हैं और कैसे एक सुंदर Fallback UI दिखा सकते हैं।

⚡ Quick Answer: React Error Boundaries class components होते हैं जो अपने child component tree में आने वाले किसी भी runtime JavaScript error को कैच (catch) करते हैं। यह पूरी ऐप को क्रैश होने से बचाकर एक सुंदर Fallback UI दिखाते हैं और एरर को लॉग भी करते हैं।

React Error Boundaries क्या हैं और इनकी जरूरत क्यों है?

सरल शब्दों में कहें तो, React Error Boundary एक सुरक्षा कवच की तरह है। React 16 के बाद से, कोर टीम ने एक बड़ा बदलाव किया। यदि आपके किसी कंपोनेंट के अंदर रेंडरिंग के दौरान कोई JavaScript एरर आता है और आपने उसे हैंडल नहीं किया है, तो React पूरी की पूरी UI ट्री को अनमाउंट (unmount) कर देता है। यानी, एक छोटी सी गलती के कारण आपका पूरा MERN Stack प्रोजेक्ट या React App ठप हो जाता है।

इसी समस्या को हल करने के लिए React हमें एक स्पेशल क्लास कंपोनेंट बनाने की सुविधा देता है जो अपने नीचे के सभी React components में आने वाले एरर्स को सोख (absorb) लेता है। ध्यान देने वाली बात ये है कि यह सिर्फ अपने children components के एरर्स को पकड़ता है, खुद के एरर को नहीं।

🏗️ Error Boundary Flow Diagram

Component Error
→
Error Boundary
→
Fallback UI (Safe App)

Diagram: How React Error Boundary prevents app crash and shows safe UI.

React Error Boundaries vs Try-Catch Block: दोनों में क्या अंतर है?

अक्सर नए डेवलपर्स के मन में यह सवाल जरूर आता है कि "अरे भाई, जब हमारे पास पहले से ही जावास्क्रिप्ट का पुराना और भरोसेमंद try-catch ब्लॉक है, तो हमें इस नए कॉन्सेप्ट की क्या आवश्यकता है?"

यह बहुत ही जायज सवाल है। चलिए इसे एक साफ-सुथरी टेबल के जरिए समझते हैं ताकि आपके दिमाग में कोई भी कन्फ्यूजन न रहे:

Feature / Parameter	Try-Catch Block	React Error Boundary
Work Domain	यह Imperative Code (जैसे फंक्शन्स, इवेंट हैंडल्स) पर काम करता है।	यह Declarative Code (JSX, रेंडरिंग और लाइफसाइकिल मेथड्स) पर काम करता है।
Component Tree Scope	यह पूरे कंपोनेंट ट्री के रेंडरिंग एरर्स को कैच नहीं कर सकता।	यह अपने नीचे के पूरे सब-ट्री (Sub-tree) के किसी भी कंपोनेंट के एरर को कैच कर सकता है।
Fallback UI rendering	JSX के बीच में सीधे UI रेंडर करने में असमर्थ है।	कस्टम Fallback UI को बहुत ही आसानी से स्क्रीन पर रेंडर कर देता है।
Async Error Support	यह एसिंक्रोनस कोड (setTimeout, API call) में अच्छा काम करता है।	यह रेंडरिंग और लाइफसाइकिल मेथड्स के एरर्स पर ही काम करता है (एसिंक्रोनस पर नहीं)।

तो आसान शब्दों में, try-catch कोड के अंदर के लॉजिक को सुरक्षित रखने के लिए है, और Error Boundary आपकी यूजर इंटरफेस (UI) को सुरक्षित रखने के लिए है।

React Error Boundary के लाइफसाइकिल मेथड्स (Lifecycle Methods)

React में एरर बाउंड्री बनाने के लिए हमें क्लास कंपोनेंट का इस्तेमाल करना पड़ता है क्योंकि इसके दो खास लाइफसाइकिल मेथड्स केवल क्लास कंपोनेंट में ही उपलब्ध हैं। अभी तक functional components में इन मेथड्स का कोई सीधा हुक (Hook) विकल्प नहीं आया है।

static getDerivedStateFromError(error): यह एक static मेथड है। जब भी किसी चाइल्ड कंपोनेंट में कोई error थ्रो होता है, तो रेंडर फेज के दौरान यह मेथड सबसे पहले कॉल होता है। इसका मुख्य काम होता है स्टेट को अपडेट करना (जैसे hasError: true करना) ताकि हम स्क्रीन पर Fallback UI दिखा सकें।
componentDidCatch(error, errorInfo): यह मेथड कमिट फेज (Commit Phase) के दौरान कॉल होता है। इसका उपयोग एरर की पूरी जानकारी को किसी थर्ड-पार्टी लॉगिंग सर्विस (जैसे Sentry, LogRocket, या आपके खुद के कस्टम सर्वर) पर भेजने के लिए किया जाता है।

Step-by-Step: कस्टम React Error Boundary कंपोनेंट कैसे बनाएं?

चलिए, अब सीधे काम की बात पर आते हैं और अपना खुद का एक कस्टम, रीयूजेबल और बेहद मजबूत ErrorBoundary कंपोनेंट तैयार करते हैं। नीचे दिए गए कोड को ध्यान से देखें।

Step 1: ErrorBoundary.jsx फ़ाइल बनाना

सबसे पहले अपने प्रोजेक्ट के अंदर ErrorBoundary.jsx नाम की एक फ़ाइल बनाइए और उसमें नीचे दिया गया पूरा कोड लिख दीजिए:

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    // इनिशियल स्टेट सेट करें जहाँ हैस-एरर फ़ॉल्स हो
    this.state = { hasError: false, error: null };
  }

  // एरर आने पर स्टेट को अपडेट करने के लिए इस मेथड का उपयोग करें
  static getDerivedStateFromError(error) {
    return { hasError: true, error: error };
  }

  // एरर रिपोर्टिंग सर्विस पर एरर भेजने के लिए इस मेथड का उपयोग करें
  componentDidCatch(error, errorInfo) {
    console.error("Error Boundary caught an error:", error, errorInfo);
    // यहाँ आप Sentry या किसी भी API पर एरर लॉग्स भेज सकते हैं
  }

  // यूजर को एरर से रिकवर करने के लिए रीसेट हैंडलर
  handleReset = () => {
    this.setState({ hasError: false, error: null });
  };

  render() {
    if (this.state.hasError) {
      // यदि props में कोई कस्टम Fallback UI दिया है, तो उसे दिखाएं, अन्यथा डिफ़ॉल्ट UI दिखाएं
      if (this.props.fallback) {
        return this.props.fallback;
      }

      return (

          ## ओह! कुछ गलत हो गया।



            चिंता न करें, हमारे डेवलपर्स को इसकी सूचना दे दी गई है।

        {this.state.error && this.state.error.toString()}



            फिर से कोशिश करें


      );
    }

    // अगर कोई एरर नहीं है, तो नॉर्मल चिल्ड्रेन रेंडर करें
    return this.props.children;
  }
}

export default ErrorBoundary;

Step 2: एक ऐसा कंपोनेंट बनाना जो जानबूझकर एरर उत्पन्न करे

अब हमें टेस्ट करने के लिए एक ऐसा कंपोनेंट चाहिए जो किसी गड़बड़ी के कारण क्रैश हो जाए। इसके लिए हम एक UserProfile.jsx कंपोनेंट बनाते हैं:

import React, { useState } from 'react';

function UserProfile() {
  const [user, setUser] = useState({ name: "अमित कुमार" });

  const triggerError = () => {
    // जानबूझकर स्टेट को null कर रहे हैं ताकि रेंडरिंग के समय ऑब्जेक्ट प्रॉपर्टी एक्सेस एरर आये
    setUser(null);
  };

  if (!user) {
    throw new Error("User data is completely missing!");
  }

  return (

      ### यूजर प्रोफाइल कंपोनेंट


      नाम: {user.name}



        क्रैश कंपोनेंट (Throw Error)


  );
}

export default UserProfile;

Step 3: App.jsx में Error Boundary को लपेटना (Wrap Components)

अब हमारा मुख्य काम आता है। हमें अपने संदेहास्पद कंपोनेंट को इस एरर बाउंड्री से सुरक्षित करना है। इसके लिए हम अपने App.jsx में इस तरह रैप करेंगे:

import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import UserProfile from './UserProfile';

function App() {
  return (

      # React Error Boundary डेमो में आपका स्वागत है


      नीचे दी गई बाउंड्री हमारी ऐप को क्रैश होने से बचाएगी।



      {/* हमने UserProfile को ErrorBoundary के अंदर रैप कर दिया है */}





        ### सुरक्षित एरिया


        यह हिस्सा कभी भी क्रैश नहीं होगा क्योंकि एरर केवल ऊपर वाले कंपोनेंट के दायरे तक ही सीमित है।




  );
}

export default App;

जब आप "क्रैश कंपोनेंट" बटन पर क्लिक करेंगे, तो आप देखेंगे कि आपका "सुरक्षित एरिया" बिल्कुल वैसे ही काम कर रहा है, और केवल प्रोफाइल वाला कंपोनेंट सुंदर लाल रंग के एरर बॉक्स में बदल गया है। यही तो जादू है React Error Boundaries का!

React Error Boundaries किन Errors को कैच नहीं कर पाते?

मेरे प्यारे दोस्तों, यहाँ पर एक बहुत ही महत्वपूर्ण बात है जिसपर अक्सर इंटरव्यू में भी सवाल पूछे जाते हैं। Error Boundaries कोई जादू की छड़ी नहीं हैं जो हर प्रकार के error को पकड़ लें। आधिकारिक React Official Documentation के अनुसार, निम्नलिखित स्थितियों में ये काम नहीं करते हैं:

Event Handlers (इवेंट हैंडलर): अगर आपके बटन के onClick फंक्शन के अंदर कोई एरर आता है, तो Error Boundary उसे नहीं पकड़ेगी। इवेंट हैंडलर रेंडर फेज के बाहर चलते हैं।
Asynchronous Code (एसिंक्रोनस कोड): setTimeout, requestAnimationFrame, या API के लिए fetch रिक्वेस्ट के अंदर होने वाले एरर्स को ये कैच नहीं कर सकते।
Server Side Rendering (SSR): सर्वर पर रेंडर होते समय आने वाले एरर्स पर यह काम नहीं करता।
खुद के एरर (Self Errors): यदि एरर खुद एरर बाउंड्री कंपोनेंट के अंदर (उसके रेंडर मेथड में) आता है, तो वह उसे हैंडल नहीं कर पाएगा।

इवेंट हैंडलर्स और एसिंक्रोनस कोड के एरर्स को कैसे हैंडल करें?

इसके लिए आपको सामान्य try-catch ब्लॉक का ही उपयोग करना होगा। उदाहरण के तौर पर:

const handleClick = () => {
  try {
    // कोई ऐसा काम जिससे एरर आ सकता है
    performCriticalOperation();
  } catch (error) {
    // स्टेट सेट करके UI को सूचित करें
    setErrorState(error);
  }
};

प्रोजेक्ट्स के लिए 'react-error-boundary' लाइब्रेरी का उपयोग कैसे करें?

अगर आप खुद क्लास कंपोनेंट नहीं बनाना चाहते और बिल्कुल मॉडर्न, हुक-आधारित (Hook-based) और क्लीन कोड लिखना पसंद करते हैं, तो React कम्युनिटी की सबसे लोकप्रिय लाइब्रेरी react-error-boundary आपके लिए ही बनी है।

सबसे पहले इसे अपने प्रोजेक्ट में इनस्टॉल करें:

npm install react-error-boundary

इसके बाद, आप बहुत ही आसानी से फंक्शनल कंपोनेंट्स में इसका इस्तेमाल कर सकते हैं। चलिए इसका एक प्रोडक्शन-रेडी उदाहरण देखते हैं:

import React from 'react';
import { ErrorBoundary } from 'react-error-boundary';

// 1. कस्टम फॉलबैक कंपोनेंट बनाएं
function ErrorFallback({ error, resetErrorBoundary }) {
  return (

      ### सिस्टम में कुछ गड़बड़ हुई है!

{error.message}



        फिर से प्रयास करें


  );
}

// 2. मुख्य कंपोनेंट जहाँ हम इसे रैप करेंगे
function AppWithLibrary() {
  return (
     {
        // यहाँ आप स्टेट रीसेट करने का लॉजिक लिख सकते हैं
        console.log("ErrorBoundary successfully reset!");
      }}
    >


  );
}

export default AppWithLibrary;

React Apps में Error Boundaries लगाने के Best Practices

एक अनुभवी डेवलपर की तरह सोचते हुए, अपनी एप्लीकेशन के आर्किटेक्चर को बेहतर बनाने के लिए इन बेस्ट प्रैक्टिसेज का ध्यान जरूर रखें:

सही जगह पर रैप करें (Granular Placement): पूरी की पूरी ऐप को केवल एक ही ग्लोबल एरर बाउंड्री में न लपेटें। ऐसा करने से अगर हेडर में छोटा सा एरर आएगा तो पूरी स्क्रीन गायब हो जाएगी। इसके बजाय, अलग-अलग सेक्शन्स जैसे कि Sidebar, Feed, और CommentSection को अलग-अलग एरर बाउंड्रीज में रैप करें।
एरर लॉगिंग (Error Logging): हमेशा अपने componentDidCatch का इस्तेमाल करके एरर को मॉनिटरिंग टूल्स (जैसे Sentry या LogRocket) पर भेजें। इससे आपको बिना यूजर के बताए ही पता चल जाएगा कि प्रोडक्शन पर क्या फट रहा है।
सार्थक फॉलबैक UI (Graceful Degradation): यूजर को डरावने कोडिंग शब्द दिखाने के बजाय एक दोस्ताना संदेश और 'Retry' बटन दें।

तो दोस्तों, आज हमने यह गहराई से सीखा कि कैसे React Error Boundaries का सही उपयोग करके हम अपनी React एप्लीकेशन को अत्यधिक मजबूत और यूजर-फ्रेंडली बना सकते हैं। अब व्हाइट स्क्रीन ऑफ डेथ को हमेशा के लिए बाय-बाय कहने का समय आ चुका है! अपने प्रोजेक्ट्स में इसे आज ही लागू करें और यूजर एक्सपीरियंस को नेक्स्ट लेवल पर ले जाएं। कोडिंग करते रहिए और मुस्कुराते रहिए!

Frequently Asked Questions (FAQs)

Q1: क्या हम Functional Components में Error Boundary बना सकते हैं?
नहीं, सीधे तौर पर नहीं। React में एरर कैच करने वाले लाइफसाइकिल मेथड्स (getDerivedStateFromError और componentDidCatch) केवल Class Components में ही उपलब्ध हैं। हालाँकि, आप 'react-error-boundary' जैसी थर्ड-पार्टी लाइब्रेरी का उपयोग करके फंक्शनल स्टाइल में काम कर सकते हैं।
Q2: क्या Error Boundary बच्चों के अलावा खुद के एरर को कैच कर सकती है?
नहीं, Error Boundary केवल अपने नीचे मौजूद चाइल्ड कंपोनेंट्स के एरर्स को ही कैच करती है। यदि खुद एरर बाउंड्री कंपोनेंट के अंदर रेंडरिंग में कोई गड़बड़ होती है, तो वह एरर ऊपर की तरफ ट्रांसफर हो जाता है।
Q3: क्या हमें पूरी ऐप को एक ही Error Boundary से रैप करना चाहिए?
नहीं, यह एक खराब प्रैक्टिस है। आपको अपनी ऐप के विभिन्न हिस्सों (जैसे साइडबार, चैट बॉक्स, डैशबोर्ड विजेट्स) को अलग-अलग एरर बाउंड्री से रैप करना चाहिए ताकि एक हिस्से का एरर पूरी ऐप को प्रभावित न करे।
Q4: क्या Error Boundary एपीआई कॉल (Fetch/Axios) के एरर को हैंडल करती है?
नहीं। एरर बाउंड्री रेंडरिंग फेज, लाइफसाइकिल मेथड्स और कंस्ट्रक्टर के एरर्स को कैच करती है। एपीआई कॉल जैसे एसिंक्रोनस एरर्स को आपको कंपोनेंट के अंदर सामान्य try-catch ब्लॉक से ही हैंडल करना पड़ेगा।
Q5: Error Boundary में componentDidCatch का मुख्य उद्देश्य क्या है?
componentDidCatch का मुख्य काम एरर रिपोर्टिंग है। जब भी कोई अनपेक्षित एरर आता है, तो हम इस मेथड के जरिए उस एरर के स्टैक ट्रेस को Sentry या अपने कस्टम लॉगिंग सर्वर पर एनालिसिस के लिए भेजते हैं।

React Render Props Pattern Kya Hai

banti kevat — Wed, 15 Jul 2026 05:56:22 +0000

React Render Props Pattern क्या है और इसे code reusability के लिए कैसे use करें? इस detailed Hindi guide में complete steps और examples के साथ सीखें।

दोस्तों, क्या आपके साथ कभी ऐसा हुआ है कि आप ReactJS में दो अलग-अलग components बना रहे हों, और अचानक आपको एहसास हो कि दोनों Components का state logic बिल्कुल identical (एक जैसा) है? जैसे कि एक Dynamic Dropdown और एक Modal Popup, दोनों को ही open/close होने के लिए एक ही तरह के toggle boolean state की जरूरत होती है। अब सवाल यह आता है कि क्या हम इस logic को दोबारा लिखने के बजाय कहीं reusable बना सकते हैं? यहीं पर एंट्री होती है React के एक बेहद ताकतवर design pattern की, जिसे हम React Render Props Pattern कहते हैं।

⚡ Quick Answer: React Render Props Pattern एक ऐसी technique है जिसमें हम React components के बीच state logic को share करने के लिए एक prop का use करते हैं, जिसकी value एक render function होती है। यह component खुद कुछ render करने के बजाय इस function को call करके data को UI rendering के लिए delegate कर देता है।
आज इस deep-dive tutorial में, हम और आप मिलकर इस pattern का postmortem करेंगे। एक senior developer के नजरिए से हम समझेंगे कि React Hooks के आने के बाद भी इस pattern की क्या relevance है, और इसे production-grade projects में कैसे implement किया जाता है। तो चाय का कप बगल में रख लीजिए, और चलिए शुरू करते हैं!

React Render Props Pattern क्या है? (What is Render Props Pattern?)

सरल शब्दों में कहें तो, React Render Props Pattern एक ऐसा coding design pattern है जहां एक component को एक specialized prop पास किया जाता है। इस prop की value कोई string, object या array नहीं होती, बल्कि एक JavaScript Function होती है। यह function तय करता है कि स्क्रीन पर क्या render होगा।

जब आप किसी component को render props pattern के साथ design करते हैं, तो वह component खुद अपनी कोई HTML markup (UI) render नहीं करता। इसके बजाय, वह सिर्फ अपने internal state और business logic को handle करता है, और उस state dynamic data को उसी render prop function के argument के रूप में पास कर देता है।

इस pattern की official definition को आप React Official Documentation पर भी देख सकते हैं।

ध्यान देने वाली बात ये है कि इस prop का नाम "render" होना बिल्कुल भी जरूरी नहीं है। आप इसका नाम render, children, renderUI, या जो मन करे रख सकते हैं। मुख्य बात यह है कि वह prop एक function होना चाहिए जो JSX return करे।

आखिर हमें Render Props Pattern की जरूरत क्यों पड़ी? (Why do we need it?)

React में reusable code लिखना सबसे बड़ी कला है। मान लीजिए आपके पास दो components हैं:

MouseTracker: जो screen पर mouse के coordinates (X, Y) track करता है और एक बिल्ली (cat) की image को उस coordinate पर दिखाता है।
Tooltip: जो mouse coordinates को track करके एक tooltip box की position set करता है।

यहाँ दोनों ही cases में, mouse coordinates (X, Y) को track करने का logic बिल्कुल copy-paste है। अगर हम traditional approach से जाएँगे, तो हमें दोनों components में useState और useEffect का setup बार-बार लिखना पड़ेगा।

इस logic duplication को खत्म करने के लिए हमारे पास तीन रास्ते होते हैं:

Higher-Order Components (HOC)
React Render Props Pattern
Custom React Hooks

HOCs के साथ "wrapper hell" और naming conflicts की बड़ी समस्या होती थी, जिसके कारण Render Props Pattern काफी लोकप्रिय हुआ।

Render Props Pattern का Architecture Flow

यह pattern कैसे काम करता है, इसे समझने के लिए नीचे दिए गए component flow design को ध्यान से देखिए:

🏗️ Render Props Pattern Flow

Parent Component
→
Wrapper Component (Logic inside)
→
Render Function (State sent back)
→
Custom UI rendered on screen

Diagram: Wrapper component maintains state, passes state to the render prop function, which returns actual JSX back to the screen.

Step-by-Step Implementation: Live Coding Example

चलिए, अब हवा में बातें बंद करते हैं और सीधे code editor में चलते हैं। हम एक complete, production-ready live example बनाएंगे।

हम एक Mouse Tracker Component बनाएंगे जो mouse coordinates को state में hold करेगा, और किसी भी consumer component को screen पर tracking UI render करने की आज़ादी देगा।

Step 1: Wrapper Component बनाना (The Logic Provider)

सबसे पहले, हम MouseTracker.jsx component बनाएंगे जो mouse coordinates को capture करने का logic contain करेगा।

import React, { useState, useEffect } from 'react';

// यह component खुद कोई UI render नहीं करता, सिर्फ state pass करता है
const MouseTracker = ({ render }) => {
  const [coords, setCoords] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const handleMouseMove = (event) => {
      setCoords({
        x: event.clientX,
        y: event.clientY,
        windowWidth: window.innerWidth,
        windowHeight: window.innerHeight
      });
    };

    window.addEventListener('mousemove', handleMouseMove);

    // Event listener clean up करना न भूलें (Memory leak prevention)
    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
    };
  }, []);

  // यहाँ हम 'render' prop को call कर रहे हैं और coordinate state parameter के रूप में भेज रहे हैं
  return (
    <div style={{ height: '100vh', width: '100%', position: 'relative' }}>
      {render(coords)}
    </div>
  );
};

export default MouseTracker;

Step 2: Consumer Component में Logic Reuse करना

अब हमारे पास MouseTracker ready है। चलिए, अब हम दो अलग-अलग UI components में इस logic को dynamically reuse करते हैं।

import React from 'react';
import MouseTracker from './MouseTracker';

// First Consumer: सिर्फ coordinates text render करेगा
const CoordinateTextDisplay = () => {
  return (
    <div style={{ padding: '20px', background: '#f3f4f6', borderRadius: '8px' }}>
      <h3>🔴 Real-time Mouse Tracker</h3>
      <MouseTracker 
        render={({ x, y }) => (
          <p style={{ fontSize: '18px', fontWeight: 'bold' }}>
            The mouse is currently at <span style={{ color: '#ef4444' }}>X: {x}</span>, <span style={{ color: '#3b82f6' }}>Y: {y}</span>
          </p>
        )} 
      />
    </div>
  );
};

// Second Consumer: Screen पर एक सुंदर dynamic circle render करेगा जो mouse pointer को follow करेगा
const MagicPointerDisplay = () => {
  return (
    <div style={{ background: '#1e1b4b', minHeight: '400px', position: 'relative', overflow: 'hidden', color: '#ffffff' }}>
      <h3 style={{ padding: '20px' }}>✨ Move your mouse here to see magic!</h3>
      <MouseTracker 
        render={({ x, y }) => (
          <div 
            style={{
              position: 'absolute',
              top: y - 25,
              left: x - 25,
              width: '50px',
              height: '50px',
              backgroundColor: '#10b981',
              borderRadius: '50%',
              pointerEvents: 'none',
              boxShadow: '0 0 20px #10b981',
              transition: 'transform 0.05s linear'
            }}
          />
        )} 
      />
    </div>
  );
};

// Main App Component जहाँ दोनों logic reuse हो रहे हैं
const App = () => {
  return (
    <div style={{ padding: '40px', fontFamily: 'sans-serif', display: 'flex', flexDirection: 'column', gap: '30px' }}>
      <h1>React Render Props Pattern Implementation</h1>
      <CoordinateTextDisplay />
      <MagicPointerDisplay />
    </div>
  );
};

export default App;

देखा आपने? MouseTracker component ने coordinate tracking का भारी-भरकम logic handle कर लिया, और दोनों child elements (text display और bubble magic display) ने बिना tracking state logic लिखे सिर्फ UI render करने पर ध्यान केंद्रित किया।

Using Children as a Render Prop

कई developers को render={} prop लिखना थोड़ा अजीब या verbose लगता है। React में, आप direct custom prop के बजाय standard children prop का use करके भी Render Props Pattern implement कर सकते हैं।

आइए देखते हैं इसे कैसे लिखते हैं:

// Wrapper Component with children prop
const ScrollTracker = ({ children }) => {
  const [scrollY, setScrollY] = useState(0);

  useEffect(() => {
    const handleScroll = () => {
      setScrollY(window.scrollY);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // यहाँ हम custom 'render' function की जगह 'children' function call कर रहे हैं
  return children(scrollY);
};

// Parent Component usage
const ScrollApp = () => {
  return (
    <ScrollTracker>
      {(scrollY) => (
        <div style={{ position: 'fixed', top: 10, right: 10, background: 'black', color: 'white', padding: '10px' }}>
          You scrolled: {scrollY}px
        </div>
      )}
    </ScrollTracker>
  );
};

Comparison: Render Props vs HOC vs Custom Hooks

React ecosystem में core state logical patterns के बीच की तुलना समझना बेहद जरूरी है। आइए इस comparison table से देखें कि कब कौन-सा pattern select करना चाहिए:

Pattern / Feature	Render Props	Higher-Order Components (HOC)	Custom Hooks
Complexity	Medium	High (requires functional wrapping)	Low (most modern)
Props Collision / Naming Conflict	No (Explicitly pass parameters)	Yes (Implicit props overwrite)	No (Variables are returned)
Component Hierarchy Bloat	Moderate	High (Creates wrapper components)	None (Pure JS logic injection)
Best Use Case	Dynamic rendering based on runtime parent state	Cross-cutting concerns (Auth wrapper, analytics logging)	API fetching, pure logic separation, utility state

Performance Issues और उनका समाधान (Fixing Performance & Errors)

जब आप Render Props Pattern use करते हैं, तो अक्सर developers कुछ common errors या performance pitfalls का शिकार हो जाते हैं। आइए उनके बारे में विस्तार से समझें ताकि आपके application में कोई error या lag न आए।

1. Anonymous Functions और Re-renders की समस्या

सबसे बड़ी performance issue तब आती है जब आप inline anonymous function को render prop में direct pass करते हैं, जैसे:

<MouseTracker render={(coords) => <DisplayCoords coords={coords} />} />

गड़बड़ क्या है?

हर बार जब container component re-render होगा, तब-तब एक नया function reference (anonymous function) memory में create होगा। अगर React virtual DOM comparison करेगा, तो उसे लगेगा कि props change हो गए हैं, जिससे child component बेवजह heavy computational cycle चलाएगा।

सटीक समाधान (The Fix):

इस render logic को एक regular instance method (या component function hook inside useCallback) के रूप में bind करें, जिससे static references reference memory leak और useless calculation prevent कर सकें:

import React, { useCallback } from 'react';

const MyParentComponent = () => {
  // Callback Hook references hold करेगा
  const renderMousePointer = useCallback((coords) => {
    return <DisplayCoords coords={coords} />;
  }, []);

  return <MouseTracker render={renderMousePointer} />;
};

2. "TypeError: render is not a function"

यह error अक्सर तब आती है जब आप wrapper component का code strict types के बिना लिखते हैं और parent structure पर render target dynamic logic props pass करना भूल जाते हैं।

सटीक समाधान (The Fix):

हमेशा props को sanitize करें या components के default setup parameters declare करके fallback functions provide करें:

// Using Prop-Types to secure function logic structures
import PropTypes from 'prop-types';

const MouseTracker = ({ render }) => {
  // logic...
  return render ? render(stateCoords) : null;
};

MouseTracker.propTypes = {
  render: PropTypes.func.isRequired
};

Toh dosto, humne aaj seekha...

तो दोस्तों, आज के इस interactive masterclass tutorial में हमने सीखा कि React Render Props Pattern क्या है, यह कैसे हमारी state reuse problem को चुटकियों में solve करता है, और इसे proper architecture flow के साथ clean React syntax में कैसे implement किया जाता है।

भले ही आज की तारीख में Custom Hooks ने React community का पूरा focus खींचा हो, लेकिन dynamic wrapper widgets, library development (जैसे Formik या React Router v4) और conditional context propagation में Render Props Pattern आज भी एक solid और reliable design standard माना जाता है।

Frequently Asked Questions (FAQs)

Q1: क्या React Hooks आने के बाद Render Props Pattern पूरी तरह obsolete (बेकार) हो गया है?
नहीं, Hooks ज्यादातर simple logic share करने के लिए बेस्ट हैं, लेकिन जब आपको logical wrapper components (जैसे Router wrapper or state layouts) की custom UI render runtime dynamic setup control करनी हो, तब Render Props pattern आज भी React engineering में dominant use-case रखता है।
Q2: क्या Render Props Pattern का use करके React Performance पर बुरा असर पड़ता है?
यदि आप dynamic inputs inline anonymous rendering handlers utilize करते हैं, तो state changes पर reference rendering calculation mismatch loads generate होते हैं। हालाँकि, useCallback हुक या simple structured instance method implementation से इसे 100% optimized रखा जा सकता है।
Q3: React Children as Render Props क्या है?
जब हम nested JSX methods pass करने के लिए standard render prop variables custom tags use न करके, JSX component parameters के direct function callbacks structure reference write करते हैं, तो उसे context propagation rendering methods logic child implementation parameters कहते हैं।
Q4: Higher-Order Components (HOC) और Render Props में से कौन सा बेहतर है?
HOC, components code layers setup levels nested wrapper classes logic nested complications structures create करते हैं। Render props explicit mapping coordinates logic parameter levels bypass structures flow handle करने के कारण control tracking structure dynamic logic debugging points process simpler बनाता है।
Q5: क्या मैं Render prop function का नाम "render" के अलावा कुछ और रख सकता हूँ?
हाँ, बिल्कुल! यह absolute open architecture structure validation rules है। आप prop name design parameter specifications settings key render, children, generateBody, viewElement, configureComponent, या custom dynamic values handle configuration structures provide करके create customize logic layers inject can control dynamic state outputs directly can render variables!

React me Higher Order Components HOC Kya Hain

banti kevat — Tue, 14 Jul 2026 12:50:22 +0000

React me Higher Order Components (HOC) kya hain aur ye kaise kaam karte hain? Is guide me HOC pattern, use-cases aur implementation step-by-step seekhein.

Dosto, jab hum bade ReactJS applications par kaam karte hain, toh aksar humein ek hi logic baar-baar likhna padta hai. Maano ki aapko 10 alag components me authentication check karni hai ya data fetch karna hai. Kya aap har baar same code likhenge? Bilkul nahi! Yahi wo jagah hai jahan Higher Order Components (HOC) humari madad karte hain.

⚡ Quick Answer: Higher Order Component (HOC) ek advanced pattern hai jisme hum ek function banate hain jo dusre component ko argument ki tarah leta hai aur ek naya, enhanced component return karta hai. Ye React components me code reuse aur cross-cutting concerns (jaise logging, authentication) ko handle karne ka behtareen tarika hai.

Higher Order Components (HOC) क्या है?

Seedhe shabdo me kahein toh HOC ek "Function" hai, component nahi. Programming ki duniya me ise Higher Order Function ka concept kehte hain. Agar aap ek aisa function likhte hain jo ek component leta hai aur usse extra "powers" (jaise props ya state) add karke naya component deta hai, toh wahi HOC hai.

Iska main maqsad Code Reusability badhana hai. Agar aapke paas 5 alag components hain jinhe ek hi tarah ki styling ya data processing ki zaroorat hai, toh aap unhe wrap karne ke liye ek HOC bana sakte hain.

🏗️ Architecture Diagram

Original Component
→
HOC Wrapper
→
Enhanced Component

Diagram: HOC ek simple component ko input lekar use transform karke power-up kar deta hai.

HOC कैसे काम करता है? (Step-by-Step)

Chaliye ek real-world example dekhte hain. Maan lijiye humein ek withAuth HOC banana hai jo check karega ki user logged-in hai ya nahi. Agar hai, toh component dikhao, warna "Please Login" message dikhao.


import React from 'react';

// Ye hamara HOC function hai
const withAuth = (WrappedComponent) => {
  return (props) => {
    const isLoggedIn = true; // Ye logic actual app me auth context se aayega

    if (!isLoggedIn) {
      return <div>Please Login to view this page.</div>;
    }

    // Agar user logged-in hai, original component return karo
    return <WrappedComponent {...props} />;
  };
};

export default withAuth;

Ab iska use kaise karenge? Bahut simple hai!


const Dashboard = (props) => {
  return <h1>Welcome to your Dashboard, {props.username}!</h1>;
};

// HOC ke saath wrap karna
const EnhancedDashboard = withAuth(Dashboard);

// Export karte waqt enhanced component use karein
export default EnhancedDashboard;

HOC का use कब करें और कब नहीं?

Dosto, har cheez ke liye HOC ka use karna zaruri nahi hai. Aaiye ek table se samjhte hain:

Feature	Higher Order Component (HOC)	Hooks (Alternative)
Complexity	Thoda complex structure	Kaafi simple aur readable
Main Use	Component wrapping & logic sharing	State logic & Side effects
Readability	Wrapper hell ho sakta hai	Bahut clean code rehta hai

Dhyan dene wali baat ye hai ki: Jab se React Hooks aaye hain, HOC ka use thoda kam ho gaya hai. Lekin kuch specific cases jaise "Layout wrappers" ya "Third-party libraries" (jaise React Router ka withRouter purane versions me) ke liye HOC aaj bhi king hai.

Common Errors और Debugging Tips

Jab aap HOC likhte hain, toh kuch common error face kar sakte hain:

Prop Drilling/Loss: Agar aap {...props} pass karna bhool gaye, toh aapke original component tak props nahi pahunchenge. Isse components blank dikh sakte hain.
Display Name: React DevTools me HOC components ko debug karna mushkil hota hai kyunki wo sab "Anonymous" dikhte hain. Isse fix karne ke liye WrappedComponent.displayName set karein.
Hooks in HOC: Yaad rakhein, HOC ke andar aap hooks use kar sakte hain, lekin HOC khud ek component nahi, ek function hai.

Official documentation ke liye React official docs check karte rahein.

Frequently Asked Questions (FAQs)

Q1: Kya HOC aur Custom Hooks ek hi hain?
Nahi, ye alag hain. HOC ek pure component ko wrap karta hai (UI centric), jabki Custom Hooks sirf logic (state/side effects) ko reuse karte hain.
Q2: Kya hum multiple HOCs ek saath use kar sakte hain?
Haan, aap components ko multiple wrappers me wrap kar sakte hain, jaise: withAuth(withLogger(Dashboard)). Isse "Wrapper Hell" kehte hain, isliye ise limit me rakhein.
Q3: HOC me "Props" pass karna kyun zaruri hai?
Kyuki wrapper component original component ko render karta hai. Agar aap props pass nahi karenge, toh child component ko kabhi data nahi milega.
Q4: Kya HOC performance ko slow karta hai?
HOC ek extra layer add karta hai, lekin agar sahi tareeke se use ho, toh ye negligible hai. Avoid nesting too many HOCs.
Q5: Kya main class component me HOC use kar sakta hoon?
Haan, HOC class aur functional components dono ke saath kaam karta hai. Ye React ke pattern ka feature hai, components ka nahi.

Toh dosto, humne aaj seekha ki HOC kya hai aur ise project me kaise implement karte hain. Yaad rakhein, modern React me Hooks ka pehle try karein, agar logic shared component structure me chahiye tabhi HOC use karein. Happy coding!

React Component Lifecycle Kya Hai (Complete Guide (Hindi)

banti kevat — Tue, 14 Jul 2026 10:17:13 +0000

React Component Lifecycle kya hai? Is complete Hindi guide me components ke birth, update, aur death phases ko hooks aur lifecycle methods ke sath sikhein.

मेरे प्यारे दोस्तों, अगर आप ReactJS की दुनिया में कदम रख चुके हैं, तो आपने एक बात जरूर नोटिस की होगी — यहाँ सब कुछ components के इर्द-गिर्द घूमता है। लेकिन क्या आपने कभी सोचा है कि एक React Component स्क्रीन पर आने से लेकर गायब होने तक किस सफर से गुजरता है? जब हम कोई एप्लीकेशन बनाते हैं, तो बैकग्राउंड में डेटा लोड करना, इवेंट्स को संभालना, और मेमोरी को मैनेज करना बेहद जरूरी हो जाता है। अगर हम इस साइकिल को नहीं समझेंगे, तो हमारी ऐप में मेमोरी लीक्स और परफॉरमेंस की समस्याएँ आने लगेंगी। चलिए, आज अपने 50 सालों के प्रोग्रामिंग अनुभव का निचोड़ लेकर मैं आपके साथ बैठ रहा हूँ ताकि हम मिलकर इस "React Component Lifecycle" के पूरे रहस्य को बहुत ही आसान और मजेदार भाषा में डिकोड कर सकें!

⚡ Quick Answer: React Component Lifecycle वह सीरीज है जिसके तहत एक component बनता है (Mounting), अपडेट होता है (Updating), और स्क्रीन से हटता है (Unmounting)। Functional components में इस पूरी साइकिल को मैनेज करने के लिए useEffect Hook का इस्तेमाल किया जाता है, जो class components के पुराने lifecycle methods का एक आधुनिक विकल्प है।

React Component Lifecycle क्या है और इसकी आवश्यकता क्यों है?

सरल शब्दों में कहें तो, जैसे एक इंसान का जीवन चक्र होता है — जन्म (Birth), विकास (Growth), और मृत्यु (Death) — ठीक उसी तरह एक React components का भी अपना एक जीवन चक्र (Lifecycle) होता है। जब कोई component स्क्रीन पर पहली बार दिखाई देता है, जब उसका डेटा बदलता है, या जब वह स्क्रीन से हट जाता है, तो React कई तरह के फंक्शन्स को ट्रिगर करता है।

अब सवाल उठता है कि हमें इसकी जरूरत क्यों है? मान लीजिए आप एक रियल-टाइम स्टॉक मार्केट ट्रैकर या मौसम बताने वाली एप्लीकेशन बना रहे हैं। जैसे ही आपका component स्क्रीन पर लोड हो, आपको तुरंत API से लेटेस्ट डेटा मंगाना होगा। जब यूजर किसी दूसरे पेज पर जाए, तो आपको बैकग्राउंड में चल रहे इंटरनेट कनेक्शंस को बंद करना होगा ताकि यूजर का इंटरनेट और डिवाइस की मेमोरी फालतू में खर्च न हो। इन सभी कामों को सही समय पर करने के लिए हमें component के लाइफसाइकल को समझना और संभालना पड़ता है।

🏗️ React Component Lifecycle Flow Diagram

Mounting (Birth in DOM)
→
Updating (State/Props Change)
→
Unmounting (Removal from DOM)

Diagram: React Component Lifecycle के तीन मुख्य चरण।

Component Lifecycle के तीन मुख्य Phases (चरण)

React में एक component का पूरा सफर तीन मुख्य चरणों में बंटा हुआ है। आइए इन तीनों को बहुत करीब से और आसान उदाहरणों के साथ समझते हैं:

1. Mounting Phase (जन्म)

यह वह पहला चरण है जब component का नया बच्चा पैदा होता है और पहली बार ब्राउज़र के DOM में अपनी जगह बनाता है। इस फेज में component का इनिशियलाइजेशन होता है, डिफ़ॉल्ट props सेट किए जाते हैं, और शुरुआती state डिक्लेयर की जाती है। इस समय पर हम API से डेटा फैच करने जैसे महत्वपूर्ण काम करते हैं ताकि यूजर को तुरंत स्क्रीन पर डेटा दिखाई दे।

2. Updating Phase (विकास/बदलाव)

जब component स्क्रीन पर आ जाता है, तो यूजर उसके साथ इंटरैक्ट करता है। जैसे ही component की state या उसे मिलने वाले props बदलते हैं, React को पता चल जाता है कि स्क्रीन पर कुछ नया दिखाना है। इस बदलाव की वजह से component दोबारा रेंडर (Re-render) होता है। इसे हम Updating Phase कहते हैं।

3. Unmounting Phase (मृत्यु/विदाई)

यह component के जीवन का आखिरी पड़ाव है। जब यूजर किसी दूसरे पेज पर जाता है या किसी बटन को दबाकर उस component को छुपा देता है, तब वह component DOM से पूरी तरह हटा दिया जाता है। इस फेज में हमें सफ़ाई (Cleanup) का काम करना होता है, जैसे कि चल रहे टाइमर्स (setInterval) को रोकना या एक्टिव इवेंट लिसनर्स को हटाना।

Class Components vs Functional Components: बदलाव का सफर

पुराने समय में, जब React में Class Components का बोलबाला था, तब हम हर फेज के लिए अलग-अलग इन-बिल्ट मेथड्स का इस्तेमाल करते थे। लेकिन आधुनिक React (React 16.8 के बाद) में Hooks के आने से, Functional Components ही राज कर रहे हैं। अब हमें अलग-अलग मेथड्स याद रखने की जरूरत नहीं पड़ती; केवल एक अकेला useEffect Hook इन सभी कामों को बखूबी संभाल लेता है।

आइए एक टेबल के जरिए देखते हैं कि पुराने क्लास मेथड्स और नए फंक्शनल हुक्स में क्या संबंध है, जिससे आपको समझने में आसानी होगी:

Lifecycle Phase	Class Component Method	Functional Hook Equivalent
Mounting (Birth)	componentDidMount()	useEffect(() => {}, [])
Updating (Change)	componentDidUpdate()	useEffect(() => {}, [dependency])
Unmounting (Death)	componentWillUnmount()	useEffect(() => { return () => {} }, [])

ध्यान देने वाली बात ये है कि अगर आप React के बेहतरीन डेवलपर बनना चाहते हैं, तो आपको हुक्स का सही इस्तेमाल करना ही होगा। विस्तृत जानकारी के लिए आप React Official Documentation भी पढ़ सकते हैं, जो कि सबसे सटीक और विश्वसनीय सोर्स है।

Step-by-Step Production-Ready Code Implementation

चलिए, अब सीधे काम की बात पर आते हैं। कोडिंग को सिर्फ थ्योरी से नहीं समझा जा सकता। हम एक कंप्लीट, प्रोडक्शन-रेडी और फुली-फंक्शनल React Component लिखेंगे। इस उदाहरण में हम एक "User Profile Card" बनाएंगे जो इंटरनेट से डेटा मंगाएगा (Mounting), यूजर के स्टेटस को अपडेट करेगा (Updating), और स्क्रीन से हटते ही एक एक्टिव टाइमर को क्लीनअप करेगा (Unmounting)।

इस कोड को बहुत ध्यान से देखें और समझने की कोशिश करें कि हर लाइन क्या काम कर रही है:

import React, { useState, useEffect } from 'react';

function UserDashboard({ userId }) {
  const [userData, setUserData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [secondsActive, setSecondsActive] = useState(0);

  // 1. MOUNTING PHASE: Component के लोड होते ही डेटा फैच करना
  useEffect(() => {
    console.log("Component DOM में माउंट हो गया है! API कॉल शुरू हो रही है...");

    // API से डमी डेटा लाने का मॉक फंक्शन
    const fetchUserData = async () => {
      try {
        setLoading(true);
        // डमी API रिस्पॉन्स का टाइमआउट सेट कर रहे हैं
        setTimeout(() => {
          setUserData({
            name: "अमित शर्मा",
            role: "सीनियर सॉफ्टवेयर इंजीनियर",
            company: "Tech Solutions Inc."
          });
          setLoading(false);
          console.log("डेटा सफलतापूर्वक लोड हो गया है!");
        }, 1500);
      } catch (error) {
        console.error("डेटा फैच करने में एरर आया:", error);
        setLoading(false);
      }
    };

    fetchUserData();
  }, []); // खाली dependency array ([]) का मतलब है कि यह सिर्फ माउंटिंग पर एक बार चलेगा

  // 2. UPDATING PHASE: जब userId या userData बदलेगा तो यह इफेक्ट चलेगा
  useEffect(() => {
    if (userData) {
      console.log(`यूजर प्रोफाइल अपडेट हो गई है! नया नाम: ${userData.name}`);
      document.title = `${userData.name} - Dashboard`;
    }
  }, [userData]); // यह केवल तब रन होगा जब userData स्टेट बदलेगी

  // 3. UNMOUNTING PHASE: टाइमर सेट करना और कंपोनेंट अनमाउंट होने पर क्लीनअप करना
  useEffect(() => {
    console.log("एक एक्टिविटी टाइमर शुरू किया जा रहा है...");
    const timerInterval = setInterval(() => {
      setSecondsActive((prevSeconds) => prevSeconds + 1);
    }, 1000);

    // क्लीनअप फंक्शन (यह componentWillUnmount की तरह काम करता है)
    return () => {
      console.log("कंपोनेंट अनमाउंट हो रहा है! टाइमर इंटरवल को क्लियर किया जा रहा है...");
      clearInterval(timerInterval);
    };
  }, []); // खाली एरे के साथ रिटर्न फंक्शन अनमाउंट होने पर ही चलता है

  if (loading) {
    return (

        ### डेटा लोड हो रहा है, कृपया प्रतीक्षा करें...



    );
  }

  return (

      ## यूजर डैशबोर्ड




---


      नाम: {userData.name}


      पद: {userData.role}


      कंपनी: {userData.company}




---



        ⏱️ आप इस पेज पर {secondsActive} सेकंड से सक्रिय हैं।


  );
}

export default UserDashboard;

इस कोड को जब आप अपने प्रोजेक्ट में चलाएंगे, तो ब्राउज़र के कंसोल (Console) को जरूर खोलकर देखिएगा। आपको साफ दिखाई देगा कि कब कौन सा मैसेज प्रिंट हो रहा है। यही सबसे बढ़िया तरीका है किसी भी कॉन्सेप्ट को प्रैक्टिकली सीखने का!

Edge Cases और सामान्य गलतियाँ (Common Errors & Debugging)

दोस्तों, जब हम कंपोनेंट्स की लाइफसाइकल के साथ काम करते हैं, तो अक्सर कुछ ऐसी गलतियाँ हो जाती हैं जो बड़े-बड़े धुरंधर डेवलपर्स को भी परेशान कर देती हैं। आइए इनके बारे में बात करते हैं ताकि आप इन मुश्किलों से बच सकें:

useEffect में Infinite Loop बन जाना: यह सबसे आम गलती है। मान लीजिए आपने useEffect के अंदर कोई स्टेट अपडेट की (जैसे setUserData) और उस स्टेट को ही dependency array में डाल दिया। इससे क्या होगा? स्टेट बदलेगी -> इफेक्ट चलेगा -> स्टेट फिर बदलेगी -> इफेक्ट फिर चलेगा... और यह सिलसिला कभी खत्म नहीं होगा।

समाधान: हमेशा अपने dependency array को बहुत ध्यान से डिजाइन करें। केवल उन्हीं वेरिएबल्स को डालें जिन पर आपका इफेक्ट सचमुच निर्भर करता है।

Memory Leaks होना (क्लीनअप न करना): यदि आप अपने कंपोनेंट में कोई setInterval, addEventListener या WebSocket कनेक्शन चालू करते हैं और उसे अनमाउंट होने पर बंद नहीं करते, तो वह बैकग्राउंड में चलता ही रहेगा। इससे आपकी ऐप स्लो हो जाएगी।

समाधान: अपने useEffect से हमेशा एक क्लीनअप फंक्शन रिटर्न करें जो इन बाहरी सोर्सेज को हटा या बंद कर दे। अगर कभी आपको कंपोनेंट की एरर्स को समझने और उन्हें ठीक करने में परेशानी हो, तो आप हमारे Error Solving सेक्शन को देख सकते हैं, जहाँ हमने कई रियल-वर्ल्ड प्रॉब्लम्स के आसान सॉल्यूशंस शेयर किए हैं।

Stale Closures (पुरानी स्टेट वैल्यू मिलना): कभी-कभी useEffect के अंदर आपको स्टेट की पुरानी वैल्यू मिलती है क्योंकि वह वैल्यू उस समय के "क्लोजर" में कैप्चर हो चुकी होती है जब इफेक्ट पहली बार चला था।

समाधान: स्टेट को सीधे अपडेट करने के बजाय फंक्शनल अपडेट्स का इस्तेमाल करें, जैसे: setCount(prev => prev + 1)।

बेहतर परफॉरमेंस के लिए Best Practices

अपने एप्लीकेशन की स्केलेबिलिटी और स्पीड बनाए रखने के लिए इन जरूरी बातों का विशेष ध्यान रखें:

सिंगल-परपज इफेक्ट्स (Single-purpose Effects): एक ही useEffect में सारी दुनिया का काम करने की कोशिश न करें। डेटा फैचिंग के लिए अलग, और टाइमर के लिए अलग useEffect लिखें। इससे आपका कोड साफ और मेंटेन करने योग्य रहता है।
Dependency Array को खाली न छोड़ें जब जरूरत हो: यदि आपका इफेक्ट किसी बाहरी वैरिएबल का इस्तेमाल कर रहा है, तो उसे डिपेंडेंसी एरे में जरूर डालें, अन्यथा आपका कोड पुराना डेटा दिखाता रहेगा।
Cleanup को कभी न भूलें: हर वो इवेंट जो ब्राउज़र या विंडो लेवल पर रजिस्टर हो रहा है, उसे क्लीनअप करना आपकी पहली प्राथमिकता होनी चाहिए।

तो दोस्तों, आज हमने रिएक्ट कंपोनेंट लाइफसाइकल की गहराई को छुआ और समझा कि कैसे क्लास कंपोनेंट्स के पुराने तरीके नए फंक्शनल हुक्स में बदल गए हैं। लाइफसाइकल को अच्छी तरह समझना आपको एक साधारण डेवलपर से एक बेहतरीन सॉफ्टवेयर आर्किटेक्ट बनाता है। अब आपकी बारी है! इस कोड को अपने लोकल सिस्टम पर चलाकर देखें, उसमें थोड़े बदलाव करें और एक्सपेरिमेंट करें। कोडिंग करने से ही कोडिंग आती है। खुश रहिए, कोड करते रहिए!

Frequently Asked Questions (FAQs)

Q1: React Component Lifecycle में 'Mounting' का क्या मतलब है?
Mounting वह फेज है जब एक React component पहली बार तैयार होकर ब्राउज़र के असली DOM (Document Object Model) में डाला जाता है और स्क्रीन पर दिखाई देता है।
Q2: Class Components के lifecycle methods का विकल्प functional components में क्या है?
Functional components में Class components के सभी लाइफसाइकल मेथड्स (जैसे componentDidMount, componentDidUpdate, componentWillUnmount) का काम अकेले 'useEffect' Hook द्वारा मैनेज किया जाता है।
Q3: Unmounting फेज में Cleanup फंक्शन का इस्तेमाल क्यों किया जाता है?
Cleanup फंक्शन का इस्तेमाल मेमोरी लीक से बचने के लिए किया जाता है। इसकी मदद से हम एक्टिव टाइमर्स (setInterval), इवेंट लिसनर्स, या ओपन नेटवर्क कनेक्शंस को component के नष्ट होने पर बंद करते हैं।
Q4: useEffect Hook में खाली dependency array ([]) का क्या काम है?
जब हम dependency array को खाली ([]) छोड़ते हैं, तो उसके अंदर का कोड सिर्फ कंपोनेंट के माउंट होने पर एक बार चलता है, और दोबारा किसी भी स्टेट बदलाव पर ट्रिगर नहीं होता।
Q5: क्या हम एक कंपोनेंट में एक से अधिक useEffect का इस्तेमाल कर सकते हैं?
हाँ, बिल्कुल! बेहतर कोडिंग प्रैक्टिस यही है कि आप अलग-अलग लॉजिक (जैसे डेटा फेचिंग और विंडो इवेंट लिसनर्स) के लिए अलग-अलग 'useEffect' Hooks का उपयोग करें ताकि कोड को समझना आसान रहे।

DEV Community: banti kevat

React Router me Link aur NavLink Kaise Use Karein

React Router में traditional HTML Anchor Tag (<a>) का use क्यों नहीं करना चाहिए?

Anchor Tag के नुकसान:

React Router Navigation Setup करने का Step-by-Step तरीका क्या है?

Step 1: Install React Router DOM

Step 2: Wrap Application inside BrowserRouter

Step 3: Define Routes in App.jsx

<Link> Component क्या है और इसे कैसे use करें?

Link Component का basic syntax:

Link के Advanced Attributes (Props):

<NavLink> Component क्या है और यह <Link> से कैसे अलग है?

NavLink का default dynamic behavior:

Dynamic Styling apply करने के तरीके:

1. Custom dynamic class handle करना:

2. Dynamic inline styles handle करना:

3. end prop का use (Very Important!):

<Link> vs <NavLink> में क्या अंतर है? (Comparison Table)

Complete Implementation Code (Production-Ready)

1. Navbar.jsx Component

2. Navbar.css Stylesheet

Common Routing Errors और उन्हें कैसे Fix करें?

1. "useHref() may be used only in the context of a <Router> component"

2. Dynamic state updates missing components payload values

React Router Performance Best Practices

Frequently Asked Questions (FAQs)

React Router Kya Hai aur Kaise Setup Karein

React Router क्या है और इसका Use क्यों किया जाता है?

React Router v5 vs React Router v6 में क्या अंतर है?

React Router को Step-by-Step अपने Project में कैसे Setup करें?

Step 1: React Project Create करें (Vite के साथ)

Step 2: React Router DOM Package Install करें

Step 3: Component Structure Design करें

Production-Ready React Router Implementation (Complete Code)

1. Root Entry Config: src/main.jsx

2. Dynamic Components Setup: Pages

File: src/pages/Home.jsx

File: src/pages/About.jsx

File: src/pages/Profile.jsx (Dynamic Component)

File: src/pages/NotFound.jsx (404 Fallback Component)

3. Global Navigation Layout: src/components/Navbar.jsx

4. Route Handler Mapping: src/App.jsx

Dynamic Routing और Standard Hooks को कैसे समझें?

1. useParams() Hook

2. useNavigate() Hook

3. useLocation() Hook

React Router में आने वाले 2 Common Errors और उनके Solutions

Error 1: "Cannot read property 'pathname' of undefined" या "useNavigate() can only be used in the context of a <Router>"

Error 2: Production Hosting पर Page Refresh करने पर "404 Not Found" Error

Scalability & Performance Best Practice: Lazy Loading and Suspense

Frequently Asked Questions (FAQs)

React Server Actions Complete Guide (React 19 in (Hindi)

React Server Actions क्या है और React 19 में इसकी क्यों ज़रूरत पड़ी?

React Server Actions कैसे काम करता है? (Under the Hood Architecture)

React Server Actions vs Traditional API Fetching

React Server Actions का Setup और Implementation (Step-by-Step)

Step 1: Project Structure setup करें

Step 2: Database Connection File (dbConnect.js)

Step 3: Server Action Define करें (productActions.js)

Step 4: Client Form Component बनाना (AddProductForm.jsx)

React Server Actions के Common Errors और उन्हें Debug/Fix करने का तरीका

1. "Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components"

2. "Error: Action expected to be run on server but executed on client"

Best Practices: Performance, Security, और Scalability

Frequently Asked Questions (FAQs)

React 19 Server Components Kya Hain (Deep Guide in (Hindi)

React 19 Server Components क्या हैं और ये क्यों ज़रूरी हैं?

Server Components और Client Components में क्या अंतर है?

React 19 Server Components कैसे काम करते हैं? (Architecture Explained)

Practical Code: Server Components को React 19 में कैसे implement करें?

Step 1: Client Component बनाना (Interactive UI Element)

Step 2: Server Component बनाना (Database / API Fetcher)

React 19 Server Components में Common Errors और उन्हें कैसे Fix करें?

1. Error: "useState is not defined" in Server Component

2. Error: Passing Non-Serializable Props to Client Components

RSC Performance Best Practices क्या हैं?

Toh dosto, humne aaj seekha...

Frequently Asked Questions (FAQs)

React Concurrent Mode Kya Hai (React 18 Feature in (Hindi)

React Concurrent Mode kya hai aur ye kyun zaroori hai?

1. Root Entry Config: `src/main.jsx`

File: `src/pages/Home.jsx`

File: `src/pages/About.jsx`

File: `src/pages/Profile.jsx` (Dynamic Component)

File: `src/pages/NotFound.jsx` (404 Fallback Component)

3. Global Navigation Layout: `src/components/Navbar.jsx`

4. Route Handler Mapping: `src/App.jsx`

1. `useParams()` Hook

2. `useNavigate()` Hook

3. `useLocation()` Hook