SolidJS 2.0 ایک نیٹیو async-data ماڈل کے ساتھ آتا ہے جو ایک کمپوننٹ کو پرومیس (promise) کو کسی بھی دوسرے ری ایکٹیو ویلیو (reactive value) کی طرح استعمال کرنے کی اجازت دیتا ہے، اور یہ وہ کام ری رینڈرز (re-renders) کے سلسلے کے بغیر کرتا ہے جو React ڈویلپرز Suspense اور hooks کے ساتھ دیکھتے ہیں۔ یہ تبدیلی اس لیے اہم ہے کیونکہ یہ ڈیٹا ریفریش ہوتے وقت UI کو اسکرین پر برقرار رکھتی ہے، بوائلر پلیٹ (boilerplate) کوڈ کو کم کرتی ہے، اور React ٹیموں کے لیے اپنے ڈیٹا فیچنگ (data-fetching) کوڈ کو Solid پر منتقل کرنے کا ایک ٹھوس راستہ فراہم کرتی ہے۔

Solid کا async ماڈل مختلف کیوں محسوس ہوتا ہے

React میں، ڈیٹا کی ضرورت رکھنے والا کمپوننٹ عام طور پر ایک hook (اکثر ایک کسٹم hook) کال کرتا ہے جو ایک promise-like آبجیکٹ واپس کرتا ہے، اور پھر promise کے حل ہونے تک fallback دکھانے کے لیے UI کو <Suspense> میں لپیٹ دیتا ہے۔ ہر بار جب promise مکمل ہوتا ہے، React ایک re-render شیڈول کرتا ہے؛ اگر وہی کمپوننٹ بعد میں دوبارہ ڈیٹا فیچ کرتا ہے، تو fallback اس مواد کے اوپر چمک (flash) سکتا ہے جو پہلے سے نظر آ رہا ہو۔

Solid اس صورتحال کو بالکل بدل دیتا ہے۔ ایک promise محض ایک ایسی ویلیو ہے جس پر ری ایکٹیو گراف (reactive graph) نظر رکھتا ہے۔ جب کوئی کمپیوٹیشن اس ویلیو کو پڑھتی ہے، تو گراف اس ریڈ (read) کو تب تک روک دیتا ہے جب تک promise حل نہ ہو جائے، لیکن باقی UI رینڈر شدہ رہتا ہے۔ جب کمپونٹ پہلی بار ماؤنٹ (mount) ہوتا ہے، تو ایک <Loading> باؤنڈری fallback دکھا سکتی ہے؛ اس کے بعد، ری فیچ (refetch) ہونے پر نیا ڈیٹا آنے تک موجودہ DOM کو تبدیل نہیں کیا جاتا۔ کمپوننٹ کے اندر کوئی واضح "await" نہیں، کوئی createResource نہیں، اور نہ ہی دستی (manual) اسٹیٹ ٹوگلز۔

بنیادی پرائمٹیوز (core primitives)

  • <Loading> boundary – React کے <Suspense> کی جگہ لیتی ہے۔ یہ صرف ابتدائی لوڈ کے وقت fallback دکھاتی ہے۔ پہلی بار پینٹ (paint) ہونے کے بعد، ایک زیرِ التواء (pending) ریڈ UI کو تبدیل نہیں کرتا؛ پرانا مواد تب تک رہتا ہے جب تک نئی ویلیو حل نہ ہو جائے۔ کسی مخصوص ری فیچ پر اسپنر (spinner) دکھانے کے لیے on prop پاس کریں۔
  • <Reveal> component – یہ کنٹرول کرتا ہے کہ متعدد <Loading> باؤنڈریز ایک ساتھ کیسے ظاہر ہوتی ہیں۔ منتخب کریں:
    • Sequential: باؤنڈریز DOM کی ترتیب میں ایک کے بعد ایک ظاہر ہوتی ہیں۔
    • Together: جب ڈیٹا کا ہر حصہ تیار ہو جائے تو سب ایک ساتھ ظاہر ہو جاتی ہیں۔
    • Natural: ہر باؤنڈری اپنے ڈیٹا کے آتے ہی ظاہر ہو جاتی ہے۔
  • isPending signal – جب کوئی خاص ریڈ (read) جاری ہو تو true واپس کرتا ہے۔ اسے مین مواد کو نظر آنے دیتے ہوئے ایک باریک لوڈنگ بار یا ہلکی اینیمیشن دکھانے کے لیے استعمال کریں، جو آپ کو مفت میں "stale-while-revalidate" کی سہولت دیتا ہے۔
  • action generator – React کے mutable-state اپ ڈیٹس کی جگہ لیتا ہے۔ ایک action(function*…) پرامیس کے حل ہونے پر UI کو پرامیسٹک (optimistically) طور پر اپ ڈیٹ کر سکتا ہے، سرور کے جواب کا انتظار کرنے کے لیے yield کر سکتا ہے، اور پھر نتیجہ ہم آہنگ (reconcile) کر سکتا ہے۔ UI فوری محسوس ہوتا ہے، اور ری کنسلی ایشن (reconciliation) کا مرحلہ اس پرائمٹیو میں پہلے سے شامل ہے۔

یہ حصے React کے تصورات سے کیسے مطابقت رکھتے ہیں

Feature React کا طریقہ کار Solid 2.0 کا طریقہ کار
Data fetching use() (تجرباتی) یا تھرڈ پارٹی hooks؛ نتیجہ <Suspense> میں لپٹا ہوا ہوتا ہے createMemo (یا اس جیسا) جو ایک promise واپس کرتا ہے؛ براہ راست JSX میں پڑھیں
Loading UI <Suspense> ہر ری فیچ پر fallback کو دوبارہ ٹرگر کر سکتا ہے <Loading> صرف پہلی بار لوڈنگ پر؛ ری فیچ پرانا UI برقرار رکھتا ہے
Refreshing UI اپ ڈیٹس کو ملتوی کرنے کے لیے useTransition isPending UI کو تبدیل کیے بغیر زیرِ التواء ریڈز کا اشارہ دیتا ہے
Mutations useState/useReducer + async کالز، جو اکثر کسٹم ایکشنز میں لپٹی ہوتی ہیں action(function*…) جس میں بلٹ ان پرامیسٹک ہینڈلنگ موجود ہے

عملی نتیجہ یہ ہے کہ Solid ان چیزوں کو اپنے بنیادی ری ایکٹیویٹی انجن (reactivity engine) میں شامل کرتا ہے جنہیں React الگ الگ hooks کے طور پر دیکھتا ہے۔

مرحلہ وار مائیگریشن گائیڈ (migration guide)

  1. 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())).
  2. 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.
  3. 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.
  4. Convert optimistic updates – If you had setState(prev => ({...prev, optimisticValue})) followed by an async call, rewrite as const 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.
  5. 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.
  6. 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 useEffect calls.

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.