## React Interview Preparation (Q1 - Q60)
---
### 1. What is React?
React is a JavaScript library developed by Facebook for building user interfaces, particularly
for single-page applications. It allows developers to create reusable UI components and
manage the state of those components efficiently. React uses a virtual DOM to optimize
performance and make UI updates more efficient.
---
### 2. What is the history behind React’s evolution?
React was created by Jordan Walke, a software engineer at Facebook. It was first deployed
on Facebook's newsfeed in 2011 and later on Instagram in 2012. React was open-sourced in
2013. Over time, React has evolved significantly, introducing features like JSX, React Fiber,
and Hooks (in version 16.8), making it more functional and performant.
---
### 3. What are the major features of React?
* **JSX (JavaScript XML)**
* **Components**: Reusable and encapsulated pieces of UI
* **Virtual DOM**: For fast rendering
* **One-way data binding**
* **Declarative UI**
* **React Hooks**: Functional state and side-effect management
---
### 4. What is JSX?
JSX stands for JavaScript XML. It is a syntax extension for JavaScript that looks similar to
HTML. JSX allows developers to write HTML-like code inside JavaScript, which is then
transformed to [Link]() calls. It enhances code readability and helps in writing
components more intuitively.
---
### 5. What is the difference between an Element and a Component?
* **Element**: A plain object representing a DOM node or component. It is the smallest
building block in React.
* **Component**: A function or class that optionally accepts input (props) and returns a
React element. Components can contain multiple elements.
---
### 6. How do you create components in React?
React components can be created in two ways:
* **Functional Components**:
```jsx
function Welcome(props) {
return <h1>Hello, {[Link]}</h1>;
}
```
* **Class Components**:
```jsx
class Welcome extends [Link] {
render() {
return <h1>Hello, {[Link]}</h1>;
}
}
```
---
### 7. When should you use a Class Component over a Function Component?
Class components are traditionally used when a component needs to manage its own state
or lifecycle methods. However, with the introduction of Hooks, function components can now
manage state and side-effects, making class components less necessary in modern React
applications.
---
### 8. What are Pure Components?
Pure components are React components that do not re-render if the props and state haven't
changed. [Link] performs a shallow comparison of props and state and
avoids unnecessary rendering, optimizing performance.
---
### 9. What is state in React?
State is a built-in object that stores property values that belong to a component. When the
state of a component changes, the component re-renders. State is mutable and managed
within the component.
---
### 10. What are props in React?
Props (short for properties) are read-only attributes used to pass data from parent to child
components. They make components reusable by allowing customization.
---
### 11. What is the difference between state and props?
* **Props**: Passed from parent to child. Immutable by the child.
* **State**: Managed within the component. Mutable and controls the component's behavior.
---
### 12. What is the difference between HTML and React event handling?
In React:
* Event names are written in camelCase (e.g., `onClick` instead of `onclick`).
* Event handlers are passed as functions rather than strings.
---
### 13. What are synthetic events in React?
Synthetic events are cross-browser wrappers around the browser’s native events. They have
the same interface as native events but work identically across all browsers.
---
### 14. What are inline conditional expressions?
Conditional expressions used directly within JSX to render components or elements
conditionally.
Example:
```jsx
{isLoggedIn ? <Dashboard /> : <Login />}
```
---
### 15. What is the "key" prop and what is its benefit when used in arrays of elements?
The key prop is a special attribute used to identify elements in a list. It helps React
determine which items have changed, are added, or are removed, optimizing rendering
performance.
---
### 16. What is the Virtual DOM?
A lightweight copy of the real DOM that React uses to batch and optimize updates. Changes
are first made to the virtual DOM, and React uses a diffing algorithm to apply only necessary
updates to the real DOM.
---
### 17. How does the Virtual DOM work?
* React renders UI to a virtual DOM.
* On state/props change, React re-renders to a new virtual DOM.
* It compares the new virtual DOM with the previous one (diffing).
* Only the changed parts are updated in the real DOM.
---
### 18. What is the difference between Shadow DOM and Virtual DOM?
* **Shadow DOM**: A browser technology for encapsulating DOM and style.
* **Virtual DOM**: A concept used by React to optimize rendering.
---
### 19. What is React Fiber?
React Fiber is the reimplementation of React’s core algorithm for rendering. It enables
incremental rendering, prioritization, and better error handling.
---
### 20. What is the main goal of React Fiber?
To enable smooth, interruptible rendering and improve responsiveness and performance by
breaking rendering into units of work.
---
### 21. What are controlled components?
Controlled components are form elements whose value is controlled by React state. Any
user input updates the state, which in turn updates the input's value.
---
### 22. What are uncontrolled components?
Uncontrolled components manage their own state internally using the DOM rather than
React state. They are accessed using refs.
---
### 23. What is the difference between createElement and cloneElement?
* `createElement`: Creates a new React element.
* `cloneElement`: Clones an existing element and optionally overrides its props.
---
### 24. What is Lifting State Up in React?
When multiple components need to share the same state, the state is lifted up to their
closest common ancestor and passed down via props.
---
### 25. What are Higher-Order Components?
A Higher-Order Component (HOC) is a function that takes a component and returns a new
component with enhanced behavior or additional props.
---
### 26. What is the children prop?
The `children` prop is a special prop that contains any nested elements or components
inside a parent component.
---
### 27. How do you write comments in React?
Comments in JSX are written using curly braces and multiline JavaScript comment syntax:
```jsx
{/* This is a comment */}
```
---
### 28. What is reconciliation?
Reconciliation is the process through which React updates the DOM by comparing the new
virtual DOM with the previous one and determining the minimal set of changes.
---
### 29. Does the lazy function support named exports?
No. `[Link]()` only supports default exports. You must wrap named exports in a
component that re-exports them as default.
---
### 30. Why does React use className instead of the class attribute?
Because `class` is a reserved keyword in JavaScript, React uses `className` to define CSS
classes on elements.
---
### 31. What are Fragments?
Fragments let you group multiple elements without adding an extra node to the DOM. They
help avoid unnecessary wrappers.
```jsx
<>
<Child1 />
<Child2 />
</>
```
---
### 32. Why are Fragments better than container divs?
Fragments prevent adding extra DOM nodes, which helps in maintaining cleaner markup
and avoids CSS or accessibility issues from unnecessary wrappers.
---
### 33. What are portals in React?
Portals provide a way to render children into a DOM node outside the parent component
hierarchy. Useful for modals, tooltips, etc.
```jsx
[Link](child, container)
```
---
### 34. What are stateless components?
Components that do not manage any state of their own. They simply receive props and
render UI.
---
### 35. What are stateful components?
Components that maintain and manage their own internal state using `useState` or
`[Link]`.
---
### 36. How do you apply validation to props in React?
Using `PropTypes`:
```jsx
[Link] = {
name: [Link]
};
```
Or using TypeScript for static type checking.
---
### 37. What are the advantages of React?
* Fast performance via Virtual DOM
* Component reusability
* Rich ecosystem and tooling
* One-way data flow ensures predictability
* Works well with other libraries and frameworks
---
### 38. What are the limitations of React?
* JSX syntax may be confusing initially
* Only covers the UI layer
* SEO challenges (without SSR)
* Fast-moving ecosystem requires constant learning
---
### 39. What are the recommended ways for static type checking?
* TypeScript
* Flow
* PropTypes (runtime)
---
### 40. What is the use of the react-dom package?
`react-dom` provides DOM-specific methods for React, like `[Link]()` to render
components, and `[Link]()` for portal support.
---
(Continued...)
