← All roles
Interview practice

Frontend Developer (React)

2–5 years · Mid — React · JavaScript / TypeScript · State management · CSS · Performance · Accessibility

0–2 years 2–5 years 5–8 years 8+ years
scenario Debugging 1 of 6
You receive reports that a particular feature of your React application is throwing errors for some users but not for others. What steps do you take in the initial investigation?
What a strong answer covers

Checks the browser console for error messages; reproduces the error on various browsers and devices; examines the state and props during the error occurrence; uses error boundaries to catch and log errors; identifies user-specific conditions that may lead to the issue.

The follow-up you would get

You find that the error is due to a specific user configuration. How do you ensure this doesn’t happen again in future releases?

Could you have answered that?
technical Rendering 2 of 6
You notice that a large list of items in your React application is causing a significant delay in rendering. What strategies can you employ to improve the rendering performance?
What a strong answer covers

Implements windowing or virtualisation techniques (e.g., react-window or react-virtualized); checks for unnecessary re-renders by profiling the component; breaks the list into smaller components; considers lazy loading data or components as needed.

The follow-up you would get

If rendering time is still excessive, what further optimisations could you explore?

Could you have answered that?
scenario State Management 3 of 6
A new feature requires you to integrate a third-party state management library into your existing React application. However, the integration is causing conflicts with your current state logic. What do you do in the first half hour?
What a strong answer covers

Identifies the conflicting state variables and logic; checks compatibility of the new library with existing state management; isolates the feature in a separate branch; begins to refactor state logic to accommodate the new library; considers using context or reducers for efficient state handling.

The follow-up you would get

The conflicts persist even after refactoring. What measures do you take to evaluate whether to stick with the new library or revert to the old state management solution?

Could you have answered that?
technical Accessibility 4 of 6
You receive feedback that a new feature in your React app is difficult to navigate for keyboard users. What immediate steps do you take to improve accessibility?
What a strong answer covers

Tests keyboard navigation through the feature; ensures proper semantic HTML elements are used; adds ARIA roles where appropriate; reviews focus management to ensure logical ordering; considers implementing tabIndex for custom components.

The follow-up you would get

How do you ensure that your changes accommodate screen reader users?

Could you have answered that?
technical Performance 5 of 6
A React application has a component that re-renders every time its parent renders, causing a noticeable performance drop when the parent updates frequently. What steps do you take to diagnose and resolve this issue?
What a strong answer covers

Identifies the component's props and state to find unnecessary updates; checks if shouldComponentUpdate or React.memo can be applied; considers using useCallback or useMemo to memoise functions/values; profiles the component using React DevTools to confirm the cause of re-renders.

The follow-up you would get

What additional measures can you implement if the problem persists after memoising?

Could you have answered that?
ownership A disagreement with a team member 6 of 6
Describe a time when you disagreed with a colleague about a technical approach in a project. How did you resolve it?
What a strong answer covers

Identifies the specific disagreement and its context; explains the rationale behind each perspective; describes the method used to facilitate a discussion or reach a compromise; details the eventual outcome and any lessons learned; avoids attributing blame.

The follow-up you would get

What would you do differently in a similar situation now?

Could you have answered that?
That is this set.

Load six more — you will get questions you have not seen first.

Give me six more →

Say your answer out loud before revealing. Reading the answer first feels like learning and is not.