Beginner React Interview Questions and Answers

React is a JavaScript library for building user interfaces from components. It is declarative: you describe what the UI should look like for the current data, and React updates the page when the data changes. It is popular because components are reusable, updates are predictable, and it has a huge ecosystem (routing, data fetching, testing, frameworks such as Next.js, and React Native for mobile).

JSX is a syntax extension that lets you write HTML-like markup in JavaScript. A build tool compiles it into function calls that create React elements: <h1 className="t">Hi</h1> becomes roughly React.createElement("h1", { className: "t" }, "Hi"). JavaScript expressions go inside { }, attributes use camelCase (onClick, className), and a component must return a single root element (or a fragment).

A function (or, in older code, a class) that returns JSX describing part of the UI. Components start with a capital letter, accept props, can hold state, and are combined into a tree. They should be pure: the same props and state always produce the same output, with no side effects during rendering.

When state changes, the component re-renders; when a parent passes new props, the child re-renders too. A common pattern is state in a parent, passed down as props.

useState(initial) returns [value, setValue]. A normal local variable is reset every time the component function runs, and changing it does not tell React to re-render. State persists between renders, and calling the setter schedules a re-render with the new value.

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>;
}

When state changes, React calls your components to produce a new description of the UI (a tree of React elements, often called the virtual DOM), compares it with the previous one (reconciliation), and applies only the differences to the real browser DOM. You write code as if the whole UI is re-created, while React keeps the actual DOM changes small.

Keys tell React which item is which between renders, so it can update, reorder, insert and remove the correct elements and keep each item's state with the right item. Keys must be unique among siblings and stable, ideally ids from the data. Array indexes cause bugs when items are inserted, removed or reordered, and random keys recreate every item on each render.

Pass a function to a camelCase event prop: <button onClick={handleClick}>. Pass the function itself, not the result of calling it (onClick={handleClick()} runs during rendering). To pass arguments, wrap it: onClick={() => remove(id)}. Handlers receive an event object with preventDefault() and stopPropagation().

A form input whose value comes from React state and is updated on every change:

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

React is the single source of truth, so you can validate as the user types, format input, or enable buttons based on the value. An uncontrolled input keeps its own value in the DOM (defaultValue), read with a ref or FormData on submit.

With ordinary JavaScript: an if and early return before the JSX, the ternary condition ? <A /> : <B /> inside JSX, or condition && <A /> to show something or nothing. Beware count && <A /> when count is 0: React renders the 0. Return null to render nothing.

1. Call hooks only at the top level of a component or custom hook: not in conditions, loops or nested functions.
2. Call them only from React components or custom hooks.

React identifies each hook by the order in which it is called, so the order must be identical on every render. The eslint-plugin-react-hooks linter enforces these rules.

<>...</> (or <Fragment>) groups several elements without adding an extra DOM node, because a component must return a single root. Use the long form <Fragment key={id}> when a fragment needs a key in a list.