23:o1,#23:od43,1:"$Sreact.fragment" 2:I[79520,["/_next/static/immutable/chunks/3r392yjnzccf4.js","/_next/static/immutable/chunks/2lmowigkt-3qa.js","/_next/static/immutable/chunks/1q2w3c-qdow7n.js","/_next/static/immutable/chunks/2-34g60fa1no6.js","/_next/static/immutable/chunks/2pmv4tgt-a02p.js"],""] 3:I[12985,["/_next/static/immutable/chunks/3r392yjnzccf4.js","/_next/static/immutable/chunks/2lmowigkt-3qa.js","/_next/static/immutable/chunks/1q2w3c-qdow7n.js","/_next/static/immutable/chunks/2-34g60fa1no6.js","/_next/static/immutable/chunks/2pmv4tgt-a02p.js"],"NuqsAdapter"] 4:I[28231,["/_next/static/immutable/chunks/3r392yjnzccf4.js","/_next/static/immutable/chunks/2lmowigkt-3qa.js","/_next/static/immutable/chunks/1q2w3c-qdow7n.js","/_next/static/immutable/chunks/2-34g60fa1no6.js","/_next/static/immutable/chunks/2pmv4tgt-a02p.js"],"TooltipProvider"] 5:I[39756,["/_next/static/immutable/chunks/3r392yjnzccf4.js","/_next/static/immutable/chunks/2lmowigkt-3qa.js","/_next/static/immutable/chunks/1q2w3c-qdow7n.js","/_next/static/immutable/chunks/2-34g60fa1no6.js","/_next/static/immutable/chunks/2pmv4tgt-a02p.js"],"default"] 6:I[37457,["/_next/static/immutable/chunks/3r392yjnzccf4.js","/_next/static/immutable/chunks/2lmowigkt-3qa.js","/_next/static/immutable/chunks/1q2w3c-qdow7n.js","/_next/static/immutable/chunks/2-34g60fa1no6.js","/_next/static/immutable/chunks/2pmv4tgt-a02p.js"],"default"] 7:I[36768,["/_next/static/immutable/chunks/3r392yjnzccf4.js","/_next/static/immutable/chunks/2lmowigkt-3qa.js","/_next/static/immutable/chunks/1q2w3c-qdow7n.js","/_next/static/immutable/chunks/2-34g60fa1no6.js","/_next/static/immutable/chunks/2pmv4tgt-a02p.js","/_next/static/immutable/chunks/3wb08-s9okwoh.js"],"default"] 8:I[7482,["/_next/static/immutable/chunks/3r392yjnzccf4.js","/_next/static/immutable/chunks/2lmowigkt-3qa.js","/_next/static/immutable/chunks/1q2w3c-qdow7n.js","/_next/static/immutable/chunks/2-34g60fa1no6.js","/_next/static/immutable/chunks/2pmv4tgt-a02p.js"],"default"] 9:I[54576,["/_next/static/immutable/chunks/3r392yjnzccf4.js","/_next/static/immutable/chunks/2lmowigkt-3qa.js","/_next/static/immutable/chunks/1q2w3c-qdow7n.js","/_next/static/immutable/chunks/2-34g60fa1no6.js","/_next/static/immutable/chunks/2pmv4tgt-a02p.js"],"GoogleAnalytics"] a:I[19598,["/_next/static/immutable/chunks/3r392yjnzccf4.js","/_next/static/immutable/chunks/2lmowigkt-3qa.js","/_next/static/immutable/chunks/1q2w3c-qdow7n.js","/_next/static/immutable/chunks/2-34g60fa1no6.js","/_next/static/immutable/chunks/2pmv4tgt-a02p.js"],"GoogleTagManager"] b:"$Sreact.suspense" c:I[47374,["/_next/static/immutable/chunks/3r392yjnzccf4.js","/_next/static/immutable/chunks/2lmowigkt-3qa.js","/_next/static/immutable/chunks/1q2w3c-qdow7n.js","/_next/static/immutable/chunks/2-34g60fa1no6.js","/_next/static/immutable/chunks/2pmv4tgt-a02p.js","/_next/static/immutable/chunks/29ppbn6hone2k.js","/_next/static/immutable/chunks/0uygvsqgnu39s.js"],"default"] e:I[39756,["/_next/static/immutable/chunks/3r392yjnzccf4.js","/_next/static/immutable/chunks/2lmowigkt-3qa.js","/_next/static/immutable/chunks/1q2w3c-qdow7n.js","/_next/static/immutable/chunks/2-34g60fa1no6.js","/_next/static/immutable/chunks/2pmv4tgt-a02p.js"],"LoadingBoundaryProvider"] :HL["/_next/static/immutable/chunks/05vdn6h_t31_s.css","style"] :HL["/_next/static/immutable/chunks/06_wt60ik61my.css","style"] 15:X 16:X 17:X 18:X 1a:X 1b:X 1c:X 23:o13ab,0:{"f":[[["",{"children":["(site)",{"children":["blog",{"children":[["id","when-real-time-updates-become-bad-ux-buffering-convex-queries-with-usebufferedstate","d",[]],{"children":["__PAGE__",{},"$undefined","$undefined",162]},"$undefined","$undefined",102]},"$undefined","$undefined",78]},"$undefined","$undefined",42]},"$undefined","$undefined",90],[["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/immutable/chunks/05vdn6h_t31_s.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/immutable/chunks/06_wt60ik61my.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/_next/static/immutable/chunks/3r392yjnzccf4.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/_next/static/immutable/chunks/2lmowigkt-3qa.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/_next/static/immutable/chunks/1q2w3c-qdow7n.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/_next/static/immutable/chunks/2-34g60fa1no6.js","async":true,"nonce":"$undefined"}],["$","script","script-4",{"src":"/_next/static/immutable/chunks/2pmv4tgt-a02p.js","async":true,"nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":[["$","head",null,{"children":["$","$L2",null,{"id":"ms-clarity","strategy":"afterInteractive","children":"(function(c,l,a,r,i,t,y){\n c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};\n t=l.createElement(r);t.async=1;t.src=\"https://www.clarity.ms/tag/\"+i;\n y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);\n })(window, document, \"clarity\", \"script\", \"xwk7beut6p\");"}]}],["$","body",null,{"className":"bricolage_grotesque_bd92268d-module__IZA3oW__className bg-background text-foreground","suppressHydrationWarning":true,"children":[["$","$L3",null,{"children":["$","$L4",null,{"children":["$","$L5",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","$L7",null,{}],[]],"forbidden":"$undefined","unauthorized":"$undefined"}]}]}],["$","$L8",null,{}],[["$","$L9",null,{"gaId":"G-LW39RW8SKE"}],["$","$La",null,{"gtmId":"GTM-T9MNJ9MT"}]]]}]]}]]}],{"children":[["$","$1","c",{"children":[[["$","script","script-0",{"src":"/_next/static/immutable/chunks/29ppbn6hone2k.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/_next/static/immutable/chunks/0uygvsqgnu39s.js","async":true,"nonce":"$undefined"}]],[["$","$b",null,{"fallback":"$undefined","children":["$","$Lc",null,{}]}],["$","main",null,{"children":["$","$L5",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","$L7",null,{}],[]],"forbidden":"$undefined","unauthorized":"$undefined"}]}],"$Ld"]]}],{"children":[["$","$Le",null,{"loading":[["$","$1","l",{"children":[["$","div",null,{"className":"flex w-full -translate-y-20 justify-center bg-white dark:bg-black relative h-92 min-h-auto items-end lg:h-100","children":[["$","div",null,{"className":"absolute inset-0 bg-size-[45px_45px] bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] dark:bg-[linear-gradient(to_right,#262626_1px,transparent_1px),linear-gradient(to_bottom,#262626_1px,transparent_1px)]"}],["$","div",null,{"className":"pointer-events-none absolute inset-0 flex items-center justify-center bg-white mask-[radial-gradient(ellipse_at_center,transparent_20%,black)] dark:bg-black"}],["$","div",null,{"className":"relative z-10 mt-40 w-full","children":["$","div",null,{"className":"container mx-auto px-4 sm:px-6 lg:px-8","children":["$","div",null,{"className":"my-16 text-center","children":[["$","h1",null,{"className":"mb-6 text-4xl leading-tight font-bold text-gray-900 sm:text-5xl lg:text-6xl","children":"Latest Blogs"}],["$","p",null,{"className":"mx-auto max-w-2xl text-lg leading-relaxed text-gray-600","children":"Thoughts on web development, design patterns, and the latest trends in modern software engineering."}]]}]}]}]]}],["$","div",null,{"className":"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8","children":["$","div",null,{"className":"space-y-8 pb-8","children":[["$","div",null,{"className":"mx-auto flex w-full max-w-lg justify-center","children":["$","div",null,{"data-slot":"skeleton","className":"animate-pulse bg-muted h-10 w-full rounded-full"}]}],"$Lf","$L10","$L11"]}]}]]}],[],null],"children":"$L12"}],{"children":["$L13",{"children":["$L14",{},null,false,"$15"]},null,false,"$16"]},null,false,"$16"]},null,false,"$17"]},null,false,"$18"],"$L19",false]],"q":"","i":false,"S":false,"h":"$1a","r":"$1b","b":"B5zcKiRR8xIw2oXSUiS49","s":"$1c","a":"$@1d","u":"$@1e"} 23:o5eb,28:I[97367,["/_next/static/immutable/chunks/3r392yjnzccf4.js","/_next/static/immutable/chunks/2lmowigkt-3qa.js","/_next/static/immutable/chunks/1q2w3c-qdow7n.js","/_next/static/immutable/chunks/2-34g60fa1no6.js","/_next/static/immutable/chunks/2pmv4tgt-a02p.js"],"OutletBoundary"] 2a:I[97367,["/_next/static/immutable/chunks/3r392yjnzccf4.js","/_next/static/immutable/chunks/2lmowigkt-3qa.js","/_next/static/immutable/chunks/1q2w3c-qdow7n.js","/_next/static/immutable/chunks/2-34g60fa1no6.js","/_next/static/immutable/chunks/2pmv4tgt-a02p.js"],"ViewportBoundary"] 2c:I[97367,["/_next/static/immutable/chunks/3r392yjnzccf4.js","/_next/static/immutable/chunks/2lmowigkt-3qa.js","/_next/static/immutable/chunks/1q2w3c-qdow7n.js","/_next/static/immutable/chunks/2-34g60fa1no6.js","/_next/static/immutable/chunks/2pmv4tgt-a02p.js"],"MetadataBoundary"] 2e:I[27930,["/_next/static/immutable/chunks/3r392yjnzccf4.js","/_next/static/immutable/chunks/2lmowigkt-3qa.js","/_next/static/immutable/chunks/1q2w3c-qdow7n.js","/_next/static/immutable/chunks/2-34g60fa1no6.js","/_next/static/immutable/chunks/2pmv4tgt-a02p.js","/_next/static/immutable/chunks/29ppbn6hone2k.js","/_next/static/immutable/chunks/0uygvsqgnu39s.js"],"Button"] :HL["/_next/static/immutable/chunks/19-tksp1s-42j.css","style"] :HL["/_next/static/immutable/chunks/2rycgywa4467t.css","style"] f:["$","div",null,{"className":"text-center","children":["$","div",null,{"data-slot":"skeleton","className":"animate-pulse bg-muted mx-auto h-8 w-44 rounded-full"}]}] 23:ofa9,10:["$","div",null,{"className":"grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3","children":[["$","div","0",{"data-slot":"card","data-size":"default","className":"group/card text-card-foreground ring-foreground/10 flex flex-col gap-(--card-spacing) text-sm ring-1 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl overflow-hidden rounded-3xl border-0 bg-white py-0 shadow-lg","children":[["$","div",null,{"className":"relative aspect-4/3 overflow-hidden rounded-3xl","children":["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-full w-full"}]}],["$","div",null,{"className":"space-y-4 p-6","children":[["$","div",null,{"className":"space-y-2","children":[["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-6 w-full"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-6 w-3/4"}]]}],["$","div",null,{"className":"space-y-2","children":[["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-4 w-full"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-4 w-5/6"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-4 w-4/6"}]]}],["$","div",null,{"className":"flex gap-2 pt-2","children":[["$","div",null,{"data-slot":"skeleton","className":"animate-pulse bg-muted h-6 w-16 rounded-full"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse bg-muted h-6 w-20 rounded-full"}]]}]]}]]}],["$","div","1",{"data-slot":"card","data-size":"default","className":"group/card text-card-foreground ring-foreground/10 flex flex-col gap-(--card-spacing) text-sm ring-1 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl overflow-hidden rounded-3xl border-0 bg-white py-0 shadow-lg","children":[["$","div",null,{"className":"relative aspect-4/3 overflow-hidden rounded-3xl","children":["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-full w-full"}]}],["$","div",null,{"className":"space-y-4 p-6","children":[["$","div",null,{"className":"space-y-2","children":[["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-6 w-full"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-6 w-3/4"}]]}],["$","div",null,{"className":"space-y-2","children":[["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-4 w-full"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-4 w-5/6"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-4 w-4/6"}]]}],["$","div",null,{"className":"flex gap-2 pt-2","children":[["$","div",null,{"data-slot":"skeleton","className":"animate-pulse bg-muted h-6 w-16 rounded-full"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse bg-muted h-6 w-20 rounded-full"}]]}]]}]]}],["$","div","2",{"data-slot":"card","data-size":"default","className":"group/card text-card-foreground ring-foreground/10 flex flex-col gap-(--card-spacing) text-sm ring-1 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl overflow-hidden rounded-3xl border-0 bg-white py-0 shadow-lg","children":[["$","div",null,{"className":"relative aspect-4/3 overflow-hidden rounded-3xl","children":"$L1f"}],"$L20"]}],"$L21","$L22","$L23","$L24","$L25","$L26"]}] 23:o3e3,11:["$","div",null,{"className":"flex items-center justify-center gap-3","children":[["$","div",null,{"data-slot":"skeleton","className":"animate-pulse bg-muted h-10 w-28 rounded-full"}],["$","div",null,{"className":"hidden gap-2 sm:flex","children":[["$","div","0",{"data-slot":"skeleton","className":"animate-pulse bg-muted h-10 w-10 rounded-full"}],["$","div","1",{"data-slot":"skeleton","className":"animate-pulse bg-muted h-10 w-10 rounded-full"}],["$","div","2",{"data-slot":"skeleton","className":"animate-pulse bg-muted h-10 w-10 rounded-full"}]]}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse bg-muted h-10 w-24 rounded-full"}]]}] 12:["$","$1","c",{"children":[null,["$","$L5",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 23:of2e,13:["$","$Le",null,{"loading":[["$","div","l",{"className":"min-h-screen","children":["$","div",null,{"className":"mx-auto max-w-5xl px-4 py-12 sm:px-6 lg:px-8 lg:py-20","children":["$","article",null,{"className":"space-y-10","children":[["$","div",null,{"className":"flex flex-wrap gap-3","children":[["$","div",null,{"data-slot":"skeleton","className":"animate-pulse bg-muted h-9 w-40 rounded-full"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse bg-muted h-9 w-32 rounded-full"}]]}],["$","div",null,{"className":"space-y-6","children":[["$","div",null,{"className":"space-y-3","children":[["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-12 w-4/5"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-12 w-3/5"}]]}],["$","div",null,{"className":"space-y-2","children":[["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-5 w-full max-w-3xl"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-5 w-full max-w-2xl"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-5 w-2/3 max-w-xl"}]]}],["$","div",null,{"className":"flex flex-wrap gap-2","children":[["$","div",null,{"data-slot":"skeleton","className":"animate-pulse bg-muted h-8 w-20 rounded-full"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse bg-muted h-8 w-24 rounded-full"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse bg-muted h-8 w-16 rounded-full"}]]}]]}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse bg-muted aspect-video w-full rounded-2xl"}],["$","div",null,{"className":"space-y-8","children":[["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-8 w-2/5"}],["$","div",null,{"className":"space-y-3","children":[["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-5 w-full"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-5 w-full"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-5 w-11/12"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-5 w-full"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-5 w-4/5"}]]}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-8 w-1/3"}],["$","div",null,{"className":"space-y-3","children":[["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-5 w-full"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-5 w-full"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-5 w-5/6"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-5 w-full"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-5 w-3/4"}]]}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse bg-muted h-52 w-full rounded-xl"}],["$","div",null,{"className":"space-y-3","children":[["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-5 w-full"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-5 w-11/12"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-5 w-2/3"}]]}]]}]]}]}]}],[],null],"children":["$","$1","c",{"children":[null,["$","$L5",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}]}] 23:o3b8,14:["$","$1","c",{"children":["$L27",[["$","link","0",{"rel":"stylesheet","href":"/_next/static/immutable/chunks/19-tksp1s-42j.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/immutable/chunks/2rycgywa4467t.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/_next/static/immutable/chunks/0vaiazik1x183.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/_next/static/immutable/chunks/1w2flssw663og.js","async":true,"nonce":"$undefined"}]],["$","$L28",null,{"children":["$","$b",null,{"name":"Next.MetadataOutlet","children":"$@29"}]}]]}] 19:["$","$1","h",{"children":[null,["$","$L2a","JGaBGFC3hKPbSsbQ3jjW_v",{"children":"$L2b"}],["$","div","JGaBGFC3hKPbSsbQ3jjW_m",{"hidden":true,"children":["$","$L2c",null,{"children":["$","$b",null,{"name":"Next.Metadata","children":"$L2d"}]}]}]]}] 23:oe68,d:["$","footer",null,{"className":"bg-background/50 w-full border-t backdrop-blur-sm","children":["$","div",null,{"className":"container mx-auto px-4 py-16 md:px-6","children":["$","div",null,{"className":"flex flex-col items-center space-y-10 text-center","children":[["$","div",null,{"className":"space-y-6","children":[["$","h3",null,{"className":"from-foreground to-foreground/70 bg-linear-to-r bg-clip-text text-3xl font-bold text-transparent","children":"Connect with Me"}],["$","p",null,{"className":"text-muted-foreground max-w-lg text-lg leading-relaxed","children":"I'm always open to discussing new opportunities, collaborations, and interesting projects."}]]}],["$","div",null,{"className":"flex items-center gap-6","children":[["$","$L2e","GitHub",{"data-slot":"button","className":"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:-translate-y-[2px] ease-in-out hover:text-accent-foreground dark:hover:bg-accent/50 h-9 px-4 py-2 has-[>svg]:px-3 hover:bg-primary/10 rounded-full transition-all duration-300 hover:scale-110 [&>svg]:size-9 [&>svg]:stroke-2","nativeButton":false,"render":["$","a",null,{"href":"https://github.com/surajx21","aria-label":"GitHub","children":["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 24 24","width":"48","height":"48","fill":"none","color":"currentColor","stroke":"currentColor","strokeWidth":"1.5","strokeLinecap":"round","strokeLinejoin":"round","children":[["$","path",null,{"d":"M10 20.5675C6.57143 21.7248 3.71429 20.5675 2 17"}],["$","path",null,{"d":"M10 22V18.7579C10 18.1596 10.1839 17.6396 10.4804 17.1699C10.6838 16.8476 10.5445 16.3904 10.1771 16.2894C7.13394 15.4528 5 14.1077 5 9.64606C5 8.48611 5.38005 7.39556 6.04811 6.4464C6.21437 6.21018 6.29749 6.09208 6.31748 5.9851C6.33746 5.87813 6.30272 5.73852 6.23322 5.45932C5.95038 4.32292 5.96871 3.11619 6.39322 2.02823C6.39322 2.02823 7.27042 1.74242 9.26698 2.98969C9.72282 3.27447 9.95075 3.41686 10.1515 3.44871C10.3522 3.48056 10.6206 3.41384 11.1573 3.28041C11.8913 3.09795 12.6476 3 13.5 3C14.3524 3 15.1087 3.09795 15.8427 3.28041C16.3794 3.41384 16.6478 3.48056 16.8485 3.44871C17.0493 3.41686 17.2772 3.27447 17.733 2.98969C19.7296 1.74242 20.6068 2.02823 20.6068 2.02823C21.0313 3.11619 21.0496 4.32292 20.7668 5.45932C20.6973 5.73852 20.6625 5.87813 20.6825 5.9851C20.7025 6.09207 20.7856 6.21019 20.9519 6.4464C21.6199 7.39556 22 8.48611 22 9.64606C22 14.1077 19.8661 15.4528 16.8229 16.2894C16.4555 16.3904 16.3162 16.8476 16.5196 17.1699C16.8161 17.6396 17 18.1596 17 18.7579V22"}]]}]}]}],["$","$L2e","X",{"data-slot":"button","className":"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:-translate-y-[2px] ease-in-out hover:text-accent-foreground dark:hover:bg-accent/50 h-9 px-4 py-2 has-[>svg]:px-3 hover:bg-primary/10 rounded-full transition-all duration-300 hover:scale-110 [&>svg]:size-9 [&>svg]:stroke-2","nativeButton":false,"render":"$L2f"}],"$L30","$L31"]}],"$L32","$L33"]}]}]}] 23:o5aa,34:I[69035,["/_next/static/immutable/chunks/3r392yjnzccf4.js","/_next/static/immutable/chunks/2lmowigkt-3qa.js","/_next/static/immutable/chunks/1q2w3c-qdow7n.js","/_next/static/immutable/chunks/2-34g60fa1no6.js","/_next/static/immutable/chunks/2pmv4tgt-a02p.js","/_next/static/immutable/chunks/29ppbn6hone2k.js","/_next/static/immutable/chunks/0uygvsqgnu39s.js"],"Separator"] 15:T1,?16:C 1a:T1,?1c:300 1f:["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-full w-full"}] 20:["$","div",null,{"className":"space-y-4 p-6","children":[["$","div",null,{"className":"space-y-2","children":[["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-6 w-full"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-6 w-3/4"}]]}],["$","div",null,{"className":"space-y-2","children":[["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-4 w-full"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-4 w-5/6"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-4 w-4/6"}]]}],["$","div",null,{"className":"flex gap-2 pt-2","children":[["$","div",null,{"data-slot":"skeleton","className":"animate-pulse bg-muted h-6 w-16 rounded-full"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse bg-muted h-6 w-20 rounded-full"}]]}]]}] 23:o662,21:["$","div","3",{"data-slot":"card","data-size":"default","className":"group/card text-card-foreground ring-foreground/10 flex flex-col gap-(--card-spacing) text-sm ring-1 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl overflow-hidden rounded-3xl border-0 bg-white py-0 shadow-lg","children":[["$","div",null,{"className":"relative aspect-4/3 overflow-hidden rounded-3xl","children":["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-full w-full"}]}],["$","div",null,{"className":"space-y-4 p-6","children":[["$","div",null,{"className":"space-y-2","children":[["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-6 w-full"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-6 w-3/4"}]]}],["$","div",null,{"className":"space-y-2","children":[["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-4 w-full"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-4 w-5/6"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-4 w-4/6"}]]}],["$","div",null,{"className":"flex gap-2 pt-2","children":[["$","div",null,{"data-slot":"skeleton","className":"animate-pulse bg-muted h-6 w-16 rounded-full"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse bg-muted h-6 w-20 rounded-full"}]]}]]}]]}] 23:o662,22:["$","div","4",{"data-slot":"card","data-size":"default","className":"group/card text-card-foreground ring-foreground/10 flex flex-col gap-(--card-spacing) text-sm ring-1 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl overflow-hidden rounded-3xl border-0 bg-white py-0 shadow-lg","children":[["$","div",null,{"className":"relative aspect-4/3 overflow-hidden rounded-3xl","children":["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-full w-full"}]}],["$","div",null,{"className":"space-y-4 p-6","children":[["$","div",null,{"className":"space-y-2","children":[["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-6 w-full"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-6 w-3/4"}]]}],["$","div",null,{"className":"space-y-2","children":[["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-4 w-full"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-4 w-5/6"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-4 w-4/6"}]]}],["$","div",null,{"className":"flex gap-2 pt-2","children":[["$","div",null,{"data-slot":"skeleton","className":"animate-pulse bg-muted h-6 w-16 rounded-full"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse bg-muted h-6 w-20 rounded-full"}]]}]]}]]}] 23:o662,23:["$","div","5",{"data-slot":"card","data-size":"default","className":"group/card text-card-foreground ring-foreground/10 flex flex-col gap-(--card-spacing) text-sm ring-1 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl overflow-hidden rounded-3xl border-0 bg-white py-0 shadow-lg","children":[["$","div",null,{"className":"relative aspect-4/3 overflow-hidden rounded-3xl","children":["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-full w-full"}]}],["$","div",null,{"className":"space-y-4 p-6","children":[["$","div",null,{"className":"space-y-2","children":[["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-6 w-full"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-6 w-3/4"}]]}],["$","div",null,{"className":"space-y-2","children":[["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-4 w-full"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-4 w-5/6"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-4 w-4/6"}]]}],["$","div",null,{"className":"flex gap-2 pt-2","children":[["$","div",null,{"data-slot":"skeleton","className":"animate-pulse bg-muted h-6 w-16 rounded-full"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse bg-muted h-6 w-20 rounded-full"}]]}]]}]]}] 23:o662,24:["$","div","6",{"data-slot":"card","data-size":"default","className":"group/card text-card-foreground ring-foreground/10 flex flex-col gap-(--card-spacing) text-sm ring-1 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl overflow-hidden rounded-3xl border-0 bg-white py-0 shadow-lg","children":[["$","div",null,{"className":"relative aspect-4/3 overflow-hidden rounded-3xl","children":["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-full w-full"}]}],["$","div",null,{"className":"space-y-4 p-6","children":[["$","div",null,{"className":"space-y-2","children":[["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-6 w-full"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-6 w-3/4"}]]}],["$","div",null,{"className":"space-y-2","children":[["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-4 w-full"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-4 w-5/6"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-4 w-4/6"}]]}],["$","div",null,{"className":"flex gap-2 pt-2","children":[["$","div",null,{"data-slot":"skeleton","className":"animate-pulse bg-muted h-6 w-16 rounded-full"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse bg-muted h-6 w-20 rounded-full"}]]}]]}]]}] 23:o662,25:["$","div","7",{"data-slot":"card","data-size":"default","className":"group/card text-card-foreground ring-foreground/10 flex flex-col gap-(--card-spacing) text-sm ring-1 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl overflow-hidden rounded-3xl border-0 bg-white py-0 shadow-lg","children":[["$","div",null,{"className":"relative aspect-4/3 overflow-hidden rounded-3xl","children":["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-full w-full"}]}],["$","div",null,{"className":"space-y-4 p-6","children":[["$","div",null,{"className":"space-y-2","children":[["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-6 w-full"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-6 w-3/4"}]]}],["$","div",null,{"className":"space-y-2","children":[["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-4 w-full"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-4 w-5/6"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-4 w-4/6"}]]}],["$","div",null,{"className":"flex gap-2 pt-2","children":[["$","div",null,{"data-slot":"skeleton","className":"animate-pulse bg-muted h-6 w-16 rounded-full"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse bg-muted h-6 w-20 rounded-full"}]]}]]}]]}] 23:o662,26:["$","div","8",{"data-slot":"card","data-size":"default","className":"group/card text-card-foreground ring-foreground/10 flex flex-col gap-(--card-spacing) text-sm ring-1 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl overflow-hidden rounded-3xl border-0 bg-white py-0 shadow-lg","children":[["$","div",null,{"className":"relative aspect-4/3 overflow-hidden rounded-3xl","children":["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-full w-full"}]}],["$","div",null,{"className":"space-y-4 p-6","children":[["$","div",null,{"className":"space-y-2","children":[["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-6 w-full"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-6 w-3/4"}]]}],["$","div",null,{"className":"space-y-2","children":[["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-4 w-full"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-4 w-5/6"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse rounded-md bg-muted h-4 w-4/6"}]]}],["$","div",null,{"className":"flex gap-2 pt-2","children":[["$","div",null,{"data-slot":"skeleton","className":"animate-pulse bg-muted h-6 w-16 rounded-full"}],["$","div",null,{"data-slot":"skeleton","className":"animate-pulse bg-muted h-6 w-20 rounded-full"}]]}]]}]]}] 23:o1dc,2f:["$","a",null,{"href":"https://x.com/maybesuraj","aria-label":"X","children":["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 24 24","width":"48","height":"48","fill":"none","color":"currentColor","stroke":"currentColor","strokeWidth":"1.5","strokeLinecap":"round","strokeLinejoin":"round","children":["$","path",null,{"d":"M3 21L10.5484 13.4516M21 3L13.4516 10.5484M13.4516 10.5484L8 3H3L10.5484 13.4516M13.4516 10.5484L21 21H16L10.5484 13.4516"}]}]}] 23:o92a,30:["$","$L2e","LinkedIn",{"data-slot":"button","className":"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:-translate-y-[2px] ease-in-out hover:text-accent-foreground dark:hover:bg-accent/50 h-9 px-4 py-2 has-[>svg]:px-3 hover:bg-primary/10 rounded-full transition-all duration-300 hover:scale-110 [&>svg]:size-9 [&>svg]:stroke-2","nativeButton":false,"render":["$","a",null,{"href":"https://www.linkedin.com/in/suraj-shah-a929322a7/","aria-label":"LinkedIn","children":["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 24 24","width":"48","height":"48","fill":"none","color":"currentColor","stroke":"currentColor","strokeWidth":"1.5","children":[["$","path",null,{"d":"M4.5 9.5H4C3.05719 9.5 2.58579 9.5 2.29289 9.79289C2 10.0858 2 10.5572 2 11.5V20C2 20.9428 2 21.4142 2.29289 21.7071C2.58579 22 3.05719 22 4 22H4.5C5.44281 22 5.91421 22 6.20711 21.7071C6.5 21.4142 6.5 20.9428 6.5 20V11.5C6.5 10.5572 6.5 10.0858 6.20711 9.79289C5.91421 9.5 5.44281 9.5 4.5 9.5Z"}],["$","path",null,{"d":"M6.5 4.25C6.5 5.49264 5.49264 6.5 4.25 6.5C3.00736 6.5 2 5.49264 2 4.25C2 3.00736 3.00736 2 4.25 2C5.49264 2 6.5 3.00736 6.5 4.25Z"}],["$","path",null,{"d":"M12.326 9.5H11.5C10.5572 9.5 10.0858 9.5 9.79289 9.79289C9.5 10.0858 9.5 10.5572 9.5 11.5V20C9.5 20.9428 9.5 21.4142 9.79289 21.7071C10.0858 22 10.5572 22 11.5 22H12C12.9428 22 13.4142 22 13.7071 21.7071C14 21.4142 14 20.9428 14 20L14.0001 16.5001C14.0001 14.8433 14.5281 13.5001 16.0879 13.5001C16.8677 13.5001 17.5 14.1717 17.5 15.0001V19.5001C17.5 20.4429 17.5 20.9143 17.7929 21.2072C18.0857 21.5001 18.5572 21.5001 19.5 21.5001H19.9987C20.9413 21.5001 21.4126 21.5001 21.7055 21.2073C21.9984 20.9145 21.9985 20.4432 21.9987 19.5006L22.0001 14.0002C22.0001 11.515 19.6364 9.50024 17.2968 9.50024C15.9649 9.50024 14.7767 10.1531 14.0001 11.174C14 10.5439 14 10.2289 13.8632 9.995C13.7765 9.84686 13.6531 9.72353 13.505 9.63687C13.2711 9.5 12.9561 9.5 12.326 9.5Z","strokeLinejoin":"round"}]]}]}]}] 23:o6eb,31:["$","$L2e","Email",{"data-slot":"button","className":"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:-translate-y-[2px] ease-in-out hover:text-accent-foreground dark:hover:bg-accent/50 h-9 px-4 py-2 has-[>svg]:px-3 hover:bg-primary/10 rounded-full transition-all duration-300 hover:scale-110 [&>svg]:size-9 [&>svg]:stroke-2","nativeButton":false,"render":["$","a",null,{"href":"mailto:surajshah8009500@gmail.com","aria-label":"Email","children":["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 24 24","width":"48","height":"48","fill":"none","color":"currentColor","stroke":"currentColor","strokeWidth":"1.5","strokeLinejoin":"round","children":[["$","path",null,{"d":"M2 6L8.91302 9.91697C11.4616 11.361 12.5384 11.361 15.087 9.91697L22 6"}],["$","path",null,{"d":"M2.01577 13.4756C2.08114 16.5412 2.11383 18.0739 3.24496 19.2094C4.37608 20.3448 5.95033 20.3843 9.09883 20.4634C11.0393 20.5122 12.9607 20.5122 14.9012 20.4634C18.0497 20.3843 19.6239 20.3448 20.7551 19.2094C21.8862 18.0739 21.9189 16.5412 21.9842 13.4756C22.0053 12.4899 22.0053 11.5101 21.9842 10.5244C21.9189 7.45886 21.8862 5.92609 20.7551 4.79066C19.6239 3.65523 18.0497 3.61568 14.9012 3.53657C12.9607 3.48781 11.0393 3.48781 9.09882 3.53656C5.95033 3.61566 4.37608 3.65521 3.24495 4.79065C2.11382 5.92608 2.08114 7.45885 2.01576 10.5244C1.99474 11.5101 1.99475 12.4899 2.01577 13.4756Z"}]]}]}]}] 23:of8,32:["$","$L34",null,{"className":"w-full max-w-lg opacity-50"}] 33:["$","div",null,{"className":"space-y-3","children":["$","p",null,{"className":"text-muted-foreground/80 text-sm","children":["© ","$L35"," MaybeSuraj. Crafted with passion."]}]}] 23:of,1c:300 35:2026 23:o7f,2b:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}]] 23:o10,15:T2,id1a:T2,id23:o69f,36:I[58541,["/_next/static/immutable/chunks/3r392yjnzccf4.js","/_next/static/immutable/chunks/2lmowigkt-3qa.js","/_next/static/immutable/chunks/1q2w3c-qdow7n.js","/_next/static/immutable/chunks/2-34g60fa1no6.js","/_next/static/immutable/chunks/2pmv4tgt-a02p.js","/_next/static/immutable/chunks/29ppbn6hone2k.js","/_next/static/immutable/chunks/0uygvsqgnu39s.js","/_next/static/immutable/chunks/0vaiazik1x183.js","/_next/static/immutable/chunks/1w2flssw663og.js"],"default"] 37:I[85437,["/_next/static/immutable/chunks/3r392yjnzccf4.js","/_next/static/immutable/chunks/2lmowigkt-3qa.js","/_next/static/immutable/chunks/1q2w3c-qdow7n.js","/_next/static/immutable/chunks/2-34g60fa1no6.js","/_next/static/immutable/chunks/2pmv4tgt-a02p.js","/_next/static/immutable/chunks/29ppbn6hone2k.js","/_next/static/immutable/chunks/0uygvsqgnu39s.js","/_next/static/immutable/chunks/0vaiazik1x183.js","/_next/static/immutable/chunks/1w2flssw663og.js"],"Image"] 38:I[17157,["/_next/static/immutable/chunks/3r392yjnzccf4.js","/_next/static/immutable/chunks/2lmowigkt-3qa.js","/_next/static/immutable/chunks/1q2w3c-qdow7n.js","/_next/static/immutable/chunks/2-34g60fa1no6.js","/_next/static/immutable/chunks/2pmv4tgt-a02p.js","/_next/static/immutable/chunks/29ppbn6hone2k.js","/_next/static/immutable/chunks/0uygvsqgnu39s.js","/_next/static/immutable/chunks/0vaiazik1x183.js","/_next/static/immutable/chunks/1w2flssw663og.js"],"default"] 39:I[27201,["/_next/static/immutable/chunks/3r392yjnzccf4.js","/_next/static/immutable/chunks/2lmowigkt-3qa.js","/_next/static/immutable/chunks/1q2w3c-qdow7n.js","/_next/static/immutable/chunks/2-34g60fa1no6.js","/_next/static/immutable/chunks/2pmv4tgt-a02p.js"],"IconMark"] 23:oa71a,27:["$","div",null,{"className":"min-h-screen","children":[["$","div",null,{"className":"mx-auto max-w-5xl px-4 py-12 sm:px-6 lg:px-8 lg:py-20","children":["$","article",null,{"className":"space-y-10","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-3 text-sm text-stone-500","children":[["$","div",null,{"className":"flex items-center gap-2 rounded-full border border-stone-200 bg-stone-50 px-3 py-1.5","children":[["$","$L36",null,{"ref":"$undefined","iconNode":[["path",{"d":"M8 2v4","key":"1cmpym"}],["path",{"d":"M16 2v4","key":"4m81vk"}],["rect",{"width":"18","height":"18","x":"3","y":"4","rx":"2","key":"1hopcy"}],["path",{"d":"M3 10h18","key":"8toen8"}]],"className":"lucide-calendar h-4 w-4"}],["$","span",null,{"children":"July 31, 2026"}]]}],["$","div",null,{"className":"flex items-center gap-2 rounded-full border border-stone-200 bg-stone-50 px-3 py-1.5","children":[["$","$L36",null,{"ref":"$undefined","iconNode":[["circle",{"cx":"12","cy":"12","r":"10","key":"1mglay"}],["path",{"d":"M12 6v6l4 2","key":"mmk7yg"}]],"className":"lucide-clock h-4 w-4"}],["$","span",null,{"children":"11 min read"}]]}]]}],["$","div",null,{"className":"space-y-6","children":[["$","h1",null,{"className":"text-3xl font-semibold tracking-tight text-stone-900 sm:text-4xl lg:text-5xl","children":"When Real-Time Updates Become Bad UX: Buffering Convex Queries with useBufferedState"}],["$","p",null,{"className":"max-w-3xl text-lg leading-8 text-stone-600","children":"Real-time updates can make an app feel fast and responsive—but too many updates can also create a frustrating user experience. This post explores how to buffer Convex query updates with `useBufferedState` to keep React UIs smooth, stable, and predictable."}],["$","div",null,{"className":"flex flex-wrap gap-2","children":[["$","span","React",{"className":"rounded-full border border-stone-200 bg-stone-50 px-3 py-1 text-sm text-stone-600","children":"React"}],["$","span","Convex",{"className":"rounded-full border border-stone-200 bg-stone-50 px-3 py-1 text-sm text-stone-600","children":"Convex"}],["$","span","Nextjs",{"className":"rounded-full border border-stone-200 bg-stone-50 px-3 py-1 text-sm text-stone-600","children":"Nextjs"}],["$","span","TypeScript",{"className":"rounded-full border border-stone-200 bg-stone-50 px-3 py-1 text-sm text-stone-600","children":"TypeScript"}],["$","span","JavaScript",{"className":"rounded-full border border-stone-200 bg-stone-50 px-3 py-1 text-sm text-stone-600","children":"JavaScript"}],["$","span","UX",{"className":"rounded-full border border-stone-200 bg-stone-50 px-3 py-1 text-sm text-stone-600","children":"UX"}],["$","span","WebDevelopment",{"className":"rounded-full border border-stone-200 bg-stone-50 px-3 py-1 text-sm text-stone-600","children":"WebDevelopment"}],["$","span","RealTime",{"className":"rounded-full border border-stone-200 bg-stone-50 px-3 py-1 text-sm text-stone-600","children":"RealTime"}],["$","span","StateManagement",{"className":"rounded-full border border-stone-200 bg-stone-50 px-3 py-1 text-sm text-stone-600","children":"StateManagement"}],["$","span","Frontend",{"className":"rounded-full border border-stone-200 bg-stone-50 px-3 py-1 text-sm text-stone-600","children":"Frontend"}],["$","span","UserExperience",{"className":"rounded-full border border-stone-200 bg-stone-50 px-3 py-1 text-sm text-stone-600","children":"UserExperience"}],["$","span","Performance",{"className":"rounded-full border border-stone-200 bg-stone-50 px-3 py-1 text-sm text-stone-600","children":"Performance"}]]}]]}],["$","div",null,{"className":"relative aspect-video overflow-hidden rounded-2xl bg-stone-100","children":["$","$L37",null,{"src":"https://ik.imagekit.io/gesacxtjme/blog_assests/blog-eab82fdb-c36e-4360-81ec-14ac8a4f717a.png","alt":"When Real-Time Updates Become Bad UX: Buffering Convex Queries with useBufferedState","fill":true,"sizes":"(max-width: 768px) 100vw, 75vw","className":"object-cover"}]}]]}]}],["$","$L38",null,{"value":{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Real-time applications are great.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"You make a change somewhere, and the UI updates automatically. You don't have to manually refresh the page or write a bunch of synchronization logic. This is one of the things I really like about Convex.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"But while working with reactive queries, I ran into an interesting problem:","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"What happens when the latest data is not what the user should see right now?","type":"text","marks":[{"type":"bold"}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"This sounds a little strange at first. Isn't showing the latest data the whole point of a reactive query?","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Sometimes, yes.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"But sometimes, automatically updating the UI can actually make the experience worse.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"That led me to build a small React hook called ","type":"text"},{"text":"useBufferedState","type":"text","marks":[{"type":"code"}]},{"text":".","type":"text"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":2,"textAlign":null},"content":[{"text":"The Problem","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Imagine you're building a reading platform.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Users can publish articles, and the home page shows a feed of articles from other users.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"A simplified version might look like this:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"tsx"},"content":[{"text":"const posts = useQuery(api.posts.list);","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Then we render the posts:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"tsx"},"content":[{"text":"{posts?.map((post) => (\n \n))}","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Nothing unusual here.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Convex gives us a reactive query, so whenever the underlying data changes, the query updates and the UI re-renders.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"That's exactly what we want—until the user is in the middle of something.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Imagine you're reading a feed.","type":"text"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"You scroll down, find an interesting article, and start reading:","type":"text"}]},{"type":"codeBlock","attrs":{"language":null},"content":[{"text":"┌─────────────────────────┐\n│ Article A │\n│ │\n│ Article B │ ← You're reading\n│ │\n│ Article C │\n└─────────────────────────┘","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Then, while you're reading, another user publishes a new article. Because the query is reactive, the new article is immediately inserted into the feed:","type":"text"}]},{"type":"codeBlock","attrs":{"language":null},"content":[{"text":"┌─────────────────────────┐\n│ ✨ New Article │ ← Inserted\n│ │\n│ Article A │\n│ │\n│ Article B │ ← You were reading\n│ │\n│ Article C │\n└─────────────────────────┘","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"The application is doing exactly what it's supposed to do.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"The data is correct.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"The query is working correctly.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"The UI is up to date.","type":"text"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"But the user's context just changed underneath them.","type":"text","marks":[{"type":"bold"}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"They didn't ask for the feed to refresh. They didn't finish reading and decide to reload.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"They were simply reading.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"And that raises an interesting question:","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Should receiving the latest data always mean showing the latest data immediately?","type":"text","marks":[{"type":"bold"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"That's where the idea behind ","type":"text"},{"text":"useBufferedState","type":"text","marks":[{"type":"code"}]},{"text":" begins.","type":"text"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":2,"textAlign":null},"content":[{"text":"Reactivity Isn't Always the Same as Synchronization","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Convex's reactive queries are extremely useful. They keep the UI in sync with changes happening on the server. For many parts of an application, that's exactly what we want.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"A live dashboard, for example:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"text"},"content":[{"text":"Database changes\n ↓\nConvex query updates\n ↓\nReact receives new data\n ↓\nUI updates","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"In both cases, we usually want:","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Latest server state = Latest UI state","type":"text","marks":[{"type":"bold"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"When someone is reading, ","type":"text"},{"text":"preserving their context can be more important than showing every update immediately. ","type":"text","marks":[{"type":"bold"}]},{"text":"So instead of automatically synchronizing the UI, we can separate ","type":"text"},{"text":"receiving an update","type":"text","marks":[{"type":"bold"}]},{"text":" from ","type":"text"},{"text":"applying that update","type":"text","marks":[{"type":"bold"}]},{"text":":","type":"text"}]},{"type":"codeBlock","attrs":{"language":null},"content":[{"text":"┌──────────┐\n│ Database │\n└────┬─────┘\n │\n ↓\n┌──────────────┐\n│ Convex Query │\n└────┬─────────┘\n │\n ↓\n┌─────────────────────┐\n│ Latest data arrived │\n└──────────┬──────────┘\n │\n ├──────────────→ 🔔 Notify user\n │\n ↓\n ┌───────────┐\n │ Buffer │\n └─────┬─────┘\n │\n │ User decides\n ↓\n ┌─────────┐\n │ Sync │\n └────┬────┘\n ↓\n ┌─────────┐\n │ UI │\n └─────────┘","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"The query remains reactive.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"What's different is when the UI chooses to apply the new state.","type":"text","marks":[{"type":"bold"}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"That distinction is the foundation of ","type":"text"},{"text":"useBufferedState","type":"text","marks":[{"type":"code"}]},{"text":".","type":"text"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":2,"textAlign":null},"content":[{"text":"The Idea Behind ","type":"text"},{"text":"useBufferedState","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"The solution I came up with was to separate the data coming from the server from the data currently being displayed.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Instead of treating the query result as the UI state, I keep two values:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"text"},"content":[{"text":"upstream\n ↓\nLatest data from Convex\n\n\ncurrentVal\n ↓\nData currently being shown to the user","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"These two values are allowed to be different.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"For example:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"text"},"content":[{"text":"currentVal:\n[A, B, C]\n\nupstream:\n[NEW, A, B, C]","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Convex knows about the new article.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Our application knows about the new article.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"But the user can continue reading A, B, or C without the UI suddenly moving.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"When the user decides they want the latest content, we synchronize the two.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"That's what ","type":"text"},{"text":"useBufferedState","type":"text","marks":[{"type":"code"}]},{"text":" does.","type":"text"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":2,"textAlign":null},"content":[{"text":"The Hook","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Here's the complete hook:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"tsx"},"content":[{"text":"import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nexport function useBufferedState(\n upstream: T | null,\n differ: (oldVal: T | null, newVal: T) => D,\n) {\n const [currentVal, setCurrentVal] = useState(upstream);\n const upstreamRef = useRef(upstream);\n const hasLoadedInitialValue = useRef(upstream !== null);\n\n upstreamRef.current = upstream;\n\n useEffect(() => {\n if (!hasLoadedInitialValue.current && upstream !== null) {\n hasLoadedInitialValue.current = true;\n setCurrentVal(upstream);\n }\n }, [upstream]);\n\n const sync = useCallback(() => {\n setCurrentVal(upstreamRef.current);\n }, []);\n\n const diff = useMemo(() => {\n return upstream ? differ(currentVal, upstream) : null;\n }, [currentVal, differ, upstream]);\n\n return {\n currentVal,\n diff,\n sync,\n };\n}","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"It's a fairly small hook, but there are a few important ideas inside it.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Let's break it down.","type":"text"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":2,"textAlign":null},"content":[{"text":"Keeping the UI State Separate","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"The first thing we do is create local state:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"tsx"},"content":[{"text":"const [currentVal, setCurrentVal] = useState(upstream);","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"This is the value that the UI will actually use.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Initially, we want the UI to show the data that came from the query.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"So if Convex gives us:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"text"},"content":[{"text":"[A, B, C]","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"then our current value becomes:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"text"},"content":[{"text":"currentVal = [A, B, C]","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Now suppose another user publishes something.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Convex gives us:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"text"},"content":[{"text":"[NEW, A, B, C]","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"The important thing is that we ","type":"text"},{"text":"don't call ","type":"text","marks":[{"type":"bold"}]},{"text":"setCurrentVal","type":"text","marks":[{"type":"code"}]},{"text":" just because ","type":"text","marks":[{"type":"bold"}]},{"text":"upstream","type":"text","marks":[{"type":"code"}]},{"text":" changed","type":"text","marks":[{"type":"bold"}]},{"text":".","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"So we end up with:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"text"},"content":[{"text":"upstream = [NEW, A, B, C]\n\ncurrentVal = [A, B, C]","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"This is the entire idea behind the buffer.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"The server has moved forward.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"The UI hasn't.","type":"text"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":2,"textAlign":null},"content":[{"text":"Keeping Track of the Latest Data","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"We also keep a reference to the upstream value:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"tsx"},"content":[{"text":"const upstreamRef = useRef(upstream);\n\nupstreamRef.current = upstream;","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"The ref always contains the latest value from Convex.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Why not just use ","type":"text"},{"text":"upstream","type":"text","marks":[{"type":"code"}]},{"text":" directly when we want to synchronize?","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"We could, but the ref gives the ","type":"text"},{"text":"sync","type":"text","marks":[{"type":"code"}]},{"text":" callback a stable way to access the latest upstream value without making ","type":"text"},{"text":"sync","type":"text","marks":[{"type":"code"}]},{"text":" depend on every query update.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Think of ","type":"text"},{"text":"upstreamRef","type":"text","marks":[{"type":"code"}]},{"text":" as our storage for:","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"\"What is the latest data available right now?\"","type":"text"}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"While ","type":"text"},{"text":"currentVal","type":"text","marks":[{"type":"code"}]},{"text":" answers:","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"\"What data is the user currently looking at?\"","type":"text"}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Those are two different questions.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"And that's exactly what we want.","type":"text"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":2,"textAlign":null},"content":[{"text":"Handling the Initial Load","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"There is another small problem we need to handle.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"A Convex query can initially be ","type":"text"},{"text":"null","type":"text","marks":[{"type":"code"}]},{"text":" while it's loading.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"So when the hook is first created, we might have:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"text"},"content":[{"text":"upstream = null","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"and then later:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"text"},"content":[{"text":"upstream = [A, B, C]","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"We obviously want the first real value to become our initial UI state.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"That's why the hook keeps track of whether we've received the initial value:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"tsx"},"content":[{"text":"const hasLoadedInitialValue = useRef(upstream !== null);","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Then:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"tsx"},"content":[{"text":"useEffect(() => {\n if (!hasLoadedInitialValue.current && upstream !== null) {\n hasLoadedInitialValue.current = true;\n setCurrentVal(upstream);\n }\n}, [upstream]);","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"This gives us a simple rule:","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Use the first available upstream value to initialize the UI, but don't automatically replace the UI on every update after that.","type":"text","marks":[{"type":"bold"}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":2,"textAlign":null},"content":[{"text":"The ","type":"text"},{"text":"sync()","type":"text","marks":[{"type":"code"}]},{"text":" Function","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"This is probably the most important part of the hook:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"tsx"},"content":[{"text":"const sync = useCallback(() => {\n setCurrentVal(upstreamRef.current);\n}, []);","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Remember that ","type":"text"},{"text":"upstreamRef.current","type":"text","marks":[{"type":"code"}]},{"text":" always contains the latest data.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"So calling:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"tsx"},"content":[{"text":"sync();","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"means:","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"\"Okay, show me the latest data.\"","type":"text"}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"For our reading application, we could have a small indicator at the top of the feed:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"text"},"content":[{"text":"┌──────────────────────────────────┐\n│ ↑ 3 new articles available │\n│ │\n│ [Show new articles] │\n└──────────────────────────────────┘","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"The user can continue reading.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"When they're ready, they click the button.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"We call:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"tsx"},"content":[{"text":"sync();","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"And now:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"text"},"content":[{"text":"Before:\n\ncurrentVal = [A, B, C]\nupstream = [NEW, A, B, C]\n\n\nAfter sync():\n\ncurrentVal = [NEW, A, B, C]\nupstream = [NEW, A, B, C]","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"The UI is now synchronized with the latest server state.","type":"text"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":2,"textAlign":null},"content":[{"text":"But How Do We Know There Are New Posts?","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"This is where the ","type":"text"},{"text":"differ","type":"text","marks":[{"type":"code"}]},{"text":" function comes in.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"The hook accepts:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"tsx"},"content":[{"text":"differ: (oldVal: T | null, newVal: T) => D","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"And calculates:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"tsx"},"content":[{"text":"const diff = useMemo(() => {\n return upstream ? differ(currentVal, upstream) : null;\n}, [currentVal, differ, upstream]);","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"I intentionally made the hook unaware of what a \"difference\" actually means.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"For a list of articles, maybe the difference is:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"text"},"content":[{"text":"3 new articles","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"For another application, it could mean:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"text"},"content":[{"text":"2 records changed","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Or:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"text"},"content":[{"text":"The current document has been modified","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Or even:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"text"},"content":[{"text":"There is a conflict","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"The hook doesn't need to know.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"The consumer decides what the difference means.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"For example:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"tsx"},"content":[{"text":"const { currentVal, diff, sync } = useBufferedState(\n posts,\n (current, latest) => {\n if (!current) return latest.length;\n\n return latest.length - current.length;\n },\n);","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Now we can use ","type":"text"},{"text":"diff","type":"text","marks":[{"type":"code"}]},{"text":" in the UI.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Something like:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"tsx"},"content":[{"text":"{diff > 0 && (\n \n)}","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"So instead of automatically changing the feed, the application can tell the user:","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"\"There is new content.\"","type":"text"}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"And then let the user decide what happens next.","type":"text"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":2,"textAlign":null},"content":[{"text":"Using It With Convex","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"The final component can be quite simple:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"tsx"},"content":[{"text":"function Home() {\n const posts = useQuery(api.posts.list);\n\n const { currentVal, diff, sync } = useBufferedState(\n posts,\n (current, latest) => {\n if (!current) return latest.length;\n\n return latest.length - current.length;\n },\n );\n\n return (\n

\n {diff > 0 && (\n \n )}\n\n {currentVal?.map((post) => (\n \n ))}\n

\n );\n}","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"The important thing here is that we're still using:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"tsx"},"content":[{"text":"useQuery(api.posts.list)","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"The query remains reactive.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"We're not disabling Convex reactivity.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"We're simply putting a layer between the reactive data and the UI.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"The data flow becomes:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"text"},"content":[{"text":" Convex\n │\n │\n reactive query\n │\n ↓\n upstream\n │\n ┌──────┴──────┐\n │ │\n ↓ ↓\n latest value diff\n │\n │\n ↓\n upstreamRef\n │\n │\n wait for user\n │\n ↓\n sync()\n │\n ↓\n currentVal\n │\n ↓\n UI","type":"text"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":2,"textAlign":null},"content":[{"text":"Why Not Just Stop Using a Reactive Query?","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"This was an important question for me.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"If reactivity is causing the problem, why not just fetch the data once and stop using a reactive query?","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"That would solve the UI problem, but we'd also lose one of the biggest benefits of Convex.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"The application would no longer know when the underlying data changes.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"I'd rather keep the reactivity and make the ","type":"text"},{"text":"UI synchronization intentional","type":"text","marks":[{"type":"bold"}]},{"text":".","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"That's the key difference.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"I still want to know that new data exists.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"I just don't necessarily want to force that data into the user's current context.","type":"text"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":2,"textAlign":null},"content":[{"text":"Where This Pattern Is Useful","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"The reading feed is just one example.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"The same idea can be useful anywhere the user is interacting with a piece of data while that data can also change externally.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"For example:","type":"text"}]},{"type":"heading","attrs":{"level":3,"textAlign":null},"content":[{"text":"Reading feeds","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"A user is reading an article while new articles are published.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Don't move the feed underneath them.","type":"text"}]},{"type":"heading","attrs":{"level":3,"textAlign":null},"content":[{"text":"Collaborative editors","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Someone else changes a document while you're editing it.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"You probably don't want their changes to blindly replace your current state.","type":"text"}]},{"type":"heading","attrs":{"level":3,"textAlign":null},"content":[{"text":"Forms","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"A server-side record changes while a user is filling out a form.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Automatically replacing the form could destroy what they have typed.","type":"text"}]},{"type":"heading","attrs":{"level":3,"textAlign":null},"content":[{"text":"Dashboards","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"A dashboard can continue receiving new data while the user is inspecting the current state.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"The user can choose when to refresh the view.","type":"text"}]},{"type":"heading","attrs":{"level":3,"textAlign":null},"content":[{"text":"Lists with frequent updates","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"If new items are constantly being added to a list, automatically inserting them at the top can cause the user's scroll position to jump.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"A \"Show new items\" action can be much more pleasant.","type":"text"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":2,"textAlign":null},"content":[{"text":"The Bigger Idea","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"The interesting part of this problem isn't really the hook.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"It's the distinction between ","type":"text"},{"text":"data state","type":"text","marks":[{"type":"bold"}]},{"text":" and ","type":"text"},{"text":"UI state","type":"text","marks":[{"type":"bold"}]},{"text":".","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"A reactive backend tells us:","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"\"This is the latest state of the world.\"","type":"text"}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"But the UI sometimes needs to answer a different question:","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"\"What should the user see right now?\"","type":"text"}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Those two things don't always have to be identical.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"In a real-time application, we can have:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"text"},"content":[{"text":"Server state\n ↓\nLatest available information\n ↓\nApplication decides when to apply it\n ↓\nUI state","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Instead of:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"text"},"content":[{"text":"Server state\n ↓\nImmediately replace UI","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"That small layer of control can make a big difference to the user experience.","type":"text"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":2,"textAlign":null},"content":[{"text":"Final Thoughts","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"I really like reactive systems because they remove a lot of unnecessary synchronization work.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"But this experience reminded me that ","type":"text"},{"text":"more real-time isn't always better UX","type":"text","marks":[{"type":"bold"}]},{"text":".","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Sometimes the best experience is not showing the latest information immediately.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Sometimes it's simply letting the user know:","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"\"Hey, something changed. I'll leave your current view alone, and you can decide when you're ready to see it.\"","type":"text"}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"That's what ","type":"text"},{"text":"useBufferedState","type":"text","marks":[{"type":"code"}]},{"text":" is trying to provide.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"It doesn't make Convex less reactive.","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"It doesn't fight against ","type":"text"},{"text":"useQuery","type":"text","marks":[{"type":"code"}]},{"text":".","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"It simply separates ","type":"text"},{"text":"receiving new data","type":"text","marks":[{"type":"bold"}]},{"text":" from ","type":"text"},{"text":"deciding when that data should change the user's current view","type":"text","marks":[{"type":"bold"}]},{"text":".","type":"text"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"And in applications where preserving user context matters, that small distinction can be surprisingly valuable.","type":"text"}]},{"type":"heading","attrs":{"level":2,"textAlign":null},"content":[{"text":"Further reading","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Managing Reactivity with ","type":"text","marks":[{"type":"bold"}]},{"text":"useBufferedState","type":"text","marks":[{"type":"code"}]},{"text":" — the Convex article/video that inspired this approach. ","type":"text"},{"text":"Read on Convex","type":"text","marks":[{"type":"link","attrs":{"rel":"noopener","href":"https://stack.convex.dev/coping-with-the-web-s-looming-global-reactivity-crisis?utm_source=chatgpt.com","class":"decorated-link","title":null,"target":"_blank"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Convex React Documentation","type":"text","marks":[{"type":"bold"}]},{"text":" — learn how ","type":"text"},{"text":"useQuery","type":"text","marks":[{"type":"code"}]},{"text":", ","type":"text"},{"text":"useMutation","type":"text","marks":[{"type":"code"}]},{"text":", and other React integrations work. ","type":"text"},{"text":"Convex React Docs","type":"text","marks":[{"type":"link","attrs":{"rel":"noopener","href":"https://docs.convex.dev/client/react/overview?utm_source=chatgpt.com","class":"decorated-link","title":null,"target":"_blank"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Convex ","type":"text","marks":[{"type":"bold"}]},{"text":"useQuery","type":"text","marks":[{"type":"code"}]},{"text":" API","type":"text","marks":[{"type":"bold"}]},{"text":" — the reference for reactive queries and their behavior. ","type":"text"},{"text":"useQuery API Reference","type":"text","marks":[{"type":"link","attrs":{"rel":"noopener","href":"https://docs.convex.dev/api/modules/react?utm_source=chatgpt.com","class":"decorated-link","title":null,"target":"_blank"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"text":"Convex Overview","type":"text","marks":[{"type":"bold"}]},{"text":" — a good introduction to Convex's reactive database model. ","type":"text"},{"text":"Convex Overview","type":"text","marks":[{"type":"link","attrs":{"rel":"noopener","href":"https://docs.convex.dev/understanding/overview?utm_source=chatgpt.com","class":"decorated-link","title":null,"target":"_blank"}}]}]}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}}]]}] 23:o8,29:null 23:oe5f,2d:[["$","title","0",{"children":"When Real-Time Updates Become Bad UX: Buffering Convex Queries with useBufferedState | Suraj Shah"}],["$","meta","1",{"name":"description","content":"Real-time updates can make an app feel fast and responsive—but too many updates can also create a frustrating user experience. This post explores how to buffer Convex query updates with `useBufferedState` to keep React UIs smooth, stable, and predictable."}],["$","link","2",{"rel":"author","href":"https://www.maybesuraj.dev"}],["$","meta","3",{"name":"author","content":"Suraj"}],["$","meta","4",{"name":"keywords","content":"React,Convex,Nextjs,TypeScript,JavaScript,UX,WebDevelopment,RealTime,StateManagement,Frontend,UserExperience,Performance"}],["$","meta","5",{"name":"creator","content":"Suraj Shah"}],["$","meta","6",{"name":"publisher","content":"Suraj Shah"}],["$","meta","7",{"name":"robots","content":"index, follow"}],["$","meta","8",{"name":"googlebot","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","link","9",{"rel":"canonical","href":"https://www.maybesuraj.dev/"}],["$","meta","10",{"name":"format-detection","content":"telephone=no, address=no, email=no"}],["$","meta","11",{"property":"og:title","content":"When Real-Time Updates Become Bad UX: Buffering Convex Queries with useBufferedState"}],["$","meta","12",{"property":"og:description","content":"Real-time updates can make an app feel fast and responsive—but too many updates can also create a frustrating user experience. This post explores how to buffer Convex query updates with `useBufferedState` to keep React UIs smooth, stable, and predictable."}],["$","meta","13",{"property":"og:url","content":"https://www.maybesuraj.dev/blog/when-real-time-updates-become-bad-ux-buffering-convex-queries-with-usebufferedstate/"}],["$","meta","14",{"property":"og:image","content":"https://www.maybesuraj.dev/blog/when-real-time-updates-become-bad-ux-buffering-convex-queries-with-usebufferedstate/opengraph-image"}],["$","meta","15",{"property":"og:image:width","content":"1200"}],["$","meta","16",{"property":"og:image:height","content":"630"}],["$","meta","17",{"property":"og:image:alt","content":"When Real-Time Updates Become Bad UX: Buffering Convex Queries with useBufferedState"}],["$","meta","18",{"property":"og:type","content":"article"}],["$","meta","19",{"property":"article:published_time","content":"2026-07-31T11:19:32.259Z"}],["$","meta","20",{"property":"article:modified_time","content":"2026-08-14T18:39:40.299Z"}],["$","meta","21",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","22",{"name":"twitter:title","content":"When Real-Time Updates Become Bad UX: Buffering Convex Queries with useBufferedState"}],["$","meta","23",{"name":"twitter:description","content":"Real-time updates can make an app feel fast and responsive—but too many updates can also create a frustrating user experience. This post explores how to buffer Convex query updates with `useBufferedState` to keep React UIs smooth, stable, and predictable."}],["$","meta","24",{"name":"twitter:image","content":"https://www.maybesuraj.dev/blog/when-real-time-updates-become-bad-ux-buffering-convex-queries-with-usebufferedstate/twitter-image"}],["$","meta","25",{"name":"twitter:image:alt","content":"When Real-Time Updates Become Bad UX: Buffering Convex Queries with useBufferedState"}],["$","meta","26",{"name":"twitter:image:width","content":"1200"}],["$","meta","27",{"name":"twitter:image:height","content":"630"}],["$","link","28",{"rel":"icon","href":"/favicon.ico?favicon.3pf_b5h-9j213.ico","sizes":"48x48","type":"image/x-icon"}],["$","$L39","29",{}]] 23:o30,1c:C 1a:C 1b:C 15:C 17:C 18:C 1e:false 1d:39712 23:C