Gap fill

Question 1

Why is useFormStatus preferred over useActionState for a Submit button component?

Answer 1

Senior Justification: useFormStatus is a specialized hook that allows child components to access the pending state of a parent <form> without prop drilling. It is ideal for nested UI elements like Submit buttons. useActionState is used in the component where the Action is defined to manage the data, error, and pending state of that specific action.

Question 2

When should you use findByText instead of getByText in React Testing Library?

Answer 2

Senior Justification: findBy queries return a Promise and use waitFor under the hood. They are essential for Async testing when an element appears only after an API call or a state delay. getBy will fail immediately if the element is not in the DOM at the exact moment of execution.

Question 3

Explain the performance danger of using key={Math.random()} during a render.

Answer 3

Senior Justification: This forces a Reconciliation Failure. Because the key changes every render, React cannot track the component’s identity, causing it to unmount and re-mount the entire subtree instead of updating it. This results in DOM Thrashing and the loss of local component state (like input focus).

Question 4

What is the ‘Senior’ approach to handling unvalidated API responses in TypeScript?

Answer 4

Senior Justification: Use the unknown type. Unlike any, unknown is type-safe because it forces the developer to perform Type Guarding or narrowing (e.g., if (typeof data === 'string')) before interacting with the value, preventing runtime crashes.

Question 5

In React 19, what is the primary benefit of the ‘use’ API for Promises?

Answer 5

Senior Justification: The use API can be called conditionally (inside if blocks or loops), which is impossible for standard hooks. It allows for a more declarative way to unwrap Promises and integrate with Suspense for better loading state management.

Question 6

Why is role='alert' used for toast notifications?

Answer 6

Senior Justification: It provides an Accessible Rich Internet Application (ARIA) signal to screen readers to interrupt current speech and announce the update immediately. This ensures time-sensitive information is communicated to users with visual impairments.

Question 7

Explain the difference between ?? and || when setting default values.

Answer 7

Senior Justification: ?? (Nullish Coalescing) only falls back if the value is strictly null or undefined. || (OR) falls back for any falsy value, including 0, false, and \"\". Using || can accidentally overwrite valid inputs like a count of 0.

Question 8

What is ‘Progressive Enhancement’ in the context of React 19 Forms?

Answer 8

Senior Justification: By using the action prop on a <form>, the form can remain functional even before the JavaScript bundle has fully hydrated. This ensures users on slow connections or with disabled JS can still perform basic interactions, a hallmark of senior-level architectural planning.

Question 9

What is ‘Hydration’ in a React application?

Answer 9

Senior Justification: Hydration is the process where React attaches event listeners to the static HTML sent by the server. A ‘Hydration Mismatch’ occurs if the server-rendered HTML differs from the first client-side render (e.g., using new Date() or Math.random() in the render body), leading to performance lag and visual glitches.

Question 10

Why is unknown preferred over any for API responses?

Answer 10

Senior Justification: unknown is the type-safe sibling of any. It requires the developer to perform Type Narrowing (using typeof or a Type Guard) before accessing properties. This ensures the compiler catches potential runtime errors that any would ignore.

Question 11

What is a ‘Discriminated Union’ in TypeScript?

Answer 11

Senior Justification: It is a pattern where several types share a common string literal property (a ‘discriminant’). This allows TypeScript to perform Exhaustiveness Checking in switch statements, ensuring every possible logic path (like loading, error, and success) is handled safely.

Question 12

Explain ‘Composition Over Inheritance’ in React.

Answer 12

Senior Justification: It is the practice of building complex components by nesting simpler, specialized components (using props like children). This avoids the ‘God Object’ anti-pattern and results in code that is more modular, easier to test, and highly reusable.

Question 13

What is the ‘Senior’ critique of a <div> with an onClick but no onKeyDown?

Answer 13

Senior Justification: This violates Web Content Accessibility Guidelines (WCAG). Interactive elements must be keyboard-accessible. The optimal fix is using a semantic <button>, which provides native ‘Enter’/’Space’ support and focus management.

Question 14

In React 19, how are metadata tags (like <title>) handled?</title>

Answer 14

Senior Justification: React 19 supports rendering metadata tags directly within components. It automatically hoists these tags to the document <head>, ensuring SEO and social sharing tags are managed declaratively without needing external libraries like ‘React Helmet’.

Question 15

What is ‘Cognitive Complexity’ in a code review?

Answer 15

Senior Justification: It is a measure of how difficult a component is to understand for a human developer. A 500-line component with deeply nested conditionals has high cognitive complexity. Senior evaluators recommend breaking these into smaller, single-responsibility hooks or sub-components.

Question 16

When would you use the satisfies operator?

Answer 16

Senior Justification: Use satisfies when you want to validate that an object matches a type but want to preserve the specific literal types of its properties (e.g., ensuring a ‘color’ property is specifically ‘red’ rather than just a general ‘string’).

Question 17

What is the purpose of userEvent.setup() in Vitest/Jest?

Answer 17

Senior Justification: Introduced in user-event v14, .setup() initializes a session that correctly simulates how a browser handles events concurrently. Calling it before render() ensures that focus and keyboard state are tracked accurately across the entire test.

Question 18

Why is a ‘Pure Function’ important in React state management?

Answer 18

Senior Justification: Pure functions return the same output for the same input and have no side effects. This predictability is what allows React to perform memoization and efficient diffing. Impure functions in a render body can lead to unpredictable UI bugs and infinite loops.

Question 19

What is the danger of ‘DOM Thrashing’?

Answer 19

Senior Justification: DOM Thrashing occurs when code repeatedly reads from and writes to the DOM in quick succession (often caused by unstable keys or excessive re-renders). This forces the browser to constantly recalculate layout, leading to ‘jank’ and poor frame rates.

Question 20

What does ‘Exhaustiveness Checking’ mean in TypeScript?

Answer 20

Senior Justification: It is a compile-time check (often using the never type) that ensures all possible members of a union have been handled in a switch or if/else block. This prevents ‘Uncaught TypeError’ when a new type is added to a union but forgotten in the UI logic.