React 19

Question 1

Actions (React 19)

Answer 1

Functions that use transition-based logic to handle data mutations (like form submissions) automatically.Key Concepts: Async transitions, automatic pending states, and error handling.Evaluator Tip: In an audit, look for developers still using useState for isLoading or error in forms. In React 19, this should be handled via Actions to leverage built-in state management.

Question 2

useActionState

Answer 2

A hook (formerly useFormState) that manages the state of a Form Action, providing the latest result, a wrapper for the action, and a pending flag.Use Case: Managing server-side validation errors and “Submitting…” UI states without manual useEffect or state boilerplate.Evaluator Tip: If the AI writes a manual try/catch block to set a local loading state, suggest refactoring to useActionState for a more declarative and robust implementation.

Question 3

useFormStatus

Answer 3

A hook that allows child components to access the status (pending, data, method) of a parent <form> without prop drilling or Context.Key Concepts: Must be called from a component nested inside the <form>.Evaluator Tip: Look for “Button” components that take a loading prop. In modern React, a reusable SubmitButton should use useFormStatus to be self-aware of its parent form’s state.

Question 4

useOptimistic

Answer 4

A hook that allows the UI to update immediately based on an expected successful response, then automatically rolls back if the server action fails.Key Concepts: “Optimistic State” vs. “Confirmed State.”Evaluator Tip: Essential for “Senior” ratings in apps with social features (Like buttons, comments). AI often skips optimistic updates, leading to a “laggy” feel.

Question 5

The use API

Answer 5

A new way to read resources (Promises or Context) directly within the render function.Key Concepts: Unlike hooks, use can be called inside if statements or loops (conditionally).Evaluator Tip: Use this to replace useContext for cleaner code or to “unwrap” a promise passed from a Server Component without needing a useEffect.

Question 6

Reconciliation & Diffing

Answer 6

Definition: The recursive process where React compares the new Virtual DOM tree with the previous one to calculate the minimum set of changes for the Browser DOM.Evaluator Concept: React uses a “Heuristic O(n)” algorithm. It assumes components of different types will produce different trees and uses Keys to match children across renders.Use Case: Essential for justifying why key={index} is a “fail”—it breaks the heuristic and forces full re-renders of the list.

Question 7

Hydration vs. Streaming

Answer 7

Definition: Hydration is “watering” the static HTML with JavaScript event listeners. Streaming (via Suspense) sends HTML in chunks so the user sees content before the full JS bundle arrives.Evaluator Concept: Evaluators check if an AI uses Suspense boundaries effectively to prevent “All-or-Nothing” loading states.

Question 8

Actions & useActionState

Answer 8

Definition: A React 19 primitive for managing async transitions (like form submissions) with built-in pending and error states.Evaluator Concept: This replaces manual isLoading states. In an audit, if the AI is still using useEffect or manual try/catch to manage a form’s loading state, it is considered “Legacy” or “Low Quality.”

Question 9

The use API (React 19)

Answer 9

Definition: A multi-purpose API for unwrapping Promises or reading Context inside render.Evaluator Concept: Unlike hooks, use can be called inside loops or conditionals. This allows for cleaner code but requires a “Senior” understanding of Suspense boundaries to handle the “Pending” state of the unwrapped promise.