{"id":1167,"date":"2024-10-15T07:52:20","date_gmt":"2024-10-15T07:52:20","guid":{"rendered":"https:\/\/blog.200oksolutions.com\/?p=1167"},"modified":"2025-12-04T07:44:07","modified_gmt":"2025-12-04T07:44:07","slug":"exploring-react-19-new-hooks","status":"publish","type":"post","link":"https:\/\/www.200oksolutions.com\/blog\/exploring-react-19-new-hooks\/","title":{"rendered":"Exploring React 19&#8217;s New Hooks: useActionState and use Optimistic"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"\ud83d\ude80 Unlock the Power of React 19: New Hooks Explained in 60 Seconds! \ud83d\ude80\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/FI_pgVuioXA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>React 19 has introduced some exciting new hooks that aim to streamline state management and enhance user interaction workflows. The new hooks \u2014 <strong>useActionState<\/strong>, <strong>useFormStatus<\/strong>, and <strong>useOptimistic<\/strong> \u2014 allow developers to handle various aspects of UI state in a more declarative and efficient way.<\/p>\n\n\n\n<p>In this blog, we will explore what these hooks do, how to use them, and how they simplify common patterns in modern React development.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. useActionState: Managing the Lifecycle of Actions<\/h2>\n\n\n\n<p>One of the challenges in UI development is managing the state transitions that occur during an action&#8217;s lifecycle. Whether it&#8217;s a network request, an animation, or any kind of async operation, keeping track of the status and result of the action is vital.<\/p>\n\n\n\n<p>The <strong>useActionState<\/strong> hook makes this easy by giving us a declarative way to track the states of an action.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How useActionState Works:<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Action Function:<\/strong> You define an action function (e.g., incrementCounter) that takes two parameters:\n<ul class=\"wp-block-list\">\n<li>previousState: The current state value before the action is executed.<\/li>\n\n\n\n<li>formData: The data from the form or event that triggered the action.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Initial State:<\/strong> You provide an initial state when you call useActionState, which sets the starting value for the state managed by the hook.<\/li>\n\n\n\n<li><strong>Progressive Enhancement:<\/strong> If you use useActionState within a server-rendered component, the form can be submitted without needing JavaScript, enhancing performance and usability.<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>const &#91;state, formAction, isPending] = useActionState(fn, initialState, \npermalink?); <\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Basic Usage:<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>import { useActionState } from \"react\";\n\nasync function incrementCounter(previousState, formData) {\n  return previousState + 1;\n}\n\nexport default function App() {\n  const &#91;state, formAction] = useActionState(incrementCounter, 0);\n  return (\n    &lt;form&gt;\n      {state}\n      &lt;button formAction={formAction}&gt;Increment&lt;\/button&gt;\n    &lt;\/form&gt;\n  );\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Breakdown:<\/h2>\n\n\n\n<p>\u25cf incrementCounter: A function that takes the previous state (counter value) and<br>returns the incremented value.<br>\u25cf useActionState: This hook manages the state (initially 0), and when the button is<br>clicked, it triggers the action (incrementCounter) to update the count.<br>\u25cf formAction: Automatically binds the action to the button, making it simple to handle<br>the state change on click.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Server Action Example: Feedback Form with Loading State<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Server-side Action (submitFeedback.js):<br>This function simulates submitting feedback to the server and returning a success<br>message.<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>\"use server\"; \n \nexport default async function submitFeedback(prevState, data) { \n  \/\/ Simulate a server-side delay (e.g., sending the feedback) \n  return new Promise((resolve) =&gt; \n    setTimeout(() =&gt; resolve(\"Thank you for your feedback!\"), 3000) \n  ); \n}<\/code><\/pre>\n\n\n\n<p>2. Client-side Form (FeedbackForm.js): <br><br>The client-side component handles form submission using useActionState, where <br>the form submission interacts with the server. <br> <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ FeedbackForm.js \n\"use client\"; \n \nimport submitFeedback from \".\/submitFeedback\"; \nimport { useActionState } from \"react\"; \n \nfunction FeedbackForm() { \n  \/\/ Initialize useActionState with the submitFeedback action and an initial \nstate \n  const &#91;message, submitAction, isPending] = useActionState( \n    submitFeedback, \n    \"No feedback yet.\" \n  ); \n \n  return ( \n    &lt;&gt; \n      &lt;p&gt;Status: {message}&lt;\/p&gt; \n      &lt;form action={submitAction}&gt; \n        &lt;textarea \n          name=\"feedback\" \n          placeholder=\"Enter your feedback here...\" \n          rows=\"5\" \n          required \n          className=\"border w-full p-2\" \n        &gt;&lt;\/textarea&gt; \n        &lt;button \n          type=\"submit\" \n          disabled={isPending} \n          className=\"mt-2 border bg-blue-500 text-white p-2 disabled:opacity-50 \ndisabled:cursor-not-allowed\" \n&gt; \n{isPending ? \"Submitting...\" : \"Submit Feedback\"} \n&lt;\/button&gt; \n&lt;\/form&gt; \n&lt;\/&gt; \n); \n} \nexport default FeedbackForm;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">2. useOptimistic: Optimistic UI Updates Simplified<\/h2>\n\n\n\n<p><strong>useOptimistic<\/strong> is a powerful React hook designed to enhance user experience by providing immediate feedback during asynchronous operations. This hook allows you to display an &#8220;optimistic&#8221; state while a network request or other async action is pending, helping to create a seamless and responsive UI.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const &#91;optimisticState, addOptimistic] = useOptimistic(state, updateFn);<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">How useOptimistic Works:<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Initial State:<\/strong> The hook takes an initial state as its first argument.<\/li>\n\n\n\n<li><strong>Optimistic Updates:<\/strong> You provide an updateFn to define how the state should change optimistically.<\/li>\n\n\n\n<li><strong>Returning Optimistic State:<\/strong> The updateFn merges the currentState with the optimisticValue and returns the resulting optimistic state, which is used while the async action is ongoing.<\/li>\n\n\n\n<li><strong>Immediate Feedback:<\/strong> This allows your UI to reflect the expected outcome of an action immediately, rather than waiting for the action to complete.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Basic Usage:<br><br>App.js<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>import { useOptimistic, useState, useRef } from \"react\";\n\nfunction Thread({ tasks, sendTasks }) {\n  const formRef = useRef();\n  async function formAction(formData) {\n    addOptimisticTask(formData.get(\"task\")); \/\/ Optimistically add the new task\n    formRef.current.reset();\n    await sendTasks(formData); \/\/ Send the message to the server\n  }\n  const &#91;optimisticTasks, addOptimisticTask] = useOptimistic(tasks, (state, newTask) =&gt; &#91;\n    ...state,\n    { text: newTask, sending: true }\n  ]);\n\n  return (\n    &lt;&gt;\n      {optimisticTasks.map((task, index) =&gt; (\n        &lt;div key={index}&gt;\n          {task.text}\n          {!!task.sending &amp;&amp; &lt;small&gt; (Adding...)&lt;\/small&gt;}\n        &lt;\/div&gt;\n      ))}\n      &lt;form action={formAction} ref={formRef}&gt;\n        &lt;input type=\"text\" name=\"task\" placeholder=\"Enter Your task\" \/&gt;\n        &lt;button type=\"submit\"&gt;Add&lt;\/button&gt;\n      &lt;\/form&gt;\n    &lt;\/&gt;\n  );\n}\nexport default function App() { \nconst &#91;tasks, setTasks] = useState(&#91; \n{ text: \"Hello there!\", sending: false, key: 1 }, \n]); \nasync function sendTasks(data) { \nconst sentTask = await deliverTasks(data.get(\"task\")); \/\/ Simulating a \nserver response \nsetTasks((tasks) =&gt; &#91;...tasks, { text: sentTask }]); \/\/ Update messages \nwith the sent message \n} \nreturn &lt;Thread tasks={tasks} sendTasks={sendTasks} \/&gt;; \n} \n<\/code><\/pre>\n\n\n\n<p><strong>actions.js:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>export async function deliverTasks(task) { \nawait new Promise((res) =&gt; setTimeout(res, 1000)); \nreturn task; \n}<\/code><\/pre>\n\n\n\n<p><strong>Breakdown:<\/strong><br><br><strong>Optimistic Updates:<\/strong> Optimistic updates allow the UI to update immediately, assuming the operation (like adding a task) will succeed. In our application, we achieved this using the useOptimistic hook.<br><strong>Message Delivery:<\/strong> The function deliver Message simulates adding a task to a server.  <br>This function can be replaced with a real API call in a production application.<br><strong>State Management:<\/strong> The App component maintains the messages state, which stores an array of tasks objects. Initially, it includes a welcome message.<br><strong>Task Adding:<\/strong> The sendMessage function is responsible for adding the task. It simulates a delay (as if waiting for a server response) and updates the task list with the new task once the server responds.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion:<\/h2>\n\n\n\n<p>In this blog post, we&#8217;ve explored two powerful React hooks introduced in React 19: <strong>useActionState<\/strong> and <strong>useOptimistic<\/strong>. These hooks significantly enhance user experience by enabling developers to create responsive and interactive applications that handle asynchronous actions more gracefully.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>useActionState allows us to manage the state of actions in a concise and structured manner. By utilizing this hook, developers can easily track the status of an action(pending, success, or error), which simplifies the logic for rendering UI components based on these states. This leads to a more intuitive user experience, as users receive immediate feedback based on their interactions with the application.<\/li>\n\n\n\n<li>useOptimistic takes user experience a step further by allowing applications to optimistically update the UI before an asynchronous operation completes. By rendering a temporary state that reflects the expected outcome, developers can create a seamless and responsive interface that keeps users engaged, even while waiting for server responses. This technique reduces perceived latency, making the application feel faster and more reliable.<\/li>\n<\/ul>\n\n\n\n<p>Both hooks encourage developers to write cleaner, more maintainable code by encapsulating complex state management logic, allowing them to focus on building engaging user interfaces. By incorporating <strong>useActionState<\/strong> and <strong>useOptimistic<\/strong> into your applications, you can significantly enhance the responsiveness and overall user experience, creating applications that feel more fluid and intuitive.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>React 19 has introduced some exciting new hooks that aim to streamline state management and enhance user&hellip;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1062],"tags":[329,330,333,334,331,332],"class_list":["post-1167","post","type-post","status-publish","format-standard","hentry","category-react-js","tag-react-19","tag-react-hooks","tag-react-state-management","tag-react-ui-optimization","tag-useactionstate","tag-useoptimistic"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Exploring React 19&#039;s New Hooks: useActionState and use Optimistic Web Development, Software, and App Blog | 200OK Solutions<\/title>\n<meta name=\"description\" content=\"Explore the 200OK Blog \u2013 your go-to source for insights on web development, backend architecture, API design, and tech best practices from industry professionals.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.200oksolutions.com\/blog\/exploring-react-19-new-hooks\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Exploring React 19&#039;s New Hooks: useActionState and use Optimistic Web Development, Software, and App Blog | 200OK Solutions\" \/>\n<meta property=\"og:description\" content=\"Explore the 200OK Blog \u2013 your go-to source for insights on web development, backend architecture, API design, and tech best practices from industry professionals.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.200oksolutions.com\/blog\/exploring-react-19-new-hooks\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development, Software, and App Blog | 200OK Solutions\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-15T07:52:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-04T07:44:07+00:00\" \/>\n<meta name=\"author\" content=\"Piyush Solanki\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Piyush Solanki\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Exploring React 19's New Hooks: useActionState and use Optimistic Web Development, Software, and App Blog | 200OK Solutions","description":"Explore the 200OK Blog \u2013 your go-to source for insights on web development, backend architecture, API design, and tech best practices from industry professionals.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.200oksolutions.com\/blog\/exploring-react-19-new-hooks\/","og_locale":"en_US","og_type":"article","og_title":"Exploring React 19's New Hooks: useActionState and use Optimistic Web Development, Software, and App Blog | 200OK Solutions","og_description":"Explore the 200OK Blog \u2013 your go-to source for insights on web development, backend architecture, API design, and tech best practices from industry professionals.","og_url":"https:\/\/www.200oksolutions.com\/blog\/exploring-react-19-new-hooks\/","og_site_name":"Web Development, Software, and App Blog | 200OK Solutions","article_published_time":"2024-10-15T07:52:20+00:00","article_modified_time":"2025-12-04T07:44:07+00:00","author":"Piyush Solanki","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Piyush Solanki","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.200oksolutions.com\/blog\/exploring-react-19-new-hooks\/#article","isPartOf":{"@id":"https:\/\/www.200oksolutions.com\/blog\/exploring-react-19-new-hooks\/"},"author":{"name":"Piyush Solanki","@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/person\/e07f6b8e3c9a90ce7b3b09427d26155e"},"headline":"Exploring React 19&#8217;s New Hooks: useActionState and use Optimistic","datePublished":"2024-10-15T07:52:20+00:00","dateModified":"2025-12-04T07:44:07+00:00","mainEntityOfPage":{"@id":"https:\/\/www.200oksolutions.com\/blog\/exploring-react-19-new-hooks\/"},"wordCount":795,"commentCount":0,"publisher":{"@id":"https:\/\/www.200oksolutions.com\/blog\/#organization"},"keywords":["React 19","React Hooks","React State Management","React UI Optimization","useActionState","useOptimistic"],"articleSection":["React JS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.200oksolutions.com\/blog\/exploring-react-19-new-hooks\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.200oksolutions.com\/blog\/exploring-react-19-new-hooks\/","url":"https:\/\/www.200oksolutions.com\/blog\/exploring-react-19-new-hooks\/","name":"Exploring React 19's New Hooks: useActionState and use Optimistic Web Development, Software, and App Blog | 200OK Solutions","isPartOf":{"@id":"https:\/\/www.200oksolutions.com\/blog\/#website"},"datePublished":"2024-10-15T07:52:20+00:00","dateModified":"2025-12-04T07:44:07+00:00","description":"Explore the 200OK Blog \u2013 your go-to source for insights on web development, backend architecture, API design, and tech best practices from industry professionals.","breadcrumb":{"@id":"https:\/\/www.200oksolutions.com\/blog\/exploring-react-19-new-hooks\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.200oksolutions.com\/blog\/exploring-react-19-new-hooks\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.200oksolutions.com\/blog\/exploring-react-19-new-hooks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.200oksolutions.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Exploring React 19&#8217;s New Hooks: useActionState and use Optimistic"}]},{"@type":"WebSite","@id":"https:\/\/www.200oksolutions.com\/blog\/#website","url":"https:\/\/www.200oksolutions.com\/blog\/","name":"Web Development, Software, and App Blog | 200OK Solutions","description":"","publisher":{"@id":"https:\/\/www.200oksolutions.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.200oksolutions.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.200oksolutions.com\/blog\/#organization","name":"Web Development Blog | Software Blog | App Blog","url":"https:\/\/www.200oksolutions.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/200oksolutions.com\/blog\/wp-content\/uploads\/2025\/09\/200ok_logo-CGzMrWDu.png","contentUrl":"https:\/\/200oksolutions.com\/blog\/wp-content\/uploads\/2025\/09\/200ok_logo-CGzMrWDu.png","width":500,"height":191,"caption":"Web Development Blog | Software Blog | App Blog"},"image":{"@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/200ok_solutions\/"]},{"@type":"Person","@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/person\/e07f6b8e3c9a90ce7b3b09427d26155e","name":"Piyush Solanki","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/962a2b0b4db856e6851ec7d838597a0395adcaae9c0091d223de9942a4254461?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/962a2b0b4db856e6851ec7d838597a0395adcaae9c0091d223de9942a4254461?s=96&d=mm&r=g","caption":"Piyush Solanki"},"description":"Piyush is a seasoned PHP Tech Lead with 10+ years of experience architecting and delivering scalable web and mobile backend solutions for global brands and fast-growing SMEs. He specializes in PHP, MySQL, CodeIgniter, WordPress, and custom API development, helping businesses modernize legacy systems and launch secure, high-performance digital products. He collaborates closely with mobile teams building Android &amp; iOS apps , developing RESTful APIs, cloud integrations, and secure payment systems using platforms like Stripe, AWS S3, and OTP\/SMS gateways. His work extends across CMS customization, microservices-ready backend architectures, and smooth product deployments across Linux and cloud-based environments. Piyush also has a strong understanding of modern front-end technologies such as React and TypeScript, enabling him to contribute to full-stack development workflows and advanced admin panels. With a successful delivery track record in the UK market and experience building digital products for sectors like finance, hospitality, retail, consulting, and food services, Piyush is passionate about helping SMEs scale technology teams, improve operational efficiency, and accelerate innovation through backend excellence and digital tools.","url":"https:\/\/www.200oksolutions.com\/blog\/author\/piyush\/"}]}},"_links":{"self":[{"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/posts\/1167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=1167"}],"version-history":[{"count":7,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/posts\/1167\/revisions"}],"predecessor-version":[{"id":1178,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/posts\/1167\/revisions\/1178"}],"wp:attachment":[{"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=1167"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=1167"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=1167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}