उपयोग में Async फ़ंक्शन के लिए प्रतिक्रिया हुक चेतावनी: उपयोग फ़ंक्शन फ़ंक्शन को क्लीनअप फ़ंक्शन या कुछ भी वापस नहीं करना चाहिए

Question 1

मैं नीचे दिए गए कुछ उदाहरण का उपयोग करने की कोशिश कर रहा था:

useEffect(async () => {
    try {
        const response = await fetch(`https://www.reddit.com/r/${subreddit}.json`);
        const json = await response.json();
        setPosts(json.data.children.map(it => it.data));
    } catch (e) {
        console.error(e);
    }
}, []);

स्निपेट का विस्तार करें

और मुझे यह चेतावनी मेरे कंसोल में मिलती है। लेकिन मुझे लगता है कि async कॉल के लिए क्लीनअप वैकल्पिक है। मुझे यकीन नहीं है कि मुझे यह चेतावनी क्यों मिली है। उदाहरण के लिए सैंडबॉक्स को जोड़ना। https://codesandbox.io/s/24rj871r0p

Question 2

मैं दान Abramov (प्रतिक्रिया कोर अनुरक्षकों में से एक) को यहां देखने का सुझाव देता हूं :

मुझे लगता है कि आप इसे ज़रूरत से ज़्यादा जटिल बना रहे हैं।

function Example() {
  const [data, dataSet] = useState<any>(null)

  useEffect(() => {
    async function fetchMyAPI() {
      let response = await fetch('api/data')
      response = await response.json()
      dataSet(response)
    }

    fetchMyAPI()
  }, [])

  return <div>{JSON.stringify(data)}</div>
}

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

const response = MyAPIResource.read();

और कोई प्रभाव नहीं। लेकिन इस बीच आप एसिंक्स सामान को एक अलग फ़ंक्शन में स्थानांतरित कर सकते हैं और इसे कॉल कर सकते हैं।

आप प्रायोगिक रहस्य के बारे में अधिक पढ़ सकते हैं ।

यदि आप एस्किल्ट के साथ बाहर के कार्यों का उपयोग करना चाहते हैं।

 function OutsideUsageExample() {
  const [data, dataSet] = useState<any>(null)

  const fetchMyAPI = useCallback(async () => {
    let response = await fetch('api/data')
    response = await response.json()
    dataSet(response)
  }, [])

  useEffect(() => {
    fetchMyAPI()
  }, [fetchMyAPI])

  return (
    <div>
      <div>data: {JSON.stringify(data)}</div>
      <div>
        <button onClick={fetchMyAPI}>manual fetch</button>
      </div>
    </div>
  )
}

UseCallback साथ useCallback । सैंडबॉक्स ।

import React, { useState, useEffect, useCallback } from "react";

export default function App() {
  const [counter, setCounter] = useState(1);

  // if counter is changed, than fn will be updated with new counter value
  const fn = useCallback(() => {
    setCounter(counter + 1);
  }, [counter]);

  // if counter is changed, than fn will not be updated and counter will be always 1 inside fn
  /*const fnBad = useCallback(() => {
      setCounter(counter + 1);
    }, []);*/

  // if fn or counter is changed, than useEffect will rerun
  useEffect(() => {
    if (!(counter % 2)) return; // this will stop the loop if counter is not even

    fn();
  }, [fn, counter]);

  // this will be infinite loop because fn is always changing with new counter value
  /*useEffect(() => {
    fn();
  }, [fn]);*/

  return (
    <div>
      <div>Counter is {counter}</div>
      <button onClick={fn}>add +1 count</button>
    </div>
  );
}

Question 3

जब आप एक async फ़ंक्शन का उपयोग करते हैं

async () => {
    try {
        const response = await fetch(`https://www.reddit.com/r/${subreddit}.json`);
        const json = await response.json();
        setPosts(json.data.children.map(it => it.data));
    } catch (e) {
        console.error(e);
    }
}

यह एक वादा वापस करता है और useEffectकॉलबैक फ़ंक्शन को वादा वापस करने की उम्मीद नहीं करता है, बल्कि यह उम्मीद करता है कि कुछ भी नहीं लौटाया गया है या कोई फ़ंक्शन वापस किया गया है।

चेतावनी के लिए एक वर्कअराउंड के रूप में आप async फ़ंक्शन का उपयोग कर सकते हैं।

useEffect(() => {
    (async function() {
        try {
            const response = await fetch(
                `https://www.reddit.com/r/${subreddit}.json`
            );
            const json = await response.json();
            setPosts(json.data.children.map(it => it.data));
        } catch (e) {
            console.error(e);
        }
    })();
}, []);

या इसे और अधिक स्वच्छ बनाने के लिए आप किसी फ़ंक्शन को परिभाषित कर सकते हैं और फिर उसे कॉल कर सकते हैं

useEffect(() => {
    async function fetchData() {
        try {
            const response = await fetch(
                `https://www.reddit.com/r/${subreddit}.json`
            );
            const json = await response.json();
            setPosts(json.data.children.map(it => it.data));
        } catch (e) {
            console.error(e);
        }
    };
    fetchData();
}, []);

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

काम कोडैंडबॉक्स

Question 4

जब तक रिएक्ट एक बेहतर तरीका प्रदान नहीं करता, तब तक आप एक सहायक बना सकते हैं useEffectAsync.js:

import { useEffect } from 'react';


export default function useEffectAsync(effect, inputs) {
    useEffect(() => {
        effect();
    }, inputs);
}

अब आप एक async फ़ंक्शन पास कर सकते हैं:

useEffectAsync(async () => {
    const items = await fetchSomeItems();
    console.log(items);
}, []);

Question 5

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

const [data, setData] = useState(null);

/* This would be called on initial page load */
useEffect(()=>{
    fetch(`https://www.reddit.com/r/${subreddit}.json`)
    .then(data => {
        setData(data);
    })
    .catch(err => {
        /* perform error handling if desired */
    });
}, [])

/* This would be called when store/state data is updated */
useEffect(()=>{
    if (data) {
        setPosts(data.children.map(it => {
            /* do what you want */
        }));
    }
}, [data]);

संदर्भ => https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects

Question 6

शून्य ऑपरेटर का उपयोग यहां किया जा सकता है।
के बजाय:

React.useEffect(() => {
    async function fetchData() {
    }
    fetchData();
}, []);

या

React.useEffect(() => {
    (async function fetchData() {
    })()
}, []);

आप लिख सकते हैं:

React.useEffect(() => {
    void async function fetchData() {
    }();
}, []);

यह थोड़ा क्लीनर और प्रीटियर है।

Async प्रभाव मेमोरी लीक का कारण बन सकता है इसलिए घटक अनमाउंट पर सफाई करना महत्वपूर्ण है। इस मामले में यह इस तरह दिख सकता है:

function App() {
    const [ data, setData ] = React.useState([]);

    React.useEffect(() => {
        const abortController = new AbortController();
        void async function fetchData() {
            try {
                const url = 'https://jsonplaceholder.typicode.com/todos/1';
                const response = await fetch(url, { signal: abortController.signal });
                setData(await response.json());
            } catch (error) {
                console.log('error', error);
            }
        }();
        return () => {
            abortController.abort(); // cancel pending fetch request on component unmount
        };
    }, []);

    return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

Question 7

प्रयत्न

const MyFunctionnalComponent: React.FC = props => {
  useEffect(() => {
    // Using an IIFE
    (async function anyNameFunction() {
      await loadContent();
    })();
  }, []);
  return <div></div>;
};

स्निपेट का विस्तार करें

Question 8

अन्य पाठकों के लिए, त्रुटि इस तथ्य से आ सकती है कि एसिंक्स फ़ंक्शन को लपेटने वाला कोई ब्रैकेट नहीं है:

Async फ़ंक्शन initData को ध्यान में रखते हुए

  async function initData() {
  }

यह कोड आपकी त्रुटि का कारण बनेगा:

  useEffect(() => initData(), []);

लेकिन यह एक, नहीं होगा:

  useEffect(() => { initData(); }, []);

(ईटडाटा के आसपास के कोष्ठकों पर ध्यान दें) ()