React Pradarshan Anukoolan Ke Liye Sampurna Margdarshan

React mein pradarshan anukoolan ke saath pratishtha ki samasya hai. Das developers se poochhein ki React app ko tez kaise karein, aur aath kahenge "useMemo aur useCallback sab kuchh." Baki do kahenge "akal se pahle anukoolan sab buri ki jad hai" aur chal jayenge. Dono samuh galat hain, aur dono aise apps bhejate hain jo ya anavashyak roop se jटil hain ya anavashyak roop se dheeme.

Vastavikta adhik sookshm hai. React ka rendering model adhiktar mamalon ke liye box se bahar kushal hai, lekin bhalibhanti samajh gaye pratiroop hain jahan yah kam padta hai. Yah guide har mahatvapurna React anukoolan teknik ko cover karta hai — ve kaise kaam karte hain, kab madad karte hain, aur mahatvapurn roop se, kab nuksan pahunchate hain. Lakshya yah nahi hai ki aap har jagah memo tak pahunche. Yah aapko pradarshan ke liye ek mansik model dena hai jo har sthiti mein sahi chunaav spasht kar de.

Samajhna Ki React Kab Re-render Karta Hai

Kuchh bhi anukoolit karne se pahle, aapko samajhna hoga ki re-render ka karan kya hota hai. React ek component ko re-render karta hai jab uska state badalta hai, jab uska parent re-render hota hai, ya jab vah upabhog karne vala context maan badalta hai. Yah sunne mein saral lagta hai, lekin saral pratiroop vah jagah hai jahan pradarshan samasyayen chhipi hain.

Jab ek parent component re-render hota hai, har child default roop se re-render hota hai — chahe child ke props nahi badle hain. React aisa karta hai kyunki yah nahi jaan sakta ki child parent ke state par nirbhar karta hai bina child ke render function ko execute kiye. Yah bug nahi hai; yah ek dizain vikalp hai jo React ke milkapan model ko saral aur purvanumani rakhta hai. Lekin iska arth hai ki ek uchch-star component mein state parivartan dozenon ya seene descendants mein re-renders chhedh sakta hai.

Key antardrishti yah ki re-render DOM update karne ke samaan nahi hai. React virtual DOM aautput (JSX) ki tulna pichhle aautput se karta hai aur sirf antar vaastavik DOM mein pratibaddh karta hai. Ek component hajaar baar re-render ho sakta hai bina ek DOM mutesan ke. Laagat JavaScript exikyushan mein hai — virtual DOM objects banana, hooks chalana, aur pedon ki tulna karna. Chhote component pedon ke liye, yah laagat na-gali hai. Bade lists, jटil graps, ya expensive gananae karne vaale components ke liye, yah tezi se jama hota hai.

// Every keystroke in this input re-renders the entire tree
function SearchPage() {
  const [query, setQuery] = useState("");

  return (
    <div>
      <SearchInput value={query} onChange={setQuery} />
      <SearchResults query={query} />
      <Sidebar>
        <FilterPanel />
        <RecentSearches />
      </Sidebar>
    </div>
  );
}

// Without optimization, FilterPanel and RecentSearches
// re-render on every keystroke, even though nothing
// they depend on has changed.

Kisi bhi pradarshan jaanch mein pehla kadam yah pahchanana hai ki aapko vaastav mein samasya hai ya nahi. Akal se pahle anukoolan bina maap yogya labh ke jटilta jodta hai. Pahle profil, phir anukoolit karein — lekin jab aapne ek rukawat pahchan li hai, to is guide ki tekniken ve upkaran hain jinka aap upyog karte hain.

Memoization: memo, useMemo, aur useCallback

Memoization sabase adhik charchit React anukoolan teknik hai aur sabase adhik galat upyog. Mool vichar saral hai: yadi ek function samaan input dekhkar samaan aautput utpann karta hai, to parinam cache karein aur baad ki callon par ganana chhod dein. React teen memoization upkaran pradan karta hai, pratyek alag uddeshya ki seva karta hai.

React.memo ek component ko lapetati hai aur re-renders ko rokta hai jab uske props nahi badle hain (shallow comparison upyog karke). Yah patti components ke liye sabase prabhavshali hai jo samaan props aksar prapt karte hain — list items, chart elements, ya koi shuddh component jiska render aautput sirf uske props par nirbhar karta ho.

import { memo } from "react";

const ExpenseRow = memo(function ExpenseRow({ label, amount }: {
  label: string;
  amount: number;
}) {
  return (
    <tr>
      <td>{label}</td>
      <td className={amount < 0 ? "text-red-500" : "text-green-500"}>
        ${amount.toFixed(2)}
      </td>
    </tr>
  );
});

// Now ExpenseRow only re-renders when label or amount changes.
// Without memo, it re-renders every time the parent re-renders.

useMemo renders ke beech ek ganana ke parinam ko cache karta hai. Yah tab upyogi hai jab ek component har render par ek mehangi ganana karti hai — ek bade array ko filter karna, formatting karna, ya jटil transform chalana. useMemo ke bina, vah kaam har re-render par dohrata hai chahe inputs nahi badle hain.

function Dashboard({ transactions, filter }: Props) {
  const visibleTransactions = useMemo(
    () => transactions
      .filter(t => t.date >= filter.start && t.date <= filter.end)
      .sort((a, b) => b.amount - a.amount),
    [transactions, filter]
  );

  return <TransactionList items={visibleTransactions} />;
}

useCallback functions ke liye useMemo ke samaan hai. Yah ek callback function ka memoized version vapas karta hai jo sirf tab badalta hai jab uski nirbhrataen badalti hain. Yah maayne rakhta hai kyunki render body mein paribhashit functions har render par phir se bante hain, jo shallow comparison ko tod deta hai jo memo upyog karta hai.

Yah kritik niyam hai jo adhiktar guides galat pate hain: sab kuchh useMemo aur useCallback mein na lapetein. Har memoization call ka ek kharcha hai — nirbhrata array store karna, har render par uski tulna karna, aur closure memory aavantan karna. Saste operations par memoization lagane se aapka app tez nahi, dheema hota hai. Suchak saral hai: sirf memoize karein yadi aapne samasya maapi hai, ya yadi ganana spasht roop se mehangi hai (jटil data transformations, recursive operations, bade list renders).

Sabase mehangi memoization vah hai jo likhi nahi jani chahiye thi. Pahle profil. Phir wrap. Har abstraction ka kharcha hai, aur memoization render cycle par ek abstraction hai.

Ek aam anti-pratiroop sab kuchh memo mein rakshatmak roop se lapetna hai, pradarshan samasyaon ko rokne ki aasha mein. Yah nahi rokta. Yah har render tulna mein atirikt jodta hai, bundle ko extra code se phulane deta hai, aur codebase ko tark karna kathin banata hai. Memoization ko lakshit anukoolan ke roop mein tabhi jodein jab profiling pushti kare ki yah madad karta hai, na ki default pratiroop ke roop mein.

Code Splitting React.lazy aur Suspense Ke Saath

Bundle aakar React applications mein sabase anadekhi pradarshan ayam hai. Developers render anukoolan par jhume hote hain 500 KB JavaScript bhejte huye jo har upabhokta ko download, parse, aur execute karna padta hai kuchh dekhne se pahle. Code splitting ise hal karti hai aapke bundle ko chunks mein baant kar jo avashyakta par load hote hain.

React.lazy aapko ek dynamic roop se import kiye gaye component ko ek niyamit component ki tarah render karne deta hai. Suspense ke saath milkar, aap ek pratisthapan UI dikha sakte hain jab chunk load ho raha ho. Pradarshan jeet dohari hai: prarambhik bundle chhota hota hai, isliye page tez load hota hai, aur upabhokta sirf code ke liye bhugtan karte hain jo vaastav mein upyog karte hain.

import { lazy, Suspense } from "react";

const AnalyticsDashboard = lazy(
  () => import("./AnalyticsDashboard")
);
const DataExportPanel = lazy(
  () => import("./DataExportPanel")
);

function App() {
  const [showAnalytics, setShowAnalytics] = useState(false);

  return (
    <div>
      <button onClick={() => setShowAnalytics(true)}>
        View Analytics
      </button>
      <Suspense fallback={<div>Loading...</div>}>
        {showAnalytics && <AnalyticsDashboard />}
      </Suspense>
    </div>
  );
}

Lazy loading ke sabase achchhe umedvar hote hain route-star components, bhari visualization libraries (charting, graphs, maps), rich text editors, aur koi bhi component jo fold ke neeche hai ya upabhokta interakshan se chhidda hai. Ek achchha nuss: yadi ek component bundle mein 20 KB se adhik jodta hai aur prarambhik render par dikhai nahi deta, to use shayad lazy load karna chahiye.

React 19 ka behtar Suspense vyavhaar code splitting ko aur adhik vyavaharik banata hai. Suspense seemaon ke andar data lana ab rendering lifecycle ke saath poore tarah se ekikrit hai, waterfall samasya ko samapt karta hai jahan aapko pahle chunk load karna hota aur phir uska data lana hota. Promises padhne ke liye naye use() hook ke saath, loading avsthaon ke beech ki seemayen adhik saf aur adhik rachnatmak ban jati hain.

Virtual Scrolling aur List Anukoolan

Bade list render karna vaastavik React applications mein sabase aam pradarshan samasya hai. 10,000 aitem ki list development mein theek kaam karti hai aur production mein bikhar jati hai kyunki React ko har render par 10,000 virtual DOM nodes banana aur milkapana padta hai. Browser ka layout engine fir 10,000 DOM nodes ke liye sthiti ganana karna padta hai. Parinam ek jam hua UI aur ubkaya upabhokta hai.

Virtual scrolling ise hal karta hai sirf un items ko render karke jo viewport mein dikhte hain, plus upar neeche ek chhota buffer. Jaiy upabhokta scroll karta hai, viewport se bahar ke items unmount hote hain aur naye aitem mount hote hain. DOM chhota rahta hai — aamtaur par 20-30 nodes liste ke aakar ke bavjud — aur React ka milkapan kharch sthir rahta hai.

import { useVirtualizer } from "@tanstack/react-virtual";
import { useRef } from "react";

function VirtualList({ items }: { items: Item[] }) {
  const parentRef = useRef<HTMLDivElement>(null);

  const virtualizer = useVirtualizer({
    count: items.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 48,
    overscan: 5,
  });

  return (
    <div ref={parentRef} style={{ height: "600px", overflow: "auto" }}>
      <div style={{ height: virtualizer.getTotalSize() }}>
        {virtualizer.getVirtualItems().map((virtualItem) => (
          <div
            key={virtualItem.key}
            style={{
              position: "absolute",
              top: 0,
              transform: `translateY(${virtualItem.start}px)`,
              height: virtualItem.size,
              width: "100%",
            }}
          >
            <ItemRenderer item={items[virtualItem.index]} />
          </div>
        ))}
      </div>
    </div>
  );
}

Virtual scrolling ke alawa, list pradarshan sthir keys par nirbhar karta hai. Array index ko key ke roop mein upyog karne se React galat pahchan leta hai ki kaun se items badle, jisse DOM nodes ke anavashyak unmount aur remount hote hain. Apne data se ek anokha pahchan — item ID — ko key ke roop mein upyog karein. Yah React ko DOM nodes ka punah-upyog karne deta hai jab items punah-vyavasthit, seemit, ya hata diye jate hain, jo unhe nasht aur punah-banane se adhik sasta hai.

• Kisi bhi list ke liye jo 200-500 items se adhik hone ki sambhavna ho, virtual scrolling ka upyog karein. Seema item jटilta par nirbhar karti hai, lekin madhyam jटilta ki 500 paंkti vah hai jahan aap jankh naapne lagenge.
• Hamesha apne data se sthir, anokhi keys ka upyog karein (item IDs). Index keys aderi lists ke liye antim sahara hain jo kabhi badalti nahi.
• List item components ko dubla rakhein. Har item ek saral presentational component hona chahiye jisme nyuntam hook calls hon. List items ke andar mehangi gananaen har prakit ro mein guna ho jati hain.
• Un lists ke liye vindaing ya pagination par vichar karein jise ek saath saare items dikhane ki avashyakta nahi hai. Kabhi sabase achchha anukoolan kuchh bhi render nahi karna hai.

Profiling, Bundle Visleshan, aur React 19+ Pratiroop

Sabase mahatvapurna pradarshan upkaran koi library ya hook nahi hai. Yah React DevTools profilr hai. Kuchh anukoolit karne se pahle, dheeme vyavhaar ko punarutpann karte huye ek profiling session record karein. Profiler aapko theek dikhata hai ki kaun se components render hue, kyun ve render hue (prop parivartan, state parivartan, context parivartan, parent re-render), aur pratyek render kitna samay liya. Is data ke bina, aap andaz laga rahe hain.

Bundle visleshan doosra aavashyak upkaran hai. Ek tez React app jo 800 KB JavaScript bhejti hai abhi bhi dheemi hai kyunki browser use download aur parse karna padta hai. vite-bundle-visualizer, statoscope, ya source-map-explorer jaise upkaran aapke bundle ka ek drishtya pratinidhitv utpann karte hain, dikhate hain ki kaun se packages sabase adhik bytes yogdan karte hain. Parinam aksar aashcharyajanak hote hain — ek akeya bada nirbhrata aapke bundle ka aadha hissa ho sakta hai.

React 19 aise naye pratiroop parichit karta hai jo pradarshan anukoolan paridrishya badalte hain. Server Components server par chalte hain aur sirf render HTML client ko bhejte hain, un components ke liye client-side JavaScript samapt karte hain jinhe interaktivita ki avashyakta nahi hai. Yah koee niche anukoolan nahi hai — koi bhi component jo data laata hai aur bina client-side state ya event handlers ke render karta hai, use Server Component hona chahiye. JavaScript jo client ko bheji jati, vah shunya hoti hai.

Server Components aur Client Components ke beech antar pradarshan ke liye ek naya mansik model banata hai. Memo tak pahunchne se pahle, puchhein: kya is component ko client par chalane ki avashyakta hai? Yadi uttar nahi hai, to aapne har re-render kharcha, har hydresan kharcha, aur JavaScript ka har byte samapt kar diya jo component bundle mein yogdan karta. Server Components React ke client-side anukoolan upkaranon ka pratisthapan nahi hain. Ve ek uchch-star ranneeti hain jo aapke component ped ke bade hisse ke liye client-side anukoolan ko anavashyak banati hain.

Image anukoolan ek aur kshetra hai jahan framework vah sambhalta hai jo developers haat se karte the. Next.js Image components svachlit roop se sahi aakar aur format mein uttaradayi images serve karte hain, fold ke neeche images lazy load karte hain, aur image load hone se pahle jagah aarxhit kar layout shift rokate hain. Yadi aap abhi bhi saada img tags bade JPEGs ke saath upyog kar rahe hain, to yah akela parivartan aksar kisi bhi memoization ranneeti se bada pradarshan sudhar utpann karta hai.

• Koi bhi badlav karne se pahle, apne app ki sabase dheemi interakshan par React DevTools profiler chalaayein. Rekarding ko aadhaar ke roop mein save karein.
• Apne bundle ka vite-bundle-visualizer ya source-map-explorer se visleshan karein. Bade nirbhrataon ko dhoondhein jinhe halke vikalpon se badla ja sakta hai.
• Data-fetching components ko Server Components mein badlein yadi aap React 19 ko server framework ke saath upyog kar rahe hain. Yah unka poora client-side kharch samapt karta hai.
• img tags ko framework ke Image component se badlein svachlit uttaradayi images aur lazy loading ke liye.
• Chrome DevTools mein performance tab ka upyog karke interakshan vilaamb, layout shifts, aur lambe kaary ko maapein — na sirf React render samay.

Sab Kuchh Ek Saath

React pradarshan anukoolan ek spasht starapkram ka palan karta hai. Shikhar par sthapatya hai: Server Components jo server par chalte hain, code splitting jo bundles chhota rakhti hai, aur virtual scrolling jo DOM aakar seemit karta hai. Beech mein lakshit memoization hai: memo for leaf components jo anavashyak re-render karte hain, useMemo for mehangi gananae, aur useCallback for sthir callback references. Neeche — aur yahi vah jagah hai jahan adhiktar log shuru karte hain — sookshm anukoolan hai: inline functions, object references, aur akal se pahle lapetana jo bina maap yogya labh ke jटilta jodta hai.

Oopar se neeche kaam karein. Pahle profil, phir apni sthapatya jaanchein, phir lakshit memoization lagaayein. Sookshm anukoolan se shuru na karein. Ek bhalibhanti anukoolit React app aur ek behtareen anukoolit ke beech antar lagbhag kabhi nahi hai ki aapne sahi jagah memo upyog kiya. Yah hai ki aapki sthapatya React ko uski gati se kaam karne deti hai — chhote component ped, chhote bundles, chhote DOM aakar, aur spasht data prabhav.

Is guide ki tekniken sampoorn hain lekin siddhant saral hai: React ke default vyavhaar ko tez banayein use kam kaam dekar. Kam components render karein. Kam JavaScript bhejein. Kam maan ganana karein. Jitna kam aap React se karne ka kahte hain, utna hi yah tez hoga — aur utna hi kam aapko pradarshan ke baare mein sochna hoga.