## The End of `useEffect` Data Mutations For years, React developers wrote boilerplate state variables (`isLoading`, `error`, `data`) alongside `useEffect` hooks to manage form submissions and like buttons. React 19 revolutionizes this workflow by treating asynchronous state transitions as first-class citizens. ### 1. Zero-Flicker Optimistic UI When a reader clicks the like button or bookmarks a post, the interface should respond within a single animation frame (16ms), long before the server confirms the mutation: ```tsx "use client"; import { useOptimistic, useTransition } from "react"; import { togglePostReaction } from "@/actions/social-actions"; export function LikeButton({ postId, initialLikes }: { postId: number; initialLikes: number }) { const [isPending, startTransition] = useTransition(); const [likes, setOptimisticLikes] = useOptimistic( initialLikes, (current, delta: number) => current + delta ); const handleLike = () => { startTransition(async () => { setOptimisticLikes(1); await togglePostReaction(postId, "like"); }); }; return ( <button onClick={handleLike} className="flex items-center gap-2 font-medium"> <span>❤️</span> <span>{likes}</span> </button> ); } ``` ### 2. Server Functions as Direct RPC Endpoints Server actions eliminate the need for manual API route boilerplate. They provide automatic type inference, input sanitization via Zod, and granular cache tag revalidation in one unified syntax.