Below is a set of detailed and in-depth answers to Frontend interview questions in 2026, compiled based on the latest technical standards of React 19 and Next.js 16.
I. JavaScript & TypeScript Core
1. Event Loop & Task Prioritization: Microtask queue (Promises, async/await, MutationObserver) has higher priority than Macrotask queue (setTimeout, I/O, events). Microtasks are executed immediately after the synchronous code and must be completely freed before the browser performs the next repaint step. "Starvation" occurs when a recursive Microtask thread continuously adds new tasks to the queue, causing Macrotasks and rendering to block indefinitely, resulting in a complete application crash.
2. Memory Management (Mark-and-Sweep & WeakMap): The "Mark-and-Sweep" mechanism starts from the root objects, marks all accessible objects as "alive" and reclaims the memory of unmarked objects. WeakMap and WeakSet hold weak references to the object, meaning they do not prevent the Garbage Collector from reclaiming memory if the object has no other strong references. This is a powerful tool for storing metadata for DOM nodes or caches without worrying about memory leaks.
3. Object Copying Mechanics:
shallow copy: Only copies first level properties, nested objects still share the same reference.
deep copy: Completely copies object structure.
Comparison:
structuredClone()is the fastest native Web API, supportingMap,Set, and circular references, but cannot copy functions or DOM nodes.JSON.parse(JSON.stringify())is very slow and loses special data (Date, RegExp).lodash.cloneDeephandles all cases but increases bundle size by about 17KB.
4. Reference Logic & Copy Algorithms: When assigning b = a, both variables point to the same memory location; Changing the attribute of b will directly change a. To copy nested objects, libraries like Lodash use a recursive algorithm combined with a map to keep track of processed objects, helping to avoid infinite loops when encountering circular references and preserving complex data types.
5. Promise.all vs Sequential Await: Use Promise.all when tasks do not depend on each other to execute in parallel, reducing the total waiting time to the time of the longest task. Promise.allSettled provides stability because it waits for all promises to finish (regardless of success or failure) and returns a detailed result array, avoiding a failed task crashing the entire chain like Promise.all.
6. Conditional Performance (Switch vs If-Else): switch is often faster than if-else when there are multiple conditions because the compiler (like V8) can create a "jump table" that allows direct access to the block of instructions to be executed (O(1)) instead of checking each branch sequentially (O(n)).
7. TypeScript Evolution (Unions vs Enum): In 2026, "String Literal Unions" ('A' | 'B') combined as const are preferred because they disappear completely after compilation (zero bundle size), while Enum generates redundant JavaScript code. Additionally, numeric enums lack type safety because they allow any numeric value to be assigned.
8. Advanced Typing (infer & satisfies): infer allows to extract data types from within a complex structure in conditional types (for example, get the return type of a function). The satisfies operator helps check whether an object matches an interface while preserving its literal data type, helping IntelliSense operate more accurately than casting with as.
II. React 19 Core & Hooks
9. useMemo remembers a function: Yes, useMemo can completely remember a function definition if that function is the return value of an internal calculation logic block. However, useCallback is a specialized shorthand syntax for this purpose.
10. useCallback use cases: In addition to re-render optimization, useCallback is important to ensure referential stability when passing functions as dependencies to other hooks (useEffect, useMemo) or preventing re-render for child components wrapped in React.memo.
11. Internal Hook Storage: React stores hook values as a Linked List attached to the memoizedState property of each Fiber node. Hook calling order is "sacred" because React relies on execution order to properly map the old state to the corresponding Hook; If you call Hook in the condition, this list will be indexed.
12. useMemo vs useEffect (Same logic, different results):
useMemo: Run synchronously during Render process. If there is impure (side effect) logic inside, it can slow down or freeze UI rendering.useEffect: Runs asynchronously after the interface is painted.For example: If the logic is to update a global variable,
useMemowill change that variable immediately upon rendering, whileuseEffectwill wait until the user sees it. The new interface has changed, leading to discrepancies in the timing of data display.
13. DOM Sync (useEffect vs useLayoutEffect): useLayoutEffect runs synchronously right after the DOM changes but before the browser paints. It is used to measure element size and update the UI immediately to avoid flickering, while useEffect (run after paint) will cause the user to see the old UI for a few milliseconds.
14. Function Component Lifecycle: Consists of 3 phases: Mount (add to DOM), Update (render), and Unmount (remove). useEffect runs after render; The clean-up function runs right before the component unmounts or before the effect runs again on the next render to clean up old resources.
15. Rules of Hooks: Do not call Hooks in loops or conditions because React manages state based on the calling order in Fiber's linked list. If the order changes, React cannot determine which state belongs to which hook.
16. useRef Mechanics (React 19): useRef returns a persistent object {current:...} that persists throughout the component's lifecycle without triggering a re-render when the value changes. React 19 allows ref to be passed as a regular prop to the child component, eliminating the need to use forwardRef.
17. Context API Optimization: Split Context (Context Splitting) to isolate states that change frequently, or wrap the child component in useMemo/React.memo to avoid re-rendering when the parent's Context value changes but the child component does not use it.
18. New React 19 Hooks:
-
if/else).
19. React Compiler Rules: The compiler automates memoization at the build-time level. Programmers must adhere to the purity (idempotency) and immutability (immutability) of props/state; If violated, Compiler will "skip" optimization for that component.
III. Next.js 16+ & Rendering Strategies
20. Hydration Mechanism: The server sends static HTML with initialization data in the