Basic Interview Questions
What is React and why use it?
React is a JavaScript library for building user interfaces from reusable components. It is declarative (you describe UI for the current state), uses a Virtual DOM to update only what changed, and has a huge ecosystem (Router, Redux, Next.js, React Native).
What is JSX?
A syntax extension that lets you write HTML-like markup in JavaScript. A compiler turns <h1>Hi</h1> into React.createElement("h1", null, "Hi"). Expressions go in { }; use className and camelCase attributes.
What is the Virtual DOM?
An in-memory JavaScript representation of the UI. On every state change React builds a new virtual tree, diffs it with the previous one and applies only the differences to the real DOM (reconciliation).
SPA vs MPA?
An SPA loads one HTML page and swaps content with JavaScript (no full reloads). An MPA requests a new HTML page from the server for every navigation. SPAs feel faster after the first load; MPAs are simpler for SEO.
State vs props?
| Props | State | |
|---|---|---|
| Owned by | parent | the component itself |
| Changeable by component | no (read-only) | yes, with setState |
| Purpose | configure a component | data that changes over time |
What are keys and why are they important?
Keys give list items a stable identity so React can match them between renders. Use a unique id from your data; using the array index breaks state and inputs when items are added, removed or reordered.
Controlled vs uncontrolled components?
Controlled: the input value lives in React state (value + onChange). Uncontrolled: the DOM keeps the value and you read it with a ref or FormData (defaultValue).
What are fragments?
<>...</> (or <Fragment key>) groups children without adding an extra DOM element.