[{"data":1,"prerenderedAt":387},["ShallowReactive",2],{"term-u\u002Fuseactionstate":3,"related-u\u002Fuseactionstate":372},{"id":4,"title":5,"acronym":6,"body":7,"category":354,"description":355,"difficulty":356,"extension":357,"letter":358,"meta":359,"navigation":217,"path":360,"related":361,"seo":366,"sitemap":367,"stem":370,"subcategory":6,"__hash__":371},"terms\u002Fterms\u002Fu\u002Fuseactionstate.md","useActionState",null,{"type":8,"value":9,"toc":348},"minimark",[10,15,19,23,26,30,337,341,344],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 - The Vibe Check",[16,17,18],"p",{},"useActionState is React's way of handling I submitted a form, now what, without a pile of useState calls for loading, errors, and results. You hand it an action function and it hands back the latest result plus a pending flag, already wired up to a form. Less plumbing, same form.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"useActionState is a React hook that manages the state of a form action, taking an action function and initial state and returning the current state, a wrapped action to pass to a form, and a pending boolean. It replaces the earlier useFormState API and works with both client functions and Server Actions.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-jsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","function ChangeName({ name }) {\n  const [state, formAction, pending] = useActionState(\n    async (prevState, formData) => {\n      const newName = formData.get('name');\n      return await updateName(newName);\n    },\n    { name }\n  );\n\n  return (\n    \u003Cform action={formAction}>\n      \u003Cinput name=\"name\" defaultValue={state.name} \u002F>\n      \u003Cbutton disabled={pending}>Save\u003C\u002Fbutton>\n    \u003C\u002Fform>\n  );\n}\n","jsx","",[38,39,40,67,104,129,165,187,193,204,212,219,228,249,284,314,324,331],"code",{"__ignoreMap":36},[41,42,45,49,53,57,61,64],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"spNyl","function",[41,50,52],{"class":51},"s2Zo4"," ChangeName",[41,54,56],{"class":55},"sMK4o","({",[41,58,60],{"class":59},"sHdIc"," name",[41,62,63],{"class":55}," })",[41,65,66],{"class":55}," {\n",[41,68,70,73,76,80,83,86,88,91,94,97,100],{"class":43,"line":69},2,[41,71,72],{"class":47},"  const",[41,74,75],{"class":55}," [",[41,77,79],{"class":78},"sTEyZ","state",[41,81,82],{"class":55},",",[41,84,85],{"class":78}," formAction",[41,87,82],{"class":55},[41,89,90],{"class":78}," pending",[41,92,93],{"class":55},"]",[41,95,96],{"class":55}," =",[41,98,99],{"class":51}," useActionState",[41,101,103],{"class":102},"swJcz","(\n",[41,105,107,110,113,116,118,121,124,127],{"class":43,"line":106},3,[41,108,109],{"class":47},"    async",[41,111,112],{"class":55}," (",[41,114,115],{"class":59},"prevState",[41,117,82],{"class":55},[41,119,120],{"class":59}," formData",[41,122,123],{"class":55},")",[41,125,126],{"class":47}," =>",[41,128,66],{"class":55},[41,130,132,135,138,140,142,145,148,151,154,158,160,162],{"class":43,"line":131},4,[41,133,134],{"class":47},"      const",[41,136,137],{"class":78}," newName",[41,139,96],{"class":55},[41,141,120],{"class":78},[41,143,144],{"class":55},".",[41,146,147],{"class":51},"get",[41,149,150],{"class":102},"(",[41,152,153],{"class":55},"'",[41,155,157],{"class":156},"sfazB","name",[41,159,153],{"class":55},[41,161,123],{"class":102},[41,163,164],{"class":55},";\n",[41,166,168,172,175,178,180,183,185],{"class":43,"line":167},5,[41,169,171],{"class":170},"s7zQu","      return",[41,173,174],{"class":170}," await",[41,176,177],{"class":51}," updateName",[41,179,150],{"class":102},[41,181,182],{"class":78},"newName",[41,184,123],{"class":102},[41,186,164],{"class":55},[41,188,190],{"class":43,"line":189},6,[41,191,192],{"class":55},"    },\n",[41,194,196,199,201],{"class":43,"line":195},7,[41,197,198],{"class":55},"    {",[41,200,60],{"class":78},[41,202,203],{"class":55}," }\n",[41,205,207,210],{"class":43,"line":206},8,[41,208,209],{"class":102},"  )",[41,211,164],{"class":55},[41,213,215],{"class":43,"line":214},9,[41,216,218],{"emptyLinePlaceholder":217},true,"\n",[41,220,222,225],{"class":43,"line":221},10,[41,223,224],{"class":170},"  return",[41,226,227],{"class":102}," (\n",[41,229,231,234,237,240,243,246],{"class":43,"line":230},11,[41,232,233],{"class":55},"    \u003C",[41,235,236],{"class":102},"form",[41,238,239],{"class":47}," action",[41,241,242],{"class":55},"={",[41,244,245],{"class":78},"formAction",[41,247,248],{"class":55},"}>\n",[41,250,252,255,258,260,263,266,268,270,273,275,277,279,281],{"class":43,"line":251},12,[41,253,254],{"class":55},"      \u003C",[41,256,257],{"class":102},"input",[41,259,60],{"class":47},[41,261,262],{"class":55},"=",[41,264,265],{"class":55},"\"",[41,267,157],{"class":156},[41,269,265],{"class":55},[41,271,272],{"class":47}," defaultValue",[41,274,242],{"class":55},[41,276,79],{"class":78},[41,278,144],{"class":55},[41,280,157],{"class":78},[41,282,283],{"class":55},"} \u002F>\n",[41,285,287,289,292,295,297,300,303,306,309,311],{"class":43,"line":286},13,[41,288,254],{"class":55},[41,290,291],{"class":102},"button",[41,293,294],{"class":47}," disabled",[41,296,242],{"class":55},[41,298,299],{"class":78},"pending",[41,301,302],{"class":55},"}>",[41,304,305],{"class":78},"Save",[41,307,308],{"class":55},"\u003C\u002F",[41,310,291],{"class":102},[41,312,313],{"class":55},">\n",[41,315,317,320,322],{"class":43,"line":316},14,[41,318,319],{"class":55},"    \u003C\u002F",[41,321,236],{"class":102},[41,323,313],{"class":55},[41,325,327,329],{"class":43,"line":326},15,[41,328,209],{"class":102},[41,330,164],{"class":55},[41,332,334],{"class":43,"line":333},16,[41,335,336],{"class":55},"}\n",[11,338,340],{"id":339},"when-youll-hear-this","When You'll Hear This",[16,342,343],{},"\"useActionState gives us the pending flag for free, so we dropped the isSubmitting state.\" \u002F \"Swap useFormState for useActionState, the newer React version renamed it.\"",[345,346,347],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":36,"searchDepth":69,"depth":69,"links":349},[350,351,352,353],{"id":13,"depth":69,"text":14},{"id":21,"depth":69,"text":22},{"id":28,"depth":69,"text":29},{"id":339,"depth":69,"text":340},"frontend","useActionState is React's way of handling I submitted a form, now what, without a pile of useState calls for loading, errors, and results.","intermediate","md","u",{},"\u002Fterms\u002Fu\u002Fuseactionstate",[362,363,364,365],"React","useOptimistic","Server Actions","React Hook Form",{"title":5,"description":355},{"changefreq":368,"priority":369},"weekly",0.7,"terms\u002Fu\u002Fuseactionstate","PDmqvzXD0QjGJ4s6oraBlWQi482eHxgV5EkFzBOCjnc",[373,377,380,384],{"title":362,"path":374,"acronym":6,"category":354,"difficulty":375,"description":376},"\u002Fterms\u002Fr\u002Freact","beginner","React is a JavaScript library from Meta for building UIs out of components.",{"title":365,"path":378,"acronym":6,"category":354,"difficulty":356,"description":379},"\u002Fterms\u002Fr\u002Freact-hook-form","React Hook Form is the form library that said 'what if we just... didn't re-render the whole form on every keystroke?",{"title":364,"path":381,"acronym":6,"category":354,"difficulty":382,"description":383},"\u002Fterms\u002Fs\u002Fserver-actions","advanced","Server Actions let you write a function in your React component that magically runs on the server when called.",{"title":363,"path":385,"acronym":6,"category":354,"difficulty":356,"description":386},"\u002Fterms\u002Fu\u002Fuseoptimistic","useOptimistic lets your UI lie a little, in a good way.",1792528134341]