React useActionState: आधुनिक फॉर्म व्यवस्थापनासाठी एक सर्वसमावेशक मार्गदर्शक

वेब डेव्हलपमेंटचे जग सतत विकसित होत आहे, आणि React इकोसिस्टम या बदलामध्ये आघाडीवर आहे. अलीकडील आवृत्त्यांसह, React ने शक्तिशाली वैशिष्ट्ये सादर केली आहेत जी आपण परस्परसंवादी आणि लवचिक ॲप्लिकेशन्स कशी तयार करतो यात मूलभूतपणे सुधारणा करतात. यापैकी सर्वात प्रभावी म्हणजे useActionState हुक, जो फॉर्म आणि असिंक्रोनस ऑपरेशन्स हाताळण्यासाठी एक गेम-चेंजर आहे. हा हुक, जो पूर्वी प्रायोगिक रिलीझमध्ये useFormState म्हणून ओळखला जात होता, आता कोणत्याही आधुनिक React डेव्हलपरसाठी एक स्थिर आणि आवश्यक साधन आहे.

हे सर्वसमावेशक मार्गदर्शक तुम्हाला useActionState च्या सखोल माहिती देईल. आपण ते कोणत्या समस्या सोडवते, त्याचे मूळ कार्यप्रणाली, आणि useFormStatus सारख्या पूरक हुक्ससोबत त्याचा वापर करून उत्कृष्ट वापरकर्ता अनुभव कसा तयार करायचा हे शोधू. तुम्ही एक साधा संपर्क फॉर्म तयार करत असाल किंवा एक जटिल, डेटा-केंद्रित ॲप्लिकेशन, useActionState समजून घेतल्यास तुमचा कोड अधिक स्वच्छ, अधिक घोषणात्मक आणि अधिक मजबूत होईल.

समस्या: पारंपारिक फॉर्म स्टेट व्यवस्थापनाची जटिलता

useActionState च्या सुंदरतेचे कौतुक करण्यापूर्वी, ते कोणत्या आव्हानांना सामोरे जाते हे आपण प्रथम समजून घेतले पाहिजे. अनेक वर्षांपासून, React मध्ये फॉर्म स्टेट व्यवस्थापित करण्यासाठी useState हुक वापरून एक अंदाजे पण अनेकदा अवजड पॅटर्नचा समावेश होता.

चला एका सामान्य परिस्थितीचा विचार करूया: सूचीमध्ये एक नवीन उत्पादन जोडण्यासाठी एक साधा फॉर्म. आपल्याला अनेक स्टेट्स व्यवस्थापित करण्याची आवश्यकता आहे:

उत्पादनाच्या नावासाठी इनपुट व्हॅल्यू.
API कॉल दरम्यान वापरकर्त्याला अभिप्राय देण्यासाठी एक लोडिंग किंवा पेंडिंग स्टेट.
सबमिशन अयशस्वी झाल्यास संदेश प्रदर्शित करण्यासाठी एक एरर स्टेट.
पूर्ण झाल्यावर एक यश स्टेट किंवा संदेश.

एक सामान्य अंमलबजावणी काहीशी अशी दिसू शकते:

उदाहरण: अनेक useState हुक्स वापरून 'जुनी पद्धत'

// काल्पनिक API फंक्शन
const addProductAPI = async (productName) => {
await new Promise(resolve => setTimeout(resolve, 1500));
if (!productName || productName.length < 3) {
throw new Error('Product name must be at least 3 characters long.');
}
console.log(`Product "${productName}" added.`);
return { success: true };
};

// कंपोनेंट
import { useState } from 'react';

function OldProductForm() {
const [productName, setProductName] = useState('');
const [error, setError] = useState(null);
const [isPending, setIsPending] = useState(false);

const handleSubmit = async (event) => {
event.preventDefault();
setIsPending(true);
setError(null);

try {
await addProductAPI(productName);
setProductName(''); // यशस्वी झाल्यावर इनपुट साफ करा
} catch (err) {
setError(err.message);
} finally {
setIsPending(false);
}
};

return (

Product Name:

      

        id="productName"

        name="productName"

        value={productName}

        onChange={(e) => setProductName(e.target.value)}

      />

      

      {error && {error}
}

    

  );

}


हा दृष्टिकोन काम करतो, परंतु त्याचे अनेक तोटे आहेत:

  बॉइलरप्लेट: संकल्पनेनुसार एकाच फॉर्म सबमिशन प्रक्रियेचे व्यवस्थापन करण्यासाठी आम्हाला तीन स्वतंत्र useState कॉल्सची आवश्यकता आहे.
  मॅन्युअल स्टेट मॅनेजमेंट: try...catch...finally ब्लॉकमध्ये लोडिंग आणि एरर स्टेट्स योग्य क्रमाने मॅन्युअली सेट आणि रीसेट करण्यासाठी डेव्हलपर जबाबदार आहे. हे पुनरावृत्ती करणारे आणि त्रुटींसाठी प्रवण आहे.
  कपलिंग: फॉर्म सबमिशनचा निकाल हाताळण्याचे लॉजिक कंपोनेंटच्या रेंडरिंग लॉजिकशी घट्टपणे जोडलेले आहे.


useActionState ची ओळख: एक आदर्श बदल

useActionState हा एक React हुक आहे जो विशेषतः फॉर्म सबमिशनसारख्या असिंक्रोनस अॅक्शनची स्टेट व्यवस्थापित करण्यासाठी डिझाइन केलेला आहे. हे स्टेटला थेट अॅक्शन फंक्शनच्या परिणामाशी जोडून संपूर्ण प्रक्रिया सुव्यवस्थित करते.

त्याची सिग्नेचर स्पष्ट आणि संक्षिप्त आहे:
const [state, formAction] = useActionState(actionFn, initialState);

चला त्याचे घटक पाहूया:

  actionFn(previousState, formData): हे तुमचे असिंक्रोनस फंक्शन आहे जे काम करते (उदा., API कॉल करते). ते मागील स्टेट आणि फॉर्म डेटा आर्ग्युमेंट्स म्हणून स्वीकारते. महत्त्वाचे म्हणजे, हे फंक्शन जे काही परत करते ते नवीन स्टेट बनते.
  initialState: अॅक्शन पहिल्यांदा कार्यान्वित होण्यापूर्वीची ही स्टेटची व्हॅल्यू आहे.
  state: ही सध्याची स्टेट आहे. सुरुवातीला ती initialState ठेवते आणि प्रत्येक अंमलबजावणीनंतर तुमच्या actionFn च्या रिटर्न व्हॅल्यूनुसार अपडेट केली जाते.
  formAction: ही तुमच्या अॅक्शन फंक्शनची एक नवीन, गुंडाळलेली (wrapped) आवृत्ती आहे. तुम्ही हे फंक्शन <form> एलिमेंटच्या action प्रॉपला पास केले पाहिजे. React या गुंडाळलेल्या फंक्शनचा वापर अॅक्शनच्या पेंडिंग स्टेटचा मागोवा घेण्यासाठी करते.


व्यावहारिक उदाहरण: useActionState सह रिफॅक्टरिंग

आता, चला आपल्या उत्पादन फॉर्मला useActionState वापरून रिफॅक्टर करूया. सुधारणा लगेच दिसून येते.

प्रथम, आपल्याला आपले अॅक्शन लॉजिक जुळवून घ्यावे लागेल. एरर थ्रो करण्याऐवजी, अॅक्शनने एक स्टेट ऑब्जेक्ट परत केला पाहिजे जो परिणाम दर्शवतो.

उदाहरण: useActionState सह 'नवीन पद्धत'

// useActionState सह काम करण्यासाठी डिझाइन केलेले अॅक्शन फंक्शन

const addProductAction = async (previousState, formData) => {

  const productName = formData.get('productName');

  await new Promise(resolve => setTimeout(resolve, 1500)); // नेटवर्क विलंब सिम्युलेट करा



  if (!productName || productName.length < 3) {

    return { message: 'Product name must be at least 3 characters long.', success: false };

  }



  console.log(`Product "${productName}" added.`);

  // यशस्वी झाल्यावर, एक यशस्वी संदेश परत करा आणि फॉर्म साफ करा.

  return { message: `Successfully added "${productName}"`, success: true };

};


// रिफॅक्टर केलेला कंपोनेंट

import { useActionState } from 'react';

// टीप: पेंडिंग स्टेट हाताळण्यासाठी आपण पुढील विभागात useFormStatus जोडू.



function NewProductForm() {

  const initialState = { message: null, success: false };

  const [state, formAction] = useActionState(addProductAction, initialState);



  return (

    


      Product Name:

      

      

      {!state.success && state.message && (

        {state.message}

      )}

      {state.success && state.message && (

        {state.message}

      )}

    

  );

}


हे किती स्वच्छ आहे ते पहा! आम्ही तीन useState हुक्स एकाच useActionState हुकने बदलले आहेत. कंपोनेंटची जबाबदारी आता फक्त `state` ऑब्जेक्टवर आधारित UI रेंडर करणे आहे. सर्व बिझनेस लॉजिक `addProductAction` फंक्शनमध्ये व्यवस्थितपणे समाविष्ट आहे. अॅक्शन काय परत करते यावर आधारित स्टेट आपोआप अपडेट होते.

पण थांबा, पेंडिंग स्टेटबद्दल काय? फॉर्म सबमिट होत असताना आपण बटण कसे डिसेबल करू?

useFormStatus सह पेंडिंग स्टेट्स हाताळणे

React एक सहकारी हुक, useFormStatus, प्रदान करते, जो नेमकी ही समस्या सोडवण्यासाठी डिझाइन केलेला आहे. हे शेवटच्या फॉर्म सबमिशनसाठी स्टेटस माहिती प्रदान करते, परंतु एका महत्त्वाच्या नियमासह: ते अशा कंपोनेंटमधून कॉल केले जाणे आवश्यक आहे जे तुम्ही ट्रॅक करू इच्छित असलेल्या <form> च्या आत रेंडर केलेले आहे.

हे चिंतेच्या स्वच्छ विभाजनास प्रोत्साहन देते. तुम्ही विशेषतः अशा UI घटकांसाठी एक कंपोनेंट तयार करता ज्यांना फॉर्मच्या सबमिशन स्टेटसची जाणीव असणे आवश्यक आहे, जसे की सबमिट बटण.

useFormStatus हुक अनेक प्रॉपर्टीजसह एक ऑब्जेक्ट परत करते, ज्यापैकी सर्वात महत्त्वाचे `pending` आहे.
const { pending, data, method, action } = useFormStatus();

  pending: एक बूलियन जे `true` असते जर पॅरेंट फॉर्म सध्या सबमिट होत असेल आणि अन्यथा `false` असते.
  data: एक `FormData` ऑब्जेक्ट ज्यामध्ये सबमिट केला जाणारा डेटा असतो.
  method: HTTP पद्धत दर्शवणारी एक स्ट्रिंग (`'get'` किंवा `'post'`).
  action: फॉर्मच्या `action` प्रॉपला पास केलेल्या फंक्शनचा संदर्भ.


स्टेटस-अवेअर सबमिट बटण तयार करणे

चला एक समर्पित `SubmitButton` कंपोनेंट तयार करू आणि त्याला आपल्या फॉर्ममध्ये समाकलित करू.

उदाहरण: SubmitButton कंपोनेंट
import { useFormStatus } from 'react-dom';

// टीप: useFormStatus 'react-dom' मधून इम्पोर्ट केले जाते, 'react' मधून नाही.



function SubmitButton() {

  const { pending } = useFormStatus();



  return (

    

  );

}


आता, आपण आपला मुख्य फॉर्म कंपोनेंट त्याचा वापर करण्यासाठी अपडेट करू शकतो.

उदाहरण: useActionState आणि useFormStatus सह संपूर्ण फॉर्म
import { useActionState } from 'react';

import { useFormStatus } from 'react-dom';



// ... (addProductAction फंक्शन सारखेच राहते)



function SubmitButton() { /* ... वर परिभाषित केल्याप्रमाणे ... */ }



function CompleteProductForm() {

  const initialState = { message: null, success: false };

  const [state, formAction] = useActionState(addProductAction, initialState);



  return (

    


      Product Name:

      {/* यशस्वी झाल्यावर इनपुट रीसेट करण्यासाठी आपण एक की (key) जोडू शकतो */}

      

      

      {!state.success && state.message && (

        {state.message}

      )}

      {state.success && state.message && (

        {state.message}

      )}

    

  );

}


या रचनेसह, `CompleteProductForm` कंपोनेंटला पेंडिंग स्टेटबद्दल काहीही जाणून घेण्याची आवश्यकता नाही. `SubmitButton` पूर्णपणे स्वयंपूर्ण आहे. ही कंपोझिशनल पॅटर्न जटिल, देखरेख करण्यायोग्य UIs तयार करण्यासाठी अविश्वसनीयपणे शक्तिशाली आहे.

प्रोग्रेसिव्ह एनहान्समेंटची शक्ती

या नवीन अॅक्शन-आधारित दृष्टिकोनाचा सर्वात गहन फायद्यांपैकी एक, विशेषतः जेव्हा सर्व्हर अॅक्शन्ससह वापरला जातो, तेव्हा तो म्हणजे स्वयंचलित प्रोग्रेसिव्ह एनहान्समेंट. जागतिक प्रेक्षकांसाठी ॲप्लिकेशन्स तयार करण्यासाठी ही एक महत्त्वपूर्ण संकल्पना आहे, जिथे नेटवर्कची परिस्थिती अविश्वसनीय असू शकते आणि वापरकर्त्यांकडे जुनी उपकरणे किंवा अक्षम केलेले जावास्क्रिप्ट असू शकते.

हे कसे कार्य करते ते येथे आहे:

  जावास्क्रिप्टशिवाय: जर वापरकर्त्याच्या ब्राउझरने क्लायंट-साइड जावास्क्रिप्ट कार्यान्वित केले नाही, तर `<form action={...}>` एका मानक HTML फॉर्मप्रमाणे कार्य करते. ते सर्व्हरला एक पूर्ण-पृष्ठ विनंती करते. जर तुम्ही Next.js सारखे फ्रेमवर्क वापरत असाल, तर सर्व्हर-साइड अॅक्शन चालते, आणि फ्रेमवर्क नवीन स्टेटसह संपूर्ण पृष्ठ पुन्हा रेंडर करते (उदा. प्रमाणीकरण त्रुटी दर्शविणे). ॲप्लिकेशन पूर्णपणे कार्यक्षम आहे, फक्त SPA-सारख्या गुळगुळीतपणाशिवाय.
  जावास्क्रिप्टसह: एकदा जावास्क्रिप्ट बंडल लोड झाले आणि React ने पृष्ठ हायड्रेट केले की, तेच `formAction` क्लायंट-साइडवर कार्यान्वित केले जाते. पूर्ण-पृष्ठ रीलोडऐवजी, ते एका सामान्य फेच विनंतीप्रमाणे वागते. अॅक्शन कॉल केली जाते, स्टेट अपडेट केली जाते आणि फक्त कंपोनेंटचे आवश्यक भाग पुन्हा रेंडर होतात.


याचा अर्थ तुम्ही तुमचे फॉर्म लॉजिक एकदाच लिहिता, आणि ते दोन्ही परिस्थितीत अखंडपणे कार्य करते. तुम्ही डिफॉल्टनुसार एक लवचिक, प्रवेशयोग्य ॲप्लिकेशन तयार करता, जे जगभरातील वापरकर्त्यांच्या अनुभवासाठी एक मोठा विजय आहे.

प्रगत पॅटर्न्स आणि उपयोग प्रकरणे

1. सर्व्हर अॅक्शन्स विरुद्ध क्लायंट अॅक्शन्स
तुम्ही useActionState ला पास करत असलेले `actionFn` एक मानक क्लायंट-साइड असिंक फंक्शन असू शकते (आमच्या उदाहरणांप्रमाणे) किंवा एक सर्व्हर अॅक्शन. सर्व्हर अॅक्शन हे सर्व्हरवर परिभाषित केलेले एक फंक्शन आहे जे क्लायंट कंपोनेंट्समधून थेट कॉल केले जाऊ शकते. Next.js सारख्या फ्रेमवर्कमध्ये, तुम्ही फंक्शन बॉडीच्या शीर्षस्थानी "use server"; निर्देश जोडून ते परिभाषित करता.


  क्लायंट अॅक्शन्स: फक्त क्लायंट-साइड स्टेटवर परिणाम करणाऱ्या किंवा क्लायंटवरून थेट तृतीय-पक्ष API कॉल करणाऱ्या म्युटेशन्ससाठी आदर्श.
  सर्व्हर अॅक्शन्स: डेटाबेस किंवा इतर सर्व्हर-साइड संसाधनांचा समावेश असलेल्या म्युटेशन्ससाठी योग्य. ते प्रत्येक म्युटेशनसाठी मॅन्युअली API एंडपॉइंट तयार करण्याची आवश्यकता दूर करून तुमच्या आर्किटेक्चरला सोपे करतात.


सौंदर्य हे आहे की useActionState दोन्हीसोबत समान रीतीने कार्य करते. तुम्ही कंपोनेंट कोड न बदलता क्लायंट अॅक्शनला सर्व्हर अॅक्शनने बदलू शकता.

2. `useOptimistic` सह ऑप्टिमिस्टिक अपडेट्स
आणखी प्रतिसादशील अनुभवासाठी, तुम्ही useActionState ला useOptimistic हुकसह एकत्र करू शकता. ऑप्टिमिस्टिक अपडेट म्हणजे जेव्हा तुम्ही UI तात्काळ अपडेट करता, *असे गृहीत धरून* की असिंक्रोनस अॅक्शन यशस्वी होईल. जर ती अयशस्वी झाली, तर तुम्ही UI ला त्याच्या मागील स्थितीत परत आणता.

एका सोशल मीडिया ॲपची कल्पना करा जिथे तुम्ही एक टिप्पणी जोडता. आशावादीपणे, तुम्ही सर्व्हरला विनंती पाठवत असताना सूचीमध्ये नवीन टिप्पणी त्वरित दर्शवाल. useOptimistic हे अॅक्शन्ससोबत हाताशी धरून काम करण्यासाठी डिझाइन केले आहे जेणेकरून ही पॅटर्न अंमलात आणणे सोपे होईल.

3. यशस्वी झाल्यावर फॉर्म रीसेट करणे
यशस्वी सबमिशननंतर फॉर्म इनपुट साफ करणे ही एक सामान्य आवश्यकता आहे. useActionState सह हे साध्य करण्याचे काही मार्ग आहेत.


  की प्रॉप ट्रिक: आमच्या `CompleteProductForm` उदाहरणात दाखवल्याप्रमाणे, तुम्ही इनपुटला किंवा संपूर्ण फॉर्मला एक युनिक `key` देऊ शकता. जेव्हा की बदलते, तेव्हा React जुना कंपोनेंट अनमाउंट करेल आणि एक नवीन माउंट करेल, ज्यामुळे त्याची स्टेट प्रभावीपणे रीसेट होईल. की ला एका यशस्वी फ्लॅगशी जोडणे (`key={state.success ? 'success' : 'initial'}`) ही एक सोपी आणि प्रभावी पद्धत आहे.
  नियंत्रित कंपोनेंट्स (Controlled Components): आवश्यक असल्यास तुम्ही अजूनही नियंत्रित कंपोनेंट्स वापरू शकता. useState सह इनपुटची व्हॅल्यू व्यवस्थापित करून, तुम्ही useActionState कडून यशस्वी स्टेट ऐकणाऱ्या useEffect मध्ये ते साफ करण्यासाठी सेटर फंक्शन कॉल करू शकता.


सामान्य अडचणी आणि सर्वोत्तम पद्धती


  useFormStatus चे स्थान: लक्षात ठेवा, useFormStatus कॉल करणारा कंपोनेंट `<form>` चा चाइल्ड म्हणून रेंडर करणे आवश्यक आहे. जर तो सिबलिंग किंवा पॅरेंट असेल तर ते कार्य करणार नाही.
  सिरीयलाइजेबल स्टेट: सर्व्हर अॅक्शन्स वापरताना, तुमच्या अॅक्शनमधून परत येणारा स्टेट ऑब्जेक्ट सिरीयलाइजेबल असणे आवश्यक आहे. याचा अर्थ त्यात फंक्शन्स, सिम्बॉल्स किंवा इतर नॉन-सिरीयलाइजेबल व्हॅल्यूज असू शकत नाहीत. साधे ऑब्जेक्ट्स, अॅरेज, स्ट्रिंग्स, नंबर्स आणि बूलियन्स वापरा.
  अॅक्शन्समध्ये थ्रो करू नका: `throw new Error()` ऐवजी, तुमच्या अॅक्शन फंक्शनने त्रुटी व्यवस्थित हाताळल्या पाहिजेत आणि त्रुटीचे वर्णन करणारा एक स्टेट ऑब्जेक्ट परत केला पाहिजे (उदा., `{ success: false, message: 'एक त्रुटी आली' }`). हे सुनिश्चित करते की स्टेट नेहमी अंदाजे अपडेट केली जाते.
  एक स्पष्ट स्टेट शेप परिभाषित करा: सुरुवातीपासूनच तुमच्या स्टेट ऑब्जेक्टसाठी एक सुसंगत रचना स्थापित करा. `{ data: T | null, message: string | null, success: boolean, errors: Record | null }` सारखा शेप अनेक उपयोग प्रकरणे कव्हर करू शकतो.


useActionState विरुद्ध useReducer: एक द्रुत तुलना

पहिल्या दृष्टीक्षेपात, useActionState हे useReducer सारखे वाटू शकते, कारण दोन्हीमध्ये मागील स्टेटवर आधारित स्टेट अपडेट करणे समाविष्ट आहे. तथापि, ते भिन्न उद्देश पूर्ण करतात.


  useReducer हा क्लायंट-साइडवर जटिल स्टेट संक्रमणे व्यवस्थापित करण्यासाठी एक सामान्य-उद्देशीय हुक आहे. हे अॅक्शन्स डिस्पॅच करून ट्रिगर केले जाते आणि अशा स्टेट लॉजिकसाठी आदर्श आहे ज्यात अनेक संभाव्य, सिंक्रोनस स्टेट बदल असतात (उदा., एक जटिल मल्टी-स्टेप विझार्ड).
  useActionState हा एक विशेष हुक आहे जो एकाच, सामान्यतः असिंक्रोनस अॅक्शनला प्रतिसाद म्हणून बदलणाऱ्या स्टेटसाठी डिझाइन केलेला आहे. त्याची प्राथमिक भूमिका HTML फॉर्म, सर्व्हर अॅक्शन्स आणि React च्या पेंडिंग स्टेट संक्रमणांसारख्या कॉन्करंट रेंडरिंग वैशिष्ट्यांसह एकत्रित करणे आहे.


सारांश: फॉर्म सबमिशन आणि फॉर्मशी संबंधित असिंक ऑपरेशन्ससाठी, useActionState हे आधुनिक, उद्देश-निर्मित साधन आहे. इतर जटिल, क्लायंट-साइड स्टेट मशीन्ससाठी, useReducer एक उत्कृष्ट पर्याय आहे.

निष्कर्ष: React फॉर्म्सच्या भविष्याचा स्वीकार

useActionState हुक फक्त एका नवीन API पेक्षा अधिक आहे; ते React मध्ये फॉर्म आणि डेटा म्युटेशन्स हाताळण्याच्या अधिक मजबूत, घोषणात्मक आणि वापरकर्ता-केंद्रित पद्धतीकडे एक मूलभूत बदल दर्शवते. ते स्वीकारून, तुम्हाला मिळते:


  कमी बॉइलरप्लेट: एकच हुक अनेक useState कॉल्स आणि मॅन्युअल स्टेट ऑर्केस्ट्रेशनची जागा घेतो.
  एकात्मिक पेंडिंग स्टेट्स: सहकारी useFormStatus हुकसह लोडिंग UIs अखंडपणे हाताळा.
  अंगभूत प्रोग्रेसिव्ह एनहान्समेंट: जावास्क्रिप्टसह किंवा त्याशिवाय कार्य करणारा कोड लिहा, सर्व वापरकर्त्यांसाठी प्रवेशयोग्यता आणि लवचिकता सुनिश्चित करा.
  सरलीकृत सर्व्हर कम्युनिकेशन: सर्व्हर अॅक्शन्ससाठी एक नैसर्गिक जुळणी, ज्यामुळे फुल-स्टॅक डेव्हलपमेंट अनुभव सुव्यवस्थित होतो.


तुम्ही नवीन प्रकल्प सुरू करता किंवा विद्यमान प्रकल्प रिफॅक्टर करता, तेव्हा useActionState वापरण्याचा विचार करा. ते केवळ तुमचा कोड अधिक स्वच्छ आणि अधिक अंदाजे बनवून तुमचा डेव्हलपर अनुभव सुधारणार नाही, तर तुम्हाला उच्च-गुणवत्तेचे ॲप्लिकेशन्स तयार करण्यास सक्षम करेल जे जलद, अधिक लवचिक आणि विविध जागतिक प्रेक्षकांसाठी प्रवेशयोग्य आहेत.