Explore React Server Components, Server Actions, the use() hook, React Compiler auto-memoisation, and form action patterns.
0 / 5 completed
1 / 5
What are React Server Components (RSC) and what constraint do they have?
RSC: unlike SSR where the whole component tree renders to HTML on the server and then hydrates, RSCs never hydrate — they render once on the server and their output is streamed to the client. They can import server-only code (database clients, secrets) with zero bundle cost, since their code is never sent to the browser.
2 / 5
What are React Server Actions and how are they invoked from a client component?
Server Actions:async function submitForm(data: FormData) { "use server"; await db.save(data); }. Pass the action to a <form action={submitForm}> or call it as a regular async function from a client component. React handles the network call, progressive enhancement, and optimistic updates automatically.
3 / 5
What does the use() hook in React 19 enable?
use() hook:const data = use(fetchData()) integrates with React's Suspense boundary. Unlike useEffect, use() can be called conditionally and inside loops. For Context, use(MyContext) replaces useContext(MyContext) with the added flexibility of conditional usage.
4 / 5
What is the React Compiler (previously React Forget) and what manual optimisation does it replace?
React Compiler: correctly applying useMemo and useCallback is error-prone and verbose. The compiler analyses component functions, identifies values that don't change between renders, and automatically wraps them. It requires components to follow the Rules of React (no mutation of props/state), which it also enforces.
5 / 5
How do React 19 form actions improve upon uncontrolled forms?
Form actions:useFormStatus() in a child component reads the pending state of the nearest parent form action, enabling submit buttons to show loading state without prop drilling. useOptimistic() allows instantly updating the UI with an assumed result while the server action is in flight.