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

How do you conditionally render components in React?

Accepted Answer

Conditional rendering in React can be done with:
- **if statements**: Outside JSX.
- **Ternary operators**: Inside JSX for concise logic.
- **&& operator**: For simple truthy/falsy checks.
- Ensures dynamic UI based on state or props.

Question 3

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 4

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 5

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 6

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.

Question 7

What is the Suspense component in React?

Accepted Answer

The `Suspense` component:
- Handles loading states for asynchronous operations (e.g., lazy-loaded components).
- Uses a `fallback` prop to render a placeholder until the content is ready.
- Enhanced in React 18 for data fetching with libraries like Relay.

Question 8

What is the useTransition Hook in React 18?

Accepted Answer

The `useTransition` Hook:
- Allows marking state updates as non-urgent in React 18.
- Returns `isPending` and `startTransition` to manage UI responsiveness.
- Useful for keeping the app interactive during heavy updates like filtering large lists.

Question 9

What are React Portals and why are they useful?

Accepted Answer

React Portals:
- Allow rendering children into a DOM node outside the parent component’s hierarchy.
- Useful for modals, tooltips, or overlays that need to break out of their container.
- Maintain React’s event handling while targeting a different DOM location.

Question 10

How do you prevent a component from re-rendering?

Accepted Answer

To prevent re-renders:
- **React.memo**: Memoizes functional components based on props.
- **useMemo**: Memoizes expensive computations.
- **useCallback**: Memoizes functions.
- Ensure props and state changes are minimized or stable.

DeVlt

Technical React Interview Questions

Unlock All Interview Questions

Why Practice Technical React Questions?

DeVlt