Detailed explanation
React is a JavaScript library for building user interfaces from small, reusable components. A component represents a piece of the screen, such as a greeting, search box, or product card. Components can be combined to build larger interfaces, helping developers organise code around UI responsibilities. React primarily handles rendering and updating the interface; it does not prescribe a complete solution for routing, data fetching, or every other application concern. This makes it a library rather than a complete application framework.
React uses a declarative approach: you describe what the interface should look like for the current data, rather than writing step-by-step DOM instructions. For example, `function Welcome({ name }) { return <h1>Hello {name}</h1>; }` defines a component that receives `name` through props. Rendering `<Welcome name="Anu" />` displays “Hello Anu”. The HTML-like syntax is JSX, which build tools transform into JavaScript. Props pass information into components, while state stores information that changes over time, such as a counter value or the selected tab.
When state changes, React schedules rendering to calculate the next UI representation. This in-memory representation is commonly called the virtual DOM. Through reconciliation, React compares the new output with the previous output to determine which parts can be reused and which need updating. React DOM then commits the required changes to the browser DOM. Rendering a component does not necessarily mean changing the DOM: its output might remain identical. Element types and keys help React identify elements across renders. This process supports efficient updates, but does not guarantee that React is always faster than carefully written DOM code.
React is useful because component composition, explicit data flow, and declarative rendering make interactive applications easier to reason about and maintain. Shared components can keep behaviour and appearance consistent across screens. Its ecosystem also provides options for common application needs. Interviewers generally expect you to explain components, props, state, and declarative updates—not just repeat “virtual DOM is fast”. For a simple static page, React may add unnecessary tooling and JavaScript.
Key points to remember
- React is a JavaScript UI library, not a complete application framework.
- Components are composable building blocks that receive inputs through props.
- State represents changing data; the rendered UI reflects current props and state.
- Reconciliation calculates updates, and React DOM commits necessary browser DOM changes.
- React improves UI organisation and reuse, but is not automatically the fastest or simplest choice.
Common mistakes candidates make
- Claiming the virtual DOM always makes React faster than direct DOM manipulation.
- Confusing component rendering with an actual browser DOM update.
- Describing JSX as HTML that browsers execute directly, rather than syntax transformed into JavaScript.
Likely follow-up questions
What is the difference between props and state?
Props are read-only inputs passed into a component, usually by its parent. State is a component's memory, updated through APIs such as the setter returned by useState; updating it requests a render.
Is JSX required to use React?
No, JSX is optional syntax that makes UI structure easier to read and write. You can create React elements using JavaScript APIs such as React.createElement instead.
Why are keys important when rendering lists?
Keys help React match sibling elements between renders when items are inserted, removed, or reordered. Stable keys based on item identity help React preserve the correct component state; array indexes can cause problems when list positions change.
Interview tip: Start with the definition, explain the Welcome component, and connect declarative updates to maintainability before discussing the virtual DOM.