React interview questions & answers

Socho tum ek Lego set se ghar bana rahe ho. Poora ghar ek saath nahi banate — chhote-chhote blocks jodte ho: darwaza block, khidki block, deewar block. Ek block kharab ho to sirf usko badalte ho, poora ghar nahi todte.

React bhi bilkul aisa hi hai. Website ko chhote-chhote "components" (blocks) me todta hai — Navbar, Button, Card. Har component alag, reusable, aur agar ek badalna ho to sirf wahi update hota hai — poora page reload nahi hota.

🌍 Real-world example: Instagram feed dekho — ek post like karo, sirf us post ka dil laal hota hai, poori feed refresh nahi hoti. Yeh React ka kamaal hai: sirf jo badla, wahi dobara draw hota hai (isko "re-render" kehte hain).

Standard definition (interview me bolo): React is an open-source JavaScript library developed by Meta for building user interfaces using reusable, component-based architecture with a virtual DOM for efficient rendering.

function Welcome() {
  return <h1>Namaste, Hirenix!</h1>;
}
// Ise screen par use karo:
<Welcome />

JSX ko aise samjho jaise WhatsApp message me text ke beech emoji mix karna — emoji plain text nahi hote, par tumhara phone samajh ke dikha deta hai. JSX bhi HTML-jaise tags ko seedha JavaScript ke andar mix karta hai taaki UI likhna natural lage.

Par browser sirf plain JavaScript samajhta hai, JSX nahi. Isliye Babel naam ka tool chupchaap tumhare JSX ko plain React.createElement(...) calls me translate kar deta hai, browser ke dekhne se pehle.

💡 Babel kya hai? Babel ek free tool hai jise compiler kehte hain — yeh us code ko jo browser padh nahi sakta (jaise JSX, ya JavaScript ke naye features) purani, plain JavaScript me badal deta hai jo har browser samajhta hai. Yeh tumhare project build hote waqt apne-aap chalta hai, background me kaam karte translator ki tarah.

🌍 Real-world example: Tum JS file me <h1>Hello</h1> likhte ho. Babel use React.createElement('h1', null, 'Hello') me badal deta hai, jo ek plain JS object banata hai jise React render kar sakta hai. Tumhe aasaan HTML-jaisa code milta hai; React ko uske objects mil jaate hain.

Standard definition: JSX (JavaScript XML) JavaScript ka ek syntax extension hai jo tumhe JavaScript ke andar HTML-jaisa markup likhne deta hai; ise (Babel dwara) React.createElement calls me compile kiya jaata hai jo React elements return karte hain.

const name = "Hirenix";
const heading = <h1>Hello, {name}!</h1>;
// Babel turns the JSX into:
// React.createElement('h1', null, 'Hello, ', name, '!')

Kya bana rahe hain: Ek Counter app — screen pe ek number, aur +, −, Reset buttons. Chhota hai, par ye React ka sabse important loop sikhata hai: event → setState → React tumhare component ko dobara chalata hai → re-render → UI update. Ye pakka aa gaya, to baaki sab bas isi ke variations hain.

React concepts jo ye sikhata hai: useState, event handlers (onClick), setter function, functional updates (setCount(c => c + 1)) vs value updates (setCount(count + 1)), aur golden rule — tum STATE badalte ho, DOM nahi.

---

Step 0 — Mental model (pehle ye padho, 30 second)

Normal HTML/JavaScript mein agar tumhe screen pe number badalna ho, to element pakad ke likhte: document.getElementById('x').innerText = 5. Tum khud DOM ko haath lagate ho.

React ulta chalta hai. Tum DOM ko kabhi haath nahi lagate. Uski jagah tum ek data rakhte ho jise state kehte hain, aur React ko batate ho ki is state ke liye screen kaisi dikhni chahiye. Jab state badalti hai, React khud screen dobara bana deta hai. Tumhara sirf ek kaam: jab kuch ho, state update kar do. Drawing React karega.

💡 State = ek value jise React watch karta hai. Jab wo badalti hai, React us component ko dobara draw karta hai.

Ye picture dimaag mein rakho. Ab banate hain.

---

Step 1 — Bas ek number dikhao

import { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
    </div>
  );
}

export default Counter;

Ho ye raha hai: useState(0) ek state banata hai aur usko 0 se shuru karta hai. Ye tumhe ek array wapas deta hai jismein exactly do cheezein hoti hain, aur hum unhe const [count, setCount] = ... se unpack karte hain:

• count — current value (abhi 0). Ye read-only snapshot hai.
• setCount — setter, us value ko badalne ka EK-hi sahi tarika.

JSX mein {count} current value ko page mein daal deta hai, to screen pe Count: 0 dikhta hai. Dhyaan do: humne DOM ko haath nahi lagaya, bas describe kiya ki current state ke liye kya dikhana hai. Yahi poora idea hai.

💡 Sirf let count = 0 kyun nahi? Kyunki normal variable badalne pe React ko kuch nahi batata — screen kabhi update nahi hoti. useState React ko ek aisi value deta hai jise wo watch karta hai.

---

Step 2 — + button (ye sabse bada hai)

import { useState } from 'react';

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

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

export default Counter;

Ho ye raha hai: Ye core loop hai — dheere se trace karo, kyunki har React app ka har button bilkul isi tarah chalta hai:

1. Tum + button click karte ho.
2. Button ka onClick fire hota hai, jo arrow function () => setCount(count + 1) chalata hai.
3. count abhi 0 hai, to ye setCount(0 + 1) → setCount(1) call karta hai.
4. Setter React ko batata hai: "bhai, is state ki nayi value 1 hai."
5. React jawab mein poore Counter function ko upar se dobara chalata hai.
6. Is naye run mein useState updated value deta hai — ab count hai 1.
7. JSX Count: 1 banata hai, React usse screen se compare karke sirf badla hua hissa re-render karta hai.
8. Tumhe Count: 1 dikhta hai.

💡 onClick React ka click handler lagane ka tarika hai. Hum usmein ek function dete hain (() => ...), call nahi. Agar tum onClick={setCount(count + 1)} likhte (bina arrow), to wo render ke waqt hi turant chal jata, click pe nahi — ek classic beginner bug.

Button ne screen ke number ko kabhi haath nahi lagaya. Usne state badli. State badalna hi hai jo React ko dobara draw karne pe majboor karta hai. Zor se bolo: button state badalta hai, DOM nahi.

---

Step 3 — − button (decrement)

<p>Count: {count}</p>
<button onClick={() => setCount(count - 1)}>-</button>
<button onClick={() => setCount(count + 1)}>+</button>

Ho ye raha hai: Bilkul wahi loop, ulta math. − click → onClick setCount(count - 1) chalata hai. Agar count 3 hai, to ye setCount(2). Setter React ko batata hai state badli → React Counter dobara chalata hai → ab count 2 hai → screen Count: 2 dikhata hai. Do buttons, ek shared state — dono bas setter ko alag number ke saath call karte hain.

---

Step 4 — Reset button

<button onClick={() => setCount(0)}>Reset</button>

Ho ye raha hai: Reset sabse simple hai — ise parwah nahi ki count abhi kya hai. Ye setCount(0) call karta hai, state ko seedha 0 pe set kar deta hai. Setter → React Counter dobara chalata hai → count 0 hai → screen Count: 0 dikhata hai. Phir wahi loop. Loop ek baar samajh aa gaya, to koi bhi button add kar sakte ho.

---

Step 5 — Functional update: setCount(c => c + 1)

+ handler ko value update se functional update mein badlo:

<button onClick={() => setCount(c => c + 1)}>+</button>

Ho ye raha hai: Dono version 1 add karte hain, to fark kya? Fark hai +1 kahaan se shuru hota hai.

• setCount(count + 1) — value update. Ye count ko waisa use karta hai jaisa is handler ke bante waqt capture hua tha. Wo snapshot purana (stale) ho sakta hai.
• setCount(c => c + 1) — functional update. Tum ek function pass karte ho. React usse call karke latest value c mein deta hai, aur jo tum return karte ho wahi nayi state banti hai. Koi stale snapshot nahi.

Kyun important hai — socho ek "+3" button jo ek click mein teen updates lagata hai:

// GALAT: teeno wahi stale count (maano 0) padhte hain → har baar 0+1 → 1 pe rukta hai, 3 pe nahi
<button onClick={() => { setCount(count + 1); setCount(count + 1); setCount(count + 1); }}>+3</button>

// SAHI: har ek ko latest value milti hai → 0→1→2→3
<button onClick={() => { setCount(c => c + 1); setCount(c => c + 1); setCount(c => c + 1); }}>+3</button>

💡 Thumb rule: agar nayi state purani state pe depend karti hai, to function form use karo setCount(c => c + 1). Ye hamesha safe hai.

---

Step 6 — Chhota twist: 0 ke neeche nahi ja sakta

Ek rule add karte hain: counter kabhi negative number na dikhaye. Ye dikhata hai ki conditional logic setter ke andar kaise rehta hai.

<button onClick={() => setCount(c => (c > 0 ? c - 1 : 0))}>-</button>

Ho ye raha hai: Click pe functional update latest c ke saath chalta hai. Ternary c > 0 ? c - 1 : 0 kehta hai: agar zero se upar hain to ek neeche jao; warna 0 pe raho. To count = 0 pe − dabane pe 0 return hota hai — React dobara chalta hai, count abhi bhi 0, screen hilti nahi. Floor is baat se lag raha hai ki tum state mein kya value daalte ho, kisi cheez ko disable karke nahi. (Button ko disable bhi kar sakte ho — practice challenges mein dikhaya hai.)

💡 Ternary condition ? a : b = ek line ka if/else. Padho "agar condition to a, warna b."

---

🔎 Poora flow (wiring ka recap)

Ye raha finished app, click-by-click:

1. Page load → Counter() chalta hai → useState(0) count = 0 set karta hai → JSX Count: 0 dikhata hai.
2. + click → onClick setCount(c => c + 1) chalata hai → setter React ko batata hai "state badli" → React Counter dobara chalata hai → ab count 1 → re-render → screen Count: 1.
3. − click → onClick setCount(c => (c > 0 ? c - 1 : 0)) chalata hai → latest c se nayi value bani → setter → dobara run → re-render → number neeche jata hai (0 ke neeche kabhi nahi).
4. Reset click → onClick setCount(0) chalata hai → setter → dobara run → re-render → Count: 0 dikhata hai.

Har ek button wahi chaar beats follow karta hai: event → setState → React component dobara chalata hai → UI update. Tumne ek bhi line nahi likhi jo screen ke number ko seedha haath lagati ho — tumne bas state badli.

---

✅ Jo tumne abhi seekha

• useState — ek state value aur uska setter kaise banate hain: const [count, setCount] = useState(0).
• Event handlers — onClick={() => ...} ek function attach karta hai jo click pe chalta hai (function pass karo, call nahi).
• Setter re-render chalata hai — setCount(...) call karna hi hai jo React ko component dobara chalane aur UI update karne ko kehta hai.
• Tum STATE badalte ho, DOM nahi — button state badalta hai; state badalna hi screen ko dobara draw karta hai.
• Functional updates — setCount(c => c + 1) latest value use karta hai aur safe hai jab nayi state purani pe depend kare; setCount(count + 1) stale snapshot use kar sakta hai.
• Setter ke andar conditional logic — ternary se state ko rules ke andar rakhna (kabhi 0 ke neeche nahi).
• Universal loop — event → setState → dobara run → re-render. Har interactive React app isi pe bana hai.

import { useState } from 'react';

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

  return (
    <div>
      <h2>Counter</h2>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => (c > 0 ? c - 1 : 0))}>-</button>
      <button onClick={() => setCount(c => c + 1)}>+</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}

export default Counter;