// Server Component (server-only)
async function ProductPage({ productId }) {
const product = await fetchProduct(productId); // Server-side fetch
return <ProductDetails product={product} />;
}// Before: Manual memoization
const data = useMemo(() => computeExpensiveValue(a, b), [a, b]);
// After: React Compiler handles it automatically
const data = computeExpensiveValue(a, b);
function UpdateProfile() {
const [isPending, startTransition] = useTransition();
const handleSubmit = async (formData) => {
startTransition(async () => {
const error = await updateProfile(formData);
if (error) throw new Error(error);
redirect("/profile");
});
};
return (
<form action={handleSubmit}>
<input name="username" />
<button disabled={isPending}>Save</button>
</form>
);
}
<Suspense fallback={<LoadingSpinner />}>
<CommentsSection postId={postId} /> // Async data fetch
</Suspense>
function Input({ ref, placeholder }) {
return <input ref={ref} placeholder={placeholder} />;
}
Error: Hydration failed because server rendered "5 items" vs client "10 items".
const [optimisticLikes, addLike] = useOptimistic(currentLikes, (state, newLike) => [
...state,
{ id: newLike.id, pending: true }
]);