REACT · EASY CODEX

React Interview Questions — Easy

Q: What is React, and what are its core features?

Definition: An open-source, component-based front-end JavaScript library developed by Facebook for building dynamic user interfaces. Core Features: Component-Based Architecture: UI is broken into reus

Q: What is JSX, and how does it work under the hood?

Definition: JavaScript XML (JSX) is a syntax extension that allows writing HTML-like code inside JavaScript. Compilation: Browsers cannot read JSX. It is compiled (via Babel/SWC) into pure JavaScript.

Q: What is the difference between Functional Components and Class Components?

Functional Components: Written as plain JavaScript functions. They use Hooks for state and side effects. They are simpler, have less boilerplate, and are the modern standard in React. Class Components

Q: What is the Virtual DOM, and how does React use it to optimize performance?

Concept: A lightweight, in-memory copy of the real DOM. Reconciliation Process: 1. Render: When state or props change, React builds a new Virtual DOM tree. 2. Diffing: React compares the new Virtual D

Q: What are props in React, and are they mutable?

Definition: Props (short for "properties") are read-only inputs passed from a parent component to a child component. Immutability: Props are strictly immutable. A component must never modify its own p

Core concepts, definitions, basic syntax, and first principles expected in round 1 screening.

50 Theory Questions7 Implementation Folios5 Free Model Answers

THEORY QUESTIONS & SOLUTIONSShowing 5 of 50 questions

Q1What is React, and what are its core features?

Definition: An open-source, component-based front-end JavaScript library developed by Facebook for building dynamic user interfaces.
Core Features:
- Component-Based Architecture: UI is broken into reusable, self-contained building blocks (components).
- Declarative UI: Developer defines what the UI should look like based on current state, and React handles DOM updates.
- Virtual DOM: In-memory representation of the real DOM used to optimize updates.
- Unidirectional Data Flow: Data flows one way (parent to child) via props, simplifying debugging.

Q2What is JSX, and how does it work under the hood?

Definition: JavaScript XML (JSX) is a syntax extension that allows writing HTML-like code inside JavaScript.
Compilation: Browsers cannot read JSX. It is compiled (via Babel/SWC) into pure JavaScript.
- Prior to React 17: React.createElement(type, props, ...children).
- React 17+: Compiles to calls from the react/jsx-runtime package (e.g., _jsx('div', { children: 'Hello' })).
Output: Returns lightweight JavaScript objects called React Elements which describe the virtual DOM node.

Q3What is the difference between Functional Components and Class Components?

Functional Components: Written as plain JavaScript functions. They use Hooks for state and side effects. They are simpler, have less boilerplate, and are the modern standard in React.
Class Components: Written as ES6 classes extending React.Component. They manage state via this.state/this.setState and side effects via lifecycle methods (e.g., componentDidMount). They require the this context and have more boilerplate.

Q4What is the Virtual DOM, and how does React use it to optimize performance?

Concept: A lightweight, in-memory copy of the real DOM.
Reconciliation Process:
1. Render: When state or props change, React builds a new Virtual DOM tree.
2. Diffing: React compares the new Virtual DOM tree with the previous one to find differences.
3. Batching & Patching: React calculates the minimum required changes and updates only those parts in the real DOM, avoiding expensive full-page reflows.

Q5What are props in React, and are they mutable?

Definition: Props (short for "properties") are read-only inputs passed from a parent component to a child component.
Immutability: Props are strictly immutable. A component must never modify its own props. This maintains unidirectional data flow and predictable UI states.

Unlock the remaining 52 React (Easy) questions

You've completed the 5 free sample questions. Get unrestricted lifetime access to every question, model answer, implementation challenge, and all 27+ technologies for a single payment.

Unlock Everything — Already Enrolled? Sign In

One-time settlement () · Lifetime access · Zero subscription

CROSS-DIFFICULTY NAVIGATION

Continue Preparing React

MEDIUM LEVEL

Mechanisms & Practical Patterns

HARD LEVEL

Internals & System Architecture