SolidJS — अंतिम समीक्षा

अब भी React क्यों, Solid.JS क्यों नहीं?

इस लेख में हम समझेंगे कि Solid.js क्या है — एक क्रांति, React का योग्य उत्तराधिकारी या एक और ऐसा फ्रेमवर्क जो React के परिचित API का उपयोग कर उसकी ऑडियंस को आकर्षित करता है।

Solid अपनी परफॉर्मेंस, शुद्धता और रिएक्टिविटी का दावा करता है। लेकिन गहराई से देखें तो... React ही दिखता है। वही पुराने hooks, वही component structure, वही आदतें।

Solid दिग्गजों के कंधों पर खड़ा है। अपनी डाक्यूमेंटेशन में यह React और Knockout का उल्लेख करता है। अगर आपने पहले React के functional components और hooks के साथ काम किया है — तो आप खुद को लगभग घर जैसा महसूस करेंगे।

Solid कुछ नया नहीं बनाता। यह पुराने को ही बेहतर बनाता है। यह परिचित patterns को तेज, सरल और पारदर्शी बनाता है। कोई वर्चुअल DOM नहीं। कोई component rerender नहीं। कोई अतिरिक्त जादू नहीं।

यहीं से असली फर्क शुरू होता है: असल में क्या अलग है? Solid आया ही क्यों, जब "सब कुछ वैसे भी काम कर रहा है"?

कई लोग React के reconciliation और वर्चुअल DOM को पसंद नहीं करते।

कु कु कु, धीमा। कु कु कु।

आइए याद करें कि React में यह सब क्यों था। असली DOM के साथ काम को आसान बनाने के लिए। विचार यह था:

• ब्राउज़र में DOM धीमा और नाजुक है।
• डेवलपर के लिए nodes, diffs और attributes को सीधे manage करना असुविधाजनक है।
• React कहता है: बस लिखो कि UI कैसा दिखना चाहिए अगर आपके पास ये डेटा है।
• React खुद पुराने और नए tree की तुलना कर केवल जरूरी हिस्से अपडेट करता है (यही reconciliation है)।

फिर Solid आता है, और मेरे पास signals पर आधारित dependency graph है, मैं केवल उन्हीं हिस्सों को अपडेट करूंगा जो सच में signals पर निर्भर हैं।

Solid न तो components को फिर से बनाता है, न ही नया virtual DOM बनाता है। यह केवल उन्हीं DOM हिस्सों को अपडेट करता है जो बदले हुए state पर निर्भर हैं।

Conditional rendering कुछ ऐसा दिखता है:

<Show when={loggedIn()} fallback={<p>Not logged in</p>}>
  <p>Welcome back!</p>
</Show>

या ऐसा:

const output = createMemo(() => {
  return condition() ? <A /> : <B />;
});

लेकिन ऐसा नहीं चलेगा:

const [count, setCount] = createSignal(0);

const even = count() % 2 === 0;

return (
  <>
    <button onClick={() => setCount(count() + 1)}>Inc</button>
    {even ? <p>Even</p> : <p>Odd</p>}
  </>
);

even केवल initialization पर एक बार calculate होता है, क्योंकि count() JSX के बाहर कॉल किया गया है।

Solid इस expression के लिए count को dependency के रूप में ट्रैक नहीं करता।

count() बदलने से even फिर से नहीं बनेगा, क्योंकि even reactive नहीं है।

अगर आप function body में conditional rendering करना चाहते हैं, तो ऐसे करें:

return <>{count() % 2 === 0 ? <Even /> : <Odd />}</>;

मुझे याद है कि proxy objects के साथ भी reactivity खो जाती थी। उदाहरण के लिए mobX में, अगर आप reactive object से value को irregular समय पर निकालते हैं — reactive context के बाहर — तो भी reactivity खो जाती है।

const state = reactive({ count: 0 });

const even = state.count % 2 === 0;

watchEffect(() => {
  console.log(even); // ❌ काम नहीं करेगा, even reactive नहीं है
});

हमने देखा कि proxy और signals दोनों के साथ reactivity खो सकती है।

तो फिर Proxy क्यों नहीं? Signals क्यों? Signal है क्या? मुझे बहुत आलस आ रही है... बस यहाँ readSignal function का code snippet छोड़ देता हूँ।

export function readSignal(this: SignalState<any> | Memo<any>) {
  const runningTransition = Transition && Transition.running;
  if (
    (this as Memo<any>).sources &&
    (runningTransition ? (this as Memo<any>).tState : (this as Memo<any>).state)
  ) {
    if ((runningTransition ? (this as Memo<any>).tState : (this as Memo<any>).state) === STALE)
      updateComputation(this as Memo<any>);
    else {
      const updates = Updates;
      Updates = null;
      runUpdates(() => lookUpstream(this as Memo<any>), false);
      Updates = updates;
    }
  }
  if (Listener) {
    const sSlot = this.observers ? this.observers.length : 0;
    if (!Listener.sources) {
      Listener.sources = [this];
      Listener.sourceSlots = [sSlot];
    } else {
      Listener.sources.push(this);
      Listener.sourceSlots!.push(sSlot);
    }
    if (!this.observers) {
      this.observers = [Listener];
      this.observerSlots = [Listener.sources.length - 1];
    } else {
      this.observers.push(Listener);
      this.observerSlots!.push(Listener.sources.length - 1);
    }
  }
  if (runningTransition && Transition!.sources.has(this)) return this.tValue;
  return this.value;
}

मुख्य जादू observers की सूची में है — component या effect subscriber बन जाता है।

क्या इसका उपयोग करते समय गड़बड़ हो सकती है? जैसा कि ऊपर context खोने वाले उदाहरण में देखा।

हाँ, हो सकती है।

खासकर जब आपकी target audience React developers की फौज है।

React में सब कुछ entry barrier को कम करने और आसान बनाने के लिए किया गया था। याद कीजिए जब hooks पहली बार आए थे, कैसे बेचा गया था। और functional components। पहले हमें बताया गया: class components में दिक्कत है? हमने और आसान कर दिया।

शायद ये सब काल्पनिक उदाहरण हैं।

सबसे स्पष्ट बात यह है कि अगर आप react की जगह solid का उपयोग करते हैं, तो आपको ज्यादा उत्साह चाहिए। क्योंकि react के लिए जो भी पैकेज हैं, solid में उनका विकल्प शायद न हो। खुद बनाना पड़ेगा। क्या आपको चाहिए? खुद तय करें। शायद कल सब बदल जाए।

यहाँ PHP पर एक मजाक होना चाहिए था।