React · Beginner interview

React is a JavaScript library for building user interfaces out of reusable components. You describe what the UI should look like for a given state, and React efficiently updates the DOM when that state changes — using a virtual DOM to apply the minimal set of changes. You'd reach for it because it makes complex, interactive UIs easier to build and maintain through composition, a one-way data flow that's easy to reason about, and a huge ecosystem.

JSX is a syntax extension that lets you write HTML-like markup inside JavaScript; it compiles down to React.createElement calls. It differs from HTML in a few ways: attributes are camelCased (className instead of class, onClick instead of onclick), you embed JavaScript expressions with curly braces { }, every element must be closed, and a component must return a single root (or a Fragment).

const name = "Sam";
return <h1 className="title">Hello, {name}!</h1>;

A component is a reusable, self-contained piece of UI that returns markup. Functional components are plain JavaScript functions that return JSX and use hooks for state and lifecycle — they're the modern standard. Class components are ES6 classes that extend React.Component, hold state in this.state, and use lifecycle methods; you'll still see them in older code, but new code uses functions and hooks.

Props (short for properties) are read-only inputs passed from a parent component to a child, like arguments to a function. They enable React's one-way data flow: data flows down from parent to child. A child must never mutate its props — to change data, the parent updates its own state and passes new props down.

function Greeting({ name }) {
  return <p>Hi, {name}</p>;
}
<Greeting name="Sam" />

Props are passed in from the parent and are read-only from the component's perspective. State is data the component owns and manages internally, and it can change over time — usually in response to user interaction. When state changes, the component re-renders. A rule of thumb: if a value is controlled by the parent it's a prop; if the component itself needs to change it, it's state.

useState lets a functional component hold state. You call it with the initial value, and it returns a pair: the current value and a setter function. Calling the setter with a new value schedules a re-render with that value. Hooks must be called at the top level of the component, never inside loops or conditions.

const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;

React decides whether to re-render by comparing references, so mutating state in place (e.g. arr.push(x) or state.value = 1) doesn't register as a change and the UI won't update. Always create a new value and pass it to the setter — spread arrays/objects into new ones. Treating state as immutable keeps renders predictable.

// wrong: items.push(newItem); setItems(items);
setItems([...items, newItem]);

Pass a function to the setter — React calls it with the latest state and uses the return value. This is important because state updates are batched and asynchronous, so reading the state variable directly can be stale, especially when you update several times in a row.

setCount(prev => prev + 1); // safe under batching

useEffect runs side effects — work that reaches outside the render, like data fetching, subscriptions, timers, or manually touching the DOM. It runs after the component renders. You give it a setup function and a dependency array that controls when it re-runs.

useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]);

The dependency array tells React when to re-run the effect. With [] it runs once after the first render (on mount). With [a, b] it re-runs whenever a or b change. With no array at all it runs after every render. You should list every value from the component scope that the effect uses, or it can read stale values.

Return a cleanup function from the effect. React runs it before the effect runs again and when the component unmounts. Use it to undo work — clear timers, remove event listeners, cancel subscriptions — so you don't leak resources or update an unmounted component.

useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);
}, []);

Function components express lifecycle through useEffect rather than methods. An effect with [] dependencies acts like 'on mount'; its returned cleanup acts like 'on unmount'; an effect with dependencies runs on mount and again whenever those dependencies change, like 'on update'. There's no separate render/mount/update method — it's all the render function plus effects.

You pass a function to a camelCased event prop like onClick or onChange. React wraps native events in a cross-browser SyntheticEvent. You typically pass an inline arrow function or a named handler; to pass arguments, wrap it in an arrow function so it isn't called during render.

function handleClick() { console.log("clicked"); }
return <button onClick={handleClick}>Go</button>;

A controlled component is a form input whose value is driven by React state. You set its value from state and update that state in onChange, making React the single source of truth. This lets you validate, format, or conditionally enable inputs as the user types.

const [email, setEmail] = useState("");
<input value={email} onChange={e => setEmail(e.target.value)} />

Put an onSubmit handler on the <form> and call e.preventDefault() to stop the browser's full-page reload, then read the values from state (for controlled inputs) and do your work. Using onSubmit (rather than a button onClick) also handles the user pressing Enter.

function onSubmit(e) {
  e.preventDefault();
  save(email);
}
<form onSubmit={onSubmit}>…</form>

Keys give each list item a stable identity so React can match items between renders and update only what changed instead of re-rendering the whole list. Use a stable unique id from your data. The array index is risky because if items are reordered, inserted, or removed, the index-to-item mapping shifts and React can keep the wrong DOM state (like a typed-in input value) on the wrong row.

{users.map(u => <li key={u.id}>{u.name}</li>)}