React Fundamentals Interview Questions and Answers

15 React questions on JSX, components, props and state, the virtual DOM, keys, controlled inputs, and rendering.

1. 1. What is React, and what problems does it solve?

   React is a JavaScript library for building user interfaces from reusable components. You describe what the UI should look like for a given state, and React updates the DOM efficiently when state changes. It encourages one-way data flow and composition.

2. 2. What is JSX?

   JSX is a syntax extension that lets you write markup inside JavaScript. A build tool compiles it into function calls that create React elements. Expressions go inside braces, attributes use camelCase (className, onClick), and a component must return a single root (or a fragment).

3. 3. What is the difference between props and state?

   Props are inputs passed from a parent to a child and are read-only for the child. State is data owned by a component that can change over time and triggers a re-render when updated. When a child needs to change data, the parent passes down a callback.

4. 4. What is the virtual DOM, and how does reconciliation work?

   React keeps a lightweight description of the UI in memory. When state changes it builds a new description, compares it with the previous one (diffing), and applies only the necessary changes to the real DOM. Elements of a different type are replaced, and lists are matched using keys.

5. 5. Why are keys important in lists?

   Keys give each list item a stable identity so React can match items between renders, preserving state and reordering efficiently. Use a stable unique id from your data. Using the array index as a key is risky when items can be reordered, inserted, or removed, because state can attach to the wrong item.

6. 6. What is the difference between controlled and uncontrolled components?

   A controlled input's value is held in React state and updated through onChange, so React is the single source of truth. An uncontrolled input keeps its own value in the DOM, which you read through a ref or form data when needed. Controlled inputs make validation and conditional logic easy; uncontrolled ones are simpler for basic forms.

   function Name() {
     const [name, setName] = useState('');
     return <input value={name} onChange={(e) => setName(e.target.value)} />;
   }

7. 7. Why should you never mutate state directly?

   React detects changes by comparing references, so changing an object or array in place can leave the component without a re-render, and can break memoization. Create a new value instead: use spread for objects and arrays, or map and filter.

   setItems([...items, newItem]);                       // add
   setItems(items.filter((i) => i.id !== id));          // remove
   setUser({ ...user, name: 'Ada' });                   // update

8. 8. Why is setState asynchronous, and what is the functional update form?

   React batches state updates and applies them together, so state does not change immediately after calling the setter. When the new value depends on the previous one, pass a function so React supplies the latest state.

   setCount((c) => c + 1);
   setCount((c) => c + 1);   // results in +2, not +1

9. 9. What is the difference between a function component and a class component?

   Function components are plain functions that use hooks for state and lifecycle behavior, and are the standard way to write React today. Class components use this.state and lifecycle methods such as componentDidMount. Classes still work, and error boundaries must still be classes (or use a library).

10. 10. What are fragments?

    Fragments (<> ... </>) let a component return several elements without adding an extra DOM node. Use the long form <React.Fragment key={id}> when you need to give a fragment a key in a list.

11. 11. How do you handle events in React?

    Pass a function to an event prop such as onClick. React wraps native events in a synthetic event with a consistent API across browsers. Do not call the function while writing the prop: onClick={handle} passes it, while onClick={handle()} runs it during render.

12. 12. What is conditional rendering?

    Showing different UI based on state or props, using if statements, the ternary operator, or the && operator. Be careful with && and numbers: {count && <List />} renders 0 when count is 0, so compare explicitly (count > 0 && ...).

13. 13. What is lifting state up?

    When two components need the same data, move the state to their closest common parent and pass it down as props, with callbacks for updates. It keeps a single source of truth. If many distant components need it, consider context or a state library.

14. 14. What is prop drilling, and how do you avoid it?

    Passing props through many layers of components that do not use them. Avoid it with composition (passing children or elements), React context for truly shared data such as theme or the current user, or a state management library for complex global state.

15. 15. What does StrictMode do?

    In development it runs extra checks: it renders components twice and runs effects an extra setup and cleanup cycle to reveal impure rendering and missing cleanup, and warns about deprecated APIs. It has no effect on production builds.