What is the virtual DOM and how does React use it?

Explain the virtual DOM as an in-memory representation of the UI that React keeps to reduce direct DOM manipulation. Describe how React creates a tree of elements, compares changes, and applies the minimal set of updates to the real DOM to improve perceived performance. Give a short example of re-rendering a list item: when state changes, React updates the virtual DOM, diffs the previous and next trees, and then updates only the changed node in the real DOM. This approach avoids expensive full DOM repainting and is why small state updates are preferred over replacing large parts of the UI. Tip: When you answer, emphasize the concept of diffing and reconciliation rather than claiming performance improvements without context. Avoid saying React makes everything instant, explain trade-offs such as reconciliation cost during very large renders.

How do props differ from state in React?

Start by defining props as read-only inputs passed from parent to child, and state as local, mutable data managed within a component. Explain that props drive configuration and composition, while state represents data that changes over time and triggers re-renders when updated. Give an example where a parent passes a user object as props to a child display component, and the child manages a local isEditing state to toggle an edit form. That separation keeps components predictable and easier to test, because props come from outside and state is internal. Tip: Mention common mistakes, like trying to change props inside a child or lifting state only when multiple components need to share it. Explain how you decide whether to lift state up or keep it local.

What are React hooks and how should you use useEffect?

Describe hooks as functions that let you use state and lifecycle-like features in functional components, replacing many class-based patterns. Focus on useEffect as the hook for side effects, explaining its role for data fetching, subscriptions, and manual DOM updates, and how the dependency array controls when it runs. Give a practical useEffect example: fetch data on mount with useEffect(() => { fetchData(); }, []), and show cleanup for subscriptions using return () => unsubscribe();. Explain that you should include dependencies used inside the effect so React can re-run it when needed. Tip: Warn against common pitfalls like forgetting dependencies and creating infinite loops. If you need stable callbacks inside effects, mention using useCallback or moving logic into the effect to avoid stale closures.

How do you optimize performance in a React application?

Outline a few targeted strategies: memoize expensive renders with React.memo and useMemo, avoid unnecessary re-renders by passing stable props and keys, and virtualize long lists with libraries such as react-window. Also mention minimizing expensive work during render and deferring non-urgent updates. Provide an example where a parent re-renders frequently and causes child components to re-render; wrap the child in React.memo and ensure the parent passes stable functions with useCallback to prevent needless renders. For lists of thousands of items, explain using windowing so only visible rows mount in the DOM. Tip: Be honest about trade-offs, like added complexity from memoization and potential memory cost. Focus on measuring with profiling tools first, then apply targeted optimizations where you see real bottlenecks.

How does React reconciliation work and why are keys important?

Explain reconciliation as the process React uses to compare the previous virtual DOM tree with the next one to decide the minimal updates for the real DOM. Describe keys as stable identifiers for list items that help React match elements across renders and avoid recreating nodes unnecessarily. Give a concrete example: when rendering an array of todo items, provide a unique key such as todo.id so React can reorder or update specific items without losing input focus or state. If you use array index as a key and items are inserted or removed, React may reuse the wrong DOM nodes and create subtle bugs. Tip: Recommend always using stable, unique keys when ordering or editing lists. Note that keys should be stable across renders, and you should avoid generating new keys on each render with values like Math.random().

When should you use context API versus a state management library?

Start by explaining that Context is for passing data through the component tree without prop drilling, and it works best for low-frequency, app-wide concerns like theme or locale. In contrast, a state management library can offer structured patterns, middleware, and developer tools for complex, high-frequency updates or cross-cutting concerns. Give an example: use Context to pass a currentUser object and theme settings, but choose a library like Redux or Zustand if you need predictable state transitions, time-travel debugging, or many components reading and writing the same frequently changing data. Also mention hybrid approaches where Context is used for read-only config and a store for mutable data. Tip: Emphasize starting simple, using Context for small needs, and only introducing external libraries when complexity or performance demands them. Measure and iterate rather than preemptively adding infrastructure.

Explain higher-order components and render props and when to use them.

Define higher-order components (HOC) as functions that take a component and return an enhanced component, and render props as components that accept a function prop to share behavior. Both patterns are ways to share code between components before hooks were common, and they are still useful for certain composition needs. Provide a short example: a HOC withUser(Component) injects user data as props to wrapped components, while a render prop } /> gives the child a function to render with loaded data. With hooks now available, many behaviors are implemented as custom hooks, but HOCs and render props remain relevant when you need dynamic composition or to avoid changing component signatures. Tip: When answering, mention that custom hooks are often preferable for logic reuse in functional components, but explain why you might choose HOC or render prop for library compatibility or when you need to wrap class components.

How do you handle forms in React and validate input?

Describe controlled components where form inputs derive their value from state and uncontrolled components using refs for lower-overhead use cases. Explain that controlled forms give you explicit control over value and validation, while uncontrolled forms can be simpler for basic use cases or performance-sensitive large forms. Give a practical example using a controlled input: keep value in state, update on onChange, and validate onBlur or on submit with a function that checks constraints and sets error state. Mention form libraries such as React Hook Form for complex forms, which reduce re-renders and simplify integration with validation libraries like Yup. Tip: Advise starting with controlled inputs for clarity, and consider a library when you hit performance issues or need complex validation rules. Show awareness of UX, such as delaying validation messages until after the user has tried to submit or left a field.

How do you test React components?

Start with unit testing components using tools like Jest and React Testing Library to assert the rendered output and user interactions, focusing on behavior rather than implementation details. Use snapshot tests sparingly, and prefer interaction-based tests that simulate user events and assert DOM changes or function calls. Provide an example test: render a form component, fireEvent.change on inputs, then fireEvent.click on submit and assert that a mock submit handler was called with expected values. For more integrated checks, use Cypress or Playwright for end-to-end tests that cover routing, network requests, and user flows. Tip: Recommend testing public behavior and avoiding tests that tightly couple to internal implementation. Balance test coverage with maintenance costs, and rely on unit and E2E tests for different layers of confidence.

Tell me about a time you disagreed with a technical decision on your team.

Situation: On a recent project, the team decided to adopt a heavy client-side state library for a small admin dashboard where state changes were mostly local. Task: As a senior front-end engineer, you needed to voice concerns about complexity and propose an alternative. Action: You ran a short spike comparing the proposed library with a simpler Context plus local state approach, documented bundle size, mental overhead, and developer ergonomics, and presented the findings in a short meeting. Result: The team agreed to pilot the simpler approach, which reduced bundle size by a measurable amount and made onboarding faster for two new hires.

Describe a time you had to meet a tight deadline with limited resources.

Situation: A client requested a feature demo with only two weeks lead time and no additional engineers available. Task: You had to prioritize scope and ensure a reliable demo without compromising core quality. Action: You broke the feature into a minimum viable demo and stretch goals, focused on delivering the critical path first, and automated repetitive tasks such as data seeding to save time. Result: The demo shipped on time, stakeholders approved the approach, and the team scheduled the remaining enhancements in the next sprint with minimal rework.

Give an example of when you improved team collaboration on a project.

Situation: The front-end and back-end teams were releasing mismatched API contracts, causing repeated last-minute fixes before release. Task: You needed to reduce friction and improve release predictability. Action: You introduced a lightweight contract testing workflow using OpenAPI specs and set up a shared mock server for front-end development, plus a weekly sync to resolve ambiguous fields early. Result: Integration bugs dropped significantly, front-end developers could work independently against the mock, and the release cycle became smoother with fewer emergency fixes.

Explain the dependency array in useEffect and common gotchas.

Describe the dependency array as the list of values React watches to decide when to re-run an effect, with an empty array meaning run on mount and cleanup on unmount. Explain that missing dependencies cause stale closures and including too many can cause unnecessary re-runs and performance issues. Example: If you use a prop fetchUrl inside an effect, include fetchUrl in the array: useEffect(() => { fetchData(fetchUrl); }, [fetchUrl]);. If fetchData is defined inside the component, it should also be in the array or be memoized with useCallback to keep the effect stable. Pitfalls: Warn against silencing linter warnings without reason, and avoid creating inline functions or objects in render that change every render, causing effects to run repeatedly. When necessary, extract functions or memoize values to control effect execution.

When should you use useMemo and useCallback, and what are common mistakes?

Explain that useMemo memoizes computed values and useCallback memoizes functions, helping avoid expensive recalculations or unnecessary prop changes that trigger child re-renders. Clarify that these hooks are performance tools, not correctness tools, and they add mental overhead if overused. Example: Memoize a computed list: const filtered = useMemo(() => items.filter(x => x.active), [items]); and memoize handlers passed to memoized children: const onClick = useCallback(() => doThing(id), [id]);. These prevent re-running heavy computations and re-creating functions that would break shallow equality checks. Mistakes: Avoid wrapping everything with useMemo or useCallback, as unnecessary memoization can increase memory usage and make the code harder to read. Measure first, and prefer simpler code unless profiling shows a problem.

How do you implement code splitting and lazy loading in React?

Describe code splitting as breaking your bundle into smaller chunks so the browser only loads what is needed, and lazy loading as deferring component loading until it is rendered. Mention React.lazy and Suspense as the built-in primitives for lazy-loading components on the client side. Example: Use const LazyComponent = React.lazy(() => import('./Heavy')); then render inside }> . For route-based splitting, integrate lazy loading with your router so each route imports only its code when visited. Pitfalls: Note that server-side rendering requires additional setup for code-split chunks, and Suspense for data fetching is still experimental in some contexts. Test network behavior and provide good fallbacks for loading states.

How do you prevent memory leaks with subscriptions and async tasks in components?

Explain that you should clean up subscriptions and cancel or ignore async tasks in useEffect cleanup to prevent updates to unmounted components, which can lead to memory leaks or warnings. Use the effect cleanup function to unsubscribe event listeners and abort controllers for fetch requests when appropriate. Example: In useEffect return a cleanup: const controller = new AbortController(); fetch(url, { signal: controller.signal }).then(...); return () => controller.abort();. For subscriptions, return () => subscription.unsubscribe(); so resources are freed when the component unmounts. Common pitfalls: Avoid assuming that setState is safe after unmount, and do not rely on isMounted flags unless necessary. Prefer aborting requests or unsubscribing signals to keep logic clear and prevent hidden leaks.

What are common performance issues with lists and how do you solve them?

Start by identifying problems such as rendering very long lists, expensive item renders, and re-renders caused by changing references or keys. Solutions include windowing with libraries like react-window, memoizing list items, and ensuring stable keys and props to avoid unnecessary remounts. Example: Replace mapping thousands of items with a virtualized list component that only renders visible rows, and wrap complex renderers with React.memo so they only update when relevant props change. Also make sure functions passed as props are stable using useCallback when needed. Gotchas: Be careful with index keys and dynamic item insertion, which can cause visual glitches or lost input focus. Measure render times with React Profiler to find the real bottleneck before applying broad optimizations.

react Interview Questions: Complete Guide

React interview questions often cover core concepts, component patterns, hooks, performance, and testing. Expect a mix of whiteboard explanations, live coding, and behavioral questions that probe how you solve real problems. You can prepare by practicing short, clear explanations and a few focused code examples.

Common Interview Questions

Behavioral Questions (STAR Method)

STAR Method: Structure your answers using Situation, Task, Action, and Result to tell compelling stories about your experience.

Technical Questions

Questions to Ask the Interviewer

Show your interest by asking thoughtful questions

•What does success look like in this role after the first six months?
•Can you describe the team structure and how this role collaborates with backend and design?
•What are the biggest technical challenges the team is facing right now with the front-end codebase?
•How do you approach code reviews and what standards do you expect for quality and testing?
•What opportunities are there for professional growth, such as mentoring, training, or ownership of features?

Interview Preparation Tips

1
Practice explaining concepts out loud and time yourself so answers stay concise and clear.
2
Build small focused examples for 2-3 topics you expect to code live, such as managing state with hooks or rendering lists with keys.
3
Use the React DevTools and profiler in a short demo to show you can diagnose performance, and mention specific metrics you checked.
4
When answering, show trade-offs and reasoning rather than claiming one solution is always right; interviewers value practical judgment.

react Interview Questions: Complete Guide

Emily Thompson

Common Interview Questions

Behavioral Questions (STAR Method)

Technical Questions

Questions to Ask the Interviewer

Interview Preparation Tips

Related guides

react developer Interview Questions: Complete Guide

react native developer Interview Questions: Complete Guide

agile Interview Questions: Complete Guide

algorithms Interview Questions: Complete Guide

react Interview Questions: Complete Guide

Emily Thompson

Common Interview Questions

Q1What is the virtual DOM and how does React use it?

Q2How do props differ from state in React?

Q3What are React hooks and how should you use useEffect?

Q4How do you optimize performance in a React application?

Q5How does React reconciliation work and why are keys important?

Q6When should you use context API versus a state management library?

Q7Explain higher-order components and render props and when to use them.

Q8How do you handle forms in React and validate input?

Q9How do you test React components?

Behavioral Questions (STAR Method)

B1Tell me about a time you disagreed with a technical decision on your team.

B2Describe a time you had to meet a tight deadline with limited resources.

B3Give an example of when you improved team collaboration on a project.

Technical Questions

T1Explain the dependency array in useEffect and common gotchas.

T2When should you use useMemo and useCallback, and what are common mistakes?

T3How do you implement code splitting and lazy loading in React?

T4How do you prevent memory leaks with subscriptions and async tasks in components?

T5What are common performance issues with lists and how do you solve them?

Questions to Ask the Interviewer

Interview Preparation Tips

Related guides

react developer Interview Questions: Complete Guide

react native developer Interview Questions: Complete Guide

agile Interview Questions: Complete Guide

algorithms Interview Questions: Complete Guide