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

Question 1

Which attribute should you use in React to set the `class` of an SVG element?

Accepted Answer

Correct Answer

Answer

`class`

Answer

`svgClass`

Answer

`className`

Answer

`xml:class`

Question 2

How do you apply multiple CSS classes to an element in JSX?

Accepted Answer

Correct Answer

Answer

`className="class1, class2"`

Answer

`className="class1" className="class2"`

Answer

`className={"class1 class2"}` or using a template literal for dynamic classes ``className={`class1 ${active ? 'class2' : ''}`}``

Answer

`classes={['class1', 'class2']}`

Question 3

What is the primary difference between using 'State' and using a 'Ref' to store data in a React component?

Accepted Answer

Correct Answer

Answer

State is for strings, Refs are for objects.

Answer

Updating State schedules a re-render of the component. Updating a Ref's `.current` value does NOT trigger a re-render.

Answer

State is mutable, Refs are immutable.

Answer

State can only be used in Class components.

Question 4

Can a `ref` be passed as a normal prop to a custom component? (e.g., `<MyInput customRef={myRef} />`)

Accepted Answer

Correct Answer

Answer

Yes, and this is actually a common workaround if you don't want to use `React.forwardRef`.

Answer

No, `ref` is a reserved word and cannot be mimicked.

Answer

Yes, but it will only work on Class components.

Answer

No, passing objects as props is forbidden.

Question 5

What does the `React.Children` API provide?

Accepted Answer

Correct Answer

Answer

It provides access to the global Redux store.

Answer

It provides utility functions (like `React.Children.map` and `React.Children.toArray`) for dealing with the opaque `props.children` data structure.

Answer

It automatically renders a list of children.

Answer

It validates that children match a specific PropTypes schema.

Question 6

What is Component Composition?

Accepted Answer

Correct Answer

Answer

Merging two separate CSS files into one component.

Answer

The React pattern of building complex components by assembling smaller, reusable components together, often passing components as props or using `props.children`.

Answer

Inheriting methods from a parent class.

Answer

Using Webpack to bundle components together.

Question 7

Which of the following demonstrates passing a component as a prop (often called a 'Slot' pattern)?

Accepted Answer

Correct Answer

Answer

`} right={} />`

Answer

`<SplitPane><Sidebar /><MainContent /></SplitPane>`

Answer

`<SplitPane props={Sidebar, MainContent} />`

Answer

`<SplitPane children={[Sidebar, MainContent]} />`

Question 8

How do you define default values for props in a Functional Component in modern React?

Accepted Answer

Correct Answer

Answer

By strictly using `Component.defaultProps`.

Answer

By using standard ES6 default parameters in the function signature (e.g., `function Button({ size = 'medium' })`).

Answer

By checking `if (props.size === undefined)` in the render body.

Answer

By defining a `useState` fallback.

Question 9

What is the primary problem that 'Prop Drilling' causes?

Accepted Answer

Correct Answer

Answer

It severely degrades the framerate of the browser.

Answer

It makes the codebase brittle and hard to maintain, as intermediate components become bloated with props they only receive in order to pass down to children.

Answer

It causes Cross-Site Scripting (XSS) vulnerabilities.

Answer

It forces components to use Class syntax.

Question 10

Which built-in React feature is designed specifically to prevent Prop Drilling?

Accepted Answer

Correct Answer

Answer

React Router

Answer

Context API

Answer

Error Boundaries

Answer

React.lazy

Question 11

What happens if a child component tries to directly mutate a prop (e.g., `props.title = 'New Title';`)?

Accepted Answer

Correct Answer

Answer

The parent component will automatically re-render with the new title.

Answer

React will throw a TypeError, because the `props` object is frozen (immutable) in strict mode.

Answer

The child component will re-render, but the parent will not.

Answer

The Virtual DOM will cache the change for the next render cycle.

Question 12

What is the difference between a 'Presentational' component and a 'Container' component (a classic React pattern)?

Accepted Answer

Correct Answer

Answer

Presentational components are written in CSS, Containers in JS.

Answer

Presentational components (dumb) are concerned with *how things look* (UI). Container components (smart) are concerned with *how things work* (data fetching, state).

Answer

Presentational components are Classes, Containers are Functional.

Answer

They are just different names for the same thing.

Question 13

Why has the strict separation of Presentational and Container components become less prevalent in modern React?

Accepted Answer

Correct Answer

Answer

Because Redux was deprecated.

Answer

Because React Hooks allow developers to easily co-locate and extract stateful logic directly inside functional UI components without needing complex wrapper hierarchies.

Answer

Because CSS-in-JS makes it impossible to separate them.

Answer

Because Class components are faster.

Question 14

What is the purpose of `React.cloneElement()`?

Accepted Answer

Correct Answer

Answer

To deeply clone the entire Virtual DOM tree.

Answer

To clone a React element and pass it new props, merge new children, or attach new event handlers before returning it.

Answer

To duplicate a DOM node in the browser.

Answer

To convert a Class component into a Functional component.

Question 15

What does it mean when a React element is described as an 'Object'?

Accepted Answer

Correct Answer

Answer

It means JSX compiles into instances of an ES6 Class.

Answer

It means JSX compiles into plain JavaScript objects describing the intended DOM structure (e.g., `{ type: 'h1', props: { className: 'title', children: 'Hello' } }`).

Answer

It means it uses Object-Oriented Programming principles.

Answer

It means it is stored in the browser's `localStorage`.

Question 16

Why does React require you to define a single parent root node in a component's return statement?

Accepted Answer

Correct Answer

Answer

For CSS compatibility.

Answer

Because the `render` function translates into a standard JavaScript function returning an object, and a JavaScript function cannot return two separate objects without wrapping them.

Answer

To prevent memory leaks in the browser.

Answer

Because HTML requires a strict `<html>` root.

Question 17

What is the primary danger of using `index` as a key in a mapped array?

Accepted Answer

Correct Answer

Answer

It causes a syntax error.

Answer

If the list is re-ordered or an item is deleted from the middle, React may mismatch the component state or DOM nodes (like input values) with the wrong data item.

Answer

It prevents the array from being mapped.

Answer

It causes the component to re-render infinitely.

Question 18

Is it safe to generate a random number or UUID directly inside the `key` prop (e.g., `key={Math.random()}`)?

Accepted Answer

Correct Answer

Answer

Yes, this guarantees the key is unique.

Answer

No, because the key will change on every single render. This forces React to destroy and recreate the DOM node entirely on every render, destroying performance and losing component state.

Answer

Yes, but only for Functional components.

Answer

No, `Math.random` is asynchronous.

Question 19

Which of the following is a valid use case for intentionally changing a component's `key`?

Accepted Answer

Correct Answer

Answer

To force the component to update its props.

Answer

To force React to completely unmount and remount a component, effectively resetting its internal state.

Answer

To trigger a CSS animation loop.

Answer

You should never intentionally change a key.

Question 20

Accepted Answer

Correct Answer

Answer

You can write them directly in the text content of the JSX.

Answer

You must use `dangerouslySetInnerHTML`.

Answer

Answer

React does not support HTML entities.

Question 21

What is the `displayName` property used for on a component?

Accepted Answer

Correct Answer

Answer

It sets the document title of the webpage.

Answer

It is used by React DevTools to display a human-readable name for the component in the component tree.

Answer

It defines the CSS class name for the component.

Answer

It is the unique identifier used by the Context API.

Question 22

What happens if you define a React component inside another React component?

Accepted Answer

Correct Answer

Answer

It is a highly recommended pattern for scoping variables.

Answer

It will cause a massive performance bug. The inner component will be completely destroyed and recreated from scratch on every single render of the outer component, losing all state and focus.

Answer

React will automatically hoist it to the global scope.

Answer

It creates a Higher-Order Component.

Question 23

What is the recommended way to handle forms in modern React without uncontrolled refs?

Accepted Answer

Correct Answer

Answer

Use `document.forms[0].submit()`.

Answer

Make every input a 'Controlled Component' by tying its `value` to a state variable and updating it via an `onChange` handler.

Answer

Wrap the form in an Error Boundary.

Answer

Use jQuery validation.

Question 24

In a controlled input, why must you provide an `onChange` handler if you provide a `value` prop?

Accepted Answer

Correct Answer

Answer

To satisfy HTML5 validation.

Answer

If you provide a `value` without an `onChange`, React assumes the value is hardcoded. The input will be locked, and the user will not be able to type anything into it.

Answer

To enable form submission.

Answer

Because it is required by the Virtual DOM.

Question 25

What is the purpose of `React.memo`?

Accepted Answer

Correct Answer

Answer

To cache API responses globally.

Answer

To wrap a Functional Component, automatically preventing it from re-rendering if its incoming props have not changed (via shallow comparison).

Answer

To save form drafts to Local Storage.

Answer

To memoize expensive mathematical calculations.

Academy

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