1. React Reconciliation क्या है? Virtual DOM कैसे काम करता है?

Virtual DOM क्या है?

Virtual DOM, Real DOM की एक हल्की JavaScript कॉपी होती है।

React इसे मेमोरी में रखता है ताकि UI अपडेट तेज़ी से हो सके।

Process

State Change → नया Virtual DOM → पुराने Virtual DOM से तुलना → केवल बदला हुआ हिस्सा अपडेट

Reconciliation क्या है?

Reconciliation वह प्रक्रिया है जिसमें React पुराने और नए Virtual DOM की तुलना करता है और केवल जरूरी हिस्से को Real DOM में अपडेट करता है।

function App() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <h1>Counter</h1>
      <p>{count}</p>

      <button => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
}

जब count बदलता है, React पूरी page को अपडेट नहीं करता।

सिर्फ paragraph के अंदर वाला text अपडेट होता है।

Key का Role

key React को बताता है कि list में कौन सा item बदला, add हुआ या remove हुआ।

{items.map(item => (
  <li key={item.id}>{item.name}</li>
))}

Interview Answer

React Reconciliation पुराने और नए Virtual DOM की तुलना करता है और केवल बदले हुए हिस्सों को Real DOM में अपडेट करता है।

2. SSR vs CSR क्या है? कौन तेज़ है और क्यों?

CSR (Client Side Rendering)

CSR में browser पहले JavaScript डाउनलोड करता है, फिर React UI render करता है।

Flow

Browser → Empty HTML → JS Download → React Run → Data Fetch → UI Show

SSR (Server Side Rendering)

SSR में server पहले से HTML तैयार करके browser को भेज देता है।

Flow

Browser Request → Server HTML Render → Ready Page Show

SSR शुरुआती page load में तेज़ होता है क्योंकि browser को ready HTML मिलता है।

CSR शुरुआती load में धीमा हो सकता है क्योंकि browser को JavaScript execute करनी पड़ती है।

PointSSRCSRRenderingServerBrowserInitial LoadFastSlowSEOExcellentWeakBest ForBlog, SEO PagesDashboard, Admin

Interview Answer

SSR शुरुआती load में तेज़ होता है क्योंकि server ready HTML भेजता है।

CSR में browser को JavaScript execute करनी पड़ती है इसलिए शुरुआती load थोड़ा धीमा होता है।

3. React Hooks क्या हैं? useEffectEvent क्या है?

Hooks special functions होते हैं जो Functional Components को React features इस्तेमाल करने देते हैं।

Common Hooks

• useState → State manage करना
• useEffect → Side effects handle करना
• useRef → Mutable values store करना
• useMemo → Expensive calculations cache करना
• useCallback → Function memoize करना
• useContext → Global data access करना

function Counter() {
  const [count, setCount] = React.useState(0);

  return (
    <button => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

useEffectEvent क्या है?

useEffectEvent latest state या props को effect के अंदर access करने देता है बिना effect को बार-बार re-run किए।

import { useEffect, useEffectEvent } from "react";

function Counter({ count }) {
  const logCount = useEffectEvent(() => {
    console.log("Current count:", count);
  });

  useEffect(() => {
    const id = setInterval(() => {
      logCount();
    }, 1000);

    return () => clearInterval(id);
  }, []);

  return <p>{count}</p>;
}

Interview Answer

Hooks functional components को React features इस्तेमाल करने देते हैं।

useEffectEvent latest state और props को effect के अंदर access करने में मदद करता है।

4. React में Caching कैसे काम करती है?

Caching का मतलब है data को temporarily store करना ताकि बार-बार API call या calculation न करनी पड़े।

Caching के Types

• Browser Cache → Images, CSS, JS store करता है
• API Cache → API response store करता है
• React Query Cache → Server data memory में store करता है
• Memoization → Calculated values store करता है
• Next.js Cache → Server fetch results cache करता है

const total = useMemo(() => {
  return calculateTotal(items);
}, [items]);

Interview Answer

Caching repeated work को कम करती है, API calls घटाती है और application की speed बढ़ाती है।

5. React में Lazy Loading कैसे करते हैं?

Lazy Loading का मतलब है component या asset को तभी load करना जब उसकी जरूरत हो।

इससे initial bundle size कम होता है।

import React, { Suspense, lazy } from "react";

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

function App() {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <Dashboard />
    </Suspense>
  );
}

Image Lazy Loading

<img src=""/banner.jpg"" loading="lazy" />

Next.js Dynamic Import

import dynamic from "next/dynamic";

const Chart = dynamic(() => import("./Chart"), {
  loading: () => <p>Loading chart...</p>,
  ssr: false,
});

Interview Answer

Lazy loading components और assets को जरूरत पड़ने पर load करता है जिससे performance बेहतर होती है।

6. React 19 में नया क्या है?

React 19 asynchronous handling और forms को बेहतर बनाता है।

Important Features

• Actions
• useActionState
• useOptimistic
• use API
• Better Ref Handling
• Metadata Support

import { useActionState } from "react";

function Form() {
  async function submit(prevState, formData) {
    const name = formData.get("name");

    if (!name) {
      return { error: "Name is required" };
    }

    return { success: "Saved successfully" };
  }

  const [state, formAction, isPending] = useActionState(submit, {});

  return (
    <form action={formAction}>
      <input name="name" />

      <button disabled={isPending}>
        {isPending ? "Saving..." : "Save"}
      </button>

      {state.error && <p>{state.error}</p>}
      {state.success && <p>{state.success}</p>}
    </form>
  );
}

Interview Answer

React 19 में forms, async handling और optimistic UI के लिए नए features आए हैं जैसे useActionState और useOptimistic.

7. Increment / Decrement Component with Validation

यह component user से number input लेता है और validation के साथ increment/decrement करता है।

import React, { useState } from "react";

export default function CounterWithValidation() {
  const [value, setValue] = useState("0");
  const [error, setError] = useState("");

  const validateNumber = input => {
    if (input.trim() === "") {
      return "Value is required";
    }

    if (isNaN(Number(input))) {
      return "Please enter a valid number";
    }

    return "";
  };

  return (
    <div>
      <input type="text" />

      {error && <p>{error}</p>}

      <button>Decrement</button>
      <button>Increment</button>
    </div>
  );
}

Explanation

• value → current input value store करता है
• error → validation message store करता है
• validateNumber() → empty और invalid input check करता है
• Increment → valid number को 1 बढ़ाता है
• Decrement → valid number को 1 घटाता है

Interview Answer

यह component useState का उपयोग करके input और error state manage करता है और validation के बाद increment/decrement करता है।