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

Question 1

When a parent component re-renders, what happens to its child components by default?

Accepted Answer

Correct Answer

Answer

They do not re-render unless their specific props change.

Answer

They unconditionally re-render along with the parent, traversing down the entire sub-tree.

Answer

They only re-render if they are Class components.

Answer

They unmount and remount.

Question 2

What does a 'shallow comparison' mean in the context of `React.memo` or `PureComponent`?

Accepted Answer

Correct Answer

Answer

It converts all objects to strings before comparing them.

Answer

It checks if the previous props and new props are the exact same reference in memory (for objects/arrays) and the same value (for primitives). It does NOT recursively check deeply nested object keys.

Answer

It only checks the first property of an object.

Answer

It compares the HTML output of the component.

Question 3

How can you prevent a function passed as a prop from breaking `React.memo` optimizations?

Accepted Answer

Correct Answer

Answer

By defining the function as an arrow function inside the JSX.

Answer

By wrapping the function definition in a `useCallback` hook in the parent component.

Answer

By passing the function as a string.

Answer

Functions do not trigger re-renders.

Question 4

What is the significance of the `key` prop when used OUTSIDE of mapping an array?

Accepted Answer

Correct Answer

Answer

It is strictly illegal to use a key unless mapping an array.

Answer

It can be used to uniquely identify a component. If the key changes, React completely destroys the old component instance (and its state) and mounts a brand new one.

Answer

It applies a unique CSS ID to the root DOM node.

Answer

It marks the component for Server-Side Rendering.

Question 5

In a Class Component, what is the consequence of calling `this.setState` inside the `render` method?

Accepted Answer

Correct Answer

Answer

It sets the initial state correctly.

Answer

It triggers an infinite loop and crashes the application with a 'Maximum update depth exceeded' error.

Answer

It optimizes the render cycle.

Answer

It has no effect.

Question 6

What does JSX ultimately compile down into?

Accepted Answer

Correct Answer

Answer

A string of HTML.

Answer

Standard `React.createElement(type, props, ...children)` function calls (prior to React 17) or `_jsx(type, props)` (React 17+ JSX Transform).

Answer

A proprietary binary format.

Answer

WebAssembly code.

Question 7

Why did you have to `import React from 'react'` in every file that used JSX prior to React 17?

Accepted Answer

Correct Answer

Answer

To enable CSS-in-JS support.

Answer

Because the JSX compiler transformed `

` into `React.createElement('div')`. If `React` wasn't in scope, the file would throw a ReferenceError.

Answer

To access lifecycle methods.

Answer

Because it initialized the Virtual DOM engine.

Question 8

What is the correct way to render a boolean value or a `null` value in JSX?

Accepted Answer

Correct Answer

Answer

`{true}`, `{false}`, and `{null}` are valid JSX expressions but they render absolutely nothing (they are ignored by the DOM).

Answer

They throw a syntax error.

Answer

They render the strings 'true', 'false', and 'null'.

Answer

They render as empty `

` tags.

Question 9

If you want to actually display the text 'true' or 'false' on the screen, how must you do it?

Accepted Answer

Correct Answer

Answer

Using `{true}`.

Answer

By converting the boolean to a string, e.g., `{String(myBool)}` or `{myBool.toString()}`.

Answer

By using CSS `content`.

Answer

It is impossible.

Question 10

Which method is used in Class components to catch errors in child components?

Accepted Answer

Correct Answer

Answer

`try / catch`

Answer

`componentDidCatch`

Answer

`onError`

Answer

`componentWillUnmount`

Question 11

Is it possible to use an Error Boundary to catch an error that happens inside a `setTimeout` callback?

Accepted Answer

Correct Answer

Answer

Yes, Error Boundaries catch all errors globally.

Answer

No, Error Boundaries only catch errors that occur during rendering, in lifecycle methods, and in constructors of the whole tree below them.

Answer

Yes, but only in React 18.

Answer

No, unless the component is memoized.

Question 12

What is the difference between `React.cloneElement` and `React.createElement`?

Accepted Answer

Correct Answer

Answer

They are identical.

Answer

`createElement` creates a brand new React element from a string (like 'div') or a component function. `cloneElement` takes an *already existing* React element and returns a clone of it, allowing you to merge in new props.

Answer

`cloneElement` is for the Virtual DOM, `createElement` is for the Real DOM.

Answer

`cloneElement` can only clone Class components.

Question 13

Can a React Component return multiple independent root elements without wrapping them?

Accepted Answer

Correct Answer

Answer

Yes, by returning an Array of elements.

Answer

Yes, by returning a string.

Answer

No, it must always be wrapped in a `

`.

Answer

No, it is strictly impossible.

Question 14

What is a 'Portal' event bubbling gotcha?

Accepted Answer

Correct Answer

Answer

Events don't bubble out of Portals.

Answer

Even though a Portal is rendered in a different DOM node (e.g., `#modal-root`), an event fired inside the Portal will still bubble up to ancestors in the *React Tree*, not just the DOM tree.

Answer

Portals double-fire every event.

Answer

Portals only support `onClick` events.

Question 15

How do you conditionally apply a CSS class based on a variable in JSX?

Accepted Answer

Correct Answer

Answer

`className={isActive ? 'active' : 'inactive'}`

Answer

`class="{isActive ? 'active' : 'inactive'}"`

Answer

`className=isActive ? 'active' : 'inactive'`

Answer

`className={if(isActive) 'active'}`

Question 16

What is the Context `Provider` component?

Accepted Answer

Correct Answer

Answer

A component that connects to a Redux store.

Answer

A React component returned by `React.createContext()` that allows consuming components to subscribe to context changes. It accepts a `value` prop.

Answer

A component that provides routing capabilities.

Answer

A Higher Order Component.

Question 17

What happens if a component tries to consume a Context, but there is no matching Provider anywhere above it in the tree?

Accepted Answer

Correct Answer

Answer

The app crashes with a 'Context Not Found' error.

Answer

The component receives the `defaultValue` that was passed to `React.createContext(defaultValue)` when the context was initially created.

Answer

The component receives `undefined`.

Answer

The component falls back to Redux state.

Question 18

Can a single component consume multiple different Contexts?

Accepted Answer

Correct Answer

Answer

No, a component can only consume one context.

Answer

Yes, in modern React using hooks, you can simply call `useContext()` multiple times (e.g., `useContext(ThemeContext)` and `useContext(AuthContext)`).

Answer

Yes, but they must be merged into one Context first.

Answer

No, it creates a Context clash.

Question 19

What is the purpose of the `name` attribute on a standard React form input?

Accepted Answer

Correct Answer

Answer

It acts as a CSS selector.

Answer

It provides a key for the data when the form is natively submitted, and is incredibly useful for writing a single, generic `onChange` handler that updates state dynamically based on `e.target.name`.

Answer

It replaces the `id` attribute.

Answer

It is required by the Virtual DOM to track the input.

Question 20

What is `dangerouslySetInnerHTML`'s primary security risk?

Accepted Answer

Correct Answer

Answer

SQL Injection

Answer

Cross-Site Scripting (XSS). If you inject un-sanitized user input directly into the DOM, a malicious user could execute arbitrary JavaScript.

Answer

Cross-Site Request Forgery (CSRF)

Answer

Man-in-the-Middle attacks

Question 21

How do you enforce that a component strictly accepts a single child element (and throws an error if passed multiple)?

Accepted Answer

Correct Answer

Answer

By checking `if (props.children.length === 1)`

Answer

By using `React.Children.only(props.children)`

Answer

By using `PropTypes.single`

Answer

It is enforced by default.

Question 22

In standard React syntax, which element tags must be self-closing if they have no children?

Accepted Answer

Correct Answer

Answer

Only native HTML elements like `img` or `br`.

Answer

All elements. While HTML allows `

`, in JSX it is considered best practice (and enforced by linters) to write `

` if the element has no children, especially for custom components like ``.

Answer

Self-closing tags are illegal in JSX.

Answer

Only custom components.

Question 23

What is 'State Mutation' and why is it bad in React?

Accepted Answer

Correct Answer

Answer

Converting a state variable from a string to an integer.

Answer

Directly changing a state object or array (e.g., `state.items.push(newItem)`). React relies on object identity (reference equality) to know when to re-render. If you mutate the object, the reference stays the same, and React won't update the UI.

Answer

Passing state to a child component.

Answer

Storing functions in state.

Question 24

How does React identify a component type during Reconciliation?

Accepted Answer

Correct Answer

Answer

By its `id` attribute.

Answer

By the component's reference (memory address) and its position in the tree. If the reference changes (e.g., you define a component inside another component), React destroys the old DOM node completely.

Answer

By checking the string name of the component.

Answer

By its CSS class.

Question 25

What does it mean that React is 'Declarative'?

Accepted Answer

Correct Answer

Answer

You write code that tells the browser exactly *how* to update the DOM step-by-step (e.g., `document.createElement`, `appendChild`).

Answer

You declare *what* the UI should look like based on the current state, and React handles all the underlying complex DOM manipulations to make it happen.

Answer

You must declare all variables at the top of the file.

Answer

React uses purely functional programming.

Academy

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