9 Difficult React Interview Questions for Senior Frontend Engineers

Work and Career
, , ,
1

9 Difficult React Interview Questions for Senior Frontend Engineers

StackSnacker

1400Ă—1050 132 KB

Photo by Mimi Thian on Unsplash

If you are applying for the role of Senior Frontend Engineer, you should prepare for some rigorous React interview questions that will require you to dive into the details. For senior-level positions, interviewers will not just be looking for knowledge of components and hooks; they will assess your architectural understanding, performance considerations, and respect for React as a library, considering its internals.

Here are 9 difficult React questions that commonly come up in senior-level interviews, with a perspective on what interviewers really want to see in your answers.

1. How does React manage memory, and what are some common memory leaks to look out for?

React manages memory by automatically unmounting components and cleaning up resources through the component lifecycle. Memory leaks will occur if resources (internal references) are not appropriately disposed of. Common memory leaks include:

  • Lifecycles where a parent component is unable to remove a listener in the useEffect cleanup function.
  • Uncleared timers/intervals when unmounted.
  • Closures that hold state or props that have become stale, thus are unable to get garbage collected.
  • Incorrect use of refs, storing large amounts of data or DOM nodes indefinitely.

An interviewer will likely want to see that you take proactive control of side effects and understand how React’s virtual DOM use interacts with the real DOM under the hood.

2. What are React Portals, and when would you use them?

React Portals allow you to render children into a DOM node that exists outside of a parent component’s hierarchy. This is particularly useful for UI elements like:

  • Modal dialogs
  • Tooltips
  • Dropdowns

These components often need to escape the constraints of their parent container’s overflow and z-index. Using portals allows you to maintain your logical component hierarchies and logic in code while rendering the component in a completely different place in the real DOM.

3. How do you handle authentication and authorization in a React app?

Authentication and authorization usually involve handling access control throughout the app. An adequate senior-level answer would usually cover:

  • JWT-based authentications, storing these tokens securely, ideally in httpOnly cookies or sessionStorage.
  • Route guarding using React Router <PrivateRoute> or route wrappers to restrict access based on role or permission.
  • Using either context API or state management libraries like Redux (Zustand) to persist user state.
  • UI elements or navigation items are rendered conditionally based on user access levels or permissions

Bonus points if you can add information on token refreshes, logout flows, and third-party auth providers (e.g., OAuth).

4. What are Suspense and Concurrent Mode, and how do they improve performance?

React’s Suspense provides declarative handling of loading state for components, such as lazy-loaded components or data fetching.

Concurrent Mode (which is gradually being introduced with features such as useTransition and startTransition) allows the React rendering engine to pause and resume rendering as needed, prioritizing high-priority updates and allowing it to recover from interruptions.

Both of these features contribute to:

  • Smoother user experiences (for example, no jank during input or tab switch).
  • Predictable loading UI patterns.
  • Enhanced perceived performance by constructing rendered output in a chunked manner.

5. How do you avoid stale closures when using useEffect?

Stale closures happen when an effect interacts with stale props or state because the function captures the value at the time it was created. Things you can do include:

  • Correctly adding dependencies to the useEffect dependency array.
  • Using the functional update form setState to gain access to the most recent state.
  • Using useRef to persist mutable values between renders.
  • Memoizing callbacks by passing them down to child components or effects.

Understanding stale closures communicates that you have an understanding of how closures and re-renders work in React’s functional style of programming.

6. How would you implement an infinite scrolling list in React?

An infinite scroll component needs to load data in a staggered (incremental) way as a user scrolls. A more sophisticated solution would include:

  • Utilizing the Intersection Observer API to determine when a “sentinel” element is in view.
  • Coordinate pagination or cursors in the api calls.
  • Virtualizing the list using libraries like react-window or react-virtualized to only render the items that are visible, improving performance.
  • Debouncing or throttling the scroll events to avoid inundating the UI with updates.

This is a question of your capability to architect performing, scalable components with real-world data workloads.

7. What would be your method to persist state across page reloads in a React app?.

Depending on the description of “persisting state”, you could presume:

  • You would uselocalStorage or sessionStorage to persist the state across sessions or tabs.
  • Hydrate state from storage when opening the app, and possibly an instance with lazy initialization with useState.
  • Use Redux Persist or other libraries for stateful apps with complexity and mutable store structures.
  • Be aware of security and performance — don’t store sensitive data unencrypted in localStorage.

The interviewer wants to know not only what you would use but why and when it is appropriate.

8. How does React batch state updates, and when does it not batch state updates?

React batches several updates so it can issue a single render for performance reasons, specifically to optimize event handlers and lifecycle methods. But it does not batch updates in all cases.

  • When working with setTimeout and Promise. Then, our custom event listeners, state updates can happen one at a time.
  • React 18 brought us automatic batching even in async execution contexts, but it is important to understand when it is not going to batch updates for performance.

You will also want to be familiar with flushing updates synchronously withflushSync() and introducing transitions with startTransition() When you need more granular control over your updates.

9. How do you analyze and optimize render performance in React applications?

One of the key skills that senior engineers possess is the ability to optimize performance. Some high-level techniques to consider include:

  • Using the React Profiler to check for unnecessary renders.
  • Memoizing components using React.memo, useMemo, or useCallback.
  • Using Context or state management solutions instead of prop drilling.
  • Utilizing code-splitting and lazy-loading to code-split your bundles.
  • Virtualizing lists when they become too long.
  • Minimizing when your components will update, understanding when they update, and lastly, understanding why.

Bonus: Being able to demonstrate a performance issue you solved in a previous engineering project can be highly impactful in interviews.

Final Thoughts

These questions provide insight into the internals of React, architectural decisions, and performance issues. The second (and sometimes first) question asked once we’ve established React and performance seem to be areas where we can separate a senior frontend engineer from an intermediate developer.

If you’re getting ready for interviews, pay attention to the “why” of the “how”. Interviewers want to see the justification for your decisions by taking into consideration your real-world experience and all the tradeoffs.

What’s your most challenging React interview question?
Post it in the comments, and let’s talk about how to approach it.