Question 1

How do you manage global state in a large React app?

Accepted Answer

Global state management options:
- **Context API**: Built-in, good for small-to-medium apps.
- **Redux**: Popular for large apps, with predictable state updates.
- **Zustand/MobX**: Lightweight alternatives with simpler APIs.
- Choose based on app complexity and team familiarity.

Question 2

What is Static Site Generation (SSG) in React?

Accepted Answer

Static Site Generation:
- Pre-renders React pages at build time into static HTML.
- Improves performance and SEO over client-side rendering.
- Supported by frameworks like Next.js with `getStaticProps`.

Question 3

What is hydration in React?

Accepted Answer

Hydration:
- The process of attaching event listeners to server-rendered HTML.
- Used in SSR to make static markup interactive on the client.
- Ensures a seamless transition from server to client rendering.

Question 4

What is Server-Side Rendering (SSR) in React?

Accepted Answer

Server-Side Rendering:
- Renders React components on the server to generate HTML.
- Improves SEO and initial page load performance.
- Requires hydration on the client to make the app interactive.
- Frameworks like Next.js simplify SSR implementation.

Question 5

How would you optimize a React application’s performance?

Accepted Answer

To optimize a React app:
- **Use React.memo**: Prevents unnecessary re-renders of components.
- **Code splitting**: Lazy-load components with `React.lazy` and `Suspense`.
- **Avoid inline functions**: Define functions outside JSX to prevent re-creation.
- **Profile with DevTools**: Identify bottlenecks using React Profiler.

Question 6

What is the purpose of forwardRef in React?

Accepted Answer

The `forwardRef` function:
- Passes a ref from a parent to a child component.
- Useful when a parent needs direct access to a child’s DOM node or instance.
- Often paired with `useImperativeHandle` for custom ref behavior.

Question 7

How do you implement drag-and-drop in React?

Accepted Answer

Drag-and-drop in React:
- Use HTML5 Drag and Drop API with event handlers (e.g., `onDragStart`, `onDrop`).
- Manage state to track dragged items and drop zones.
- Libraries like `react-dnd` simplify complex implementations.

Question 8

What is the Concurrent Rendering feature in React 18?

Accepted Answer

Concurrent Rendering:
- Introduced in React 18 to improve performance.
- Allows React to work on multiple tasks (e.g., rendering) concurrently.
- Features like `startTransition` let you mark updates as non-urgent, keeping the UI responsive.

Question 9

What is the role of the React Fiber architecture?

Accepted Answer

React Fiber:
- The updated reconciliation engine introduced in React 16.
- Enables incremental rendering, prioritization, and concurrency.
- Powers features like Suspense and concurrent mode for better performance.

Question 10

How do you handle errors in a React application?

Accepted Answer

Error handling in React:
- **Error Boundaries**: Class components with `componentDidCatch` to catch render errors.
- **Try-catch**: In event handlers or async code.
- **React 18+**: `useEffect` with error states for async operations.
- Prevents app crashes and improves user experience.

DeVlt

Hard React Interview Questions

Unlock All Interview Questions

Why Practice Hard React Questions?

DeVlt