SolidJS 2.0 నేటివ్ async-data మోడల్తో వస్తుంది, ఇది ఒక ప్రామిస్ను (promise) ఇతర రియాక్టివ్ వాల్యూస్ లాగే పరిగణించేలా చేస్తుంది. React డెవలపర్లు Suspense మరియు hooks తో చూసే వరుస re-renders లేకుండా ఇది పనిచేస్తుంది. ఈ మార్పు ఎందుకు ముఖ్యమంటే, డేటా రిఫ్రెష్ అవుతున్నప్పుడు UI స్క్రీన్పైనే ఉంటుంది, బోయిలర్ప్లేట్ (boilerplate) కోడ్ను తగ్గిస్తుంది మరియు React టీమ్లు తమ డేటా-ఫెచింగ్ కోడ్ను Solidకి మార్చడానికి ఒక స్పష్టమైన మార్గాన్ని అందిస్తుంది.
Solid యొక్క async మోడల్ ఎందుకు భిన్నంగా అనిపిస్తుంది
Reactలో, డేటా అవసరమయ్యే ఒక కాంపోనెంట్ సాధారణంగా ఒక హుక్ (hook) ని పిలుస్తుంది (తరచుగా ఒక కస్టమ్ హుక్), అది ప్రామిస్ వంటి ఆబ్జెక్ట్ను రిటర్న్ చేస్తుంది, ఆపై ప్రామిస్ రిజాల్వ్ అయ్యే వరకు ఫాల్బ్యాక్ (fallback) చూపించడానికి UIని <Suspense> లో చుచ్చుతుంది. ప్రతిసారి ప్రామిస్ సెటిల్ అయినప్పుడు, React ఒక re-render ని షెడ్యూల్ చేస్తుంది; ఒకవేళ అదే కాంపోనెంట్ తర్వాత మళ్ళీ డేటాను రిఫెచ్ (refetch) చేస్తే, ఇప్పటికే కనిపిస్తున్న కంటెంట్ పైన ఫాల్బ్యాక్ మెరుస్తుంది (flash).
Solid విధానాన్ని పూర్తిగా మారుస్తుంది. ప్రామిస్ అనేది కేవలం రియాక్టివ్ గ్రాఫ్ గమనించే ఒక వాల్యూ మాత్రమే. ఒక కంప్యూటేషన్ ఆ వాల్యూని చదివినప్పుడు, ప్రామిస్ రిజాల్వ్ అయ్యే వరకు గ్రాఫ్ ఆ రీడ్ని తాత్కాలికంగా ఆపుతుంది, కానీ మిగిలిన UI రెండర్ అయినట్లుగానే ఉంటుంది. ఒక కాంపోనెంట్ మొదటిసారి మౌంట్ అయినప్పుడు, <Loading> బౌండరీ ఫాల్బ్యాక్ను చూపించవచ్చు; ఆ తర్వాత, కొత్త డేటా వచ్చే వరకు రిఫెచ్ చేసినా పాత DOM లో ఎలాంటి మార్పు ఉండదు. కాంపోనెంట్ లోపల ఎటువంటి స్పష్టమైన “await” అవసరం లేదు, createResource అవసరం లేదు, మరియు మాన్యువల్ స్టేట్ టోగుల్స్ (state toggles) అవసరం లేదు.
ప్రధాన ప్రిమిటివ్స్ (The core primitives)
<Loading>boundary – React యొక్క<Suspense>కి బదులుగా వస్తుంది. ఇది కేవలం మొదటి లోడ్ సమయంలో మాత్రమే ఫాల్బ్యాక్ను చూపిస్తుంది. మొదటి పెయింట్ (paint) తర్వాత, పెండింగ్ రీడ్ 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 తన కోర్ రియాక్టివిటీ ఇంజిన్లోనే నిర్మించింది.
స్టెప్-బై-స్టెప్ మైగ్రేషన్ గైడ్
- డేటా మూలాన్ని గుర్తించండి – Reactలో మీరు బహుశా
const data = useMyFetch(url)అని ఉపయోగిస్తుంటారు. Solidలో దానిని ప్రామిస్ను రిటర్న్ చేసే మెమోతో మార్చండి:const data = createMemo(() => fetch(url).then(r => r.json())). - టాప్-లెవల్ కాంపోనెంట్ను చుట్టండి – ప్రామిస్ రిజాల్వ్ కావడానికి ముందే కాంపోనెంట్ రెండర్ అయితే, దానిని
<Loading fallback={<Spinner/>}>…</Loading>తో చుట్టండి. ఫాల్బ్యాక్ కేవలం మొదటి మౌంట్ సమయంలో మాత్రమే కనిపిస్తుంది. - ప్రతి రీఫెచ్ (refetch) స్పిన్నర్లను మార్చండి – గతంలో మీరు లోడింగ్ ఫ్లాగ్ను టోగుల్ చేసిన చోట, ఇప్పుడు
isPending(data)ని చదవండి. ప్రస్తుతం ఉన్న UI స్క్రీన్పై ఉన్నప్పుడే, ఒక సూక్ష్మమైన ఇండికేటర్ను రెండర్ చేయడానికి ఆ బూలియన్ (boolean) ను ఉపయోగించండి. - ఆప్టిమిస్టిక్ అప్డేట్స్ను (optimistic updates) మార్చండి – మీరు
setState(prev => ({...prev, optimisticValue}))తర్వాత ఒక async కాల్ను ఉపయోగించి ఉంటే, దానినిconst update = action(function* (newValue) { state = newValue; const server = yield fetch(...); state = reconcile(server); });గా తిరిగి రాయండి. సర్వర్ స్పందించే వరకు జనరేటర్ కంట్రోల్ను వదిలివేస్తుంది (yields), ఆ తర్వాత ఆటోమేటిక్గా రియాక్టివ్ గ్రాఫ్ను అప్డేట్ చేస్తుంది. - బహుళ అసమకాలిక (async) భాగాలను నిర్వహించండి – అవసరానికి అనుగుణంగా
<Loading>బౌండరీలను నెస్ట చేయండి, ఆపై అవి ఒకేసారి కనిపించాలా లేదా ఒకదాని తర్వాత ఒకటి కనిపించాలా అని నిర్ణయించడానికి<Reveal>వ్రాపర్ను జోడించండి. ఇది React డెవలపర్లు సంక్లిష్టమైన స్టేట్ చెక్లతో బహుళ<Suspense>కాంపోనెంట్లను వరుసగా ఉపయోగించే పద్ధతికి ప్రత్యామ్నాయంగా పనిచేస్తుంది. - ఫ్లోను పరీక్షించండి – ప్రామిస్ రిజలవ్ అయినప్పుడు Solid మళ్లీ రెండర్ (re-render) కాదు కాబట్టి, మీరు ఆశించిన చోట UI అప్డేట్లు జరుగుతున్నాయో లేదో సరిచూసుకోండి. రియాక్టివ్ గ్రాఫ్ మార్పులను ఆటోమేటిక్గా వ్యాప్తి చేస్తుంది; దీని కోసం అదనపు
useEffectకాల్స్ అవసరం లేదు.
ఇంకా ఏవి మారుతూ ఉన్నాయి
Solid 2.0 యొక్క async API ప్రస్తుతం బీటా (beta) దశలో ఉంది. స్టేబుల్ రిలీజ్ కంటే ముందు <Loading> మరియు action వంటి పేర్లు మారవచ్చు, మరియు డాక్యుమెంటేషన్ ఇంకా అభివృద్ధి చెందుతూనే ఉంది. ప్రామిస్లను రియాక్టివ్ వాల్యూస్గా పరిగణించడం అనే ప్రధాన ఆలోచన మారదు, కానీ లైబ్రరీ స్థిరపడే కొద్దీ ప్రారంభ వినియోగదారులు చిన్నపాటి బ్రేకింగ్ మార్పులను (breaking changes) ఆశించవచ్చు.
ఎవరికి ప్రయోజనం ఉంటుంది
- భారీ డేటా ఫెచింగ్ చేసే React టీమ్స్ – ఎక్స్టర్నల్ స్టేట్ లైబ్రరీల అవసరం తగ్గడం మరియు ఇన్బిల్ట్ stale-while-revalidate ప్యాటర్న్ వల్ల బండిల్ సైజు తగ్గడమే కాకుండా కోడ్బేస్లు సరళీకృతం అవుతాయి.
- పెర్ఫార్మెన్స్-ఫోకస్డ్ యాప్స్ – ప్రతి ఫెచ్పై పూర్తి కాంపోనెంట్ రీ-రెండర్లను నివారించడం ద్వారా, Solid ముఖ్యంగా తక్కువ సామర్థ్యం ఉన్న పరికరాలలో (low-end devices) మెరుగైన విజువల్ అప్డేట్లను అందిస్తుంది.
- “flash of spinner” తో విసిగిపోయిన డెవలపర్లు –
<Loading>బౌండరీ యొక్క “first-load-only” ప్రవర్తన వల్ల, ఇప్పటికే కనిపిస్తున్న కంటెంట్పై స్పిన్నర్ మెరుస్తూ (flashing) కలిగించే అసౌకర్యం ఉండదు.
సాధ్యమయ్యే లోపాలు
- బీటా స్టేటస్ – API స్థిరపడే వరకు, దీర్ఘకాలిక ప్రాజెక్టులు భవిష్యత్తులో మైగ్రేషన్ కోసం సమయాన్ని కేటాయించాల్సి రావచ్చు.
తదుపరి ఏమి గమనించాలి
<Loading> లేదా action పేరు మార్పుల కోసం అధికారిక ఛేంజ్ లాగ్ (changelog) పై నిఘా ఉంచండి.
ముగింపు: SolidJS 2.0 ప్రామిస్లను ఫస్ట్-క్లాస్ రియాక్టివ్ వాల్యూస్గా పరిగణించడానికి అనుమతిస్తుంది, డేటా రిఫ్రెష్ అవుతున్నప్పుడు UI స్థిరంగా ఉండేలా చూస్తుంది మరియు React-స్టైల్ హుక్స్ అవసరాన్ని తొలగిస్తుంది. రీ-రెండర్-సెంట్రిక్ మోడల్కు మించి వెళ్లడానికి సిద్ధంగా ఉన్న టీమ్స్ కోసం, మైగ్రేషన్ మార్గం స్పష్టంగా ఉంది, పెర్ఫార్మెన్స్ ప్రయోజనం స్పష్టంగా కనిపిస్తుంది, మరియు ఏకైక నిజమైన రిస్క్ అనేది సాధారణ బీటా-స్టేజ్ అనిశ్చితి మాత్రమే.