Chapter 1: React Fundamentals & Core Concepts

Introduction

Welcome to Chapter 1 of your comprehensive React interview preparation guide! This chapter is meticulously designed to solidify your understanding of React’s foundational principles and core concepts. Whether you’re an aspiring junior developer, a mid-level engineer looking to reinforce your knowledge, or a senior professional needing a refresh on the latest best practices, mastering these fundamentals is paramount.

In today’s fast-evolving frontend landscape, a deep grasp of React’s inner workings – from JSX and the Virtual DOM to component lifecycle and the effective use of Hooks – is non-negotiable. This chapter will equip you with the theoretical knowledge and practical insights needed to confidently answer common interview questions, tackle coding challenges, and articulate your understanding of how modern React applications (React v18.x and beyond) are built and optimized.

Core Interview Questions

Q1: What is React, and what are its key features?

A: React (currently React v18.x as of 2026) is a declarative, efficient, and flexible JavaScript library for building user interfaces. Developed by Facebook (now Meta), it allows developers to create large web applications that can change data without reloading the page. It’s often described as “just the V in MVC” (Model-View-Controller), focusing solely on the view layer.

Key Features:

• Declarative UI: React makes it easier to create interactive UIs by letting you describe what your UI should look like, and React handles updating the DOM to match that state.
• Component-Based Architecture: Applications are built using isolated, reusable pieces of UI called components. This promotes modularity and reusability.
• Virtual DOM: React uses a lightweight representation of the actual DOM, called the Virtual DOM. It significantly improves performance by minimizing direct manipulation of the browser DOM.
• JSX: A syntax extension for JavaScript that allows you to write HTML-like code directly within your JavaScript files, making component structure clear and intuitive.
• One-way Data Flow (Unidirectional): Data flows in a single direction (from parent to child components), making the application state more predictable and easier to debug.
• Hooks (since React 16.8): Allow functional components to use state and other React features without writing a class. They are the standard for modern React development.
• React Fiber (since React 16): A re-implementation of React’s core reconciliation algorithm, enabling features like concurrency and error boundaries, significantly improving responsiveness.
• Concurrency (since React 18): New concurrent rendering capabilities allow React to prepare multiple versions of the UI at the same time, leading to better user experience, especially under heavy updates.

Key Points:

• It’s a library, not a full-fledged framework.
• Focuses on UI rendering.
• Emphasize component-based, declarative, Virtual DOM, and Hooks.

Common Mistakes:

• Calling it a “framework.”
• Not mentioning Hooks or React 18’s concurrency features.
• Confusing Virtual DOM with actual DOM manipulation directly.

Follow-up:

• How does React’s declarative approach differ from imperative DOM manipulation?
• Can you explain the benefits of a component-based architecture?

Q2: Explain the concept of the Virtual DOM and how React uses it for efficient updates.

A: The Virtual DOM (VDOM) is a programming concept where a virtual representation of the UI is kept in memory and synced with the “real” DOM by a library like React DOM. When the state of a component changes, React first creates a new Virtual DOM tree. It then compares this new tree with the previous Virtual DOM tree (a process called “diffing”).

React identifies the minimal set of changes required to update the actual browser DOM. Finally, it batches these changes and updates only the necessary parts of the real DOM, rather than re-rendering the entire page. This process is significantly faster than directly manipulating the browser DOM because DOM operations are expensive.

Key Points:

• In-memory representation of the UI.
• Diffing algorithm compares old and new VDOM.
• Batches updates and applies minimal changes to the real DOM.
• Performance benefit: avoids expensive direct DOM manipulation.

Common Mistakes:

• Believing the Virtual DOM is faster because it’s “in memory” per se, rather than because it minimizes real DOM operations.
• Thinking it completely replaces the real DOM.
• Not explaining the “diffing” and “batching” steps.

Follow-up:

• What is the reconciliation process in React?
• How does React Fiber improve upon the previous reconciliation algorithm?

Q3: What is JSX, and what are its advantages?

A: JSX (JavaScript XML) is a syntax extension for JavaScript, recommended by React. It allows you to write HTML-like code directly within your JavaScript files. Although it looks like HTML, it’s actually syntactic sugar for React.createElement() calls. For example, <h1>Hello</h1> is transpiled by tools like Babel into React.createElement('h1', null, 'Hello').

Advantages:

• Declarative and Intuitive: Makes UI code easier to understand and write by visually representing the UI structure alongside the logic.
• Type-safe: With TypeScript, JSX can be type-checked, catching errors at compile time.
• Performance Optimization: While not directly faster, JSX allows React to optimize rendering by understanding the component tree structure.
• Prevents Injection Attacks: React DOM escapes any values embedded in JSX before rendering them. This means you can’t accidentally inject anything other than what you explicitly write. Everything is converted to a string before being rendered.

Key Points:

• Syntactic sugar for React.createElement().
• HTML-like syntax in JS.
• Improves readability, safety, and maintainability.

Common Mistakes:

• Thinking JSX is actual HTML that browsers understand directly.
• Not mentioning Babel or a similar transpiler.
• Forgetting its role in preventing XSS attacks.

Follow-up:

• Can you write a React component without JSX? How?
• What are the rules for embedding JavaScript expressions in JSX?

Q4: Differentiate between functional components and class components in React (React v18.x context).

A: Functional Components (Preferred in React v18.x):

• Are JavaScript functions that accept props as an argument and return React elements.
• Initially “stateless” but gained state and lifecycle capabilities with Hooks (e.g., useState, useEffect) introduced in React 16.8.
• Simpler to read and write, especially with Hooks.
• Often lead to more performant and testable code due to being pure functions (when not using Hooks) and easier memoization.
• React’s future direction heavily favors functional components and Hooks, including features like React Server Components and Concurrent Mode.

Class Components (Legacy in React v18.x, though still supported):

• Are ES6 classes that extend React.Component.
• Maintain their own private internal state and have access to lifecycle methods (e.g., componentDidMount, componentDidUpdate).
• Require this binding for event handlers and state management.
• Can be more verbose and harder to reason about due to complex lifecycle methods and this context issues.

Key Points:

• Functional components with Hooks are the modern standard.
• Class components use this and lifecycle methods.
• Hooks provide state and lifecycle to functional components.

Common Mistakes:

• Stating that functional components are “stateless” without immediately clarifying the role of Hooks.
• Overemphasizing class components for modern React development.
• Not mentioning the performance/readability benefits of functional components.

Follow-up:

• When would you still use a class component in a modern React application (e.g., Error Boundaries)?
• Can you explain the benefits of Hooks?

Q5: What are Props in React? How do they enable data flow?

A: Props (short for “properties”) are a mechanism for passing data from a parent component to a child component in React. They are read-only, meaning a child component should never directly modify the props it receives from its parent. This enforces a unidirectional data flow, making the application’s state predictable and easier to debug.

Props can be any JavaScript value, including objects, arrays, functions, numbers, and strings. They are passed to components as attributes in JSX, similar to HTML attributes.

Example:

// ParentComponent.jsx
function ParentComponent() {
  const name = "Alice";
  return <ChildComponent userName={name} />;
}

// ChildComponent.jsx
function ChildComponent(props) {
  return <p>Hello, {props.userName}!</p>;
}

Key Points:

• Pass data from parent to child.
• Read-only (immutable) within the child component.
• Enforce unidirectional data flow.
• Can be any JS data type.

Common Mistakes:

• Suggesting that child components should modify props directly.
• Confusing props with state.

Follow-up:

• What is “prop drilling,” and how can it be avoided?
• How do you pass functions as props from parent to child?

Q6: Explain the purpose of useState and useEffect Hooks.

A:

• useState: This Hook allows functional components to manage state. It returns a stateful value and a function to update it. When the state is updated, React re-renders the component.

  • Syntax: const [stateVariable, setStateVariable] = useState(initialValue);
  • Purpose: To add local, internal state to functional components.

• useEffect: This Hook allows functional components to perform side effects (data fetching, subscriptions, manually changing the DOM, timers, etc.) after render. It runs after every render by default, but you can control when it runs by providing a dependency array.

  • Syntax: useEffect(() => { /* side effect */ return () => { /* cleanup */ }; }, [dependencies]);
  • Purpose: To handle side effects that need to interact with the outside world or perform operations that don’t directly modify the render output. It’s a combination of componentDidMount, componentDidUpdate, and componentWillUnmount for functional components.

Key Points:

• useState for component-local state.
• useEffect for side effects and lifecycle management.
• Dependency array in useEffect controls execution.
• Cleanup function in useEffect prevents memory leaks.

Common Mistakes:

• Forgetting the dependency array in useEffect (leading to infinite loops or unnecessary re-runs).
• Not including a cleanup function in useEffect when necessary (e.g., for subscriptions).
• Misunderstanding that useEffect runs after render.

Follow-up:

• When would you use an empty dependency array [] with useEffect?
• What happens if you omit the dependency array entirely?
• How would you fetch data using useEffect?

Q7: What are React Keys, and why are they important when rendering lists?

A: Keys are a special string attribute you need to include when creating lists of elements in React. They help React identify which items have changed, are added, or are removed. When React renders a list, it uses keys to efficiently update the UI.

Why they are important:

• Efficient Reconciliation: Without unique keys, React’s diffing algorithm might struggle to efficiently update the list. If an item is added or removed in the middle of a list without keys, React might re-render every item after the change, leading to performance issues. With keys, React can precisely match items between the old and new trees.
• Maintaining Component State: Keys help preserve the state of components within a list. If a component’s key remains the same, React will try to reuse that component instance, maintaining its internal state (e.g., input values, scroll position). If the key changes, React will unmount the old component and mount a new one.
• Preventing Bugs: Using unique keys prevents potential bugs where incorrect data might be displayed if items are reordered or filtered without proper identification.

Best Practice: Keys should be stable, predictable, and unique among siblings. The best key is usually a unique ID coming from your data (e.g., database ID). Avoid using array indices as keys if the list items can be reordered, filtered, or added/removed in the middle, as this can lead to performance issues and subtle bugs.

Key Points:

• Unique identifiers for list items.
• Aids React’s reconciliation algorithm.
• Crucial for performance and correct component behavior.
• Should be stable and unique among siblings; avoid array indices if list order can change.

Common Mistakes:

• Not providing keys at all.
• Using array indices as keys when the list order can change.
• Using non-unique keys.

Follow-up:

• What happens if you don’t provide keys to a list of elements?
• Are keys passed as props to the component?

Q8: How does React handle events, and what is synthetic event system?

A: React implements its own synthetic event system, which is a wrapper around the browser’s native event system. When you attach an event handler (e.g., onClick, onChange) to a React element, React doesn’t directly attach it to the DOM node. Instead, it attaches a single event listener at the root of the React application (event delegation).

When an event is triggered (e.g., a click), the browser’s native event bubbles up to the document root. React’s event listener then catches it, normalizes the event object (creating a “synthetic event”), and dispatches it to the appropriate React component’s event handler.

Benefits of Synthetic Event System:

• Cross-Browser Compatibility: Synthetic events abstract away differences in how browsers implement events, providing a consistent API across all browsers.
• Performance: Event delegation reduces the number of event listeners attached to the DOM, improving performance and memory usage, especially for large lists.
• Automatic Batching (React 18+): React 18 automatically batches multiple state updates triggered by a single synthetic event (or even outside of events, like in promises or setTimeout) into a single re-render, optimizing performance.

Key Points:

• Wrapper around native browser events.
• Event delegation at the document root.
• Provides cross-browser consistency.
• Optimizes performance and enables automatic batching (React 18+).

Common Mistakes:

• Thinking React events are identical to native browser events.
• Not mentioning automatic batching in React 18.
• Not understanding event delegation.

Follow-up:

• Can you access the native browser event object in React? How?
• How does event.preventDefault() work with synthetic events?

Q9: What is “lifting state up” in React?

A: “Lifting state up” is a common React pattern where if multiple child components need to share or react to the same piece of state, that state should be moved (lifted) to their closest common ancestor component. The common ancestor then passes the state down to its children via props, and provides callback functions as props for children to communicate changes back up to the parent.

This pattern ensures that the “single source of truth” for that shared state resides in one component, making the data flow predictable and easier to manage.

Example Scenario: Two sibling components, TemperatureInput (for Celsius) and TemperatureInput (for Fahrenheit), need to display temperatures that are synchronized (e.g., converting between them). Instead of each managing its own temperature state, a common parent component (Calculator) would hold the temperature and scale state, and pass them down as props, along with an onTemperatureChange callback function.

Key Points:

• Move shared state to the closest common ancestor.
• Parent passes state down via props.
• Parent provides callback functions as props for children to update state.
• Ensures a single source of truth for shared state.

Common Mistakes:

• Letting sibling components try to communicate directly.
• Creating duplicate state in multiple components.
• Not understanding how callback functions are used for communication.

Follow-up:

• What are the drawbacks of “lifting state up” for deeply nested components?
• What alternatives exist for managing shared state across many components (e.g., Context API, Redux)?

Q10: How do you conditionally render components in React? Provide examples.

A: Conditional rendering in React involves rendering different components or elements based on certain conditions. React offers several ways to achieve this:

1. if statements (outside JSX):

   function Greeting({ isLoggedIn }) {
     if (isLoggedIn) {
       return <UserGreeting />;
     }
     return <GuestGreeting />;
   }
   

2. Ternary Operator (inside JSX):

   function Greeting({ isLoggedIn }) {
     return isLoggedIn ? <UserGreeting /> : <GuestGreeting />;
   }
   

3. Logical && Operator (for rendering nothing or a single component):

   function Mailbox({ unreadMessages }) {
     return (
       <div>
         <h1>Hello!</h1>
         {unreadMessages.length > 0 &&
           <h2>You have {unreadMessages.length} unread messages.</h2>
         }
       </div>
     );
   }
   

4. switch statements (for multiple conditions, often in helper functions):

   function getStatusComponent(status) {
     switch (status) {
       case 'loading': return <LoadingSpinner />;
       case 'error': return <ErrorMessage />;
       case 'success': return <SuccessMessage />;
       default: return null;
     }
   }
   
   function App({ dataStatus }) {
     return <div>{getStatusComponent(dataStatus)}</div>;
   }
   

Key Points:

• Use if, ternary operator, or && directly in JSX.
• Return null to render nothing.
• Choose the method that best fits the complexity of the condition.

Common Mistakes:

• Putting complex logic directly inside JSX unnecessarily when a separate function or if statement would be clearer.
• Forgetting that 0 is a falsy value in JavaScript and can unintentionally render “0” when using && if not handled carefully (e.g., count && <p>Count: {count}</p> would render “0” if count is 0).

Follow-up:

• When would you choose a ternary operator over a logical &&?
• How would you prevent a component from rendering based on a prop?

MCQ Section

Question 1:

Which of the following is NOT a core principle or feature of React?

A) Declarative UI B) Two-way data binding C) Component-based architecture D) Virtual DOM

Correct Answer: B

Explanation:

• A) Declarative UI: React is fundamentally declarative. You describe the desired UI state, and React handles the updates.
• B) Two-way data binding: React primarily uses one-way (unidirectional) data flow, where data flows from parent to child components via props. While you can achieve similar effects with controlled components, it’s not a native “two-way data binding” as seen in some other frameworks.
• C) Component-based architecture: React applications are built from isolated, reusable components.
• D) Virtual DOM: React uses a Virtual DOM to optimize updates to the real DOM.

Question 2:

What is the primary purpose of React Keys when rendering a list of elements?

A) To pass unique data to each list item. B) To provide a unique identifier for CSS styling. C) To help React efficiently update and reconcile list items. D) To enable two-way data binding for list elements.

Correct Answer: C

Explanation:

• A) To pass unique data to each list item: While list items might have unique data, keys themselves don’t pass data. Data is passed via props.
• B) To provide a unique identifier for CSS styling: IDs or class names are used for styling. Keys are internal to React’s reconciliation process.
• C) To help React efficiently update and reconcile list items: This is the core purpose of keys. They allow React to track items across renders, ensuring efficient updates and correct component state preservation.
• D) To enable two-way data binding for list elements: React uses one-way data flow.

Question 3:

In modern React (v18.x), which Hook would you use to manage component-specific state in a functional component?

A) useContext B) useEffect C) useReducer D) useState

Correct Answer: D

Explanation:

• A) useContext: Used for consuming context, enabling global state management without prop drilling.
• B) useEffect: Used for performing side effects after render.
• C) useReducer: An alternative to useState for more complex state logic.
• D) useState: The fundamental Hook for adding local state to functional components.

Question 4:

Which statement accurately describes JSX?

A) It is a templating language that replaces JavaScript in React. B) It is a separate language that compiles directly to HTML. C) It is a syntax extension for JavaScript that allows HTML-like code. D) It is a new standard for web components in modern browsers.

Correct Answer: C

Explanation:

• A) It is a templating language that replaces JavaScript in React: JSX enhances JavaScript; it doesn’t replace it.
• B) It is a separate language that compiles directly to HTML: JSX is transpiled into React.createElement() calls, which then React uses to build the Virtual DOM, eventually rendering to HTML.
• C) It is a syntax extension for JavaScript that allows HTML-like code: This is the correct definition. It’s sugar for React.createElement().
• D) It is a new standard for web components in modern browsers: While web components are a browser standard, JSX is specific to React and similar libraries.

Question 5:

In React v18.x, what is a key benefit of the Synthetic Event System and its interaction with state updates?

A) It directly attaches event listeners to every DOM element for faster response. B) It provides a new set of event types not available in native browser events. C) It ensures cross-browser compatibility and enables automatic batching of state updates. D) It converts all event handler functions into asynchronous operations.

Correct Answer: C

Explanation:

• A) It directly attaches event listeners to every DOM element for faster response: Incorrect. It uses event delegation, attaching a single listener at the root.
• B) It provides a new set of event types not available in native browser events: Incorrect. It normalizes existing browser events.
• C) It ensures cross-browser compatibility and enables automatic batching of state updates: Correct. This is a primary advantage, especially automatic batching in React 18 for performance.
• D) It converts all event handler functions into asynchronous operations: Incorrect. Event handlers are typically synchronous, though state updates within them might be batched.

Mock Interview Scenario: Building a Simple Counter

Scenario Setup: You are interviewing for a Junior React Developer position. The interviewer wants to see your understanding of basic component creation, state management, and event handling.

Interviewer: “Alright, let’s do a quick coding exercise. I’d like you to build a simple counter component. It should display a number, and have two buttons: one to increment the number and one to decrement it. The counter should start at 0 and should not go below 0.”

Expected Flow of Conversation:

1. Interviewer: “How would you start creating this component? What kind of component would you use?”

   • Expected Answer: “I’d use a functional component, as it’s the modern best practice in React v18.x. I’d name it Counter.”

2. Interviewer: “How would you manage the counter’s value?”

   • Expected Answer: “I’d use the useState Hook to manage the counter’s value. I’d initialize it to 0. So, const [count, setCount] = useState(0);”

3. Interviewer: “Can you describe the JSX structure for this component?”

   • Expected Answer: “It would contain a div or similar container. Inside, I’d have an h1 or p tag to display the count value, and two <button> elements, one for incrementing and one for decrementing.”

4. Interviewer: “How would you handle the button clicks to update the counter?”

   • Expected Answer: “I’d define two event handler functions, say handleIncrement and handleDecrement. These functions would call setCount to update the state. handleIncrement would do setCount(prevCount => prevCount + 1). For handleDecrement, I’d add a condition: setCount(prevCount => (prevCount > 0 ? prevCount - 1 : 0)) to prevent it from going below zero.”

5. Interviewer: “Why did you use the functional update form for setCount (e.g., prevCount => prevCount + 1) instead of just setCount(count + 1)?”

   • Expected Answer: “Using the functional update form (prevCount => ...) is safer, especially when updates might be asynchronous or batched. It ensures that you’re always operating on the most recent state value, preventing potential race conditions or stale closures that could lead to incorrect counts if multiple updates happen rapidly.”

6. Interviewer: “Great. Now, imagine we want to log the current count to the console every time it changes. How would you implement that?”

   • Expected Answer: “I would use the useEffect Hook for this side effect. I’d pass a callback function to useEffect that calls console.log(count). Crucially, I’d include count in the dependency array: [count]. This ensures the effect runs only when count changes.”

Red Flags to Avoid:

• Trying to use a class component for this simple task.
• Forgetting to initialize useState or misusing setCount.
• Not adding the condition to prevent the counter from going below zero.
• Forgetting the dependency array for useEffect or including an incorrect one.
• Trying to modify the count variable directly instead of using setCount.

Practical Tips

1. Master the Official Docs: The React documentation is the single best resource. Read it thoroughly, especially the “Learning React” and “Hooks” sections. As of 2026, the new React.dev documentation is highly comprehensive and beginner-friendly.
2. Practice Building Small Components: Implement various small components that use useState, useEffect, props, and conditional rendering. Try to replicate common UI patterns.
3. Understand “Why,” Not Just “How”: Don’t just memorize syntax. Understand why React uses a Virtual DOM, why Hooks were introduced, or why keys are important. This depth is what interviewers look for.
4. Trace Data Flow: For any given component, be able to describe where its props come from, where its state is managed, and how events trigger updates.
5. Whiteboard Practice: Practice explaining concepts and drawing component hierarchies on a whiteboard or virtual whiteboard. This simulates an interview environment.
6. Stay Updated: React v18.x brought significant changes (e.g., Concurrent Features, Automatic Batching, Server Components are evolving). Keep an eye on the official React blog and reputable sources for the latest developments.

Summary

This chapter has laid the essential groundwork for your React interview journey. We’ve covered the fundamental concepts that every React developer, regardless of experience level, must master: JSX, the Virtual DOM, the distinction between functional and class components, the critical role of Props and State, the power of useState and useEffect Hooks, the importance of Keys for lists, and React’s efficient event handling system.

A solid understanding of these core principles will not only enable you to answer direct questions confidently but also provide the necessary foundation for tackling more complex topics like performance optimization, advanced Hooks, context management, and system design in subsequent chapters. Your next step should be to reinforce these concepts through hands-on coding and to move on to understanding more advanced Hooks, component lifecycle details, and state management patterns.

References

1. React Official Documentation: The definitive source for all React concepts, Hooks, and best practices.
   • https://react.dev/
2. React v18.0 Announcement: Understand the key features and improvements introduced in React 18.
   • https://react.dev/blog/2022/03/08/react-18
3. A Complete Guide to React Hooks: In-depth explanations and examples for useState, useEffect, and other Hooks.
   • https://www.freecodecamp.org/news/react-hooks-tutorial/
4. Understanding the Virtual DOM: A detailed explanation of how React’s Virtual DOM works.
   • https://www.toptal.com/react/react-virtual-dom-deep-dive
5. React Interview Questions GitHub Repo (sudheerj/reactjs-interview-questions): A widely referenced list of React interview questions, useful for broad coverage.
   • https://github.com/sudheerj/reactjs-interview-questions

This interview preparation guide is AI-assisted and reviewed. It references official documentation and recognized interview preparation resources.