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

Question 1

How do event listeners in React JSX differ from standard HTML event listeners?

Accepted Answer

Correct Answer

Answer

React events are named using lowercase (e.g., `onclick`), and you pass a string as the event handler.

Answer

React events are named using camelCase (e.g., `onClick`), and you pass a function as the event handler rather than a string.

Answer

React events must be attached manually using `addEventListener` in a `useEffect`.

Answer

React does not support native DOM events.

Question 2

What is a 'Synthetic Event' in React?

Accepted Answer

Correct Answer

Answer

A mock event used exclusively for unit testing components in Jest.

Answer

A cross-browser wrapper around the browser's native event object, ensuring that events (like `e.preventDefault()`) behave identically across Chrome, Safari, Firefox, and IE.

Answer

An event triggered by the server via WebSockets.

Answer

An event that fires before the component has actually mounted.

Question 3

How do you prevent the default behavior of an event (like preventing a form from refreshing the page) in React?

Accepted Answer

Correct Answer

Answer

By returning `false` from the event handler function.

Answer

By explicitly calling `e.preventDefault()` inside the event handler.

Answer

By passing `default={false}` to the `<form>` component.

Answer

React automatically prevents default behavior on all forms.

Question 4

Why is it dangerous to write `

Accepted Answer

Correct Answer

Answer

It causes a syntax error in JSX.

Answer

It will execute the function immediately when the component *renders*, rather than waiting for the user to actually click the button.

Answer

It binds `this` incorrectly.

Answer

It creates a memory leak in the Virtual DOM.

Question 5

How do you pass arguments to an event handler function in JSX?

Accepted Answer

Correct Answer

Answer

`<button onClick={handleClick(id)}>`

Answer

`<button onClick={(e) => handleClick(id, e)}>`

Answer

`<button onClick={handleClick} args={[id]}>`

Answer

`<button onClick={this.handleClick.bind(null, id)}>` (or an arrow function)

Question 6

What is 'Event Delegation' and how does React utilize it?

Accepted Answer

Correct Answer

Answer

React attaches a separate `addEventListener` to every single button and input in the DOM.

Answer

React attaches a single event listener to the root of the document. When an event fires, it bubbles up to the root, and React's internal dispatcher routes it to the correct component.

Answer

React delegates event handling entirely to Redux.

Answer

React ignores events unless explicitly defined in the `componentDidMount`.

Question 7

Which operator is most commonly used for simple conditional rendering in React (e.g., 'If condition is true, render X')?

Accepted Answer

Correct Answer

Answer

The strict equality operator (`===`)

Answer

The Logical AND operator (`&&`)

Answer

The Nullish Coalescing operator (`??`)

Answer

A standard `if` statement block

Question 8

What is a dangerous pitfall of using `array.length && <Component />` for conditional rendering?

Accepted Answer

Correct Answer

Answer

It throws an error if the array is empty.

Answer

If the array length is `0`, JavaScript evaluates `0 && <Component />`, and React will actually render the number `0` on the screen.

Answer

It causes a memory leak.

Answer

The component will render twice.

Question 9

Which operator is used for 'If-Else' conditional rendering (e.g., 'If true render X, else render Y')?

Accepted Answer

Correct Answer

Answer

Logical OR (`||`)

Answer

Ternary operator (`condition ? X : Y`)

Answer

Switch statement

Answer

The `` and `` JSX components.

Question 10

In a Class Component, how do you define the component's internal state?

Accepted Answer

Correct Answer

Answer

Using the `useState` hook inside the `render` method.

Answer

By assigning an object to `this.state` in the `constructor`.

Answer

By defining a global `const state = {}` outside the class.

Answer

By mutating `this.props` directly.

Question 11

How do you update state in a Class Component?

Accepted Answer

Correct Answer

Answer

By directly mutating it: `this.state.count = 2;`

Answer

By calling the `this.setState()` method.

Answer

By returning a new state object from the `render` method.

Answer

By using the `dispatch` function.

Question 12

Why must you bind custom methods to `this` in a Class Component constructor (e.g., `this.handleClick = this.handleClick.bind(this)`)?

Accepted Answer

Correct Answer

Answer

To satisfy the ESLint strict mode requirements.

Answer

Because JavaScript class methods are not bound by default. If you pass a method to an `onClick` handler without binding it, `this` will be `undefined` when the method is executed.

Answer

To optimize the method for the Virtual DOM.

Answer

To allow the method to receive props.

Question 13

What is the only required method in a React Class Component?

Accepted Answer

Correct Answer

Answer

`constructor()`

Answer

`componentDidMount()`

Answer

`render()`

Answer

`shouldComponentUpdate()`

Question 14

In the React Class Component lifecycle, when is `componentDidMount` called?

Accepted Answer

Correct Answer

Answer

Immediately before the component is rendered to the DOM for the first time.

Answer

Immediately after a component is mounted (inserted into the DOM tree) for the first time.

Answer

Every single time the component re-renders.

Answer

Immediately before the component is destroyed.

Question 15

Which Class Component lifecycle method is used to optimize performance by preventing unnecessary re-renders?

Accepted Answer

Correct Answer

Answer

`componentWillUpdate`

Answer

`componentDidCatch`

Answer

`shouldComponentUpdate`

Answer

`getDerivedStateFromProps`

Question 16

What is the equivalent of `shouldComponentUpdate` for Functional Components?

Accepted Answer

Correct Answer

Answer

`React.PureComponent`

Answer

`React.memo()`

Answer

`useMemo()`

Answer

`useEffect()`

Question 17

When is `componentWillUnmount` called in a Class Component?

Accepted Answer

Correct Answer

Answer

Right before the browser tab is closed.

Answer

Immediately before a component is destroyed and removed from the DOM.

Answer

When an error is thrown inside the component.

Answer

Right after the component successfully mounts.

Question 18

What is the main difference between a 'Controlled Component' and an 'Uncontrolled Component' in React forms?

Accepted Answer

Correct Answer

Answer

Controlled components are written as Classes, Uncontrolled are Functional.

Answer

In a Controlled component, form data (like the `<input>` value) is handled by the React component's state. In an Uncontrolled component, the DOM itself maintains the form data.

Answer

Controlled components use Redux, Uncontrolled use local state.

Answer

Controlled components cannot be submitted via Enter key.

Question 19

How do you create an Uncontrolled Component?

Accepted Answer

Correct Answer

Answer

By defining an `<input>` with no `value` or `onChange` prop, and reading its value using a `ref`.

Answer

By setting the `uncontrolled={true}` prop.

Answer

By using the `dangerouslySetInnerHTML` attribute.

Answer

By wrapping the form in a `<React.Fragment>`.

Question 20

What is the purpose of the `defaultValue` attribute on an `<input>` in React?

Accepted Answer

Correct Answer

Answer

It acts identically to the `value` attribute for Controlled components.

Answer

It sets the initial value of an Uncontrolled component, but allows the DOM to handle subsequent updates.

Answer

It defines a fallback value if the user deletes their input.

Answer

It automatically validates the input against a regex pattern.

Question 21

What does 'Lifting State Up' mean in React?

Accepted Answer

Correct Answer

Answer

Moving state out of React and into local storage.

Answer

The pattern of moving state from child components to their closest common parent component so that multiple child components can share and synchronize that state.

Answer

Upgrading state variables to use the `useReducer` hook.

Answer

Passing state through a Higher Order Component.

Question 22

How does a child component communicate with its parent in React?

Accepted Answer

Correct Answer

Answer

By directly modifying `this.props`.

Answer

By emitting a custom synthetic DOM event.

Answer

The parent passes a callback function down as a prop, and the child calls that function with data.

Answer

By using the Context API to bypass the parent entirely.

Question 23

What is the purpose of `dangerouslySetInnerHTML`?

Accepted Answer

Correct Answer

Answer

It encrypts the HTML before sending it to the client.

Answer

It forces the Virtual DOM to skip diffing for that specific node.

Answer

It is React's replacement for using `innerHTML` in the browser DOM, allowing you to inject raw HTML strings directly. The name is a warning that it exposes you to XSS attacks.

Answer

It bypasses all React Error Boundaries.

Question 24

What is `React.StrictMode`?

Accepted Answer

Correct Answer

Answer

A mode that compiles React into strictly typed TypeScript.

Answer

A wrapper component that enables a set of checks and warnings for its descendants, highlighting potential problems (like legacy lifecycle methods or unexpected side effects) during development.

Answer

A deployment setting for production builds.

Answer

A mode that entirely disables the Virtual DOM for maximum performance.

Question 25

In React 18, what is 'Automatic Batching'?

Accepted Answer

Correct Answer

Answer

React automatically combines all CSS files into a single batch.

Answer

React groups multiple state updates into a single re-render for better performance, even if those updates happen inside asynchronous callbacks (like Promises or setTimeout).

Answer

React automatically paginates large lists to improve scrolling.

Answer

React bundles multiple network requests into a single GraphQL query.

Academy

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