React Interview Questions

It's an in-memory representation of the UI. React diffs the new tree against the previous one (reconciliation) and applies only the minimal set of real DOM updates, which is faster than manual DOM manipulation.

Hooks like useState and useEffect let function components use state and lifecycle features. Rules: only call them at the top level (not in loops/conditions) and only from components or other hooks.

Use useState for simple, independent pieces of state. Reach for useReducer when state is complex, several values change together, or the next state depends on the previous — it centralizes the logic in a reducer.

It runs side effects after render. The dependency array controls timing: [] runs once on mount, [dep] runs when dep changes, and no array runs after every render. Return a cleanup function for teardown.

Keys give items a stable identity so React can tell which were added, removed, or reordered. Use stable unique IDs — not the array index, which causes subtle bugs when the list reorders or changes.

In a controlled component the form value lives in React state (one source of truth); in an uncontrolled one the DOM holds the value and you read it with a ref. Controlled is preferred for validation and dynamic behavior.

useMemo caches a computed value and useCallback caches a function reference between renders. Use them to skip expensive recomputation or to keep stable props for memoized children — not everywhere, since they add overhead.

State or prop changes, new object/function references each render, and context updates. Mitigate with React.memo, useMemo/useCallback, splitting state, and lifting state only as high as needed.

Prop drilling is passing props through many intermediate components that don't use them. Avoid it with the Context API, component composition, or a state manager like Zustand or Redux.

Server Components render on the server, ship no JavaScript, and can fetch data directly. Client Components ('use client') run in the browser for interactivity and state. Compose them to keep client-side JS small.