ReactJS Interview Prep - React Core & Components (Part 3)

Question 1

What is a Higher-Order Component (HOC) in React?

Accepted Answer

Correct Answer

Answer

A component that is rendered at the absolute root of the DOM tree.

Answer

An advanced technique for reusing component logic. It is a function that takes a component and returns a new component, wrapping it with additional props or behavior.

Answer

A component built strictly using TypeScript classes.

Answer

A component that has access to the Redux store natively.

Question 2

What is the primary motivation for using a Higher-Order Component?

Accepted Answer

Correct Answer

Answer

To significantly increase the rendering speed of a component.

Answer

To share cross-cutting concerns (like authentication checks, logging, or subscribing to a data source) across many different components without duplicating code.

Answer

To prevent a component from ever re-rendering.

Answer

To bypass React's one-way data flow.

Question 3

Which of the following is a rule when writing a Higher-Order Component?

Accepted Answer

Correct Answer

Answer

The HOC must mutate the original component passed to it.

Answer

The HOC must copy all static methods over to the new component.

Answer

The HOC should pass through props that are unrelated to its specific concern.

Answer

Both B and C are correct.

Question 4

What is the 'Render Props' pattern?

Accepted Answer

Correct Answer

Answer

Passing a component's entire state object to its children.

Answer

A technique for sharing code between React components using a prop whose value is a function, which the component calls to know what to render.

Answer

Rendering an array of props directly into the DOM.

Answer

A deprecated pattern replaced by React Router.

Question 5

Why did the React community heavily shift away from HOCs and Render Props in modern development?

Accepted Answer

Correct Answer

Answer

Because they caused severe memory leaks.

Answer

Because React Hooks (like `useEffect` and custom hooks) provide a much cleaner, more composable way to share stateful logic without creating "wrapper hell" in the DOM tree.

Answer

Because they are incompatible with Server Side Rendering.

Answer

Because they break Concurrent Mode.

Question 6

What is a 'Ref' in React?

Accepted Answer

Correct Answer

Answer

A pointer to a specific CSS stylesheet.

Answer

A reference to the URL of the current page.

Answer

A way to access a DOM node or React element created in the render method directly, allowing imperative actions like managing focus, text selection, or integrating with third-party DOM libraries.

Answer

A unique ID generated for database records.

Question 7

In a Class component, how do you create a ref?

Accepted Answer

Correct Answer

Answer

Using `React.createRef()` in the constructor and attaching it via the `ref` attribute in the JSX.

Answer

Using the `useRef` hook.

Answer

By assigning a string to the `ref` attribute (e.g., `ref="myInput"`).

Answer

By querying the DOM using `document.querySelector`.

Question 8

What happens when the element a ref is attached to unmounts from the DOM?

Accepted Answer

Correct Answer

Answer

React throws an error.

Answer

The ref retains the last known DOM state.

Answer

React assigns the `current` property of the ref to `null`.

Answer

The component is forced to re-render.

Question 9

Can you attach a `ref` directly to a Functional Component?

Accepted Answer

Correct Answer

Answer

Yes, exactly the same way you do for Class components.

Answer

No, because functional components don't have instances. You must use `React.forwardRef` to pass the ref down to a specific DOM node inside the functional component.

Answer

Yes, but only if it is wrapped in `React.memo`.

Answer

No, refs are strictly forbidden in Functional Components.

Question 10

What is the purpose of `React.forwardRef`?

Accepted Answer

Correct Answer

Answer

To allow a component to take a `ref` they receive and pass it further down (forward it) to a child component or DOM node.

Answer

To reverse the order of elements in an array.

Answer

To bypass the Virtual DOM.

Answer

To automatically generate unique IDs for forms.

Question 11

What are React Portals used for?

Accepted Answer

Correct Answer

Answer

To navigate between different pages in a Single Page Application.

Answer

To render a child component into a DOM node that exists entirely outside the DOM hierarchy of the parent component.

Answer

To securely transmit data between two separate React applications.

Answer

To import CSS modules dynamically.

Question 12

If a child is rendered using a Portal, does event bubbling still follow the React tree or the actual HTML DOM tree?

Accepted Answer

Correct Answer

Answer

It follows the physical HTML DOM tree.

Answer

It follows the React component tree (the logical hierarchy), meaning an `onClick` on a Portal child will bubble up to the React parent, even if they are physically completely separate in the DOM.

Answer

Event bubbling is disabled for Portals.

Answer

It triggers events on the window object globally.

Question 13

What is an Error Boundary in React?

Accepted Answer

Correct Answer

Answer

A strict linter rule preventing try/catch blocks.

Answer

A React component that catches JavaScript errors anywhere in its child component tree, logs those errors, and displays a fallback UI instead of crashing the whole component tree.

Answer

A network timeout interceptor.

Answer

A boundary that prevents CSS from leaking.

Question 14

How do you create an Error Boundary component?

Accepted Answer

Correct Answer

Answer

By using the `useErrorBoundary` hook.

Answer

By writing a Functional component that returns `<React.Error>`.

Answer

By creating a Class component that defines either `static getDerivedStateFromError()` or `componentDidCatch()`.

Answer

By wrapping your app in `<React.StrictMode>`.

Question 15

Which of the following errors is NOT caught by an Error Boundary?

Accepted Answer

Correct Answer

Answer

Errors thrown during the `render` phase of a child component.

Answer

Errors thrown inside a lifecycle method of a child component.

Answer

Errors thrown inside asynchronous code (like `setTimeout`), event handlers (like an `onClick`), or Server-Side Rendering.

Answer

Syntax errors inside JSX.

Question 16

What is the primary purpose of the Context API?

Accepted Answer

Correct Answer

Answer

To replace Redux entirely for complex state management.

Answer

To provide a way to pass data through the component tree without having to pass props down manually at every single level (preventing 'prop drilling').

Answer

To provide an execution context for Web Workers.

Answer

To manage focus states for accessibility.

Question 17

How do you create a new Context?

Accepted Answer

Correct Answer

Answer

`const MyContext = React.createContext(defaultValue);`

Answer

`const MyContext = new React.Context();`

Answer

`const MyContext = React.initContext();`

Answer

`import { Context } from 'react';`

Question 18

How do you provide a Context value to a tree of components?

Accepted Answer

Correct Answer

Answer

By wrapping the tree in `<MyContext.Provider value={data}>`.

Answer

By passing it as a `context` prop to the root element.

Answer

By setting `React.globalContext = data`.

Answer

By using `<MyContext.Consumer data={data}>`.

Question 19

What happens when the `value` prop of a `Context.Provider` changes?

Accepted Answer

Correct Answer

Answer

Nothing, Context is static.

Answer

All components that consume that context are forced to re-render, even if `shouldComponentUpdate` or `React.memo` normally tells them to skip rendering.

Answer

The entire React application reloads.

Answer

An error is thrown if the data types don't match.

Question 20

Prior to Hooks, what was the standard way to consume context in a Functional Component?

Accepted Answer

Correct Answer

Answer

Using `<MyContext.Consumer>` requiring a render prop (a function as a child).

Answer

By accessing `this.context`.

Answer

By adding `contextTypes` to the function.

Answer

Context could not be consumed in Functional Components.

Question 21

What is 'Prop Drilling'?

Accepted Answer

Correct Answer

Answer

A malicious attack where arbitrary props are injected into a form.

Answer

The process of passing props from a high-level parent down through multiple layers of intermediate child components just to reach a deeply nested component that actually needs the data.

Answer

Extracting props out of a component using destructuring.

Answer

A performance metric in React DevTools.

Question 22

What is `PropTypes`?

Accepted Answer

Correct Answer

Answer

The underlying engine of TypeScript.

Answer

A built-in React utility (now a separate `prop-types` package) used to document and enforce the types of props passed to a component during runtime in development mode.

Answer

A method to statically type component state.

Answer

A library for animating props.

Question 23

What is `defaultProps` used for?

Accepted Answer

Correct Answer

Answer

To define the initial state of a component.

Answer

To assign default values to `props` in case the parent component does not pass them.

Answer

To reset props to their original values on unmount.

Answer

To define generic styles.

Question 24

What does it mean that React components must be 'Pure' regarding their props?

Accepted Answer

Correct Answer

Answer

They must be written in PureScript.

Answer

They must never mutate (change) the props they are given, always returning the same output for the exact same input.

Answer

They must not contain any CSS.

Answer

They must not have any child components.

Question 25

In React 18, what happens if you render a tree using `ReactDOM.render` instead of `ReactDOM.createRoot`?

Accepted Answer

Correct Answer

Answer

It will crash the application immediately.

Answer

It will render normally, but it will behave exactly like React 17, and you will not have access to any Concurrent Mode features (like automatic batching or `useTransition`).

Answer

It will automatically upgrade the syntax using a polyfill.

Answer

It will render, but all state updates will be synchronous.

Academy

ReactJS Interview Prep - React Core & Components (Part 3)