Q: What are React Fragments and why use them?

**React Fragments** (` ` or `<> `) allow you to group a list of children without adding extra nodes to the DOM. ### Why use them? * **Cleaner DOM**: Avoids unnecessary ` ` wrappers that can break CSS layouts (like Grid or Flexbox). * **Performance**: Slightly smaller DOM size means less memory usage. * **Valid HTML**: Some HTML elements (like ` `, ` `) generally require specific children (` `, ` `). A ` ` wrapper would be invalid HTML. ```jsx return ( <> ); ```

Question 1

How does the Virtual DOM work and why is it faster?

Accepted Answer

The **Virtual DOM (VDOM)** is a lightweight copy of the actual DOM kept in memory. React uses it to improve performance by minimizing direct manipulation of the slow Real DOM.

### The Process (Reconciliation):
1.  **Render Phase**: When a component's state or props change, React creates a new Virtual DOM tree.
2.  **Diffing**: React compares (diffs) this new tree with the previous Virtual DOM tree to identify exactly what changed.
    *   It uses a heuristic O(n) algorithm.
    *   It assumes elements of different types produce different trees.
3.  **Commit Phase**: React calculates the minimal set of changes required and updates the Real DOM in a single batch.

**Why it's faster:**
*   Batching updates reduces layout thrashing.
*   Only changed elements are repainted, avoiding full-page reloads.

Question 2

Explain useMemo vs useCallback with examples.

Accepted Answer

Both hooks are used for **memoization** to optimize performance by preventing unnecessary re-computations or re-renders.

### useMemo
Memoizes the **result** of a function. It caches the calculated value and recalculates it only when dependencies change.
*   **Use Case**: Expensive calculations (e.g., filtering a large array).

```javascript
// Re-runs only if 'data' changes
const sortedList = useMemo(() => {
  return data.sort((a, b) => a.id - b.id);
}, [data]);
```

### useCallback
Memoizes the **function definition** itself. It ensures the function reference remains stable across renders unless dependencies change.
*   **Use Case**: Passing callbacks to child components wrapped in `React.memo` to prevent them from re-rendering.

```javascript
// Function reference stays the same unless 'count' changes
const increment = useCallback(() => {
  setCount(c => c + 1);
}, [count]);
```

Question 3

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

Accepted Answer

**Context API** provides a way to pass data through the component tree without having to pass props down manually at every level ("prop drilling").

### How it works:
1.  **Create Context**: `const MyContext = React.createContext(defaultValue);`
2.  **Provider**: Wrap the component tree with `<MyContext.Provider value={...}>`.
3.  **Consumer**: Access the data using `useContext(MyContext)` in any child component.

### When to use it:
*   Global state like **Theme (Dark/Light mode)**.
*   User Authentication status.
*   Locale/Language settings.

**Note**: For complex state management with frequent updates, libraries like Redux or Zustand might be better due to potential optimization issues with Context (re-rendering all consumers).

Question 4

What are React Fragments and why use them?

Accepted Answer

**React Fragments** (`` or `<>`) allow you to group a list of children without adding extra nodes to the DOM. ### Why use them? * **Cleaner DOM**: Avoids unnecessary `

` wrappers that can break CSS layouts (like Grid or Flexbox). * **Performance**: Slightly smaller DOM size means less memory usage. * **Valid HTML**: Some HTML elements (like `

`, `

` wrapper would be invalid HTML. ```jsx return ( <>

Question 5

Describe the React Component Lifecycle (Class vs Functional).

Accepted Answer

React components go through three main phases: **Mounting**, **Updating**, and **Unmounting**.

### Class Components
1.  **Mounting**: `constructor()` -> `render()` -> `componentDidMount()`
2.  **Updating**: `render()` -> `componentDidUpdate()`
3.  **Unmounting**: `componentWillUnmount()`

### Functional Components (with Hooks)
Functional components use the `useEffect` hook to handle side effects for all phases.

*   **componentDidMount**:
    ```javascript
    useEffect(() => { ... }, []) // Empty dependency array
    ```
*   **componentDidUpdate**:
    ```javascript
    useEffect(() => { ... }, [dependencies]) // Runs when deps change
    ```
*   **componentWillUnmount**:
    ```javascript
    useEffect(() => {
      return () => { ... } // Cleanup function
    }, [])
    ```

Question 6

What is Prop Drilling and how do you avoid it?

Accepted Answer

**Prop Drilling** is the process of passing data from a parent component down to a deeply nested child component through intermediate components that do not need the data themselves. ### Problems: * Makes code verbose and hard to maintain. * Renaming props requires changes in multiple files. ### Solutions: 1. **Context API**: Make data available globally to the tree. 2. **Component Composition**: Pass components as children or props (e.g., `} />`), so the immediate parent has the data. 3. **State Management Libraries**: Redux, Zustand, Recoil.

Question 7

Controlled vs Uncontrolled Components - What's the difference?

Accepted Answer

### Controlled Components * Form data is handled by the **React component state**. * The "source of truth" is the component state. * You must provide an `onChange` handler to update the state. * **Pros**: Instant validation, conditonal disabling of buttons, easier to test. ```jsx setEmail(e.target.value)} /> ``` ### Uncontrolled Components * Form data is handled by the **DOM itself**. * You access the value using a `ref`. * **Pros**: Easier to integrate with non-React libraries, less code for simple forms. ```jsx const inputRef = useRef(); // Access with inputRef.current.value ```

Question 8

What is React Fiber?

Accepted Answer

**React Fiber** is the new reconciliation engine introduced in React 16. Its main goal is to increase the suitability of the Virtual DOM for **animation, layout, and gestures**.

### Key Features:
*   **Incremental Rendering**: Ability to split rendering work into chunks and spread it out over multiple frames.
*   **Prioritization**: Ability to pause, abort, or reuse work and assign priority to different types of updates (e.g., user input > data fetch).
*   **Concurrency**: Makes React faster and more responsive.

Question 9

What are Error Boundaries in React?

Accepted Answer

**Error Boundaries** are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. * They catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them. * **Note**: They do *not* catch errors inside event handlers (use standard try/catch for those). * They must be **Class Components** defining `static getDerivedStateFromError()` or `componentDidCatch()`. ```jsx Something went wrong

}> ```

Question 10

What is React.memo and how is it different from useMemo?

Accepted Answer

### React.memo
*   It is a **Higher-Order Component (HOC)** used to wrap a component.
*   It memoizes the **rendered output** of the component.
*   It prevents a component from re-rendering if its **props** haven't changed.

```javascript
const MyComponent = React.memo(function MyComponent(props) {
  /* render using props */
});
```

### Difference form useMemo
*   **React.memo**: Optimizes a **component** (prevents re-renders).
*   **useMemo**: Optimizes a **value/calculation** inside a component (prevents re-computation).

React.js Interview Questions

1How does the Virtual DOM work and why is it faster?

2Explain useMemo vs useCallback with examples.

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

4What are React Fragments and why use them?

5Describe the React Component Lifecycle (Class vs Functional).

6What is Prop Drilling and how do you avoid it?

7Controlled vs Uncontrolled Components - What's the difference?

8What is React Fiber?

9What are Error Boundaries in React?

10What is React.memo and how is it different from useMemo?