[{"data":1,"prerenderedAt":307},["ShallowReactive",2],{"term-u\u002Fuseoptimistic":3,"related-u\u002Fuseoptimistic":292},{"id":4,"title":5,"acronym":6,"body":7,"category":274,"description":275,"difficulty":276,"extension":277,"letter":278,"meta":279,"navigation":152,"path":280,"related":281,"seo":286,"sitemap":287,"stem":290,"subcategory":6,"__hash__":291},"terms\u002Fterms\u002Fu\u002Fuseoptimistic.md","useOptimistic",null,{"type":8,"value":9,"toc":268},"minimark",[10,15,19,23,26,30,257,261,264],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 - The Vibe Check",[16,17,18],"p",{},"useOptimistic lets your UI lie a little, in a good way. You click like on a post and the heart turns red instantly, before the server has even confirmed it. If the request fails, React quietly rolls the fake state back. It's the hook version of a waiter saying sure, coming right up, before checking whether the kitchen actually has the dish.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"useOptimistic is a React hook that lets you show an optimistic state during an async action, temporarily overriding the actual state until the action settles. It takes the current state and an update function, and automatically reverts to the real state once the underlying action resolves or fails.",[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 LikeButton({ postId, likes }) {\n  const [optimisticLikes, addOptimisticLike] = useOptimistic(\n    likes,\n    (state) => state + 1\n  );\n\n  async function like() {\n    addOptimisticLike();\n    await likePost(postId);\n  }\n\n  return \u003Cbutton onClick={like}>{optimisticLikes} likes\u003C\u002Fbutton>;\n}\n","jsx","",[38,39,40,73,104,113,138,147,154,171,181,201,207,212,251],"code",{"__ignoreMap":36},[41,42,45,49,53,57,61,64,67,70],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"spNyl","function",[41,50,52],{"class":51},"s2Zo4"," LikeButton",[41,54,56],{"class":55},"sMK4o","({",[41,58,60],{"class":59},"sHdIc"," postId",[41,62,63],{"class":55},",",[41,65,66],{"class":59}," likes",[41,68,69],{"class":55}," })",[41,71,72],{"class":55}," {\n",[41,74,76,79,82,86,88,91,94,97,100],{"class":43,"line":75},2,[41,77,78],{"class":47},"  const",[41,80,81],{"class":55}," [",[41,83,85],{"class":84},"sTEyZ","optimisticLikes",[41,87,63],{"class":55},[41,89,90],{"class":84}," addOptimisticLike",[41,92,93],{"class":55},"]",[41,95,96],{"class":55}," =",[41,98,99],{"class":51}," useOptimistic",[41,101,103],{"class":102},"swJcz","(\n",[41,105,107,110],{"class":43,"line":106},3,[41,108,109],{"class":84},"    likes",[41,111,112],{"class":55},",\n",[41,114,116,119,122,125,128,131,134],{"class":43,"line":115},4,[41,117,118],{"class":55},"    (",[41,120,121],{"class":59},"state",[41,123,124],{"class":55},")",[41,126,127],{"class":47}," =>",[41,129,130],{"class":84}," state",[41,132,133],{"class":55}," +",[41,135,137],{"class":136},"sbssI"," 1\n",[41,139,141,144],{"class":43,"line":140},5,[41,142,143],{"class":102},"  )",[41,145,146],{"class":55},";\n",[41,148,150],{"class":43,"line":149},6,[41,151,153],{"emptyLinePlaceholder":152},true,"\n",[41,155,157,160,163,166,169],{"class":43,"line":156},7,[41,158,159],{"class":47},"  async",[41,161,162],{"class":47}," function",[41,164,165],{"class":51}," like",[41,167,168],{"class":55},"()",[41,170,72],{"class":55},[41,172,174,177,179],{"class":43,"line":173},8,[41,175,176],{"class":51},"    addOptimisticLike",[41,178,168],{"class":102},[41,180,146],{"class":55},[41,182,184,188,191,194,197,199],{"class":43,"line":183},9,[41,185,187],{"class":186},"s7zQu","    await",[41,189,190],{"class":51}," likePost",[41,192,193],{"class":102},"(",[41,195,196],{"class":84},"postId",[41,198,124],{"class":102},[41,200,146],{"class":55},[41,202,204],{"class":43,"line":203},10,[41,205,206],{"class":55},"  }\n",[41,208,210],{"class":43,"line":209},11,[41,211,153],{"emptyLinePlaceholder":152},[41,213,215,218,221,224,227,230,233,236,238,241,243,246,248],{"class":43,"line":214},12,[41,216,217],{"class":186},"  return",[41,219,220],{"class":55}," \u003C",[41,222,223],{"class":102},"button",[41,225,226],{"class":47}," onClick",[41,228,229],{"class":55},"={",[41,231,232],{"class":84},"like",[41,234,235],{"class":55},"}>{",[41,237,85],{"class":84},[41,239,240],{"class":55},"}",[41,242,66],{"class":84},[41,244,245],{"class":55},"\u003C\u002F",[41,247,223],{"class":102},[41,249,250],{"class":55},">;\n",[41,252,254],{"class":43,"line":253},13,[41,255,256],{"class":55},"}\n",[11,258,260],{"id":259},"when-youll-hear-this","When You'll Hear This",[16,262,263],{},"\"The like button feels instant now that we wrapped it in useOptimistic.\" \u002F \"useOptimistic reverted the comment when the server rejected it, so the UI never lied for long.\"",[265,266,267],"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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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":75,"depth":75,"links":269},[270,271,272,273],{"id":13,"depth":75,"text":14},{"id":21,"depth":75,"text":22},{"id":28,"depth":75,"text":29},{"id":259,"depth":75,"text":260},"frontend","useOptimistic lets your UI lie a little, in a good way.","intermediate","md","u",{},"\u002Fterms\u002Fu\u002Fuseoptimistic",[282,283,284,285],"React","useActionState","Server Actions","Optimistic UI",{"title":5,"description":275},{"changefreq":288,"priority":289},"weekly",0.7,"terms\u002Fu\u002Fuseoptimistic","pKqZn_k5Txjel-gBq8TDF4yfNJkCf18cS_Pa_xgadrQ",[293,296,300,304],{"title":285,"path":294,"acronym":6,"category":274,"difficulty":276,"description":295},"\u002Fterms\u002Fo\u002Foptimistic-ui","Optimistic UI means updating the interface BEFORE the server confirms the action succeeded. Click 'Like'? The heart turns red immediately.",{"title":282,"path":297,"acronym":6,"category":274,"difficulty":298,"description":299},"\u002Fterms\u002Fr\u002Freact","beginner","React is a JavaScript library from Meta for building UIs out of components.",{"title":284,"path":301,"acronym":6,"category":274,"difficulty":302,"description":303},"\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":283,"path":305,"acronym":6,"category":274,"difficulty":276,"description":306},"\u002Fterms\u002Fu\u002Fuseactionstate","useActionState is React's way of handling I submitted a form, now what, without a pile of useState calls for loading, errors, and results.",1792528134371]