ReactJS Interview Prep - React Core & Components

Question 1

Which of the following best describes the Virtual DOM in React?

Accepted Answer

Correct Answer

Answer

It is a direct reference to the actual DOM elements in the browser.

Answer

It is a specialized CSS framework built exclusively for React applications.

Answer

It is a lightweight, in-memory representation of the real DOM used to optimize updates.

Answer

It is an external JavaScript library that must be installed separately from React.

Question 2

What is the primary difference between State and Props in a React component?

Accepted Answer

Correct Answer

Answer

Both State and Props are immutable and cannot be changed after the component mounts.

Answer

State is passed down from parent components, while Props are managed locally.

Answer

State is local to the component and mutable, whereas Props are passed from parents and are strictly immutable.

Answer

Both are mutable data structures used for global state management.

Question 3

What primarily triggers a component to re-render in React?

Accepted Answer

Correct Answer

Answer

A change in the component's internal state or its received props.

Answer

A fixed timer that refreshes the component lifecycle every second.

Answer

Updates to the application's external CSS files.

Answer

Explicit user interactions like clicks, regardless of state changes.

Question 4

What exactly is JSX in the context of React?

Accepted Answer

Correct Answer

Answer

A mechanism for embedding raw HTML directly inside CSS files.

Answer

A strictly formatted JSON structure used for data fetching.

Answer

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

Answer

A completely new programming language designed as an alternative to JavaScript.

Question 5

Why are 'keys' important when rendering a list of elements in React?

Accepted Answer

Correct Answer

Answer

They must be the exact array indexes of the items to ensure correct rendering order.

Answer

They help React efficiently identify which specific items have changed, been added, or been removed.

Answer

They are completely optional identifiers that have no impact on rendering performance.

Answer

They are exclusively used to apply unique CSS styling to individual list items.

Question 6

Which of the following correctly outlines the three main phases of a React component's lifecycle?

Accepted Answer

Correct Answer

Answer

Render, Paint, and Cleanup.

Answer

Start, Run, and Stop.

Answer

Mounting, Updating, and Unmounting.

Answer

Initialization, Execution, and Destruction.

Question 7

What is a major structural difference between Functional components and Class components in React?

Accepted Answer

Correct Answer

Answer

Class components cannot accept or utilize props from their parents.

Answer

Functional components are strictly stateless and cannot manage their own data.

Answer

Functional components rely on Hooks for state and lifecycle features, whereas Class components use dedicated lifecycle methods.

Answer

Class components execute significantly faster in modern browser environments.

Question 8

What is the primary purpose of a React Fragment (`<>...`)?

Accepted Answer

Correct Answer

Answer

To provide a secure routing mechanism between different pages in a single-page application.

Answer

It is a deprecated feature that was replaced by standard `

` wrappers.

Answer

To group a list of multiple children elements without adding an extra node to the real DOM.

Answer

To act as a generic container exclusively for applying global CSS grid layouts.

Question 9

What defines a 'Controlled Component' in React forms?

Accepted Answer

Correct Answer

Answer

The form data is handled entirely by the DOM itself using native HTML attributes.

Answer

The form input's value is driven by React state, making React the 'single source of truth'.

Answer

It is a highly optimized component that renders significantly slower than uncontrolled components.

Answer

It is a specialized form input that explicitly avoids using React state.

Question 10

What is the primary function of Error Boundaries in React?

Accepted Answer

Correct Answer

Answer

To catch and handle asynchronous errors, such as failed API requests.

Answer

To automatically catch and report syntax errors inside standard event handlers.

Answer

To catch JavaScript errors anywhere in their child component tree and display a fallback UI.

Answer

To provide native error handling directly inside standard Functional components without extra setup.

Question 11

What problem does the React Context API primarily solve?

Accepted Answer

Correct Answer

Answer

Managing global CSS styles dynamically across different themes.

Answer

Passing data deeply through the component tree without having to manually pass props down at every level (prop drilling).

Answer

Serving as a mandatory, exclusive replacement for state management libraries like Redux.

Answer

Handling and caching asynchronous API requests efficiently.

Question 12

How does `React.memo` optimize performance in a React application?

Accepted Answer

Correct Answer

Answer

It memorizes the entire application's DOM tree and prevents any browser repaints.

Answer

It is a custom hook used for managing and caching expensive complex state.

Answer

It is a higher-order component that memoizes the rendered output, skipping re-renders if props have not changed.

Answer

It completely replaces the `useEffect` hook by caching side-effect responses.

Question 13

What is the primary use case for Refs (`useRef` / `createRef`) in React?

Accepted Answer

Correct Answer

Answer

To directly access and interact with DOM nodes or React elements created in the render method.

Answer

To forcefully update component state synchronously, bypassing the standard lifecycle.

Answer

To serve as a strict alternative for passing data between sibling components instead of props.

Answer

To handle client-side routing and navigation histories natively.

Question 14

What specific capability do React Portals provide?

Accepted Answer

Correct Answer

Answer

They allow rendering children into a DOM node that exists completely outside the parent component's DOM hierarchy.

Answer

They serve as a highly optimized mechanism for fetching data from external REST APIs.

Answer

They 'teleport' props directly to deeply nested child components, avoiding intermediate layers.

Answer

They automatically handle complex CSS transitions and page routing animations.

Question 15

What is the purpose of wrapping an application in `<React.StrictMode>`?

Accepted Answer

Correct Answer

Answer

It enforces strict CSS typing and prevents the use of inline styles.

Answer

It highlights potential problems by running extra checks and warnings, but only during development.

Answer

It acts as a safety net that prevents the application from crashing in production environments.

Answer

It automatically detects and fixes syntax bugs within functional components.

Question 16

How do `React.lazy` and `Suspense` work together in a React application?

Accepted Answer

Correct Answer

Answer

They are built-in hooks used exclusively for complex global state management.

Answer

They provide a native solution for handling client-side routing without external libraries.

Answer

They allow rendering a dynamically imported component and showing a fallback UI (like a loader) while it loads.

Answer

They are utilized to intentionally pause the JavaScript event loop during heavy computations.

Question 17

Which of the following correctly defines a Higher-Order Component (HOC) in React?

Accepted Answer

Correct Answer

Answer

A specialized component that must always be rendered at the very top of the DOM tree.

Answer

A root component that wraps the entire application to provide global context.

Answer

A function that takes a component as an argument and returns a new, enhanced component.

Answer

A custom hook specifically designed to manage asynchronous side effects.

Question 18

What is the defining characteristic of a Custom Hook in React?

Accepted Answer

Correct Answer

Answer

It is a JavaScript function whose name starts with 'use' and can call other Hooks to reuse stateful logic.

Answer

It is a specialized React component that only returns JSX without any internal state.

Answer

It is a built-in React method specifically designed for direct DOM manipulation.

Answer

It is a globally accessible variable specifically used to store application-wide state.

Question 19

When exactly does the cleanup function returned by `useEffect` execute?

Accepted Answer

Correct Answer

Answer

It runs immediately before the component mounts for the very first time.

Answer

It automatically clears the browser's local storage and session cache when the app closes.

Answer

It runs right before the component unmounts, and also before subsequent re-runs of the effect.

Answer

It executes automatically to reset the component's state back to its initial values.

Question 20

In what scenario is `useReducer` generally preferable to `useState`?

Accepted Answer

Correct Answer

Answer

When you are managing strictly numeric state values like counters.

Answer

When managing complex state logic that involves multiple sub-values or when the next state depends heavily on the previous one.

Answer

When you need state updates to execute significantly faster, as `useState` is notoriously slow.

Answer

When building modern apps, as `useState` is considered deprecated in recent React versions.

Question 21

What is a React SyntheticEvent?

Accepted Answer

Correct Answer

Answer

A direct reference to the native browser event object passed to event handlers.

Answer

A cross-browser wrapper around the browser's native event, normalizing behavior across different browsers.

Answer

A specialized event that only triggers when the application is wrapped in StrictMode.

Answer

A built-in event specifically designed to trigger global state management updates.

Question 22

What does 'Unidirectional Data Flow' mean in the context of React?

Accepted Answer

Correct Answer

Answer

Data flows randomly and dynamically between components based on user interaction.

Answer

Data flows strictly upwards from child components to their parent components.

Answer

Data flows exclusively downwards from parent components to child components via props.

Answer

Data is stored and managed in a centralized, external database rather than in memory.

Question 23

What does the concept of 'Lifting State Up' refer to in React development?

Accepted Answer

Correct Answer

Answer

Moving state from a child component to a common ancestor parent component so it can be shared among sibling components.

Answer

Migrating local component state into an external global store like Redux.

Answer

Pushing local client state directly to the backend server for synchronization.

Answer

Persisting volatile state securely into the browser's local storage.

Question 24

What occurs during the 'Unmounting' phase of a React component?

Accepted Answer

Correct Answer

Answer

The component is initially constructed and added to the actual DOM.

Answer

The component is destroyed and completely removed from the actual DOM.

Answer

The component's internal state undergoes a massive update.

Answer

The component is visually hidden using CSS `display: none`, but remains in the DOM.

Question 25

What is the primary purpose of using `PropTypes` in a React application?

Accepted Answer

Correct Answer

Answer

To enforce runtime type-checking on the props passed to a component, issuing warnings during development.

Answer

To act as a mandatory compiler step that translates JSX into standard JavaScript.

Answer

To provide a highly secure method for passing sensitive props over network requests.

Answer

To explicitly replace TypeScript as the standard typing system for all modern React apps.

Academy

ReactJS Interview Prep - React Core & Components