इस सप्ताह, हम नए रिएक्ट 19 अपडेट और हुक के बारे में बात करेंगे। इन नए अपडेटों में से कुछ को पढ़ने और उनका उपयोग करने के बाद, मैं केवल इस बात से सहमत हो सकता हूं कि इसने कुछ कठोर गतिविधियों को सरल बना दिया है जो डेवलपर्स ऐप्स, विशेष रूप से इंटरैक्टिव फॉर्म-संबंधित एप्लिकेशन बनाते समय करते हैं।

मेरे साथ जुड़ें और हमें इनमें से कुछ नए अपडेट का पता लगाने दें।

रिएक्ट कंपाइलर: रिएक्ट कंपाइलर आपका रिएक्ट कोड चुनता है, इसे ब्राउज़र के लिए जावास्क्रिप्ट कोड में अनुवादित करता है, और आपके घटक या उपयोगकर्ता इंटरफ़ेस की स्थिति का प्रबंधन करता है। यह विलक्षण क्रिया आपके एप्लिकेशन के प्रदर्शन को अनुकूलित करने में मदद करती है।

यदि आप यूज़मेमो हुक, यूज़कॉलबैक हुक और रिएक्ट.मेमो से परिचित हैं, तो आप समझेंगे कि वे आपके घटकों को याद रखने (भविष्य में उपयोग के लिए मूल्यों या कार्यों को संग्रहीत करने) में मदद करते हैं, इसलिए उन्हें दोबारा नहीं करना पड़ता है। जब कोई राज्य परिवर्तन न हो तो प्रस्तुत करें। जब स्थिति में परिवर्तन होते हैं, तो रिएक्ट संबंधित घटक और उसके बच्चों को फिर से प्रस्तुत करता है, और जब आपके कोड में कोई बदलाव नहीं होता है, तो घटक पिछली मेमोरी, मूल्य और स्थिति को घटक या हुक में भविष्य के लिए रखता है। उपयोग; जिससे आपके घटकों के प्रदर्शन को अनुकूलित किया जा सके। उपरोक्त किसी भी हुक को मैन्युअल रूप से कॉल किए बिना, रिएक्ट कंपाइलर स्वचालित रूप से यही करता है।

फॉर्म एक्शन: रिएक्ट का उपयोग करने के सबसे बड़े फायदों में से एक है राज्य का प्रबंधन और उत्परिवर्तन, और यह ज्यादातर तब होता है जब हम का उपयोग करते हैं तत्व। फ़ॉर्म हमें उपयोगकर्ता सहभागिता को अधिक प्रभावी ढंग से बनाने और प्रबंधित करने में मदद करते हैं।

फॉर्म क्रियाओं के साथ, आपको डेटा के लाइव म्यूटेशन को प्रभावित करने के लिए ऑनसबमिट और ऑनचेंज जैसे इवेंट हैंडलर की आवश्यकता नहीं है, इसके बजाय हम एक action प्रोप पास कर सकते हैं

const myFunction = async (formData) => {
  const [name, setName] = useState("")

  const updatedName = await nameChange(formData.get("name"))
     setName(updatedName)
}

इस दृष्टिकोण के साथ, हमें event.target.value के माध्यम से डेटा को बदलने के लिए useState के एप्लिकेशन की आवश्यकता नहीं है, इसके बजाय, myFunction में हम ऐसा कर सकते हैं। एक तर्क के माध्यम से उत्परिवर्तित डेटा प्राप्त करें।

इसका मतलब है कि हमारे फॉर्म में तत्व से, हमें एक नाम विशेषता सेट करनी होगी। इस पद्धति का उपयोग करने का मतलब है कि हम इवेंट हैंडलर के माध्यम से मैन्युअल रूप से स्थिति बदलने के बजाय React को नेटिव रिएक्ट फॉर्म ऑब्जेक्ट के माध्यम से फॉर्म को संभालने की अनुमति देते हैं।

सर्वर घटक: रिएक्ट 19 घटकों को क्लाइंट एप्लिकेशन या एसएसआर सर्वर सेटअप से अलग वातावरण में बंडल करने से पहले सर्वर पर प्रस्तुत करने की अनुमति देता है। सर्वर घटक SSR (सर्वर साइड रेंडरिंग) के समान नहीं हैं, लेकिन रिएक्ट सर्वर घटकों में एक अलग सर्वर वातावरण हैं।
यह सुविधा घटकों को समय से पहले प्री-रेंडर करने की अनुमति देती है, जिसके परिणामस्वरूप तेजी से सामग्री प्रदर्शित होती है और लोड समय में सुधार होता है।

मेटाडेटा: रिएक्ट 19 लचीले मेटाडेटा की अनुमति देता है। डेवलपर्स DocumentHead घटक के माध्यम से व्यक्तिगत घटकों के शीर्षक, विवरण और अन्य मेटा टैग का प्रबंधन कर सकते हैं। इससे SEO (सर्च इंजन ऑप्टिमाइजेशन) को बेहतर बनाने में मदद मिलेगी।

Const AboutUs = () => {
 return (
    
      
      
      // content
    >
  );
}

रिएक्ट 19 में नए हुक की एक श्रृंखला है, कुछ, नए, अन्य मौजूदा हुक में सुधार। आइए नीचे उनके बारे में चर्चा करें।

उपयोग() हुक: उपयोग हुक एक प्रायोगिक एपीआई है जिसका उपयोग सीधे किसी घटक या हुक के भीतर किसी वादे या संदर्भ के मूल्य को पढ़ने के लिए किया जा सकता है (जो कि अब तक इसकी एकमात्र ज्ञात सीमा है) ).
उपयोग हुक बहुत बहुमुखी है और इसका उपयोग उपयोग प्रभाव के स्थान पर भी किया जा सकता है, क्योंकि इसका उपयोग अतुल्यकालिक डेटा लाने के लिए किया जा सकता है। इससे मदद मिलती है
एक साफ-सुथरा और संक्षिप्त कोड ब्लॉक प्राप्त करें।

चेतावनी: यह यूज़इफ़ेक्ट का प्रतिस्थापन नहीं है क्योंकि इसकी अभी भी अपनी सीमाएँ हैं जिन्हें _यूज़इफ़ेक्ट _बिना सीमा के निष्पादित करेगा।

import {use} from "react"
const fetchData = async () => {
    const response = await fetch("https://........");
    return response.json()
}

const userData = () => {
    const user = use(fetchData());

        return (
    
{user.name}
  );
}

useActionState(): यह एक नया हुक है जो राज्य परिवर्तनों को प्रबंधित करने में मदद करता है। यह लंबित स्थिति, त्रुटि प्रबंधन और अंतिम को प्रबंधित करने में मदद करता है
राज्य अद्यतन. useActionState _useReduce _in की तरह काम करता है जिसमें इसे दो (2) पैरामीटर प्राप्त होते हैं: फॉर्म सबमिट होने पर कॉल किया जाने वाला फ़ंक्शन, और एक _initialState, और यह तीन (3) मानों वाली एक सरणी देता है: स्थिति, जो अब वर्तमान स्थिति है यदि राज्य में कोई उत्परिवर्तन होता है, एक नई क्रिया (फॉर्मएक्शन) जिसे सर्वर कार्रवाई को कॉल करने के लिए हमारे फॉर्म घटक में एक प्रोप के रूप में पारित किया जा सकता है, और _isPending _that एक _boolean _value लौटाता है या नहीं फॉर्म जमा हो गया है।

import { useActionState } from "react";

async function incrementFunction(initialState, formData) {
  return initialState   1;
}

function StatefulForm({}) {
  const [state, formAction, isPending] = useActionState(incrementFunction, 0);

  console.log(state);

  return (
    

इस उदाहरण से, incrementFunction हर बार बटन पर क्लिक करने पर 1 को स्थिति में जोड़ता है। initialState 0 है, और फिर बटन के पहले क्लिक पर 1 तक बढ़ जाता है, जिससे state को 1 में बदल देता है, और बटन पर हर दूसरे क्लिक के लिए अंतिम में 1 जोड़ देता है घटक की स्थिति.

useOptimistic() हुक:

यह एक नया हुक है जो उपयोगकर्ताओं को पेज पूरी तरह से लोड होने से पहले ही उनकी कार्रवाई का परिणाम देखने की अनुमति देता है। जब सर्वर अभी भी अपने डेटा फ़ेचिंग मोड में है तब भी पृष्ठ उपयोगकर्ता के लिए आशावादी रूप से प्रस्तुत किए जाते हैं।

इस उम्मीद के साथ कि डेटा फ़ेच करना सफल होगा, रिएक्ट क्लाइंट को इच्छित परिणाम प्रदर्शित करता है, और जब डेटा फ़ेच विफल हो जाता है, तो गलत डेटा प्रदर्शित न करने के लिए रिएक्ट पिछली स्थिति के मान पर वापस आ जाता है। . यह विलक्षण क्रिया डेटा के निर्बाध और तेज़ प्रदर्शन में मदद करती है जिससे उपयोगकर्ता अनुभव में सुधार होता है।

useFormStatus():

जैसा कि नाम से पता चलता है, useFormStatus हमें हमारे फॉर्म या फॉर्म फ़ील्ड्स की स्थिति देता है। यह हुक कोई पैरामीटर नहीं लेता है, लेकिन यह निश्चित रूप से 4 ऑब्जेक्ट लौटाता है:

pending: यह एक बूलियन मान लौटाता है: true या false। फॉर्म सबमिट होने पर यह true देता है, और फॉर्म सबमिट होने पर false देता है।

डेटा: जब फॉर्म सफलतापूर्वक सबमिट हो जाता है, तो हम फॉर्म फ़ील्ड से उपयोगकर्ता या ऑब्जेक्ट की जानकारी इस तरह प्राप्त कर सकते हैं:

(formData.get("name"))
(formData.get("address"))

method: किसी फॉर्म की डिफ़ॉल्ट विधि GET है, जब तक कि अन्यथा न कहा गया हो। हम अपने फॉर्म का तरीका .method से प्राप्त कर सकते हैं। जब हम एक फॉर्म जमा कर रहे हैं, तो एक स्ट्रिंग विधि संपत्ति को POST के रूप में निर्दिष्ट किया जाना चाहिए।

action: यह उस फ़ंक्शन का संदर्भ है जिसे हमारे तत्व में एक्शन प्रोप में पास किया जाएगा।

useFormStatus को हमेशा एक तत्व या एक घटक से बुलाया जाना चाहिए जो के अंदर प्रस्तुत किया गया है।

कुछ और अपडेट हैं जिनके बारे में मैं वास्तव में नहीं लिख सकता, इसलिए आप इतना कुछ पढ़कर बोर नहीं होंगे। कुछ अन्य अपडेट देखने के लिए आप रिएक्ट डॉक्स वेबसाइट पर क्लिक कर सकते हैं।

मुझे आशा है कि आपने मेरे साथ सीखने में बहुत अच्छा समय बिताया होगा।

अगर आपको मेरे लेख पसंद आए तो मुझे फॉलो करें।

धन्यवाद, और मेरे दोस्तों आपका सप्ताह मंगलमय हो।