Frontend developer interview questions for remote roles

Technical questions

What you know and how you'd do the work, often with a live task or test.

1. What order do these log in: console.log('A'); setTimeout(() => console.log('B'), 0); Promise.resolve().then(() => console.log('C')); console.log('D');

   Why they ask

   It tests whether you understand the event loop, which explains many real async bugs.

   How to answer

   The answer is A, D, C, B. Synchronous code runs first (A, D). Promise callbacks go on the microtask queue, which empties before the next macrotask, so C runs next. The setTimeout callback is a macrotask and runs last, even with a 0ms delay.

2. What is a closure, and where have you used one?

   Why they ask

   Closures sit behind hooks, event handlers and most utility functions.

   How to answer

   A closure is a function that keeps access to variables from the scope where it was created, even after that scope has finished. Give a real use, such as a debounce function or a click handler that remembers an item ID. Mention stale closures in React effects as a common bug.

3. Write a debounce function.

   Why they ask

   A common live coding task that shows closures, timers and this handling in one go.

   How to answer

   Return a function that clears the previous timer and sets a new one on every call, so the wrapped function runs only after calls stop for wait milliseconds. Explain where you would use it, for example a search box that calls an API.

   Show a sample answerHide the sample answer

   ```js
   function debounce(fn, wait) {
   let timer;
   return function (...args) {
   clearTimeout(timer);
   timer = setTimeout(() => fn.apply(this, args), wait);
   };
   }
   ```
   I used this on a product search at my last job so we hit the API once after the user stopped typing for 300ms instead of on every keystroke.

4. When does a React component re-render?

   Why they ask

   Unnecessary re-renders cause most React performance problems.

   How to answer

   When its state changes, when its parent re-renders (by default, even if props did not change), or when a context it reads changes. Explain that React.memo, useMemo and useCallback can prevent some re-renders, but that you measure with the React DevTools Profiler before adding them.

5. What does the dependency array in useEffect do, and what goes wrong if you get it wrong?

   Why they ask

   Effects are where React bugs hide: infinite loops, stale data and race conditions.

   How to answer

   The effect runs after render when any value in the array has changed since the last render. An empty array runs it once after mount. Missing dependencies give you stale values; an object or function created during render as a dependency can cause it to run every time. Mention that many effects are not needed at all, for example derived state can be calculated during render.

6. Why does React need keys on list items, and why not use the array index?

   Why they ask

   A classic bug source in lists that can be reordered, filtered or edited.

   How to answer

   Keys let React match items between renders. If you use the index and items are inserted, removed or reordered, React can reuse the wrong component and its state, for example an input keeping the text of a different row. Use a stable ID from the data.

7. How would you fetch data in a component and avoid showing results from an old request?

   Why they ask

   Race conditions in search and filter screens are common in real apps.

   How to answer

   Explain that if a user types fast, an older slow response can arrive after a newer one. Use an AbortController to cancel the previous request in the effect's cleanup, or track the latest request ID. Mention that TanStack Query or SWR handle this, plus caching, for you.

8. Explain the difference between Flexbox and CSS Grid. When do you use each?

   Why they ask

   Layout is daily work and many candidates cannot explain their choices.

   How to answer

   Flexbox lays things out in one direction, which suits nav bars, button groups and centring. Grid controls rows and columns together, which suits page layouts and card grids. Say you often use both: Grid for the page, Flexbox inside components.

9. How do you make a custom dropdown accessible?

   Why they ask

   Accessibility questions separate careful developers from the rest, and UK and EU clients increasingly require it.

   How to answer

   First ask whether a native select would do. If not, use a button to open it, manage focus, support arrow keys, Enter and Escape, set the right ARIA roles and aria-expanded, and test with a keyboard and a screen reader such as NVDA or VoiceOver.

10. A page has poor Core Web Vitals. How do you improve it?

    Why they ask

    Performance affects SEO and conversions, which clients care about.

    How to answer

    Name the metrics and targets: LCP 2.5s or less, INP 200ms or less, CLS 0.1 or less. For LCP, optimise and preload the hero image and reduce render-blocking resources. For INP, break up long JavaScript tasks and reduce work in event handlers. For CLS, set width and height on images and reserve space for ads and embeds.

    Show a sample answerHide the sample answer

    On a client's landing page LCP was 4 seconds on mobile. The hero was a 1.8MB PNG. I converted it to AVIF with a WebP fallback, served responsive sizes with srcset and added fetchpriority="high". LCP dropped to about 1.8 seconds in PageSpeed Insights.

11. When would you use server-side rendering instead of client-side rendering?

    Why they ask

    Most remote jobs now use Next.js, so they want you to understand rendering choices.

    How to answer

    Server rendering helps when content must be indexed by search engines or needs to appear fast on slow devices, such as product pages. Client rendering suits highly interactive screens behind a login, such as dashboards. Static generation suits content that rarely changes. Mention the cost: SSR needs a server and can be slower to respond under load.

12. How do you decide where state should live?

    Why they ask

    Messy state is the biggest source of complexity in large React apps.

    How to answer

    Keep state as close as possible to where it is used, lift it up only when siblings need it, keep server data in a cache like TanStack Query, put URL-worthy state (filters, tabs) in the URL, and use context or a store like Zustand only for truly global state such as the logged-in user.

Behavioural questions

Past situations. Answer with a real example: what happened, what you did, what changed.

1. Tell me about a time you pushed back on a design or product decision.

   Why they ask

   They want to know you can advocate for users and quality without being difficult.

   How to answer

   Pick a real case, explain your reason (performance, accessibility, consistency), the evidence you used and the outcome. Show that you respected the final decision.

2. How do you review someone else's frontend pull request?

   Why they ask

   Code review is a big part of remote collaboration.

   How to answer

   Pull the branch and run it, check it against the design on mobile and desktop, try the keyboard, look for missing states, then read the code for clarity and tests. Keep comments specific and kind, and mark small things as optional.

Situational questions

Hypotheticals about problems you'd meet in the job.

1. The designer's mock-up does not show what happens on small screens or when data is empty. What do you do?

   Why they ask

   Remote teams lose days to rework when developers guess.

   How to answer

   Ask early in writing, with a screenshot and a suggested option, so the designer can reply quickly. If you must move on, build a sensible default and flag it in the pull request.

   Show a sample answerHide the sample answer

   I would post in the design thread: "The orders table has seven columns. On mobile I suggest showing order ID, status and amount, with the rest in an expandable row. Okay, or would you prefer cards?" That usually gets a yes or a quick sketch the same day.

2. What would you do if the API your feature needs is not ready yet?

   Why they ask

   Common on real teams. They want initiative.

   How to answer

   Agree the response shape with the backend developer, mock it with MSW or a local JSON file, build and test the UI against the mock, then switch when the API lands.

Remote work questions

How you'll work from Nigeria with a team elsewhere: hours, power, internet, communication.

1. How do you handle feedback when you are five hours ahead of the product team?

   Why they ask

   Frontend work involves a lot of visual feedback, which is slower across time zones.

   How to answer

   Share short Loom videos or preview deployment links before you finish your day so feedback is waiting in the morning. Batch questions. Agree on one overlap window for live reviews.

Remote interview tips

Questions people ask