Reactinterview questions & answers

Imagine building a house with a Lego set. You do not build the whole house at once — you snap together small blocks. If one block breaks, you swap just that block, not the whole house.

React works exactly like this. It breaks a website into small "components" (blocks) — Navbar, Button, Card. Each is reusable, and if one changes, only that piece updates — the whole page does not reload.

🌍 Real-world example: On the Instagram feed, like one post and only that post's heart turns red; the whole feed does not refresh. That is React: only what changed is drawn again (a "re-render").

Standard definition: 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>Hello, Hirenix!</h1>;
}
// Use it on screen:
<Welcome />

Think of JSX like writing a WhatsApp message with emojis mixed into text — the emojis aren't plain text, but your phone understands and shows them. JSX mixes HTML-looking tags right inside JavaScript so your UI reads naturally.

But the browser only understands plain JavaScript, not JSX. So a tool called Babel quietly translates your JSX into plain React.createElement(...) calls before the browser ever sees it.

💡 What is Babel? Babel is a free tool called a compiler — it converts code the browser can't read (like JSX, or the newest JavaScript features) into old, plain JavaScript that every browser understands. It runs automatically when your project builds, like a translator working in the background.

🌍 Real-world example: You write <h1>Hello</h1> inside a JS file. Babel turns it into React.createElement('h1', null, 'Hello'), which produces a plain JS object React can render. You write easy HTML-like code; React gets the objects it needs.

Standard definition: JSX (JavaScript XML) is a syntax extension for JavaScript that lets you write HTML-like markup inside JavaScript; it is compiled (by Babel) into React.createElement calls that return React elements.

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

What we're building: A Counter app — a number on the screen with +, −, and Reset buttons. It's tiny, but it teaches the single most important loop in all of React: event → setState → React re-runs your component → re-render → UI updates. Master this and everything else is just variations of it.

React concepts it teaches: useState, event handlers (onClick), the setter function, functional updates (setCount(c => c + 1)) vs value updates (setCount(count + 1)), and the golden rule — you change STATE, not the DOM.

---

Step 0 — The mental model (read this first, 30 seconds)

In plain HTML/JavaScript, if you wanted to change a number on screen you'd grab the element and write to it: document.getElementById('x').innerText = 5. You touch the DOM by hand.

React works backwards. You never touch the DOM. Instead you keep a piece of data called state, and you tell React what the screen should look like for a given state. When state changes, React redraws the screen for you. Your only job is: when something happens, update the state. React does the drawing.

💡 State = a value React watches. When it changes, React re-draws the component that uses it.

Keep that picture in your head. Now let's build.

---

Step 1 — Just show a number

import { useState } from 'react';

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

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

export default Counter;

What's happening: useState(0) creates one piece of state and starts it at 0. It hands you back an array with exactly two things, and we unpack them with const [count, setCount] = ...:

• count — the current value (0 right now). This is a read-only snapshot.
• setCount — the setter, the ONLY correct way to change that value.

Inside the JSX, {count} drops the current value into the page, so the screen shows Count: 0. Notice: we didn't touch the DOM, we just described what to show for the current state. That's the whole idea.

💡 Why not just let count = 0? Because a normal variable, when you change it, doesn't tell React anything — the screen would never update. useState gives React a value it watches.

---

Step 2 — The + button (this is the big one)

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;

What's happening: This is the core loop — trace it slowly, because every button in every React app works exactly this way:

1. You click the + button.
2. That fires the button's onClick, which runs the arrow function () => setCount(count + 1).
3. count is 0 right now, so this calls setCount(0 + 1) → setCount(1).
4. The setter tells React: "hey, this state's new value is 1."
5. React responds by re-running the whole Counter function from the top.
6. On this new run, useState gives back the updated value — now count is 1.
7. The JSX produces Count: 1, React compares it to what's on screen and re-renders just the changed part.
8. You see Count: 1.

💡 onClick is React's way to attach a click handler. We give it a function (() => ...), not a call. If you wrote onClick={setCount(count + 1)} (no arrow), it would run immediately during render, not on click — a classic beginner bug.

The button never touched the number on screen. It changed state. State changing is what caused React to redraw. Say it out loud: the button changes state, not the DOM.

---

Step 3 — The − button (decrement)

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

What's happening: Exact same loop, opposite math. Click − → onClick runs setCount(count - 1). If count is 3, that's setCount(2). Setter tells React state changed → React re-runs Counter → count is now 2 → screen shows Count: 2. Two buttons, one shared state — both just call the setter with a different number.

---

Step 4 — The Reset button

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

What's happening: Reset is the simplest of all — it doesn't care what count currently is. It calls setCount(0), hard-setting state back to 0. Setter → React re-runs Counter → count is 0 → screen shows Count: 0. Same loop again. Once you see the loop, you can add any button you want.

---

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

Swap the + handler from a value update to a functional update:

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

What's happening: Both versions add 1, so why bother? The difference is where the +1 starts from.

• setCount(count + 1) — a value update. It uses count as captured at the moment this click handler was created. That snapshot can be stale.
• setCount(c => c + 1) — a functional update. You pass a function. React calls it and hands it the latest value as c, and whatever you return becomes the new state. No stale snapshot.

Why it matters — imagine a "+3" button that stacks three updates in one click:

// BROKEN: all three read the same stale count (say 0) → 0+1 each → ends at 1, not 3
<button onClick={() => { setCount(count + 1); setCount(count + 1); setCount(count + 1); }}>+3</button>

// CORRECT: each gets the latest value → 0→1→2→3
<button onClick={() => { setCount(c => c + 1); setCount(c => c + 1); setCount(c => c + 1); }}>+3</button>

💡 Rule of thumb: if your new state depends on the old state, use the function form setCount(c => c + 1). It's always safe.

---

Step 6 — A small twist: can't go below 0

Let's add a rule: the counter should never show a negative number. This shows conditional logic living inside the setter.

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

What's happening: On click, the functional update runs with the latest c. The ternary c > 0 ? c - 1 : 0 says: if we're above zero, go down by one; otherwise stay at 0. So at count = 0, clicking − returns 0 — React re-runs, count is still 0, screen doesn't budge. The floor is enforced by what value you put into state, not by disabling anything. (You could also disable the button — shown in the practice challenges.)

💡 Ternary condition ? a : b = a one-line if/else. Reads as "if condition then a, else b."

---

🔎 The full flow (recap the wiring)

Here's the finished app, click by click:

1. Page loads → Counter() runs → useState(0) sets count = 0 → JSX shows Count: 0.
2. Click + → onClick runs setCount(c => c + 1) → setter tells React "state changed" → React re-runs Counter → count is now 1 → re-render → screen shows Count: 1.
3. Click − → onClick runs setCount(c => (c > 0 ? c - 1 : 0)) → new value computed from latest c → setter → re-run → re-render → number goes down (never below 0).
4. Click Reset → onClick runs setCount(0) → setter → re-run → re-render → shows Count: 0.

Every single button follows the same four beats: event → setState → React re-runs the component → UI updates. You never wrote a single line that touches the number on screen directly — you only ever changed state.

---

✅ What you just learned

• useState — how to create a state value and its setter: const [count, setCount] = useState(0).
• Event handlers — onClick={() => ...} attaches a function that runs on click (pass a function, not a call).
• The setter drives re-render — calling setCount(...) is what tells React to re-run the component and update the UI.
• You change STATE, not the DOM — the button changes state; state changing is what redraws the screen.
• Functional updates — setCount(c => c + 1) uses the latest value and is the safe choice when new state depends on old state; setCount(count + 1) can use a stale snapshot.
• Conditional logic in a setter — using a ternary to keep state within rules (never below 0).
• The universal loop — event → setState → re-run → re-render. Every interactive React app is built on this.

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;