[{"data":1,"prerenderedAt":657},["ShallowReactive",2],{"navigation":3,"-frameworks-react":65,"-frameworks-react-surround":654},[4,15,29,47],{"title":5,"path":6,"stem":7,"children":8,"icon":10},"Omni Async","\u002Fguide","1.guide\u002F1.index",[9,11],{"title":5,"path":6,"stem":7,"icon":10},"i-lucide-book-open",{"title":12,"path":13,"stem":14,"icon":10},"Quick start","\u002Fguide\u002Fquick-start","1.guide\u002F2.quick-start",{"title":16,"path":17,"stem":18,"children":19},"Async state","\u002Fconcepts","2.concepts\u002F1.index",[20,21,25],{"title":16,"path":17,"stem":18},{"title":22,"path":23,"stem":24},"Concurrency and cancellation","\u002Fconcepts\u002Fconcurrency-and-cancellation","2.concepts\u002F2.concurrency-and-cancellation",{"title":26,"path":27,"stem":28},"Notifications and equality","\u002Fconcepts\u002Fnotifications","2.concepts\u002F3.notifications",{"title":30,"path":31,"stem":32,"children":33},"Framework adapters","\u002Fframeworks","3.frameworks\u002F1.index",[34,35,39,43],{"title":30,"path":31,"stem":32},{"title":36,"path":37,"stem":38},"React","\u002Fframeworks\u002Freact","3.frameworks\u002F2.react",{"title":40,"path":41,"stem":42},"Vue","\u002Fframeworks\u002Fvue","3.frameworks\u002F3.vue",{"title":44,"path":45,"stem":46},"Svelte","\u002Fframeworks\u002Fsvelte","3.frameworks\u002F4.svelte",{"title":48,"path":49,"stem":50,"children":51},"Core API","\u002Fapi","4.api\u002F1.index",[52,53,57,61],{"title":48,"path":49,"stem":50},{"title":54,"path":55,"stem":56},"React API","\u002Fapi\u002Freact","4.api\u002F2.react",{"title":58,"path":59,"stem":60},"Vue API","\u002Fapi\u002Fvue","4.api\u002F3.vue",{"title":62,"path":63,"stem":64},"Svelte API","\u002Fapi\u002Fsvelte","4.api\u002F4.svelte",{"id":66,"title":36,"body":67,"description":80,"extension":649,"meta":650,"navigation":651,"path":37,"seo":652,"stem":38,"__hash__":653},"content\u002F3.frameworks\u002F2.react.md",{"type":68,"value":69,"toc":645},"minimark",[70,74,100,105,521,530,534,635,641],[71,72,73],"p",{},"Install the adapter alongside React 18.3 or newer:",[75,76,81],"pre",{"className":77,"code":78,"language":79,"meta":80,"style":80},"language-bash shiki shiki-themes github-light github-dark github-dark","pnpm add @omni-async\u002Freact\n","bash","",[82,83,84],"code",{"__ignoreMap":80},[85,86,89,93,97],"span",{"class":87,"line":88},"line",1,[85,90,92],{"class":91},"shcOC","pnpm",[85,94,96],{"class":95},"sfrk1"," add",[85,98,99],{"class":95}," @omni-async\u002Freact\n",[101,102,104],"h2",{"id":103},"query","Query",[75,106,110],{"className":107,"code":108,"language":109,"meta":80,"style":80},"language-tsx shiki shiki-themes github-light github-dark github-dark","import { useQuery } from \"@omni-async\u002Freact\";\n\nfunction Search() {\n  const results = useQuery(\n    async (term: string) => {\n      const response = await fetch(`\u002Fapi\u002Fsearch?q=${encodeURIComponent(term)}`);\n      if (!response.ok) throw new Error(\"Search failed\");\n      return response.json() as Promise\u003Cstring[]>;\n    },\n    { initial: () => [] },\n  );\n\n  return (\n    \u003C>\n      \u003Cbutton disabled={results.loading} onClick={() => void results.trigger(\"async\")}>\n        Search\n      \u003C\u002Fbutton>\n      {results.error ? \u003Cp>Search failed\u003C\u002Fp> : null}\n      \u003Cul>\n        {results.data.map((item) => (\n          \u003Cli key={item}>{item}\u003C\u002Fli>\n        ))}\n      \u003C\u002Ful>\n    \u003C\u002F>\n  );\n}\n","tsx",[82,111,112,131,138,150,169,197,236,266,296,302,319,325,330,339,345,391,397,408,438,448,469,490,496,505,511,516],{"__ignoreMap":80},[85,113,114,118,122,125,128],{"class":87,"line":88},[85,115,117],{"class":116},"so5gQ","import",[85,119,121],{"class":120},"slsVL"," { useQuery } ",[85,123,124],{"class":116},"from",[85,126,127],{"class":95}," \"@omni-async\u002Freact\"",[85,129,130],{"class":120},";\n",[85,132,134],{"class":87,"line":133},2,[85,135,137],{"emptyLinePlaceholder":136},true,"\n",[85,139,141,144,147],{"class":87,"line":140},3,[85,142,143],{"class":116},"function",[85,145,146],{"class":91}," Search",[85,148,149],{"class":120},"() {\n",[85,151,153,156,160,163,166],{"class":87,"line":152},4,[85,154,155],{"class":116},"  const",[85,157,159],{"class":158},"suiK_"," results",[85,161,162],{"class":116}," =",[85,164,165],{"class":91}," useQuery",[85,167,168],{"class":120},"(\n",[85,170,172,175,178,182,185,188,191,194],{"class":87,"line":171},5,[85,173,174],{"class":116},"    async",[85,176,177],{"class":120}," (",[85,179,181],{"class":180},"sQHwn","term",[85,183,184],{"class":116},":",[85,186,187],{"class":158}," string",[85,189,190],{"class":120},") ",[85,192,193],{"class":116},"=>",[85,195,196],{"class":120}," {\n",[85,198,200,203,206,208,211,214,217,220,223,225,227,230,233],{"class":87,"line":199},6,[85,201,202],{"class":116},"      const",[85,204,205],{"class":158}," response",[85,207,162],{"class":116},[85,209,210],{"class":116}," await",[85,212,213],{"class":91}," fetch",[85,215,216],{"class":120},"(",[85,218,219],{"class":95},"`\u002Fapi\u002Fsearch?q=${",[85,221,222],{"class":91},"encodeURIComponent",[85,224,216],{"class":95},[85,226,181],{"class":120},[85,228,229],{"class":95},")",[85,231,232],{"class":95},"}`",[85,234,235],{"class":120},");\n",[85,237,239,242,244,247,250,253,256,259,261,264],{"class":87,"line":238},7,[85,240,241],{"class":116},"      if",[85,243,177],{"class":120},[85,245,246],{"class":116},"!",[85,248,249],{"class":120},"response.ok) ",[85,251,252],{"class":116},"throw",[85,254,255],{"class":116}," new",[85,257,258],{"class":91}," Error",[85,260,216],{"class":120},[85,262,263],{"class":95},"\"Search failed\"",[85,265,235],{"class":120},[85,267,269,272,275,278,281,284,287,290,293],{"class":87,"line":268},8,[85,270,271],{"class":116},"      return",[85,273,274],{"class":120}," response.",[85,276,277],{"class":91},"json",[85,279,280],{"class":120},"() ",[85,282,283],{"class":116},"as",[85,285,286],{"class":91}," Promise",[85,288,289],{"class":120},"\u003C",[85,291,292],{"class":158},"string",[85,294,295],{"class":120},"[]>;\n",[85,297,299],{"class":87,"line":298},9,[85,300,301],{"class":120},"    },\n",[85,303,305,308,311,314,316],{"class":87,"line":304},10,[85,306,307],{"class":120},"    { ",[85,309,310],{"class":91},"initial",[85,312,313],{"class":120},": () ",[85,315,193],{"class":116},[85,317,318],{"class":120}," [] },\n",[85,320,322],{"class":87,"line":321},11,[85,323,324],{"class":120},"  );\n",[85,326,328],{"class":87,"line":327},12,[85,329,137],{"emptyLinePlaceholder":136},[85,331,333,336],{"class":87,"line":332},13,[85,334,335],{"class":116},"  return",[85,337,338],{"class":120}," (\n",[85,340,342],{"class":87,"line":341},14,[85,343,344],{"class":120},"    \u003C>\n",[85,346,348,351,355,358,361,364,367,369,372,374,377,380,383,385,388],{"class":87,"line":347},15,[85,349,350],{"class":120},"      \u003C",[85,352,354],{"class":353},"sByVh","button",[85,356,357],{"class":91}," disabled",[85,359,360],{"class":116},"=",[85,362,363],{"class":120},"{results.loading} ",[85,365,366],{"class":91},"onClick",[85,368,360],{"class":116},[85,370,371],{"class":120},"{() ",[85,373,193],{"class":116},[85,375,376],{"class":116}," void",[85,378,379],{"class":120}," results.",[85,381,382],{"class":91},"trigger",[85,384,216],{"class":120},[85,386,387],{"class":95},"\"async\"",[85,389,390],{"class":120},")}>\n",[85,392,394],{"class":87,"line":393},16,[85,395,396],{"class":120},"        Search\n",[85,398,400,403,405],{"class":87,"line":399},17,[85,401,402],{"class":120},"      \u003C\u002F",[85,404,354],{"class":353},[85,406,407],{"class":120},">\n",[85,409,411,414,417,420,422,425,427,430,432,435],{"class":87,"line":410},18,[85,412,413],{"class":120},"      {results.error ",[85,415,416],{"class":116},"?",[85,418,419],{"class":120}," \u003C",[85,421,71],{"class":353},[85,423,424],{"class":120},">Search failed\u003C\u002F",[85,426,71],{"class":353},[85,428,429],{"class":120},"> ",[85,431,184],{"class":116},[85,433,434],{"class":158}," null",[85,436,437],{"class":120},"}\n",[85,439,441,443,446],{"class":87,"line":440},19,[85,442,350],{"class":120},[85,444,445],{"class":353},"ul",[85,447,407],{"class":120},[85,449,451,454,457,460,463,465,467],{"class":87,"line":450},20,[85,452,453],{"class":120},"        {results.data.",[85,455,456],{"class":91},"map",[85,458,459],{"class":120},"((",[85,461,462],{"class":180},"item",[85,464,190],{"class":120},[85,466,193],{"class":116},[85,468,338],{"class":120},[85,470,472,475,478,481,483,486,488],{"class":87,"line":471},21,[85,473,474],{"class":120},"          \u003C",[85,476,477],{"class":353},"li",[85,479,480],{"class":91}," key",[85,482,360],{"class":116},[85,484,485],{"class":120},"{item}>{item}\u003C\u002F",[85,487,477],{"class":353},[85,489,407],{"class":120},[85,491,493],{"class":87,"line":492},22,[85,494,495],{"class":120},"        ))}\n",[85,497,499,501,503],{"class":87,"line":498},23,[85,500,402],{"class":120},[85,502,445],{"class":353},[85,504,407],{"class":120},[85,506,508],{"class":87,"line":507},24,[85,509,510],{"class":120},"    \u003C\u002F>\n",[85,512,514],{"class":87,"line":513},25,[85,515,324],{"class":120},[85,517,519],{"class":87,"line":518},26,[85,520,437],{"class":120},[71,522,523,526,527,529],{},[82,524,525],{},"useQuery"," uses latest-request concurrency. Its ",[82,528,310],{}," function supplies initial data and is called again to produce fallback data after an error.",[101,531,533],{"id":532},"fetch-on-mount","Fetch on mount",[75,535,537],{"className":107,"code":536,"language":109,"meta":80,"style":80},"const users = useFetch(\n  async (signal) => {\n    const response = await fetch(\"\u002Fapi\u002Fusers\", { signal });\n    return response.json() as Promise\u003CUser[]>;\n  },\n  { initial: () => [] },\n);\n",[82,538,539,554,570,591,613,618,631],{"__ignoreMap":80},[85,540,541,544,547,549,552],{"class":87,"line":88},[85,542,543],{"class":116},"const",[85,545,546],{"class":158}," users",[85,548,162],{"class":116},[85,550,551],{"class":91}," useFetch",[85,553,168],{"class":120},[85,555,556,559,561,564,566,568],{"class":87,"line":133},[85,557,558],{"class":116},"  async",[85,560,177],{"class":120},[85,562,563],{"class":180},"signal",[85,565,190],{"class":120},[85,567,193],{"class":116},[85,569,196],{"class":120},[85,571,572,575,577,579,581,583,585,588],{"class":87,"line":140},[85,573,574],{"class":116},"    const",[85,576,205],{"class":158},[85,578,162],{"class":116},[85,580,210],{"class":116},[85,582,213],{"class":91},[85,584,216],{"class":120},[85,586,587],{"class":95},"\"\u002Fapi\u002Fusers\"",[85,589,590],{"class":120},", { signal });\n",[85,592,593,596,598,600,602,604,606,608,611],{"class":87,"line":152},[85,594,595],{"class":116},"    return",[85,597,274],{"class":120},[85,599,277],{"class":91},[85,601,280],{"class":120},[85,603,283],{"class":116},[85,605,286],{"class":91},[85,607,289],{"class":120},[85,609,610],{"class":91},"User",[85,612,295],{"class":120},[85,614,615],{"class":87,"line":171},[85,616,617],{"class":120},"  },\n",[85,619,620,623,625,627,629],{"class":87,"line":199},[85,621,622],{"class":120},"  { ",[85,624,310],{"class":91},[85,626,313],{"class":120},[85,628,193],{"class":116},[85,630,318],{"class":120},[85,632,633],{"class":87,"line":238},[85,634,235],{"class":120},[71,636,637,640],{},[82,638,639],{},"useFetch"," starts on mount, aborts the previous fetch before a new one, and aborts during cleanup.",[642,643,644],"style",{},"html pre.shiki code .shcOC, html code.shiki .shcOC{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#B392F0}html pre.shiki code .sfrk1, html code.shiki .sfrk1{--shiki-light:#032F62;--shiki-default:#9ECBFF;--shiki-dark:#9ECBFF}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);}html pre.shiki code .so5gQ, html code.shiki .so5gQ{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#F97583}html pre.shiki code .slsVL, html code.shiki .slsVL{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#E1E4E8}html pre.shiki code .suiK_, html code.shiki .suiK_{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#79B8FF}html pre.shiki code .sQHwn, html code.shiki .sQHwn{--shiki-light:#E36209;--shiki-default:#FFAB70;--shiki-dark:#FFAB70}html pre.shiki code .sByVh, html code.shiki .sByVh{--shiki-light:#22863A;--shiki-default:#85E89D;--shiki-dark:#85E89D}",{"title":80,"searchDepth":133,"depth":133,"links":646},[647,648],{"id":103,"depth":133,"text":104},{"id":532,"depth":133,"text":533},"md",{},{},{"title":36,"description":80},"YsGjpO6SDGX2L-LI5rK08U0n2dxpGbDTwiAIfAjLi7g",[655,656],{"title":30,"path":31,"stem":32,"description":80,"children":-1},{"title":40,"path":41,"stem":42,"description":80,"children":-1},1786006626257]