ReactJS Interview Prep - Performance Optimization (Part 2)

Question 1

What is a 'Hydration Bottleneck'?

Accepted Answer

Correct Answer

Answer

When the server runs out of memory.

Answer

Even though the user sees the HTML instantly (SSR), they cannot interact with it (buttons don't work) until the massive JavaScript bundle finishes downloading, parsing, and hydrating the entire tree.

Answer

When images fail to load.

Answer

When Redux state is out of sync.

Question 2

What is the primary goal of 'Code Splitting' in a React application?

Accepted Answer

Correct Answer

Answer

To split CSS from JavaScript.

Answer

To break a massive monolithic JavaScript bundle (e.g., a 5MB `main.js`) into smaller chunks that are loaded on-demand, drastically reducing the initial load time (Time to Interactive) of the application.

Answer

To allow multiple developers to work on the same file.

Answer

To separate React logic from Redux logic.

Question 3

How do you implement route-based code splitting natively in React?

Accepted Answer

Correct Answer

Answer

By using multiple `<script>` tags.

Answer

By using `React.lazy()` combined with dynamic imports (e.g., `const AdminPanel = lazy(() => import('./AdminPanel'))`) and wrapping the route in a `<Suspense>` boundary.

Answer

By using `React.memo`.

Answer

By using Redux Thunks.

Question 4

What is the purpose of the `}>` component?

Accepted Answer

Correct Answer

Answer

To pause the execution of malicious code.

Answer

To provide a placeholder UI (like a loading spinner or skeleton) to display while the browser asynchronously downloads the JavaScript chunk required by the `React.lazy` component inside it.

Answer

To catch JavaScript errors.

Answer

To delay animations.

Question 5

What happens if a dynamically imported module (via `React.lazy`) fails to load (e.g., due to a network error)?

Accepted Answer

Correct Answer

Answer

Suspense automatically retries infinitely.

Answer

It will throw an error that crashes the component tree. You must wrap the Suspense boundary inside an `<ErrorBoundary>` to catch the failure and show a "Failed to load chunk" message.

Answer

It falls back to the previous page.

Answer

It ignores the component.

Question 6

Aside from route-level splitting, when else is it highly recommended to use `React.lazy`?

Accepted Answer

Correct Answer

Answer

For small buttons and icons.

Answer

For massive, rarely-used UI components like heavy Modal dialogs, rich-text editors, or massive data-visualization charts (e.g., Chart.js) that are hidden on initial load.

Answer

For the Redux store.

Answer

For basic text inputs.

Question 7

What is 'Tree Shaking'?

Accepted Answer

Correct Answer

Answer

A technique for traversing the DOM.

Answer

A dead-code elimination process performed by bundlers (like Webpack or Rollup/Vite) where unused exports from imported modules are stripped out of the final production bundle.

Answer

A CSS optimization technique.

Answer

A method of clearing Redux state.

Question 8

Why is the syntax `import { map } from 'lodash'` generally preferred over `import _ from 'lodash'` for performance?

Accepted Answer

Correct Answer

Answer

It runs faster in the browser.

Answer

It allows the bundler to effectively Tree Shake the library. Importing the entire `_` object often forces the bundler to include the entire library because it can't guarantee which methods you might use dynamically.

Answer

It is a strict React requirement.

Answer

It prevents naming collisions.

Question 9

What does a tool like `source-map-explorer` or `webpack-bundle-analyzer` do?

Accepted Answer

Correct Answer

Answer

It translates React code to vanilla JS.

Answer

It visually maps out the size of your final production bundle, showing you exactly which third-party libraries (e.g., moment.js) are bloating your app so you can remove or optimize them.

Answer

It debugs CSS layouts.

Answer

It profiles React rendering times.

Question 10

Why is the `moment.js` library infamous in React performance circles?

Accepted Answer

Correct Answer

Answer

It causes infinite renders.

Answer

Because it is massive, highly mutable, and includes locale data for every language on Earth by default, bloating bundles by 300kb+. Modern apps replace it with `date-fns`, `dayjs`, or native `Intl`.

Answer

It violates the Rules of Hooks.

Answer

It forces Server-Side Rendering.

Question 11

What is 'Vendor Chunking' in Webpack/Vite?

Accepted Answer

Correct Answer

Answer

Paying third-party vendors for faster CDN access.

Answer

Splitting third-party libraries (from `node_modules` like React, ReactDOM, Lodash) into a separate `vendor.js` chunk, apart from your application code `main.js`.

Answer

Minifying CSS.

Answer

Lazy loading images.

Question 12

How does Server-Side Rendering (SSR) via Next.js improve performance compared to a standard React Single Page Application (SPA)?

Accepted Answer

Correct Answer

Answer

It runs JavaScript 10x faster.

Answer

It dramatically improves the First Contentful Paint (FCP). The server sends fully populated HTML to the browser immediately, so the user sees the content instantly, rather than staring at a blank screen while waiting for the JS bundle to download and execute.

Answer

It eliminates the need for CSS.

Answer

It prevents all client-side re-renders.

Question 13

What is 'Hydration' in the context of React SSR?

Accepted Answer

Correct Answer

Answer

Downloading CSS files.

Answer

The process where React boots up on the client, traverses the server-rendered static HTML, and attaches event listeners (like `onClick`) and state to it, making the static page interactive.

Answer

Refreshing the browser.

Answer

Clearing the Redux store.

Question 14

How do React 18 Server Components (RSC) fundamentally change bundle size optimization?

Accepted Answer

Correct Answer

Answer

They automatically compress all images.

Answer

Server Components NEVER send their JavaScript to the browser. If a Server Component uses a massive markdown-parsing library, that library stays on the server, resulting in zero bytes added to the client bundle.

Answer

They replace Webpack entirely.

Answer

They execute on the GPU.

Question 15

What is the difference between `React.lazy()` and Next.js `next/dynamic`?

Accepted Answer

Correct Answer

Answer

There is no difference.

Answer

`next/dynamic` is a wrapper around `React.lazy` that natively supports Server-Side Rendering (SSR). It allows you to specify whether the dynamically imported component should be rendered on the server or strictly on the client.

Answer

`next/dynamic` is for CSS only.

Answer

`React.lazy` works faster.

Question 16

What is the 'preload' tag (e.g., `<link rel="preload" href="main.js" as="script">`) used for?

Accepted Answer

Correct Answer

Answer

To delay script execution.

Answer

To tell the browser to begin fetching critical assets (like fonts, hero images, or the main JS chunk) immediately at high priority, before the browser parser even discovers them in the DOM.

Answer

To cache data offline.

Answer

To prevent CORS errors.

Question 17

Why should you serve React applications with Gzip or Brotli compression enabled on your web server (e.g., Nginx)?

Accepted Answer

Correct Answer

Answer

To satisfy React's license requirements.

Answer

Compression algorithms drastically reduce the network payload size of text files (HTML, CSS, JS) by up to 70%, resulting in significantly faster download times for users on slow networks.

Answer

To encrypt the source code.

Answer

To enable Service Workers.

Question 18

What is 'Minification'?

Accepted Answer

Correct Answer

Answer

Making images smaller in pixels.

Answer

The process of removing all unnecessary characters (whitespace, comments, newlines) and shortening variable names (e.g., `let userAccount` becomes `let a`) in JS/CSS files without changing functionality.

Answer

Removing unused code.

Answer

Compressing with Gzip.

Question 19

If you look at a production React site and see an error like `Minified React error #130`, what happened?

Accepted Answer

Correct Answer

Answer

The browser crashed.

Answer

To save space, React production builds strip out all descriptive error messages and replace them with error codes. You must visit the provided URL in the console to decode the error.

Answer

The minifier broke the code.

Answer

A CSS file failed to load.

Question 20

What is the 'PRPL Pattern' introduced by Google for building fast web apps?

Accepted Answer

Correct Answer

Answer

Props, Rendering, Profiling, Lifecycles.

Answer

Push (or Preload) critical resources, Render the initial route ASAP, Pre-cache remaining routes (via Service Workers), and Lazy-load other routes and non-critical assets.

Answer

Parse, Read, Paint, Load.

Answer

Private, Restricted, Public, Local.

Question 21

Why has the React ecosystem largely migrated from Webpack to Vite?

Accepted Answer

Correct Answer

Answer

Webpack was deprecated.

Answer

Vite uses native ES Modules during development, meaning it doesn't have to bundle the entire app before the dev server starts. This results in instant server starts and lightning-fast Hot Module Replacement (HMR) regardless of app size.

Answer

Vite uses Redux internally.

Answer

Vite is written in React.

Question 22

What does 'Prefetching' a route mean in Next.js or React Router?

Accepted Answer

Correct Answer

Answer

Rendering the route on the server twice.

Answer

When a `<Link>` component scrolls into the user's viewport, the framework automatically downloads the JavaScript chunk for that route in the background. When the user clicks, the transition is instantaneous.

Answer

Downloading all routes on initial load.

Answer

Caching API requests.

Question 23

How can large third-party CSS libraries (like Bootstrap or Tailwind) impact React performance?

Accepted Answer

Correct Answer

Answer

They make the Virtual DOM slower.

Answer

Large CSS files delay the First Contentful Paint (FCP) because CSS is 'render-blocking'. The browser will not paint anything until all CSS is parsed. Using tools like PurgeCSS (built into Tailwind) to strip unused styles is critical.

Answer

They conflict with `useState`.

Answer

They cause memory leaks in Redux.

Question 24

What is 'Code Coverage' in Chrome DevTools?

Accepted Answer

Correct Answer

Answer

A tool that runs Jest tests.

Answer

A profiler tab that records the page load and shows you exactly what percentage of the downloaded JavaScript and CSS was actually executed. High unused percentages indicate a need for code splitting.

Answer

A tool that checks for HTML accessibility.

Answer

A tool that checks HTTPS security.

Question 25

Summary: Which optimization yields the most dramatic reduction in initial bundle size for a massive React application?

Accepted Answer

Correct Answer

Answer

Memoizing all functions with `useCallback`.

Answer

Implementing Route-based Code Splitting with `React.lazy` and `Suspense`.

Answer

Replacing all Classes with Hooks.

Answer

Using Context instead of Redux.

Academy

ReactJS Interview Prep - Performance Optimization (Part 2)