React Interview Questions for Freshers

JSX is syntax sugar. A compiler such as Babel, SWC or esbuild turns <h1 className="t">Hi</h1> into a call like jsx('h1', { className: 't', children: 'Hi' }), which returns a plain object describing the UI. That's why attributes use JavaScript names like className and htmlFor, and why you can embed any expression inside { }.

Props flow one way, from parent to child, and React treats them as read-only. To change something the parent owns, the parent passes a function such as onChange, and the child calls it; the parent updates its state and re-renders with new props. Mutating a prop object directly leads to UI that doesn't update and bugs that are hard to trace.

False. The useState setter replaces the value completely. If state is { name, email } and you call setUser({ name: 'Ana' }), the email is gone. Spread the old value in yourself: setUser(u => ({ ...u, name: 'Ana' })). Or keep unrelated values in separate useState calls, or use useReducer for complex objects.

&& returns its left side when that side is falsy, so the expression evaluates to 0. React doesn't render false, null or undefined, but it does render numbers, so a stray 0 appears on the page. Make the condition a real boolean: {count > 0 && ...}, or use a ternary.

In a controlled input, React state is the single source of truth: value={name} plus onChange={e => setName(e.target.value)}. That makes validation, formatting and resetting easy. An uncontrolled input keeps its own value in the DOM, set initially with defaultValue and read with a ref or FormData, which is simpler for basic forms.

An empty dependency array means the effect has nothing to re-sync on, so it runs once after the component mounts and its cleanup runs on unmount. In development, StrictMode deliberately mounts, unmounts and remounts each component once to surface effects without proper cleanup, so you'll see it run twice there but only once in production.

React uses className because class is a reserved word in JavaScript. The style prop takes an object with camelCase properties, such as { backgroundColor: 'red' }, not a CSS string; passing a string throws an error. CSS Modules scope class names to the component, and frameworks like Tailwind also just set className.

React data flows down, so shared state belongs in the nearest component above both siblings. The parent holds it with useState and passes the value and an updater function to each child. Copying state into two places and syncing with effects causes extra renders and bugs. For values needed far down the tree, context avoids passing props through many levels.

useState holds render-affecting data. useEffect is for side effects that sync with the outside world: subscriptions, timers, imperative widgets. It isn't for deriving values from props, which you can compute during render. useRef holds a mutable value or DOM node without re-rendering, and useContext reads from the nearest provider.

A component must return a single node, and wrapping siblings in a div adds markup that can break layouts, such as table rows or flex children. A Fragment groups them without adding anything to the DOM. Use the long form <Fragment key={id}> when you need a key, for example when mapping a list to pairs of elements.