Question 1

What are custom hooks and why would you use them?

Accepted Answer

Custom hooks are reusable functions that leverage React's hook features to share logic across components without repeating code.

Question 2

How do you optimize performance in React applications?

Accepted Answer

Use memoization (React.memo, useMemo, useCallback), lazy loading, code splitting, and virtualized lists for performance boosts.

Question 3

When should you use React Context API over Redux?

Accepted Answer

Context is ideal for light state like theme, auth, or locale, while Redux suits complex global state with logic-heavy operations.

Question 4

Explain the compound component pattern in React.

Accepted Answer

Compound components let related components share state implicitly via context. They offer a clean and flexible API for users.

Question 5

What is the role of React Testing Library in modern React apps?

Accepted Answer

It focuses on testing UI the way users interact with it. Encourages testing through DOM elements rather than component internals.

Question 6

What is the difference between useEffect and useLayoutEffect?

Accepted Answer

useEffect runs asynchronously after paint, useLayoutEffect runs synchronously before paint, used for measuring DOM layout.

Question 7

How do you implement a debounced search using hooks?

Accepted Answer

Use useEffect with setTimeout and cleanup. Use useRef to persist timeout id.

Question 8

What is the useReducer hook and when to use it?

Accepted Answer

useReducer is an alternative to useState for complex state logic involving multiple sub-values or when next state depends on previous.

Question 9

Explain the rules of hooks and why they exist.

Accepted Answer

Hooks must be called at the top level and only from React function components or custom hooks. Ensures order of hooks is consistent between renders.

Question 10

What is React.memo and how does it work?

Accepted Answer

React.memo is a higher-order component that memoizes a functional component, re-rendering only if props have changed (shallow comparison).

React Advanced Interview Questions & Answers

Prepare for Your Next Interview