ReactJS Interview Prep - Performance Optimization (Part 6)

Question 1

What is the 'React Compiler' (formerly known as React Forget)?

Accepted Answer

Correct Answer

Answer

A tool that compiles React to WebAssembly.

Answer

An upcoming build-time tool created by the React team that automatically analyzes and memoizes your React code. It aims to eliminate the need for developers to manually write `useMemo`, `useCallback`, and `React.memo`.

Answer

A tool that compiles CSS.

Answer

A replacement for Webpack.

Question 2

How does the React Compiler fundamentally change the mental model of React optimization?

Accepted Answer

Correct Answer

Answer

It forces developers to use Classes.

Answer

Developers will no longer need to obsess over reference equality, dependency arrays, and manual memoization. You write clean, standard Javascript, and the compiler handles the aggressive performance optimizations at build time.

Answer

It removes the Virtual DOM.

Answer

It requires GraphQL.

Question 3

Before the React Compiler becomes standard, what is the best rule of thumb for using `useMemo`?

Accepted Answer

Correct Answer

Answer

Use it on literally every variable.

Answer

Use it sparingly. Only use it for genuinely expensive mathematical calculations (like sorting 1000 items) or to preserve referential equality of an object/array that is passed into a `useEffect` dependency array.

Answer

Never use it.

Answer

Use it only in Redux.

Question 4

What is 'Dead Code Elimination'?

Accepted Answer

Correct Answer

Answer

Deleting files from the hard drive.

Answer

The process where a bundler (Webpack/Vite) analyzes your code, identifies functions or variables that are declared but NEVER called or exported, and completely removes them from the final production Javascript bundle.

Answer

Removing comments from code.

Answer

Catching errors in try/catch.

Question 5

How can you conditionally include debugging tools in your React app without bloating the production bundle?

Accepted Answer

Correct Answer

Answer

Put them in a `setTimeout`.

Answer

Use environment variables. E.g., `if (process.env.NODE_ENV !== 'production') { import('./DevTools') }`. The bundler will see that this `if` statement is FALSE in production, and permanently strip the import via Dead Code Elimination.

Answer

Hide them with CSS.

Answer

You cannot do this.

Question 6

What is the impact of using a massive, monolithic icon library (like `@mui/icons-material`) if configured incorrectly?

Accepted Answer

Correct Answer

Answer

It causes the screen to flash.

Answer

If you do a named import (`import { Delete } from '@mui/icons-material'`) without proper Babel/Webpack configurations, the bundler might pull the ENTIRE library of 10,000 SVGs into your bundle, instantly adding 3MB to your app.

Answer

It crashes Redux.

Answer

It forces Server-Side Rendering.

Question 7

What is 'Skeleton Loading' and why is it preferred over a spinning loading wheel?

Accepted Answer

Correct Answer

Answer

It is a Halloween theme.

Answer

Skeletons mimic the exact shape and layout of the text/images that are about to load. This drastically improves perceived performance and, crucially, prevents Cumulative Layout Shift (CLS) because the space is already reserved.

Answer

It uses less CPU.

Answer

It is required by React.

Question 8

What is the purpose of the `rel="noopener noreferrer"` attribute when opening links in a new tab (`target="_blank"`)?

Accepted Answer

Correct Answer

Answer

It speeds up React Router.

Answer

It is a critical security and performance fix. Without it, the new tab gains access to the `window.opener` object, which allows the new tab to hijack the original tab's URL (security) and share the same execution thread (performance lag).

Answer

It opens the link in incognito mode.

Answer

It prevents CSS inheritance.

Question 9

How do you test the performance of a React application on a low-end mobile device without actually buying one?

Accepted Answer

Correct Answer

Answer

It is impossible.

Answer

Use Chrome DevTools. Open the Network tab, set Throttling to 'Slow 3G'. Open the Performance tab, set CPU Throttling to '4x slowdown' or '6x slowdown'. Then profile the app.

Answer

Use Safari.

Answer

Reduce your computer's RAM.

Question 10

What is the fundamental difference between `useEffect` and `useLayoutEffect` regarding performance?

Accepted Answer

Correct Answer

Answer

There is no difference.

Answer

`useEffect` is asynchronous and runs AFTER the browser has painted the screen. `useLayoutEffect` is synchronous; it blocks the browser from painting until it finishes executing.

Answer

`useLayoutEffect` is for CSS only.

Answer

`useEffect` only runs once.

Question 11

Why is it important to define standard functions outside of the React component whenever possible?

Accepted Answer

Correct Answer

Answer

To allow Redux to access them.

Answer

If a function (like a math helper or a data formatter) does not depend on component props or state, moving it OUTSIDE the component ensures it is only created once in memory, rather than being destroyed and recreated on every single render.

Answer

To satisfy the linter.

Answer

To make them asynchronous.

Question 12

What is the 'stale-while-revalidate' (SWR) caching strategy?

Accepted Answer

Correct Answer

Answer

A Redux middleware.

Answer

A strategy where the UI immediately returns the cached (stale) data for instant loading, then simultaneously sends a background network request to fetch the fresh data (revalidate), and seamlessly swaps it in.

Answer

A Webpack plugin.

Answer

A method of clearing local storage.

Question 13

How can inline styles (`style={{ color: 'red' }}`) negatively impact performance in very large lists?

Accepted Answer

Correct Answer

Answer

They cause security vulnerabilities.

Answer

Like any inline object, it creates a new memory reference on every render, breaking `React.memo`. Furthermore, the browser has to parse and apply the inline styles to every individual DOM node, which is slower than matching a single CSS class.

Answer

They overwrite Redux state.

Answer

They are not supported in React 18.

Question 14

What is 'Garbage Collection' (GC) in Javascript, and how does React rendering affect it?

Accepted Answer

Correct Answer

Answer

Deleting files from the server.

Answer

The browser's automatic process of freeing up memory by destroying objects (like old Virtual DOM nodes, inline functions, and unused arrays) that are no longer referenced. If React creates millions of temporary objects per second, the GC has to pause the main thread to clean them up, causing stuttering.

Answer

Cleaning up CSS files.

Answer

Clearing the Redux history.

Question 15

What is the performance benefit of using an `<a href>` tag instead of an `onClick={() => router.push()}` for navigation in Next.js?

Accepted Answer

Correct Answer

Answer

There is no benefit.

Answer

Next.js `` (which renders an `` tag) can automatically prefetch the destination route in the background when it enters the viewport. An `onClick` handler cannot be statically analyzed for prefetching.

Answer

It prevents XSS.

Answer

It bypasses the React lifecycle.

Question 16

What does it mean to 'Memoize' a function in Computer Science?

Accepted Answer

Correct Answer

Answer

To write it to the hard drive.

Answer

To cache the return value of a pure function based on its input arguments. If the function is called again with the exact same arguments, it skips the calculation and returns the cached result instantly.

Answer

To convert the function to a string.

Answer

To run it on a separate thread.

Question 17

In a Redux application, why is a poorly written `useSelector` disastrous for performance?

Accepted Answer

Correct Answer

Answer

It deletes the Redux store.

Answer

If `useSelector(state => state.users.filter(u => u.active))` is used, it returns a NEW array reference every single time ANY action is dispatched to the store. This forces the component to re-render constantly.

Answer

It blocks API calls.

Answer

It requires Server-Side Rendering.

Question 18

What is the `Profiler` component in React?

Accepted Answer

Correct Answer

Answer

A component that tracks user analytics.

Answer

A built-in React component (`<Profiler id="App" onRender={callback}>`) that measures how often and how quickly a specific part of the component tree renders programmatically, allowing you to log performance metrics to a backend.

Answer

A tool for checking CSS.

Answer

A wrapper for Redux DevTools.

Question 19

How does React 18's Automatic Batching improve performance?

Accepted Answer

Correct Answer

Answer

It deletes duplicate code.

Answer

Before React 18, multiple state updates inside asynchronous code (like `setTimeout` or `fetch.then()`) would trigger multiple separate renders. React 18 automatically groups them together into a single, unified render pass.

Answer

It batches network requests.

Answer

It combines CSS files.

Question 20

What is the ultimate goal of all React performance optimization?

Accepted Answer

Correct Answer

Answer

To achieve a 0-byte bundle size.

Answer

To ensure the application feels instantaneous to the user. This means prioritizing the First Contentful Paint (FCP), minimizing main thread blocking (INP), and avoiding layout thrashing (CLS).

Answer

To remove all hooks.

Answer

To satisfy the linter.

Question 21

Why should you avoid using external libraries for simple tasks (like `is-even` or simple date formatting)?

Accepted Answer

Correct Answer

Answer

They are insecure.

Answer

Every dependency adds kilobytes to the bundle size, increases the risk of supply chain attacks, and increases parse/evaluate time. If a function can be written natively in 5 lines of vanilla JS, write it.

Answer

They conflict with Redux.

Answer

They violate React's license.

Question 22

What is the difference between parsing and executing Javascript in the browser?

Accepted Answer

Correct Answer

Answer

There is no difference.

Answer

Parsing is when the browser reads the text file and converts it into an Abstract Syntax Tree (AST). Executing is when the CPU actually runs the logic. Both take significant time. 1MB of JS is far heavier than 1MB of JPEG.

Answer

Parsing is for CSS, executing is for JS.

Answer

Parsing is on the server, executing is on the client.

Question 23

Congratulations on completing the Performance Optimization module! What is the golden rule of optimization?

Accepted Answer

Correct Answer

Answer

Optimize everything immediately.

Answer

Premature optimization is the root of all evil. Build the feature cleanly first. Use the Profiler and Lighthouse to MEASURE where the actual bottlenecks are, and then apply specific optimizations only where needed.

Answer

Never optimize anything.

Answer

Wrap everything in `React.memo`.

Question 24

How do you achieve 'Zero-Bundle-Size' React Components?

Accepted Answer

Correct Answer

Answer

By deleting the code.

Answer

By using React Server Components (RSC) in Next.js App Router. Components that only fetch data and render HTML can remain entirely on the server, sending zero Javascript to the browser.

Answer

By using CSS only.

Answer

By using Redux.

Question 25

Which metric is most directly impacted by a massive JavaScript bundle size?

Accepted Answer

Correct Answer

Answer

Cumulative Layout Shift (CLS).

Answer

Time to Interactive (TTI) and First Input Delay / INP. The browser cannot respond to user inputs while the main thread is locked up downloading and parsing massive Javascript files.

Answer

First Contentful Paint (FCP).

Answer

Time to First Byte (TTFB).

Academy

ReactJS Interview Prep - Performance Optimization (Part 6)