{post.title} | My Blog

React 19 is here, and it's packed with features that fundamentally improve how we handle forms, async operations, and component composition. Let's dive into what's new and how you can start using these features today. ## Actions: Simplified Form Handling Actions are the biggest addition in React 19. They let you handle form submissions with automatic pending states, error handling, and optimistic updates. ```jsx function ContactForm() { async function submitContact(formData) { "use server"; const name = formData.get("name"); const email = formData.get("email"); await saveToDatabase({ name, email }); } return ( ); } ``` ### useActionState Hook For more control over form state, use the new `useActionState` hook: ```jsx import { useActionState } from "react"; function LoginForm() { const [state, formAction, isPending] = useActionState( async (previousState, formData) => { const email = formData.get("email"); const password = formData.get("password"); try { await authenticate(email, password); return { success: true }; } catch (error) { return { error: error.message }; } }, { error: null, success: false } ); return ( ); } ``` ## The use() Hook The `use()` hook is a new primitive for reading resources during render - including promises and context. ### Reading Promises ```jsx import { use, Suspense } from "react"; async function fetchUser(id) { const response = await fetch(`/api/users/${id}`); return response.json(); } function UserProfile({ userPromise }) { // use() will suspend until the promise resolves const user = use(userPromise); return (

{user.name}

{user.bio}

); } function App({ userId }) { // Create the promise at the top level const userPromise = fetchUser(userId); return ( }> ); } ``` ### Conditional Context Unlike `useContext`, you can call `use()` conditionally: ```jsx function StatusMessage({ showDetails }) { if (showDetails) { const theme = use(ThemeContext); return ; } return ; } ``` ## useOptimistic Hook Show optimistic UI updates while async operations are in progress: ```jsx import { useOptimistic } from "react"; function TodoList({ todos, addTodo }) { const [optimisticTodos, addOptimisticTodo] = useOptimistic( todos, (currentTodos, newTodo) => [...currentTodos, newTodo] ); async function handleSubmit(formData) { const title = formData.get("title"); const newTodo = { id: crypto.randomUUID(), title, pending: true }; // Immediately show the new todo addOptimisticTodo(newTodo); // Actually save it await addTodo(title); } return ( <>

{todo.title}

); } ``` ## Improved Ref Handling ### Ref as a Prop Function components can now accept `ref` as a regular prop - no more `forwardRef`: ```jsx // Before (React 18) const Input = forwardRef((props, ref) => ); // After (React 19) function Input({ ref, ...props }) { return ; } ``` ### Ref Cleanup Functions Refs can now return cleanup functions, similar to useEffect: ```jsx function VideoPlayer({ src }) { return (

Let's Work Together