Frontend Developer Interview Questions

What should I focus on for a frontend interview?

What makes these frontend interviews different?

React, JavaScript, and HTML, CSS, and browser topics appeared more often in these frontend interviews than across interviews overall. Performance, code review and clean code, and UI and product design also appeared more often. Mid-level questions made up the largest share, alongside junior and senior questions.

Start by checking whether you can explain frontend choices, not just name tools. Can you say where state belongs in a large React app? Can you explain when you would use a TypeScript interface rather than a type alias?

Can I explain why a layout tool fits?

The Grid versus Flexbox question led the list, appearing in 7 of 123 interviews. Some reviewed answers missed why the layout's needs favored a particular tool.

Connect your choice to the layout:

• Does the design need shared alignment across rows and columns?
• Does it need items to flow in a single direction and wrap?
• Can you explain why those needs favor Grid or Flexbox?

Also check whether you can explain what semantic HTML means and how choosing the right element improves accessibility.

Which JavaScript and React explanations should I check?

Common questions covered the event loop, variable declarations, React basics, and state management. Use these checks to find gaps in your answers:

• Can you explain how var, let, and const differ?
• Can you explain the execution order of promises, async/await, timers, microtasks, and macrotasks?
• Can you explain how props and state differ and when you use each?
• Can you choose between local state, Context, and Redux for a large app, and explain your choice?
• Can you explain what React adds compared with plain JavaScript?

What should I be able to build?

Coding tasks appeared in 17 of 123 interviews. Can you build a React counter that increases each time you click a button? Can you implement a toggle switch?

For CSS, check whether you can write a theming system that supports multiple brands and both light and dark modes. These are tasks to try in code, not just explain aloud.

What should I check beyond components?

Architecture, testing, and delivery questions appeared in 53 of 123 interviews. Can you explain a framework choice and how you would test and debug the frontend?

For performance, can you explain how you would use profiling to investigate slow rendering? Can you discuss loading strategies, memory leaks, and rendering trade-offs when working with a large dataset?

What Frontend Developer interviews cover

The 20 most asked Frontend Developer questions

Counted by interview, not by mention: a question asked twice in one conversation counts once.

1. How do CSS Grid and Flexbox differ, and when would you choose each for a responsive layout?

   Asked in 7 of 123 interviews · last asked Aug 27 · Concept · Mid-level

   Show answer

   CSS Grid controls rows and columns together, while Flexbox arranges items along one main axis. I choose Grid for a dashboard where panels must align across rows and columns. I choose Flexbox for a navigation bar where links flow in a row and may wrap. Both support responsive layouts and can be used together.

   • Grid provides shared row and column tracks for alignment.
   • Flexbox handles spacing and flexible item sizes along a row or column.
   • Wrapped flex lines work independently; they do not share column tracks.
   • Use flexible sizing and media queries to adapt either layout to available space.

   What the interviewer checks: The interviewer checks whether you choose a layout based on alignment and wrapping needs, not just screen size.

   Common mistake (in 3 of 5 reviewed answers): Many answers forget that shared row-and-column alignment favors Grid, while single-axis flow and independent wrapping favor Flexbox.

   Other ways it was asked

   • “What is the difference between Flexbox and Grid?”
   • “What is the difference between CSS Flexbox and CSS Grid?”
   • “What is the difference between Flexbox and CSS Grid?”

2. What is the DOM?

   Asked in 6 of 123 interviews · last asked Sep 7 · Concept · Junior

   Show answer

   The DOM stands for Document Object Model. It is the browser’s tree of objects that represents a web page, including elements and text. JavaScript can use it to read or change the page’s content, structure, and styles, and respond to user events.

   • The DOM represents the current page, which can differ from the original HTML.
   • Elements and text are nodes in the tree.
   • React updates the browser’s DOM; React’s virtual DOM is a separate concept.

   What the interviewer checks: The interviewer is checking whether you understand how a browser represents a page and how JavaScript interacts with it.

   Other ways it was asked

   • “What is the DOM (Document Object Model)?”
   • “What does the DOM mean?”
   • “What does DOM stand for, and what is the DOM?”

3. How does JavaScript’s event loop order microtasks, macrotasks, promises, async/await, and timers?

   Asked in 6 of 123 interviews · last asked Oct 8 · Concept · Mid-level

   Show answer

   In browsers, synchronous code finishes first, then all queued microtasks run before the next task (macrotask). Promise callbacks and code after await run as microtasks once their promises settle. Timers schedule tasks after a minimum delay, not at an exact time.

   • Microtasks added while draining the queue also run before the next task.
   • An async function runs synchronously until its first await; await pauses that function, not the thread.
   • Browsers may render between tasks, after microtasks finish.
   • Node.js has additional scheduling rules, including process.nextTick and event loop phases.

   JavaScriptCopy

   console.log('sync');
   setTimeout(() => console.log('timer'), 0);
   Promise.resolve().then(() => console.log('promise'));
   async function run() {
     await null;
     console.log('await');
   }
   run();
   // Output: sync, promise, await, timer

   What the interviewer checks: The interviewer checks whether you can predict execution order and explain why asynchronous code does not run immediately.

   Other ways it was asked

   • “What is the event loop in JavaScript?”
   • “What is the event loop in JavaScript, and how does it work?”
   • “What is the JavaScript event loop, and how does it work?”

4. What is the difference between var, let, and const in JavaScript?

   Asked in 6 of 123 interviews · last asked Oct 3 · Concept · Junior

   Show answer

   var usually has function or global scope; let and const have block scope. Before declaration, var reads as undefined, while let and const throw a ReferenceError. var and let allow reassignment; const does not and normally requires an initial value. A const object's properties can still change.

   • All three are hoisted, but let and const cannot be accessed during their temporal dead zone.
   • var allows repeated var declarations in the same scope; let and const do not allow redeclaration.
   • const prevents reassignment, not changes to object properties or array contents.
   • Prefer const by default, use let when reassignment is needed, and avoid var in modern code.

   JavaScriptCopy

   const user = { name: "Ana" };
   user.name = "Sam"; // Allowed: changes the object.
   user = { name: "Lee" }; // Throws TypeError: reassigns the variable.

   What the interviewer checks: The interviewer is checking your understanding of scope, hoisting, reassignment, and object changes.

   Other ways it was asked

   • “In JavaScript, can you differentiate between let, var, and const?”
   • “What is the difference between var, let, and const?”
   • “In JavaScript, what's the difference between let, const, and var in terms of scope and hoisting?”

5. How do you choose between local state, Context, and stores like Redux in a large React application?

   Asked in 6 of 123 interviews · last asked Oct 20 · Scenario · Senior

   Show answer

   I keep state local unless other components need it, then lift it to their closest shared parent. I use Context for shared values like theme, and Redux Toolkit or Zustand for complex shared client state. I use React Query for server data and caching. I avoid putting unrelated or frequently changing values in one large context.

   • Keep state close to where it is used; app size alone does not require Redux.
   • Context value changes re-render consumers, so split contexts by purpose and update frequency.
   • Stores offer selective subscriptions; Redux Toolkit also supports structured updates and debugging.
   • React Query handles server data caching, refetching, and synchronization; it does not replace all client state.

   What the interviewer checks: The interviewer checks whether you choose state tools based on ownership, sharing, update frequency, and maintenance needs.

   Other ways it was asked

   • “What are the different ways to manage state in a React application?”
   • “What are the options for centralized state management in a React application?”
   • “If an application only has React Context and Redux available, which would you choose to start using, and why?”

6. What is React, why use it, and how does it differ from plain JavaScript?

   Asked in 6 of 123 interviews · last asked Sep 13 · Concept · Junior

   Show answer

   React is a JavaScript library for building user interfaces with reusable components. It helps manage complex screens by updating the UI when data changes. JavaScript is the programming language; React is a tool built with it. With plain JavaScript, you usually write DOM updates yourself; with React, you describe what the UI should show.

   • Components let you reuse UI code and split large screens into smaller parts.
   • Props pass data to components; state holds data that can change.
   • React handles DOM updates based on the UI you describe.
   • Plain JavaScript may be simpler for small pages with little interaction.

   What the interviewer checks: The interviewer checks whether you understand React’s purpose, its benefits, and its relationship to JavaScript.

   Other ways it was asked

   • “What is React?”
   • “What is React, and why is it used?”
   • “What is React, and what does it do?”

7. What are props and state in React, how do they differ, and when do you use them?

   Asked in 6 of 123 interviews · last asked Sep 28 · Concept · Junior

   Show answer

   Props are inputs passed to a component, usually by its parent. State is data a component remembers between renders and updates over time. Props are read-only for the receiving component; state changes through React update functions. Use props to pass data and callbacks, and state for changing values like form input or whether a menu is open.

   • Props can change when the parent passes new values.
   • Do not mutate props or state directly; use a state setter, such as one from useState.
   • State updates request a render; the current render still sees its existing state.
   • For shared state, move it to a common parent and pass values and callbacks through props.

   What the interviewer checks: The interviewer checks whether you understand data ownership, React updates, and when to use props or state.

   Other ways it was asked

   • “What are props in React?”
   • “What is the difference between state and props?”
   • “What is state in React, and how is it different from props?”

8. How do TypeScript interfaces and type aliases differ, and when would you use each?

   Asked in 5 of 123 interviews · last asked Jul 28 · Concept · Mid-level

   Show answer

   Interfaces describe object shapes, while type aliases can name object types, unions, tuples, and other types. Interfaces can merge across declarations; type aliases cannot. I use interfaces for object contracts that others may extend or augment. I use type aliases for unions, such as component props with different allowed states.

   • Both can describe component props and support optional properties, readonly properties, and generics.
   • Interfaces extend other object types; type aliases can combine types using intersections.
   • Repeated interface declarations merge, but conflicting property types cause errors.
   • Neither creates runtime checks; TypeScript types are removed when compiling.

   What the interviewer checks: The interviewer is checking whether you understand their overlap and can choose based on extension needs and data shapes.

   Other ways it was asked

   • “In TypeScript, what's the difference between type and interface, and when would you prefer one over the other in a UI component code base?”
   • “In TypeScript, what's the difference between type and interface, and when do you prefer one over the other?”
   • “In TypeScript, what's the difference between type and interface? When would you choose one over the other in a React component library?”

9. What is the virtual DOM in React?

   Asked in 5 of 123 interviews · last asked Aug 10 · Concept · Junior

   Show answer

   The virtual DOM is React’s in-memory description of the user interface. When state or props change, React creates a new description and compares it with the previous one, a process called reconciliation. React then applies the needed changes to the real DOM.

   • The virtual DOM is made of JavaScript objects, not actual browser DOM nodes.
   • Rendering React components does not always cause changes to the real DOM.
   • Stable keys help React match list items between renders.
   • The virtual DOM does not guarantee better performance than direct DOM updates.

   What the interviewer checks: The interviewer is checking whether you understand how React turns component updates into real DOM changes.

   Other ways it was asked

   • “What is the Virtual DOM?”
   • “What is the virtual DOM, and how does it work?”
   • “What is the virtual DOM in React? Also, explain the event loop in Node.js.”

10. What is semantic HTML, and how does choosing the right element improve accessibility?

    Asked in 4 of 123 interviews · last asked Aug 25 · Concept · Junior

    Show answer

    Semantic HTML means choosing elements for their meaning, not their appearance. I use a button for an action, a link for navigation, and headings to organize content. These choices help screen readers identify controls and page structure, while native controls provide built-in keyboard support.

    • Choose elements based on their purpose, then use CSS to control appearance.
    • Headings and landmarks, such as main and nav, help screen-reader users move through a page.
    • A clickable div does not automatically have a button’s role or keyboard behavior.
    • Semantic elements still need clear labels and a logical content order.

    What the interviewer checks: The interviewer checks whether you connect element choice to meaning, screen-reader navigation, and keyboard access.

    Other ways it was asked

    • “What is semantic HTML, and why is it important?”
    • “What are semantic HTML elements, and why do we even need them if we can build the UI without them?”
    • “What is semantic HTML, and why is it used?”

11. What is a JavaScript closure, and how does it retain variables after the outer function returns?

    Asked in 4 of 123 interviews · last asked Oct 12 · Concept · Junior

    Show answer

    A JavaScript closure is a function together with access to variables from the scope where it was created. If the outer function returns, a reachable inner function keeps access to those variables. It retains the variable bindings, not frozen copies, so their values can change.

    • Scope depends on where a function is created, not where it is called.
    • Closures can keep private state, such as a counter.
    • Separate calls to the outer function create separate sets of local variables.
    • Retained variables can be garbage-collected when nothing reachable needs them.

    JavaScriptCopy

    function makeCounter() {
      let count = 0;
      return function () {
        return ++count;
      };
    }
    const next = makeCounter();
    console.log(next()); // 1
    console.log(next()); // 2

    What the interviewer checks: The interviewer is checking whether you understand scope and how a returned function keeps access to changing state.

    Other ways it was asked

    • “What is a closure in JavaScript?”
    • “Could you explain closures in JavaScript and give an example of where they might be useful?”
    • “Can you explain the concept of closures in JavaScript?”

12. What is the difference between == and === in JavaScript, and when would you use each?

    Asked in 4 of 123 interviews · last asked Sep 29 · Concept · Junior

    Show answer

    === compares values without converting their types, so different types are never equal. == can convert types before comparing. I use === by default to avoid surprises, and == only when I want its conversion rules, such as checking for both null and undefined with value == null.

    • === does not convert types; == follows specific type conversion rules.
    • value == null matches both null and undefined, but not false, 0, or an empty string.
    • Both operators compare objects by identity, not by their contents.
    • NaN is not equal to itself with either operator.

    JavaScriptCopy

    console.log(5 == "5");          // true
    console.log(5 === "5");         // false
    console.log(null == undefined); // true
    console.log(null === undefined); // false

    What the interviewer checks: The interviewer is checking whether you understand type conversion and can choose comparisons that avoid unexpected results.

    Other ways it was asked

    • “What is the difference between == and === in JavaScript?”
    • “In JavaScript, what is the difference between == and ===, and when would you choose one over the other?”
    • “What is the difference between double equals (==) and triple equals (===)?”

13. How does hoisting work for var, let, and const, including the temporal dead zone?

    Asked in 4 of 123 interviews · last asked Aug 25 · Concept · Junior

    Show answer

    Hoisting means JavaScript creates bindings before code in their scope runs. `var` starts as `undefined`, so reading it before its declaration returns `undefined`. `let` and `const` stay uninitialized in the temporal dead zone, from scope entry until their declaration initializes them. Reading them there throws a `ReferenceError`.

    • `var` is function-, module-, or global-scoped; `let` and `const` are block-scoped.
    • Declarations are not physically moved, and assigned values are not available early.
    • Even `typeof` throws a `ReferenceError` for a variable in its temporal dead zone.

    JavaScriptCopy

    console.log(a); // undefined
    var a = 1;
    {
      console.log(b); // ReferenceError: b is in its temporal dead zone
      let b = 2; // Using const instead would cause the same error above
    }

    What the interviewer checks: The interviewer checks whether you can distinguish creating a binding from initializing it and predict access-before-declaration behavior.

    Other ways it was asked

    • “What is hoisting in JavaScript?”
    • “Tell me about hoisting in JavaScript.”
    • “How would you explain the practical difference between a hoisted var being initialized to undefined and the temporal dead zone for let and const?”

14. What causes React components to rerender, and how do you prevent unnecessary rerenders?

    Asked in 4 of 123 interviews · last asked Oct 3 · Concept · Mid-level

    Show answer

    React components rerender when their state changes, their parent renders, or context they read changes. Keep state local and profile slow updates before optimizing. Use React.memo to skip parent-driven renders when props are unchanged. Use useMemo and useCallback when stable values or functions help memoized children skip renders.

    • React.memo compares each prop using Object.is by default; new objects, arrays, and functions can defeat it.
    • Memoized components still rerender for their own state changes or changes to context they read.
    • Split contexts when unrelated updates cause many consumers to rerender.
    • A rerender does not always change the DOM; React updates only what needs changing.

    What the interviewer checks: The interviewer checks whether you understand render triggers and can apply memoization where it actually helps.

    Other ways it was asked

    • “How can you prevent unnecessary re-renders in React?”
    • “In React, what common patterns accidentally cause unnecessary re-renders, and how do you typically prevent them?”
    • “How do you prevent unnecessary re-renders in a React SPA when passing callbacks and derived data deep into a component tree?”

15. What are components in React?

    Asked in 4 of 123 interviews · last asked Sep 7 · Concept · Junior

    Show answer

    React components are reusable pieces of a user interface, such as buttons, forms, or menus. They receive inputs called props and describe what React should display. Components can be functions or classes, but functions are preferred for new code. They can also manage state to update the interface.

    • Components combine to build larger interfaces.
    • Props pass data into a component and should not be changed by that component.
    • Function components use Hooks to manage state; class components use class APIs.
    • Component names must start with a capital letter when used in JSX.

    JavaScriptCopy

    function Greeting({ name }) {
      return <h1>Hello, {name}!</h1>;
    }
    
    export default function App() {
      return <Greeting name="Sam" />;
    }

    What the interviewer checks: The interviewer is checking whether you understand reusable UI pieces, props, state, and the main component types.

    Other ways it was asked

    • “What is a component in React?”
    • “What are the different types of components in React?”
    • “What are React components?”

16. What is useReducer, and when would you choose it over useState?

    Asked in 4 of 123 interviews · last asked Jul 26 · Concept · Mid-level

    Show answer

    useReducer is a React Hook that manages state with a reducer function and dispatched actions. The reducer takes the current state and an action, then returns the next state. I choose it over useState when related values change together or update rules become complex. It keeps those rules in one place and easier to test.

    • Use useState for simple, independent values; useReducer adds structure but requires more code.
    • Keep reducers pure: do not mutate state or run side effects inside them.
    • As features grow, use clear action names and split unrelated state into separate reducers.

    What the interviewer checks: The interviewer checks whether you can choose a state Hook based on update complexity and keep state logic clear.

    Other ways it was asked

    • “What is useReducer in React?”
    • “What is the purpose of useReducer?”
    • “What is a reducer in React?”

17. How would you build a responsive layout matching desktop designs and reflowing on mobile without duplicating markup?

    Asked in 3 of 123 interviews · last asked Oct 8 · Scenario · Mid-level

    Show answer

    I would use one semantic HTML structure, with CSS Grid or Flexbox to change the layout across screen sizes. I would start with a simple mobile layout, then add media queries where the content needs more space. I would match desktop spacing and sizing, use flexible widths and images, and test between breakpoints for overflow.

    • Choose breakpoints based on where the content stops fitting, not specific device models.
    • Use Grid for rows and columns, and Flexbox for layout along one direction.
    • Keep the HTML in a logical reading order; visual reordering must not confuse keyboard users.
    • Include the viewport meta tag so mobile browsers use the device width.

    What the interviewer checks: The interviewer checks whether you can match a design while keeping one accessible structure that adapts smoothly.

    Other ways it was asked

    • “What CSS layout approach and breakpoint strategy would you use to match a desktop design closely and reflow it cleanly on mobile without duplicating markup?”
    • “How do you make a user interface work well across mobile and desktop screen sizes?”
    • “How would you make a web interface responsive across different screen sizes?”

18. What is the difference between controlled and uncontrolled components in React?

    Asked in 3 of 123 interviews · last asked Oct 8 · Concept · Junior

    Show answer

    A controlled input gets its value from React state and updates that state through an event handler. An uncontrolled input keeps its value in the DOM, and you read it with a ref or FormData. I use controlled inputs for live validation or linked fields, and uncontrolled inputs for simple forms read on submit.

    • Controlled inputs use value or checked, usually with onChange to update state.
    • Uncontrolled inputs use defaultValue or defaultChecked to set an initial value.
    • An input should not switch between controlled and uncontrolled during its lifetime.

    What the interviewer checks: The interviewer is checking whether you understand where input values live and how to choose a form approach.

    Other ways it was asked

    • “In React, can you explain the difference between a controlled and uncontrolled component, and when you choose one over the other?”
    • “What are controlled and uncontrolled components in React?”

19. Can you describe the difference between useEffect and useLayoutEffect, and when you would use each?

    Asked in 3 of 123 interviews · last asked Aug 10 · Concept · Mid-level

    Show answer

    useEffect runs after React updates the DOM, usually after the browser paints. Use it for subscriptions, timers, or fetching data. useLayoutEffect runs after DOM updates but before paint, and blocks painting while it runs. Use it to measure layout and update the UI before users see it, such as positioning a tooltip.

    • Prefer useEffect unless the work must happen before paint to avoid a visible flicker.
    • useEffect can run before paint, especially for updates caused by user interactions.
    • Heavy work in useLayoutEffect delays painting and can make the page feel slow.
    • Both support dependency arrays and cleanup functions.

    What the interviewer checks: The interviewer checks whether you understand effect timing and can choose the right hook without unnecessarily blocking rendering.

    Other ways it was asked

    • “What is the difference between useEffect and useLayoutEffect?”
    • “What are hooks, and what is the difference between useEffect and useLayoutEffect?”

20. What is JSX in React?

    Asked in 3 of 123 interviews · last asked Jul 28 · Concept · Junior

    Show answer

    JSX is a JavaScript syntax extension that lets us describe React UI with HTML-like markup. A build tool turns it into JavaScript calls that create React elements. It makes UI code easier to read and lets us use JavaScript expressions inside braces. React can also be used without JSX.

    • JSX looks like HTML, but it is JavaScript syntax, not an HTML string.
    • Braces let you include JavaScript expressions, such as variables or function calls.
    • JSX uses names like className instead of HTML’s class attribute.

    JavaScriptCopy

    function Greeting({ name }) {
      return <h1 className="greeting">Hello, {name}!</h1>;
    }

    What the interviewer checks: The interviewer is checking whether you understand what JSX is, how it runs, and why React uses it.

    Other ways it was asked

    • “What is JSX?”
    • “Why do we use JSX in React?”

Live coding round next? Coding mode in the MeetAssist desktop app solves the problem on your screen, with your phone as the remote.

Related interview questions

• JavaScript interview questions
• React interview questions
• HTML and CSS interview questions
• System Design interview questions
• Software Engineer interview questions
• Backend Developer interview questions
• Full Stack Developer interview questions
• Solutions Architect interview questions
• QA Engineer interview questions

How this list is made

Every question here was asked by a real interviewer in a real job interview that a candidate ran MeetAssist in. After the call, the interviewer's questions are pulled from the transcript. Practice sessions, tests, exams and anything that was not a job interview are dropped.

Questions are rewritten so they make sense on their own: names of people, employers and clients are removed, and speech-to-text mistakes are fixed. Small talk, logistics and questions about one candidate's own résumé are left out. Rephrasings of the same question are merged, and the count is the number of different interviews it came up in.

The interviews come from candidates who use MeetAssist, so they lean towards software, data and AI roles: the shares describe these interviews, not every Frontend Developer interview. Answers to the most asked questions are written and checked by an editor; a "common mistake" is shown only when reviews of real answers in these interviews show it, with the count.

123 interviews, 99 candidates, Oct 2025 to Oct 2026. Updated every month with new interviews.