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

Question 1

What exactly is React?

Accepted Answer

Correct Answer

Answer

A full-fledged MVC framework for building complex web applications.

Answer

A JavaScript library strictly for building user interfaces.

Answer

A server-side rendering engine for Node.js.

Answer

A superset of JavaScript that compiles down to native HTML.

Question 2

What is JSX?

Accepted Answer

Correct Answer

Answer

A server-side templating engine like Pug or EJS.

Answer

A syntax extension for JavaScript that allows you to write HTML-like markup directly inside JavaScript files.

Answer

A new standard introduced in ECMAScript 6.

Answer

An automated testing tool for React components.

Question 3

Why must you wrap multiple JSX elements inside a single parent element (or Fragment)?

Accepted Answer

Correct Answer

Answer

To ensure the CSS Box Model is not broken.

Answer

Because JSX elements compile into JavaScript function calls (`React.createElement()`), and a JavaScript function cannot return multiple separate values simultaneously without wrapping them in an array or object.

Answer

To strictly enforce semantic HTML5.

Answer

Because the Virtual DOM cannot diff sibling nodes.

Question 4

How do you embed a dynamic JavaScript expression inside JSX?

Accepted Answer

Correct Answer

Answer

Using double quotes `""`

Answer

Using curly braces `{}`

Answer

Using template literals `${}`

Answer

Using double curly braces `{{}}`

Question 5

Which of the following is NOT a valid JavaScript expression that can be placed inside JSX curly braces `{}`?

Accepted Answer

Correct Answer

Answer

`user.firstName`

Answer

`2 + 2`

Answer

`if (isTrue) { return 'Yes' }`

Answer

`isTrue ? 'Yes' : 'No'`

Question 6

How is the `class` attribute written in JSX?

Accepted Answer

Correct Answer

Answer

`class`

Answer

`className`

Answer

`styleClass`

Answer

`cssClass`

Question 7

What is the Virtual DOM in React?

Accepted Answer

Correct Answer

Answer

A specialized, faster browser built specifically for running React applications.

Answer

A lightweight, in-memory JavaScript representation of the actual DOM.

Answer

A shadow DOM used exclusively for scoping CSS.

Answer

A server-side cache that stores rendered HTML strings.

Question 8

What is the primary benefit of the Virtual DOM?

Accepted Answer

Correct Answer

Answer

It prevents Cross-Site Scripting (XSS) attacks by sanitizing all inputs.

Answer

It allows React to perform 'diffing', calculating the exact minimum number of expensive real DOM manipulations required to update the UI.

Answer

It bypasses the browser's rendering engine entirely.

Answer

It automatically compresses image assets.

Question 9

What is 'Reconciliation' in React?

Accepted Answer

Correct Answer

Answer

The process of synchronizing local state with a backend server.

Answer

The algorithm React uses to diff one tree of elements with another to determine what parts need to be changed in the actual DOM.

Answer

The act of binding `this` to class methods.

Answer

The process of converting JSX into `React.createElement`.

Question 10

In React, how do you define inline styles in JSX?

Accepted Answer

Correct Answer

Answer

As a string: `style="color: red; font-size: 14px;"`

Answer

As a JavaScript object using camelCase properties: `style={{ color: 'red', fontSize: '14px' }}`

Answer

As a CSS string literal: `style={`color: red; font-size: 14px;`}`

Answer

Inline styles are strictly forbidden in React.

Question 11

What is a React Component?

Accepted Answer

Correct Answer

Answer

An HTML template file downloaded from the server.

Answer

An independent, reusable piece of the UI that accepts inputs (props) and returns a React element describing what should appear on the screen.

Answer

A strict CSS rule applied globally.

Answer

A specialized Node.js route handler.

Question 12

What is the mandatory rule for naming custom React components?

Accepted Answer

Correct Answer

Answer

They must end with `.jsx`.

Answer

They must be named in camelCase.

Answer

They must always start with a Capital Letter (PascalCase).

Answer

They must be wrapped in `export default`.

Question 13

Which of the following is true about Functional Components prior to React 16.8 (before Hooks)?

Accepted Answer

Correct Answer

Answer

They were completely deprecated.

Answer

They could manage their own internal state.

Answer

They were "stateless" and could not use lifecycle methods; they strictly accepted props and returned UI.

Answer

They were faster than class components because they bypassed the Virtual DOM.

Question 14

How do you render a React element into the root DOM node in modern React (v18+)?

Accepted Answer

Correct Answer

Answer

`ReactDOM.render(<App />, document.getElementById('root'));`

Answer

`const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />);`

Answer

`React.inject(<App />, '#root');`

Answer

`document.getElementById('root').appendChild(<App />);`

Question 15

What are 'props' in React?

Accepted Answer

Correct Answer

Answer

Internal variables used strictly for styling.

Answer

Read-only inputs passed from a parent component down to a child component to configure its behavior or display.

Answer

Functions that mutate the component's internal state.

Answer

The dependencies listed in a `useEffect` array.

Question 16

Is a React component allowed to modify its own props?

Accepted Answer

Correct Answer

Answer

Yes, as long as it uses `this.setState()`.

Answer

Yes, but only if they are passed as an object.

Answer

No, props are strictly read-only (immutable). A component must act like a pure function with respect to its props.

Answer

No, unless the parent component explicitly grants permission via a callback.

Question 17

In a Functional Component, how do you access the props passed to it?

Accepted Answer

Correct Answer

Answer

Using `this.props.propertyName`.

Answer

As the first argument passed to the component function (e.g., `function MyComponent(props) { ... }`).

Answer

By importing them from the `react-props` module.

Answer

By calling `React.getProps()`.

Question 18

What is the `children` prop?

Accepted Answer

Correct Answer

Answer

An array of all the internal state variables.

Answer

A special prop that allows you to pass components or elements directly between the opening and closing tags of a component.

Answer

A strictly typed property for mapping JSON arrays.

Answer

The list of child components nested inside a Class component.

Question 19

How does React handle the `for` attribute on a `<label>` in JSX?

Accepted Answer

Correct Answer

Answer

You use `for` just like normal HTML.

Answer

You must use `htmlFor` because `for` is a reserved JavaScript keyword (like `for` loops).

Answer

You must use `labelFor`.

Answer

The `for` attribute is deprecated in React; you must nest inputs instead.

Question 20

What does a React Fragment (`` or `<> `) do?

Accepted Answer

Correct Answer

Answer

It splits the component into smaller micro-components for lazy loading.

Answer

It acts as an invisible wrapper that groups a list of children without adding an extra node (like a redundant `

`) to the actual DOM.

Answer

It injects raw HTML into the component.

Answer

It strictly prevents the component from re-rendering.

Question 21

When would you use the explicit `` syntax instead of the shorthand `<>`?

Accepted Answer

Correct Answer

Answer

When you need to use React Hooks inside the fragment.

Answer

When you need to pass a `key` attribute to the fragment (e.g., when mapping an array to a list of fragments).

Answer

The shorthand `<>` is deprecated and should never be used.

Answer

When returning fragments from a Class component.

Question 22

Which method is standard for rendering a list of elements from an array in React?

Accepted Answer

Correct Answer

Answer

Using a `for` loop inside the JSX.

Answer

Using the `array.map()` function to return an array of JSX elements.

Answer

Using the `<ReactList>` component.

Answer

Using `array.forEach()`.

Question 23

Why is the `key` prop absolutely critical when rendering lists in React?

Accepted Answer

Correct Answer

Answer

It securely encrypts the list data in the DOM.

Answer

It provides a unique identifier that helps the Virtual DOM diffing algorithm instantly identify which specific items have changed, been added, or been removed, preventing massive re-rendering bugs.

Answer

It automatically sorts the list based on the key value.

Answer

It allows you to query the list item using `document.getElementById`.

Question 24

Why is using the array `index` as a `key` in a list considered an anti-pattern?

Accepted Answer

Correct Answer

Answer

Because it causes an infinite loop in the Virtual DOM.

Answer

If the list is ever reordered, filtered, or has items inserted/deleted, the indices will change, completely confusing React's diffing algorithm and leading to severe bugs (like inputs retaining the wrong state).

Answer

Because indexes are numbers, and React strictly requires string keys.

Answer

It isn't an anti-pattern; it is the officially recommended approach.

Question 25

What happens if a component's render function returns `null`?

Accepted Answer

Correct Answer

Answer

React throws a fatal error and crashes the app.

Answer

The component renders an empty `

`.

Answer

The component renders absolutely nothing to the DOM, effectively hiding it.

Answer

The component bypasses the Virtual DOM and injects raw null bytes.

Academy

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