SolidJS 2.0 ഒരു നേറ്റീവ് async-data മോഡലോടെയാണ് വരുന്നത്. ഇത് ഒരു പ്രോമിസിനെ (promise) മറ്റ് റിയാക്ടീവ് വാല്യൂകൾ പോലെ കൈകാര്യം ചെയ്യാൻ ഒരു കമ്പോണന്റിനെ അനുവദിക്കുന്നു. React ഡെവലപ്പർമാർ Suspense-ഉം hooks-ഉം ഉപയോഗിക്കുമ്പോൾ നേരിടുന്നതുപോലെയുള്ള തുടർച്ചയായ റീ-റെൻഡറുകൾ (re-renders) ഇതിൽ ഉണ്ടാകില്ല. ഡാറ്റ പുതുക്കുമ്പോൾ UI സ്ക്രീനിൽ തന്നെ നിലനിർത്താനും, ബോയിലർപ്ലേറ്റ് (boilerplate) കുറയ്ക്കാനും, React ടീമുകൾക്ക് അവരുടെ ഡാറ്റാ-ഫെച്ചിംഗ് (data-fetching) കോഡ് എളുപ്പത്തിൽ Solid-ലേക്ക് മാറ്റാനും ഈ മാറ്റം സഹായിക്കുന്നു.
എന്തുകൊണ്ടാണ് Solid-ന്റെ async മോഡൽ വ്യത്യസ്തമായി തോന്നുന്നത്
React-ൽ, ഡാറ്റ ആവശ്യമുള്ള ഒരു കമ്പോണന്റ് സാധാരണയായി ഒരു ഹുക്ക് (hook) വിളിക്കുന്നു (പലപ്പോഴും ഒരു കസ്റ്റം ഹുക്ക്). ഇത് ഒരു പ്രോമിസ് പോലെയുള്ള ഒബ്ജക്റ്റ് തിരികെ നൽകുന്നു, തുടർന്ന് പ്രോമിസ് റെസൾവ് ആകുന്നത് വരെ ഒരു ഫോളബാക്ക് (fallback) കാണിക്കാൻ UI-യെ <Suspense>-ൽ പൊതിയുന്നു. പ്രോമിസ് പൂർത്തിയാകുമ്പോഴെല്ലാം React ഒരു റീ-റെൻഡർ ഷെഡ്യൂൾ ചെയ്യുന്നു; അതേ കമ്പോണന്റ് പിന്നീട് വീണ്ടും ഡാറ്റ ഫെച്ച് ചെയ്താൽ, നിലവിൽ കാണുന്ന കണ്ടന്റിന് മുകളിൽ ഫോളബാക്ക് മിന്നിമറയാൻ സാധ്യതയുണ്ട്.
Solid ഇതിനെ തികച്ചും വ്യത്യസ്തമായ രീതിയിലാണ് കൈകാര്യം ചെയ്യുന്നത്. ഒരു പ്രോമിസ് എന്നത് റിയാക്ടീവ് ഗ്രാഫ് (reactive graph) നിരീക്ഷിക്കുന്ന ഒരു വാല്യൂ മാത്രമാണ്. ഒരു കമ്പ്യൂട്ടേഷൻ ആ വാല്യൂ വായിക്കുമ്പോൾ, പ്രോമിസ് റെസൾവ് ആകുന്നത് വരെ ഗ്രാഫ് ആ വായന താൽക്കാലികമായി നിർത്തിവെക്കുന്നു, എന്നാൽ ബാക്കിയുള്ള UI റെൻഡർ ചെയ്ത നിലയിൽ തന്നെ തുടരുന്നു. ഒരു കമ്പോണന്റ് ആദ്യമായി മൗണ്ട് (mount) ചെയ്യുമ്പോൾ, ഒരു <Loading> ബൗണ്ടറിക്ക് ഫോളബാക്ക് കാണിക്കാം; അതിനുശേഷം, പുതിയ ഡാറ്റ ലഭിക്കുന്നത് വരെ ഒരു റീഫെച്ച് (refetch) നിലവിലുള്ള DOM-നെ ബാധിക്കില്ല. കമ്പോണന്റിനുള്ളിൽ പ്രത്യേകമായി "await" ഉപയോഗിക്കേണ്ടതില്ല, createResource ആവശ്യമില്ല, മാനുവൽ സ്റ്റേറ്റ് ടോഗിളുകളും (manual state toggles) വേണ്ടതില്ല.
പ്രധാന പ്രിമിറ്റീവുകൾ
<Loading>boundary – React-ലെ<Suspense>-ന് പകരമാണിത്. ആദ്യത്തെ ലോഡിംഗിൽ മാത്രമേ ഇത് ഒരു ഫോളബാക്ക് കാണിക്കുന്നുള്ളൂ. ആദ്യത്തെ പെയിന്റിംഗിന് ശേഷം, ഒരു പെൻഡിംഗ് റീഡ് (pending read) UI-യെ മാറ്റിസ്ഥാപിക്കില്ല; പുതിയ വാല്യൂ റെസൾവ് ആകുന്നത് വരെ പഴയ കണ്ടന്റ് തന്നെ നിലനിൽക്കും. ഒരു പ്രത്യേക റീഫെച്ചിൽ സ്പിന്നർ (spinner) നിർബന്ധമായും കാണിക്കാൻ ഒരുonപ്രോപ്പ് നൽകാവുന്നതാണ്.<Reveal>component – ഒന്നിലധികം<Loading>ബൗണ്ടറികൾ എങ്ങനെ ഒരുമിച്ച് പ്രത്യക്ഷപ്പെടണം എന്ന് ഇത് നിയന്ത്രിക്കുന്നു. താഴെ പറയുന്നവ തിരഞ്ഞെടുക്കാം:- Sequential: ബൗണ്ടറികൾ DOM ക്രമത്തിൽ ഒന്നൊന്നായി പ്രത്യക്ഷപ്പെടുന്നു.
- Together: എല്ലാ ഡാറ്റയും തയ്യാറാകുമ്പോൾ എല്ലാം ഒരുമിച്ച് പ്രത്യക്ഷപ്പെടുന്നു.
- Natural: ഓരോ ഡാറ്റയും ലഭിക്കുന്ന മുറയ്ക്ക് അവ ഓരോന്നായി പ്രത്യക്ഷപ്പെടുന്നു.
isPendingsignal – ഒരു പ്രത്യേക റീഡ് നടന്നു കൊണ്ടിരിക്കുമ്പോൾtrueനൽകുന്നു. പ്രധാന കണ്ടന്റ് കാണുന്നതിനോടൊപ്പം തന്നെ ഒരു ചെറിയ ലോഡിംഗ് ബാറോ അല്ലെങ്കിൽ സബ്റ്റിൽ ആനിമേഷനോ കാണിക്കാൻ ഇത് ഉപയോഗിക്കാം. ഇത് നിങ്ങൾക്ക് സൗജന്യമായി "stale-while-revalidate" നൽകുന്നു.actiongenerator – React-ലെ മ്യൂട്ടബിൾ-സ്റ്റേറ്റ് (mutable-state) അപ്ഡേറ്റുകൾക്ക് പകരമാണിത്. ഒരുaction(function*…)ഉപയോഗിച്ച് UI-യെ ഒപ്റ്റിമിസ്റ്റിക് ആയി (optimistically) അപ്ഡേറ്റ് ചെയ്യാനും, സെർവർ റെസ്പോൺസിനായിyieldഉപയോഗിച്ച് കാത്തിരിക്കാനും, പ്രോമിസ് റെസൾവ് ചെയ്യുമ്പോൾ ഫലം ക്രമീകരിക്കാനും (reconcile) സാധിക്കും. UI വളരെ വേഗത്തിൽ പ്രവർത്തിക്കുന്നതായി തോന്നും, കൂടാതെ റീകൺസിലിയേഷൻ സ്റ്റെപ്പ് ഇതിൽ തന്നെ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്.
ഈ ഘടകങ്ങൾ React കൺസെപ്റ്റുകളുമായി എങ്ങനെ ബന്ധപ്പെട്ടിരിക്കുന്നു
| ഫീച്ചർ | React രീതി | Solid 2.0 രീതി |
|---|---|---|
| Data fetching | use() (experimental) അല്ലെങ്കിൽ തേർഡ് പാർട്ടി ഹുക്കുകൾ; റിസൾട്ട് <Suspense>-ൽ പൊതിഞ്ഞത് |
പ്രോമിസ് തിരികെ നൽകുന്ന createMemo (അല്ലെങ്കിൽ സമാനമായവ); JSX-ൽ നേരിട്ട് വായിക്കാം |
| Loading UI | ഓരോ റീഫെച്ചിലും <Suspense> ഫോളബാക്ക് വീണ്ടും ട്രിഗർ ചെയ്തേക്കാം |
ആദ്യ ലോഡിംഗിൽ മാത്രം <Loading>; റീഫെച്ച് പഴയ UI നിലനിർത്തുന്നു |
| Refreshing | UI അപ്ഡേറ്റുകൾ വൈകിപ്പിക്കാൻ useTransition |
UI മാറ്റമില്ലാതെ തന്നെ isPending പെൻഡിംഗ് റീഡുകളെ സൂചിപ്പിക്കുന്നു |
| Mutations | useState/useReducer + async കോളുകൾ, പലപ്പോഴും കസ്റ്റം ആക്ഷനുകളിൽ പൊതിഞ്ഞത് |
ബിൽറ്റ്-ഇൻ ഒപ്റ്റിമിസ്റ്റിക് ഹാൻഡ്ലിംഗോട് കൂടിയ action(function*…) |
ചുരുക്കത്തിൽ, React പ്രത്യേക ഹുക്കുകളായി കാണുന്ന കാര്യങ്ങൾ Solid അതിന്റെ കോർ റിയാക്റ്റിവിറ്റി എഞ്ചിനിലേക്ക് തന്നെ ഉൾപ്പെടുത്തിയിരിക്കുന്നു.
ഘട്ടം ഘട്ടമായുള്ള മൈഗ്രേഷൻ ഗൈഡ്
- Identify the data source – In React you likely have
const data = useMyFetch(url). In Solid replace that with a memo that returns the promise:const data = createMemo(() => fetch(url).then(r => r.json())). - Wrap the top-level component – If the component renders before the promise resolves, surround it with
<Loading fallback={<Spinner/>}>…</Loading>. The fallback appears only on the first mount. - Replace per-refetch spinners – Where you previously toggled a loading flag, now read
isPending(data). Use that boolean to render a subtle indicator while the existing UI stays on screen. - Convert optimistic updates – If you had
setState(prev => ({...prev, optimisticValue}))followed by an async call, rewrite asconst update = action(function* (newValue) { state = newValue; const server = yield fetch(...); state = reconcile(server); });. The generator yields control until the server responds, then automatically updates the reactive graph. - Handle multiple async pieces – Nest
<Loading>boundaries as needed, then add a<Reveal>wrapper to decide whether they appear together or one after another. This replaces patterns where React developers staggered multiple<Suspense>components with complex state checks. - Test the flow – Because Solid does not re-render on promise resolution, verify that UI updates still occur where you expect them. The reactive graph propagates changes automatically; there is no need for extra
useEffectcalls.
What’s still in flux
Solid 2.0’s async API is currently in beta. Names like <Loading> and action may shift before the stable release, and the documentation still evolves. The core idea—treating promises as reactive values—remains unchanged, but early adopters should expect minor breaking changes as the library settles.
Who stands to gain
- React teams with heavy data fetching – The reduced need for external state libraries and the built-in stale-while-revalidate pattern can shrink bundle size and simplify codebases.
- Performance-focused apps – By avoiding full component re-renders on every fetch, Solid delivers smoother visual updates, especially on low-end devices.
- Developers tired of “flash of spinner” – The
<Loading>boundary’s “first-load-only” behavior eliminates the common annoyance of a spinner flashing over content that is already visible.
Possible drawbacks
- Beta status – Until the API stabilizes, long-term projects may need to budget for migration effort later.
What to watch next
Keep an eye on the official changelog for any renaming of <Loading> or action.
Bottom line: SolidJS 2.0 lets you treat promises as first-class reactive values, keeping the UI steady while data refreshes and removing the need for a suite of React-style hooks. For teams ready to move beyond the re-render-centric model, the migration path is clear, the performance upside is tangible, and the only real risk is the usual beta-stage uncertainty.