React 19 Actions - Simplifying form submissions in React
React 19 simplifies form handling with Actions. Learn to use Actions, useActionState, and useFormStatus to streamline form submissions in React 19.
It's been a while since you heard from me, and a lot has happened. I moved to Seattle, bought a house, got a dog, and am now enjoying the summers in the Pacific Northwest. There's so much to talk about, so let's start with a bang!
DevJoke
Question: How do you comfort a JavaScript bug?
Answer: You console it.
React Actions
If you missed the announcement, React 19 RC (Release Candidate) has been announced. This means that as an app developer, you don't need to upgrade your app just yet. However, if you're a library author, you can start incorporating React 19 features.
One of the key features introduced in React 19 is Actions. Actions are asynchronous functions designed to simplify form submissions by automatically handling pending states, such as in a <Loader /> component. Additionally, React 19 introduces two new hooks: useActionState and useFormStatus, which are useful for creating actions and retrieving data from a form.
Key Features:
Actions: Asynchronous functions that simplify form submissions.
startTransition: Enhanced to handle async functions, automatically adding pending states during form submissions.
useActionState and useFormStatus Hooks: New hooks for managing form states and retrieving information on submitted data.
How It Works:
Form Handling in React 18 vs. React 19: In React 18, forms required manual state management for loading indicators and form submissions. React 19 automates this with Actions and new hooks.
Creating an Action: Use the
useActionStatehook to create async functions and manage form states seamlessly.Loading States: The
useFormStatushook provides real-time updates on form submission status, allowing for responsive UI changes.
Monthly Fireside Chats with Shruti Kapoor: Takeaways
I recently hosted Jason Lengstorf for an in-person fireside chat about staying motivated at work while continuing to learn and grow. He shared insights on separating hobby development from professional work and emphasized building something fun and silly to maintain motivation and joy in coding. Watch the full episode here
I have also had the honor of hosting some awesome people from tech community including Siddharth Kshetrapal, Tejas Kumar, Kent C. Dodds, Eve Porcello, Shaundai Person, and many more over the last few months. Here’s some advice that stood out to me from the last few chats -
“I would ask all the stupid questions. No question was dumb for me. I was very humble” - Siddharth Kshetrapal on advancing his career from a small company that shut down to becoming a Staff Engineer at GitHub.
“I spent 5 years working as an educator on the side, often on weekends and evenings after work, before . ”Kent C. Dodds on finding the courage to leave a stable 9-5 job and start his own venture.