React interview questions and answers

It is React's in-memory description of the UI as a tree of elements.

Keys tell React which item is which across renders so it can reuse DOM and state.

The input value comes from state and onChange updates that state, so React is the source of truth.

It stores a value for this component and queues a re-render when you call the setter.

JSX is HTML-like syntax that compiles to React.createElement or the new jsx runtime.

Props are inputs passed from parent to child and should be treated as read-only.

Context avoids threading the same prop through many layers, like theme or the current user.

Redux puts shared client state in one store with a strict update path: dispatch an action, reducer returns new state.

Next.js is a React framework with routing, bundling, and ways to render on the server.

CSR means the server sends JS and the browser builds HTML after download.

Hydration is React attaching to server-rendered HTML instead of throwing it away and painting from scratch.

An error boundary is a class component that catches render errors in its children and shows a fallback UI.

When two siblings need the same data, I move that state to the closest common parent and pass it down as props.

Hooks let us reuse stateful logic without HOCs and mixins.

UseEffect runs after paint for side effects: fetch, subscriptions, and syncing to document title.

React compares the new element tree with the previous one by type and key.

Inserting or reordering makes React reuse the wrong component instance, so inputs keep the wrong text.

The effect closes over stale props or state from the render that created it.

UseMemo memoizes a computed value.

It skips a re-render when props are shallow-equal.