SolidJS 2.0 ships with a native async-data model that lets a component treat a promise like any other reactive value, and it does so without the cascade of re-renders that React developers see with Suspense and hooks. The change matters because it keeps UI on screen while data refreshes, cuts boilerplate, and offers a concrete path for React teams to move their data-fetching code over to Solid.
Why Solid’s async model feels different
In React, a component that needs data usually calls a hook (often a custom one) that returns a promise-like object, then wraps the UI in <Suspense> to show a fallback while the promise resolves. Every time the promise settles, React schedules a re-render; if the same component later refetches, the fallback can flash over content that is already visible.
Solid flips the script. A promise is simply a value that the reactive graph watches. When a computation reads that value, the graph pauses that read until the promise resolves, but the rest of the UI stays rendered. The first time a component mounts, a <Loading> boundary can display a fallback; after that, a refetch leaves the existing DOM untouched until the new data arrives. No explicit “await” inside the component, no createResource, no manual state toggles.
The core primitives
<Loading>boundary – Replaces React’s<Suspense>. It shows a fallback only on the initial load. After the first paint, a pending read does not replace the UI; the old content remains until the fresh value resolves. Pass anonprop to force a spinner on a specific refetch.<Reveal>component – Controls how multiple<Loading>boundaries appear together. Choose:- Sequential: boundaries reveal one after another in DOM order.
- Together: all reveal at once when every piece of data is ready.
- Natural: each reveals as soon as its own data lands.
isPendingsignal – Returnstruewhile a particular read is in flight. Use it to overlay a thin loading bar or subtle animation while the main content stays visible, giving you “stale-while-revalidate” for free.actiongenerator – Replaces React’s mutable-state updates. Anaction(function*…)can optimistically update the UI,yieldto wait for a server response, then reconcile the result when the promise resolves. The UI feels instant, and the reconciliation step is baked into the primitive.
How the pieces map to React concepts
| Feature | React approach | Solid 2.0 approach |
|---|---|---|
| Data fetching | use() (experimental) or third-party hooks; result wrapped in <Suspense> |
createMemo (or similar) that returns a promise; read directly in JSX |
| Loading UI | <Suspense> may re-trigger fallback on every refetch |
<Loading> only on first load; refetch keeps old UI |
| Refreshing | useTransition to defer UI updates |
isPending signals pending reads without UI swap |
| Mutations | useState/useReducer + async calls, often wrapped in custom actions |
action(function*…) with built-in optimistic handling |
The practical upshot is that Solid builds what React treats as separate hooks into the core reactivity engine.
A step-by-step migration guide
- Tambua chanzo cha data – Katika React, huenda unakuwa na
const data = useMyFetch(url). Katika Solid, badilisha hiyo kwa memo inayorudisha promise:const data = createMemo(() => fetch(url).then(r => r.json())). - Zungusha kiungo cha ngazi ya juu (top-level component) – Ikiwa kiungo kinatengenezwa kabla ya promise kukamilika, ukizungushe na
<Loading fallback={<Spinner/>}>…</Loading>. Fallback huonekana wakati wa kuanza (first mount) pekee. - Badilisha spinner za kila refetch – Pale ulipokuwa ukibadilisha flag ya loading hapo awali, sasa soma
isPending(data). Tumia boolean hiyo kuonyesha kiashiria kidogo wakati UI iliyopo inabaki kwenye kioo. - Badilisha updates za optimistic – Ikiwa ulikuwa na
setState(prev => ({...prev, optimisticValue}))ikifuatiwa na wito wa async, uandike upya kamaconst update = action(function* (newValue) { state = newValue; const server = yield fetch(...); state = reconcile(server); });. Generator inatoa udhibiti hadi seva itakapojibu, kisha inasasisha graph ya reactive kiotomatiki. - Shughulikia vipande vingi vya async – Tandaza mipaka ya
<Loading>kama inavyohitajika, kisha ongeza kizuizi (wrapper) cha<Reveal>ili kuamua ikiwa zitaonekana pamoja au moja baada ya nyingine. Hii inachukua nafasi ya mifumo ambapo watengenezaji wa React walipanga vipengele vingi vya<Suspense>kwa kutumia ukaguzi tata wa hali (state checks). - Jaribu mtiririko – Kwa sababu Solid haifanyi re-render wakati promise inapotatuliwa, hakikisha kuwa updates za UI bado zinatokea pale unapozitarajia. Graph ya reactive inasambaza mabadiliko kiotomatiki; hakuna haja ya kutumia
useEffectza ziada.
Mambo ambayo bado hayajakaa sawa
API ya async ya Solid 2.0 kwa sasa iko katika hatua ya beta. Majina kama <Loading> na action yanaweza kubadilika kabla ya toleo la kudumu, na hati (documentation) bado inakua. Wazo kuu—kuchukulia promises kama reactive values—halibadiliki, lakini watumiaji wa mapema wanapaswa kutarajia mabadiliko madogo yanayoweza kuvunja mifumo (breaking changes) wakati maktaba inapozidi kuwa thabiti.
Nani atafaidika
- Timu za React zenye upakiaji mkubwa wa data – Kupungua kwa uhitaji wa maktaba za nje za state na mfumo wa stale-while-revalidate unaweza kupunguza ukubwa wa bundle na kurahisisha msimbo (codebases).
- Programu zinazozingatia utendaji – Kwa kuepuka re-renders kamili za kiungo kwenye kila fetch, Solid inatoa updates za kuonekana zinazotiririka vizuri zaidi, hasa kwenye vifaa vya hali ya chini.
- Watengenezaji waliochoka na “flash of spinner” – Tabia ya mpaka wa
<Loading>ya “first-load-only” inaondoa usumbufu wa kawaida wa spinner inayowaka juu ya maudhui ambayo tayari yanaonekana.
Changamoto zinazoweza kutokea
- Hali ya beta – Mpaka API itakapostabilize, miradi ya muda mrefu inaweza kuhitaji bajeti ya jitihada za uhamiaji (migration) baadaye.
Nini cha kufuatilia baadaye
Endelea kufuatilia changelog rasmi kwa mabadiliko yoyote ya majina ya <Loading> au action.
Hitimisho: SolidJS 2.0 inakuwezesha kuchukulia promises kama reactive values za daraja la kwanza, ikifanya UI iwe thabiti wakati data inaposasishwa na kuondoa haja ya seti ya React-style hooks. Kwa timu zilizo tayari kuvuka mfumo unaozingatia re-render, njia ya uhamiaji iko wazi, faida ya utendaji ni dhahiri, na hatari pekee ya kweli ni kutokuwa na uhakika wa kawaida wa hatua ya beta.