Advanced React Concepts

Question 1

What is context in React?

Answer 1

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

Question 2

How does React’s Concurrent Mode enhance user interfaces?

Answer 2

It allows React to interrupt a long-running render to handle high-priority events like user input, leading to more responsive apps.

Question 3

What is a higher-order component (HOC)?

Answer 3

A HOC is a function that takes a component and returns a new component with added props or functionality.

Question 4

Explain the purpose of the React.memo() function.

Answer 4

It memoizes the rendered output of a component, preventing unnecessary renders if props don’t change.

Question 5

What is the purpose of useState in React?

Answer 5

To manage local state within a functional component.

Question 6

When should you use useEffect?

Answer 6

When you want to perform side effects (like fetching data, manual DOM manipulations, etc.) in functional components.

Question 7

What is useContext used for?

Answer 7

To access the context for a component without wrapping it in a Consumer.

Question 8

When is it beneficial to use useReducer?

Answer 8

When state logic is more complex and involves multiple sub-values, or when the next state depends on the previous state.

Question 9

What is the main purpose of useCallback?

Answer 9

To memoize functions so they don’t get recreated every render, especially when passed to child components as props to prevent unnecessary renders.

Question 10

Why would you use useMemo?

Answer 10

To memoize expensive computations so they are only re-computed when specific inputs change.

Question 11

When should you use useRef?

Answer 11

For accessing and interacting with DOM elements directly, or for keeping a mutable reference to a value that doesn’t trigger a re-render when it changes.

Question 12

What does useImperativeHandle do?

Answer 12

It customizes the instance value that is exposed when using React.forwardRef.

Question 13

When is useLayoutEffect used?

Answer 13

When you need to perform synchronous visual DOM updates, similar to useEffect but it fires synchronously after all DOM mutations.

Question 14

What is useDebugValue used for?

Answer 14

It’s used in custom hooks to display a label in React DevTools next to this hook.

Question 15

What is React’s context?

Answer 15

A mechanism for passing data directly to nested components without prop-drilling, often used for global state or theming.

Question 16

What’s the purpose of Error Boundaries in React?

Answer 16

Components that catch JavaScript errors in their child component tree, log those errors, and display a fallback UI.

Question 17

What are Uncontrolled Components in React?

Answer 17

Components that store their own state internally and you query the DOM directly using refs to find their current values when needed.

Question 18

What are Controlled Components in React?

Answer 18

Components where React controls the form elements’ values (like an input’s value) and changes are handled by a function passed as a prop.

Question 19

Explain the importance of keys in React lists.

Answer 19

Keys help React identify which items have changed, are added, or removed, enabling efficient and accurate UI updates.

Question 20

How does React’s Lazy loading work?

Answer 20

Using React.lazy(), components are loaded dynamically with import(), aiding in performance optimization by splitting the app into chunks.

Question 21

Explain React Fragments.

Answer 21

Fragments allow grouping multiple child elements without adding extra nodes to the DOM, useful for returning multiple elements from a component.

Question 22

What are React Portals?

Answer 22

Portals provide a way to render children into a DOM node outside of the parent DOM hierarchy, often used for modals or pop-ups.

Question 23

What is Concurrent Mode in React?

Answer 23

An experimental feature that allows React to interrupt rendering to work on multiple tasks simultaneously, optimizing user interactivity.

Question 24

What’s the primary use of React.memo?

Answer 24

It’s a higher order component that memoizes the rendered output, preventing unnecessary renders if the props haven’t changed.

Question 25

What is the purpose of Suspense in React?

Answer 25

It lets your components “wait” for something before rendering, commonly used with React.lazy() to show fallback content like a loading spinner.

Question 26

What is React’s forwardRef?

Answer 26

A tool to forward refs from a parent component to a child component, useful for direct child DOM manipulation or accessing child instance methods.