A tiffin menu, a smart cook, and a thali where only the one sabzi that changed gets refilled.

What React is — you say the "what", not the "how"

In plain words: React lets you build screens out of small reusable pieces, and you just describe what each piece should look like. You don't write the long list of steps to update the screen — React does that for you. The old way (writing every step yourself) is called imperative; React's way is declarative.

// Imperative — you do every step by hand
const el = document.getElementById("count");
el.textContent = count;   // find the box, change it yourself

// Declarative (React) — you just say the result
return <span>{count}</span>;   // React updates the screen for you

JSX — HTML-looking code that is actually JavaScript

It looks like HTML, but it's not — a build tool (Babel) quietly turns every tag into a normal JavaScript function call. So the HTML you "write" is really just JavaScript objects underneath.

// what you write
const x = <h1 className="title">Hi</h1>;

// what it secretly becomes
const x = React.createElement("h1", { className: "title" }, "Hi");

Because it's really JavaScript, you write className instead of class, and onClick in camelCase — these are object keys, not HTML attributes. Put any JS value inside { }, and remember a component must return one outer tag (wrap siblings in <>…</>).

Components, props & state

A component is just a function that returns some screen. Two kinds of data go into it — and the difference between them is a favourite interview question.

function Greeting({ name }) {        // name = a prop
  const [count, setCount] = useState(0); // count = state
  return <button onClick={() => setCount(count + 1)}>
    {name} clicked {count}
  </button>;
}

Hooks — giving powers to simple functions

Earlier, only big "class" components could hold state. Hooks let simple function components do everything — hold data, fetch from APIs, and clean up after themselves. The ones you'll use daily:

// useEffect — the dependency array is everything
useEffect(() => {
  fetchUser(id);
  return () => cleanup();   // cleanup runs before re-run / on unmount
}, [id]);                  // re-run only when id changes
// []  = run once   ·   no array = run after EVERY render

The component lifecycle — birth, growth, goodbye

Every component has a life, just like a guest at a function: they arrive, they stay and react to things, and finally they leave. Three phases — and a common question is matching the old class methods to the new hook way.

The DOM vs the Virtual DOM

The real DOM is the actual page the browser shows. Changing it directly is slow — every small change can make the browser re-measure and repaint things. So React keeps a fast copy in memory (the Virtual DOM), makes changes there first, and only then touches the real page — as little as possible.

So when your data changes, React makes a new rough copy, compares it with the old one, and works out the smallest change needed. You can happily think "redraw everything" while React quietly changes almost nothing on screen.

Reconciliation & why keys matter

Reconciliation is just React comparing "before" and "after" and deciding what to add, change, or remove. To stay fast it follows simple rules: same type of element → update it where it is; different type → throw it out and build fresh.

For lists, React needs a key — a unique id on each item — to know which one is which. Without proper keys, when the list reorders React gets confused about which item moved and which is new.

// ✅ stable, unique key from the data
{users.map(u => <Row key={u.id} user={u} />)}

// ❌ index as key — breaks on reorder/insert/delete
{users.map((u, i) => <Row key={i} user={u} />)}

Rendering: CSR vs SSR vs SSG (and hydration)

This is just a question of where and when the page gets made — a favourite Next.js interview topic. Four options:

Hydration joins the two worlds: the server sends a finished, good-looking page (so it appears instantly), then React loads in the browser and "wakes it up" — wiring buttons and clicks so it actually works. The server serves the photo; hydration makes it a real, clickable meal.

Context & avoiding prop-drilling

Sometimes a deep-down component needs data that lives way up top — like the logged-in user or the app theme. Passing it hand-to-hand through five components in between is called prop-drilling, and it's painful. Context fixes this: put the value at the top, and any component below can grab it directly.

const ThemeCtx = React.createContext("light");

<ThemeCtx.Provider value="dark">
  <App />            // any child can read it
</ThemeCtx.Provider>

const theme = useContext(ThemeCtx);  // no drilling

Performance: memo, useMemo, useCallback

By default, when a parent re-renders, its children re-render too. Usually that's totally fine — the Virtual DOM comparison is cheap. But when something is genuinely heavy, these three tools let React skip repeating work it already did.

One render, start to screen

This is the entire pipeline on one page. A state change at the top flows down through diffing and lands as a minimal update on the real DOM (web) or native views (mobile). Memorize this shape and you can rebuild every answer from it.

Read it as a sentence: state changes → React re-runs the component to make a new Virtual DOM → it diffs that against the old tree (reconciliation, lists matched by key) → and commits only the differences to the real DOM on web or native views on mobile. That single sentence is the entire model.

React Native — same React, no DOM

Here's the good news for interviews: React Native is the same React you already know — same components, props, state, hooks, Virtual DOM, reconciliation. Only two things change: what you build with (the building blocks) and what it draws on (the screen). No HTML, no CSS files, no browser DOM.

Under the hood, RN runs your JS and talks to real iOS/Android UI. The old architecture used an async bridge to pass serialized messages between JS and native; the new architecture (Fabric + JSI) lets JS call native synchronously, removing that bottleneck.