React Developer Interview Questions

Direct Answer

A closure is a function that retains access to its lexical scope even when executed outside that scope. Memory leaks occur when closures capture large outer variables inside stale callbacks.

Detailed Explanation

// Stale closure and memory leak example:
useEffect(() => {
    const handleScroll = () => {
        console.log("Current state:", count); // Closure captures 'count'
    };
    window.addEventListener("scroll", handleScroll);
    // Missing cleanup! window retains handleScroll, leaking count
}, []);

Common Interview Pitfalls

• Forgetting to return a cleanup function in `useEffect` that removes event listeners or cancels timeouts.
• Assuming that setting local variables to `null` inside a closure prevents garbage retention of the parent context.

Direct Answer

The Event Loop coordinates code execution. Microtasks (Promises) run immediately after the current task finishes, before macrotasks (setTimeout, UI render) run.

Detailed Explanation

console.log("1. Sync");
setTimeout(() => console.log("4. Macrotask"), 0);
Promise.resolve().then(() => console.log("3. Microtask"));
console.log("2. Sync");
// Outputs: 1. Sync -> 2. Sync -> 3. Microtask -> 4. Macrotask

Common Interview Pitfalls

• Expecting `setTimeout(fn, 0)` to execute before a Promise microtask resolve callback because it was declared earlier in code.
• Blocking the call stack with heavy computation, which stalls both microtask execution and browser UI rendering.

Direct Answer

Prototypal inheritance links objects directly using an internal prototype reference. ES6 classes are syntactic sugar over this prototype chain.

Detailed Explanation

function User(name) { this.name = name; }
User.prototype.sayHi = function() { return "Hi " + this.name; };

const john = new User("John");
console.log(john.sayHi()); // Resolves via prototype chain

Common Interview Pitfalls

• Assuming ES6 classes introduce true static type schemas at runtime in compiled JS files.
• Modifying shared prototype properties directly on native objects (`Object.prototype`) which pollutes the global scope.

Direct Answer

Utility types like Pick, Omit, and Partial modify existing interfaces. Mapped types iterate over keys to create new type definitions dynamically.

Detailed Explanation

type User = { id: string; name: string; email: string };
// Mapped Type: makes all properties read-only
type ReadonlyUser = { readonly [P in keyof User]: User[P] };

// Utility usage:
type UserSummary = Omit<User, "email">; // { id: string; name: string }

Common Interview Pitfalls

• Using `any` instead of Generics (`<T>`) for flexible utility functions, disabling compile-time type checking.
• Over-nesting utility types, making build error messages unreadable.

Direct Answer

Type narrowing refines loose types into specific types. Discriminated unions use a common string literal field to determine the active type.

Detailed Explanation

type NetworkState = 
    | { type: "loading" }
    | { type: "success"; data: string }
    | { type: "error"; message: string };

function render(state: NetworkState) {
    if (state.type === "success") {
        console.log(state.data); // Narrowed: data is safe to access
    }
}

Common Interview Pitfalls

• Using custom type predicates that return true but fail to guarantee type safety in runtime objects.
• Forgetting to add a default case checking for `never` type to ensure exhaustiveness in switch statements.

Direct Answer

CommonJS (`require`) imports modules synchronously at runtime. ES6 modules (`import`) are loaded statically at compile time, enabling tree shaking.

Detailed Explanation

// CommonJS (Dynamic)
if (condition) {
    const service = require("./service");
}

// ESM (Static, compile-time verified)
import { service } from "./service";

Common Interview Pitfalls

• Attempting to use CJS variables like `__dirname` or `__filename` directly in ESM files without importing utility equivalents.
• Mixing import and require syntaxes within a single project without proper transpiler configuration.

Direct Answer

The Virtual DOM represents UI states in memory. React Fiber is a rewrite of the reconciler that breaks work into chunks, allowing prioritization and async rendering.

Detailed Explanation

// React Fiber schedules this component update as a low-priority task
// if wrapped inside useTransition, keeping the UI interactive.
const [isPending, startTransition] = useTransition();
startTransition(() => {
    setHeavyListState(data);
});

Common Interview Pitfalls

• Assuming Virtual DOM makes React faster than vanilla JS (vanilla DOM manipulation is always faster; VDOM simply provides a declarative abstraction that minimizes slow, batch DOM writes).
• Modifying the real DOM directly using vanilla JS selectors while React is managing the same nodes, causing state mismatches.

Direct Answer

Concurrent rendering allows React to pause rendering to keep the browser responsive. Hydration is the process of attaching event listeners to static server-rendered HTML.

Detailed Explanation

// Suspense enables streaming hydration, hydrating components 
// as they load, instead of waiting for the entire bundle.
<Suspense fallback={<Spinner />}>
    <HeavyWidget />
</Suspense>

Common Interview Pitfalls

• Accessing `window` or `document` variables during initial render in SSR components, causing hydration mismatches (wrap in `useEffect` instead).
• Using random generators (like Math.random()) in component rendering, causing client and server HTML output mismatch.

Direct Answer

`componentDidMount` maps to `useEffect` with an empty array. `componentDidUpdate` maps to `useEffect` with dependency items. `componentWillUnmount` maps to the return cleanup function.

Detailed Explanation

// Functional component equivalent:
useEffect(() => {
    console.log("Mounted (componentDidMount)");
    return () => {
        console.log("Unmounting (componentWillUnmount)");
    };
}, []);

Common Interview Pitfalls

• Leaving the dependency array empty but referencing local variables inside `useEffect` (creates stale closures that never read updated state).
• Triggering state updates inside a `useEffect` without dependencies, causing infinite re-render loops.

Direct Answer

Keys give list items a stable identity, helping React identify which items changed, were added, or were removed. Using indices as keys causes render bugs and state leaks.

Detailed Explanation

// Correct list implementation:
<ul>
    {items.map((item) => (
        <li key={item.uuid}>{item.text}</li> // Stable unique key
    ))}
</ul>

Common Interview Pitfalls

• Using `Math.random()` or temporary timestamps as keys (generates new keys on every render, forcing complete DOM nodes deletion and recreation).
• Forgetting keys on wrapper tags when rendering lists of multiple elements.

Direct Answer

Portals render children into a different DOM node outside the parent hierarchy. However, events still bubble up through the virtual React tree.

Detailed Explanation

import { createPortal } from "react-dom";

function Modal({ children }) {
    // Renders under #modal-root DOM node
    return createPortal(
        <div className="modal">{children}</div>,
        document.getElementById("modal-root")
    );
}

Common Interview Pitfalls

• Assuming that because a portal is appended to `document.body`, event handlers on parent React components will not trigger (leads to unintended triggers if event propagation is not stopped).
• Failing to verify the existence of the container DOM node during SSR before calling `createPortal`.

Direct Answer

SSR generates HTML dynamically for every incoming request. SSG pre-builds static HTML pages at build time, offering faster loading speeds.

Detailed Explanation

// Next.js App Router default Server Component:
// Fetching with force-cache defaults to SSG behavior
async function Page() {
    const res = await fetch("https://api.example.com/data", { cache: "force-cache" });
    const data = await res.json();
    return <div>{data.title}</div>;
}

Common Interview Pitfalls

• Using SSR for static marketing pages, wasting server processing resources on request-time renders.
• Assuming client-side cookies or search params can be read statically during SSG build phases.

Direct Answer

React batches state updates within event handlers into a single render pass. Use functional updates (`setCount(c => c + 1)`) when updates depend on previous state.

Detailed Explanation

// State Batching Issue:
const handleAdd = () => {
    setCount(count + 1);
    setCount(count + 1); // Both reference same initial 'count'
}; // Result is count + 1

// Fix:
const handleAddCorrect = () => {
    setCount((prev) => prev + 1);
    setCount((prev) => prev + 1);
}; // Result is count + 2

Common Interview Pitfalls

• Calling state setters and immediately reading the state variable expecting it to show the updated value on the next line of code.
• Over-relying on `useEffect` to synchronize values that could be derived directly from existing state variables.

Direct Answer

The dependency array dictates when an effect re-runs. The cleanup function runs before the effect re-runs and during component unmount, preventing leaks.

Detailed Explanation

useEffect(() => {
    const socket = connect(url);
    return () => {
        socket.disconnect(); // Clean up on key change or unmount
    };
}, [url]);

Common Interview Pitfalls

• Omitting objects or functions from the dependency array while referencing them inside the effect, causing stale closure bugs.
• Declaring objects directly inside dependencies without memoization, triggering infinite re-run loops.

Direct Answer

`useMemo` caches the calculated *result* of a function. `useCallback` caches the *function definition* itself to prevent reference changes.

Detailed Explanation

// Caches calculation result
const sortedList = useMemo(() => expensiveSort(list), [list]);

// Caches function reference
const handleClick = useCallback(() => console.log("Clicked"), []);

Common Interview Pitfalls

• Wrapping every single function and variable in `useCallback`/`useMemo` without profiling (adds overhead; simple calculations are cheaper than hook dependency arrays comparison).
• Forgetting that `useCallback` dependencies must include all values referenced inside the function to prevent stale closure bugs.

Direct Answer

`useRef` persists mutable values across renders without triggering a re-render when the value changes. It is also used to reference DOM elements directly.

Detailed Explanation

const timerRef = useRef(null);

const startTimer = () => {
    timerRef.current = setInterval(() => console.log("Tick"), 1000);
};
const stopTimer = () => {
    clearInterval(timerRef.current); // Accesses persisted timer ID
};

Common Interview Pitfalls

• Reading or writing `ref.current` during the render phase (this can lead to inconsistent UI states; only interact with refs inside event handlers or `useEffect`).
• Expecting ref updates to instantly update JSX variables that depend on them (requires React state instead).

Direct Answer

Custom hooks are functions that call other React hooks. They encapsulate stateful logic, but every component that calls them gets completely isolated state.

Detailed Explanation

function useToggle(initialValue = false) {
    const [value, setValue] = useState(initialValue);
    const toggle = () => setValue((v) => !v);
    return [value, toggle];
}
// Usage: const [isOpen, toggleOpen] = useToggle();

Common Interview Pitfalls

• Failing to prefix custom hooks with `use`, which bypasses static analysis checks for hook execution safety rules.
• Assuming that custom hooks act as global state-sharing nodes across different component render contexts.

Direct Answer

Hooks must only be called at the top level of a component (never inside conditions/loops) and only from React functions, ensuring stable hook index allocations.

Detailed Explanation

// CRITICAL RULE ERROR:
if (condition) {
    useEffect(() => { ... }, []); // Can shift hook index!
}

// Correct implementation:
useEffect(() => {
    if (condition) { // Place conditions INSIDE the effect block instead
        // Run logic
    }
}, [condition]);

Common Interview Pitfalls

• Calling hooks inside helper functions declared outside the React component structure.
• Adding conditional returns above hook calls, which dynamically changes the total number of executed hooks.

Direct Answer

Context is a dependency injection tool that passes values down without prop drilling, causing all consumers to re-render. Redux is a state-management engine with selector-based re-renders.

Detailed Explanation

// Selector optimization: Only re-renders if user.role changes
const userRole = useSelector(state => state.auth.user.role);

Common Interview Pitfalls

• Using a single, massive Context for the entire application's state, causing complete application re-renders on minor input changes.
• Writing stateful mutation logic directly inside Context providers instead of keeping updates transactional.

Direct Answer

Prop drilling is passing data through multiple intermediate components that do not need it. Resolve using component composition or the Context API.

Detailed Explanation

// Composition solution:
function App() {
    const [user] = useState({ name: "Alice" });
    return <PageLayout userProfile={<UserProfile user={user} />} />;
} // PageLayout doesn't touch or forward the 'user' prop

Common Interview Pitfalls

• Instantly reaching for global state managers (like Redux) to solve simple prop forwarding that could be solved via composition.
• Passing entire state setters down the tree instead of event callbacks.

Direct Answer

Redux Toolkit eliminates Redux boilerplate by combining actions and reducers in slices, using Immer for immutable updates, and integrating thunks by default.

Detailed Explanation

import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
    name: "counter",
    initialState: { value: 0 },
    reducers: {
        increment: (state) => { state.value += 1; } // Safe mutable-like code via Immer
    }
});

Common Interview Pitfalls

• Mutating state outside of RTK slices (Immer is only active inside createSlice reducers; raw mutations elsewhere cause silent state update bugs).
• Declaring state fields that hold non-serializable objects (like class instances, maps, or functions) in store configurations.

Direct Answer

Zustand is a simple, flux-based external store using hooks with minimal boilerplate. Recoil is an atomic state manager that binds to the React virtual tree.

Detailed Explanation

// Zustand Store Example:
import { create } from "zustand";
const useStore = create((set) => ({
    bears: 0,
    increase: () => set((state) => ({ bears: state.bears + 1 }))
}));

Common Interview Pitfalls

• Calling Zustand state getters inside components without passing a selector function, causing the component to re-render on *any* store state change.
• Failing to isolate concerns by creating a single global Recoil root for disconnected features.

Direct Answer

Read URL values using `useSearchParams`. Update URL state using `useRouter` and `usePathname` by passing search parameters to router push methods.

Detailed Explanation

const searchParams = useSearchParams();
const router = useRouter();
const pathname = usePathname();

const updateFilter = (value) => {
    const params = new URLSearchParams(searchParams);
    params.set("filter", value);
    router.replace(`${pathname}?${params.toString()}`, { scroll: false });
};

Common Interview Pitfalls

• Synchronizing state variables manually in both local `useState` AND the URL, causing race conditions and out-of-sync UI updates (use the URL as the *only* source instead).
• Forgetting to wrap search parameter reader components inside a `<Suspense>` block, causing hydration failures during build compilation.

Direct Answer

Optimistic UI updates the interface instantly with the expected success state before the server API responds, rolling back if the request fails.

Detailed Explanation

// React 19 provides useOptimistic specifically for this:
const [optimisticLikes, setOptimisticLikes] = useOptimistic(
    likes,
    (state, newLikeCount) => newLikeCount
);

Common Interview Pitfalls

• Failing to handle API failure cases, leaving the user with an out-of-sync UI state that doesn't match the server database.
• Using optimistic updates for high-security transactions (like checkouts) where server confirmation is mandatory before progression.

Direct Answer

`React.memo` is a higher-order component that skips re-rendering a component if its props are unchanged (using shallow comparison).

Detailed Explanation

const ProductCard = React.memo(function Card({ product }) {
    return <div>{product.name}</div>;
}, (prev, next) => prev.product.id === next.product.id);

Common Interview Pitfalls

• Wrapping components that receive children props in `React.memo` (inline children are recreated as new objects on every render, making props comparison fail).
• Using memoization on cheap-to-render components, adding memory comparison overhead without saving CPU cycles.

Direct Answer

List virtualization renders only the DOM nodes currently visible in the browser viewport, replacing off-screen items with simulated padding.

Detailed Explanation

// Using a virtualized list container pattern
// Only visible items are rendered within the container height
<VirtualList
    height={500}
    itemCount={10000}
    itemSize={50}
    renderItem={({ index, style }) => <Row index={index} style={style} />}
/>

Common Interview Pitfalls

• Rendering large table lists without virtualization, causing browser layout freezes on search filter inputs.
• Configuring dynamic row heights in virtual lists without caching previous row dimensions, causing scrollbar flickering.

Direct Answer

Code splitting splits JS bundles into smaller chunks. `React.lazy` imports components dynamically, loading them on demand inside Suspense boundaries.

Detailed Explanation

import React, { Suspense, lazy } from "react";
const HeavyChart = lazy(() => import("./HeavyChart"));

function Dashboard() {
    return (
        <Suspense fallback={<div>Loading Chart...</div>}>
            <HeavyChart />
        </Suspense>
    );
}

Common Interview Pitfalls

• Declaring `React.lazy` imports inside a component render loop (causes the component chunk to be re-downloaded and re-initialized on every render).
• Forgetting to define a fallback prop on the `<Suspense>` component, throwing a compilation validation error.

Direct Answer

`user-event` simulates full user interactions (e.g., typing triggering focus/keydown events) rather than firing raw, isolated DOM events via `fireEvent`.

Detailed Explanation

import userEvent from "@testing-library/user-event";

test("submits form", async () => {
    render(<LoginForm />);
    const user = userEvent.setup();
    await user.type(screen.getByLabelText(/email/i), "test@example.com"); // Simulates realistic typing
    await user.click(screen.getByRole("button", { name: /submit/i }));
});

Common Interview Pitfalls

• Forgetting that `user-event` methods are asynchronous and must be awaited.
• Invoking `userEvent` methods without initializing `userEvent.setup()` at the start of the test case.

Direct Answer

MSW intercepts network requests at the browser/node level using service workers or request interception, returning mocked responses instead of mocking fetch methods.

Detailed Explanation

import { setupServer } from "msw/node";
import { http, HttpResponse } from "msw";

const server = setupServer(
    http.get("/api/users", () => HttpResponse.json([{ id: 1, name: "Alice" }]))
);
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

Common Interview Pitfalls

• Forgetting to call `server.resetHandlers()` between tests, causing mocks configurations to leak into other test suites.
• Declaring relative API paths in MSW handlers that do not match the complete mock server fetch origin.

Direct Answer

Access Storage APIs inside `useEffect` or `useSyncExternalStore`. Listen to the `storage` event to synchronize changes across different tabs.

Detailed Explanation

// Sync State across tabs
useEffect(() => {
    const handleSync = (event) => {
        if (event.key === "theme") {
            setTheme(event.newValue);
        }
    };
    window.addEventListener("storage", handleSync);
    return () => window.removeEventListener("storage", handleSync);
}, []);

Common Interview Pitfalls

• Reading from `localStorage` directly in the component initializer in Next.js, causing instant hydration errors.
• Assuming the `storage` event fires in the same tab that triggered the write operation (it only fires in sibling tab frames).