React.js Interview Questions

Question 1

What is React and why is it used?

Accepted Answer

React is a JavaScript library for building user interfaces using reusable components and a virtual DOM for efficient rendering. Created by Facebook in 2013, React uses a component-based architecture where UI is broken into reusable pieces. It uses a Virtual DOM to minimize expensive real DOM operations. React's declarative approach means you describe what the UI should look like, and React handles the updates. It's used for SPAs, mobile apps (React Native), and even desktop apps.

Question 2

What is JSX?

Accepted Answer

JSX is a syntax extension that allows writing HTML-like code in JavaScript, which gets compiled to React.createElement() calls. JSX stands for JavaScript XML. It's not valid JavaScript â€” Babel transpiles it to React.createElement(type, props, children) calls. JSX expressions must have one root element (or use fragments <>). You can embed JavaScript expressions with {}. JSX prevents XSS by escaping values by default. Class becomes className, for becomes htmlFor. JSX is optional but makes React code more readable.

Question 3

What is the difference between state and props?

Accepted Answer

Props are read-only data passed from parent to child; state is mutable data managed within a component. Props flow top-down (parent to child) and are immutable within the receiving component. State is local to a component, managed via useState hook. Changing state triggers re-render. Props can include callbacks for child-to-parent communication. Lifting state up means moving shared state to the nearest common ancestor. Context API or state management libraries handle cross-component state.

Question 4

What are React hooks?

Accepted Answer

Hooks are functions that let you use state, lifecycle, and other React features in functional components. Introduced in React 16.8. Key hooks: useState (state management), useEffect (side effects), useContext (context consumption), useRef (mutable refs), useMemo/useCallback (memoization), useReducer (complex state). Rules: only call at top level (no conditionals/loops), only call in React functions. Custom hooks extract reusable stateful logic â€” must start with 'use'.

Question 5

What is the Virtual DOM?

Accepted Answer

The Virtual DOM is a lightweight in-memory representation of the real DOM that React uses to calculate minimal updates. When state changes, React creates a new Virtual DOM tree, diffs it against the previous one (reconciliation), and computes the minimum set of real DOM changes needed. This is faster than directly manipulating the DOM. React batches updates for performance. The diffing algorithm is O(n) using heuristics: different element types produce different trees, and keys identify stable elements in lists.

Question 6

What is the difference between controlled and uncontrolled components?

Accepted Answer

Controlled components have form values managed by React state; uncontrolled components use DOM refs to read values. Controlled: input value is set by state (value={state}), onChange updates state. React is the 'single source of truth.' Uncontrolled: input maintains its own state, use useRef to read values when needed (like on submit). Controlled gives more control (validation, formatting) but more boilerplate. Uncontrolled is simpler for quick forms. React Hook Form uses uncontrolled approach for performance.

Question 7

Explain useEffect and its cleanup function.

Accepted Answer

useEffect runs side effects after render. The cleanup function runs before the next effect and on unmount to prevent memory leaks. useEffect(callback, deps) â€” callback runs after render. With [] deps, runs once on mount. With [dep], runs when dep changes. No deps array means every render. The return function is cleanup: useEffect(() => { const sub = subscribe(); return () => sub.unsubscribe(); }, []). Cleanup prevents memory leaks from subscriptions, timers, event listeners. React 18 strict mode runs effects twice in dev.

Question 8

What is React.memo and when should you use it?

Accepted Answer

React.memo is a HOC that prevents re-renders when props haven't changed, using shallow comparison. Wrap a component: export default React.memo(MyComponent). It performs shallow comparison of props. If props are the same, it skips re-rendering. Use when: component renders the same output for same props, renders often, re-rendering is expensive. Don't use for: components that always get different props, simple/cheap components. Pass a custom comparison function as second argument for deep comparison.

Question 9

What is the Context API and when should you use it?

Accepted Answer

Context API provides a way to pass data through the component tree without prop drilling, ideal for global state like themes. Create with createContext(), provide with <Context.Provider value={data}>, consume with useContext(Context). Best for: theme, locale, auth state, feature flags. Not ideal for: frequently changing data (causes all consumers to re-render). For complex state, combine with useReducer. React 19 introduces use() for consuming context. Consider state management libraries (Zustand, Jotai) for highly dynamic state.

Question 10

How does React handle reconciliation?

Accepted Answer

React's reconciliation algorithm compares virtual DOM trees using a heuristic O(n) diff algorithm with element types and keys. Two assumptions: (1) Different element types produce entirely different trees. (2) Keys identify stable elements across renders. When diffing: same type elements keep the DOM node and update attributes; different types unmount the old tree and mount new one. Lists use keys to match children â€” stable keys (like IDs) prevent unnecessary re-mounting. Never use array index as key for reorderable lists.

Complete React.js Course - From Basics to Advanced

What's Inside Every Lesson?

Who This Course Is For

Prerequisites

What You'll Learn

Career Opportunities

Course Completion Certificate

Course Modules Overview

React Fundamentals

React Hooks

React Router

State Management

Performance Optimization

Forms & Data Handling

Advanced React Patterns

React Ecosystem

Real World Projects

Next.js & Server-Side React

Testing React Applications

Production & Career Readiness

Course Curriculum

React Fundamentals

React Hooks

React Router

State Management

Performance Optimization

Forms & Data Handling

Advanced React Patterns

React Ecosystem

Real World Projects

Next.js & Server-Side React

Testing React Applications

Production & Career Readiness

Your Learning Roadmap

Tools & Technologies

Create React App

Vite

React Router

Redux Toolkit

React Testing Library

Storybook

Ready to Start Learning?

Related Free Courses

JavaScript Course

Node.js Course

TypeScript Course

React Native Course