घटक हुक का उपयोग कैसे करें () रिएक्शन हुक में?

Question

प्रतिक्रिया के आधिकारिक दस्तावेज़ में इसका उल्लेख है -

यदि आप रिएक्ट क्लास जीवनचक्र विधियों से परिचित हैं, तो आप घटक के रूप में हुक का उपयोग करने के बारे में सोच सकते हैंनिम्नलिखित, घटकदिवसपद, और घटकविलाउमाउंट संयुक्त।

मेरा सवाल है - हम componentWillMount()एक हुक में जीवन शैली विधि का उपयोग कैसे कर सकते हैं ?

Answer 1

आप मौजूदा जीवन चक्र विधि (के किसी भी उपयोग नहीं कर सकते componentDidMount, componentDidUpdate, componentWillUnmountएक हुक में आदि)। उनका उपयोग केवल कक्षा के घटकों में किया जा सकता है। और हुक के साथ आप केवल कार्यात्मक घटकों में उपयोग कर सकते हैं। नीचे की रेखा रिएक्ट डॉक से आती है:

यदि आप रिएक्ट क्लास जीवनचक्र विधियों से परिचित हैं, तो आप useEffectहुक के रूप componentDidMountमें componentDidUpdate, और componentWillUnmountसंयुक्त के बारे में सोच सकते हैं ।

सुझाव है, आप एक कार्यात्मक घटकों में वर्ग घटक से इन जीवन चक्र विधि की नकल कर सकते हैं।

componentDidMountजब घटक माउंट किया जाता है तो एक बार अंदर कोड चलता है। useEffectइस व्यवहार के लिए हुक बराबर है

useEffect(() => {
  // Your code here
}, []);

दूसरे पैरामीटर को यहां देखें (खाली सरणी)। यह केवल एक बार चलेगा।

दूसरे पैरामीटर के बिनाuseEffect हुक को घटक के प्रत्येक रेंडर पर बुलाया जाएगा जो खतरनाक हो सकता है।

useEffect(() => {
  // Your code here
});

componentWillUnmountसफाई के लिए उपयोग किया जाता है (जैसे घटना श्रोताओं को हटाना, टाइमर को रद्द करना आदि)। कहते हैं कि आप एक ईवेंट श्रोता को इसमें जोड़ रहे हैं componentDidMountऔर इसे componentWillUnmountनीचे के रूप में निकाल रहे हैं।

componentDidMount() {
  window.addEventListener('mousemove', () => {})
}

componentWillUnmount() {
  window.removeEventListener('mousemove', () => {})
}

उपरोक्त कोड के बराबर हुक निम्नानुसार होगा

useEffect(() => {
  window.addEventListener('mousemove', () => {});

  // returned function will be called on component unmount 
  return () => {
    window.removeEventListener('mousemove', () => {})
  }
}, [])

Comments

अन्य जीवनचक्र की घटनाओं के लिए अच्छा विवरण, लेकिन यह विशेष रूप से कंपोनेंटवैलमाउंट () के विकल्प के बारे में सवाल नहीं करता है।

— शिराज़

PanResponder उदाहरणों में मैंने देखा है कि CompWillMount आवश्यक प्रतीत होता है, अन्यथा आपको अपरिभाषित पैनहैंडलर मिलते हैं।

— Dror Bar

मैं अब वास्तव में useEffect()फ़ंक्शन को समझता हूं , धन्यवाद।

— इरोब अल असिमी

यह एक स्वीकृत उत्तर क्यों है ?? आपने componentWillMount

— Mykybo

@techexpert प्रश्न के बराबर के लिए पूछा componentWillMount, नहीं componentWillUnmount। यह जवाब वास्तव में सवाल का जवाब नहीं देता है, और ओपी यह जानने के लिए पहले से ही निहित है कि क्या फिर से पुनरावृति करता है।

— यहोशूवेबडेक्टर

Answer 2

useComponentDidMount हुक

ज्यादातर मामलों useComponentDidMountमें उपयोग करने के लिए उपकरण है। यह केवल एक बार चलेगा, घटक माउंट होने के बाद (प्रारंभिक रेंडर)।

 const useComponentDidMount = func => useEffect(func, []);

useComponentWillMount

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

const useComponentWillMount = func => {
  const willMount = useRef(true);

  if (willMount.current) {
    func();
  }

  willMount.current = false;
};

हालांकि, एक गड्ढा है। अपने राज्य को सेट करने के लिए इसे अतुल्यकालिक रूप से उपयोग न करें (उदाहरण के लिए सर्वर अनुरोध के बाद। जैसा कि आप उम्मीद कर सकते हैं कि यह प्रारंभिक रेंडरिंग को प्रभावित करेगा जो यह नहीं होगा)। ऐसे मामलों से निपटना चाहिए useComponentDidMount।

डेमो

const Component = (props) => {
  useComponentWillMount(() => console.log("Runs only once before component mounts"));
  useComponentDidMount(() => console.log("Runs only once after component mounts"));
  ...

  return (
    <div>{...}</div>
  );
}

पूर्ण डेमो

Comments

यह एकमात्र उत्तर है जो प्रश्न का उत्तर देता है और समझ में आता है। धन्यवाद!

— चुमाकॉफ

इसके साथ एकमात्र समस्या यह है कि आपको अतिरिक्त अपडेट मिल जाता है क्योंकि इसमें स्टेट अपडेट शामिल होता है। एक रेफरी का उपयोग करने के बजाय आप अतिरिक्त रेंडर के बिना वांछित व्यवहार प्राप्त करते हैं: `का उपयोग करें comComponentWillMount = func => {const willMount = useRef (true); useEffect (() => {willMount.current = false;}; []); if (willMount.current) {func (); }}; `

— रीमिक्स 23

componentWillMountपर आधारित इस कार्यात्मक कार्यान्वयन useEffectमें दो समस्याएं हैं। पहला यह है कि कार्यात्मक घटकों में बढ़ते जीवनचक्र नहीं है, दोनों हुक घटक के प्रतिपादन के बाद चलेंगे, इसलिए Runs only once before component mountsयह भ्रामक है। दूसरा वह componentWillMountहै जिसे सर्वर रेंडरिंग कहा जाता है और useEffectऐसा नहीं है। कई लाइब्रेरी अभी भी भरोसा करते हैं UNSAFE_componentWillMountक्योंकि वर्तमान में यह साइड-इफ़ेक्ट सर्वर-साइड को ट्रिगर करने का एकमात्र तरीका है।

— पाओलो मोरेटी

@PaoloMoretti, धन्यवाद। यह घटकWillMount हुक, घटक के ठीक बराबर नहीं हैWillMount एक वर्ग घटक में जीवनचक्र। हालांकि, जो फ़ंक्शन इसे पास किया गया है, वह तुरंत चलेगा, केवल पहली बार इसे कहा जाता है। यह व्यावहारिक रूप से इसका मतलब है कि यह प्रस्तुत होने से पहले चलेगा, और इससे पहले कि यह पहली बार एक मान लौटाता है। क्या हम इसके बारे में सहमत हो सकते हैं? मैं सहमत हूँ कि नाम घटक का उपयोग करनाWillMount आदर्श नहीं है, क्योंकि यह नाम कक्षा के जीवन चक्र संस्करण से कुछ अर्थ रखता है। शायद मैं इसे "useRunPreMount" कहता हूं।

— बेन कार्प

@PaoloMoretti, मुझे यह बिल्कुल पसंद नहीं है। मैं SSR के साथ काम नहीं करता, लेकिन मेरी समझ यह है कि SSR घटक पर दो बार चलता है - एक बार सर्वर पर और एक बार क्लाइंट पर। मुझे लगता है कि कॉलबैक के लिए वही सच है जो किComComententDidMount का उपयोग करने के लिए पारित किया गया है। कॉलबैक को रोकने के लिए यूज़कनेक्ट पर useComponentDidMount रिले करता है। जब तक यूजफेक कॉलबैक निष्पादित नहीं हो जाता है तब तक घटक का कार्य दो बार चलेगा - एक बार सर्वर पर और एक बार क्लाइंट पर। क्या यह मामला नहीं है?

— बेन कार्प

Answer 3

Reactjs.org के अनुसार, भविष्य में ComponentsWillMount का समर्थन नहीं किया जाएगा। https://reactjs.org/docs/react-component.html#unsafe_componentwillmount

कंपोनेंटविल का उपयोग करने की कोई आवश्यकता नहीं है।

यदि आप घटक को माउंट करने से पहले कुछ करना चाहते हैं, तो बस इसे कंस्ट्रक्टर () में करें।

यदि आप नेटवर्क अनुरोध करना चाहते हैं, तो इसे कंपोनेंटमाउंट में न करें। ऐसा इसलिए है क्योंकि ऐसा करने से अप्रत्याशित कीड़े हो जाएंगे।

नेटवर्क अनुरोध घटकडिमाउंट में किया जा सकता है।

आशा करता हूँ की ये काम करेगा।

---

08/03/2019 को अपडेट किया गया

घटक क्यों पूछते हैं इसका कारण यह है कि आप रेंडर करने से पहले राज्य को इनिशियलाइज़ करना चाहते हैं।

बस इसे useState में करें।

const helloWorld=()=>{
    const [value,setValue]=useState(0) //initialize your state here
    return <p>{value}</p>
}
export default helloWorld;

या हो सकता है कि आप एक घटक चलाना चाहते हैं जैसे किWillMount, उदाहरण के लिए, यदि आपका मूल कोड इस तरह दिखता है:

componentWillMount(){
  console.log('componentWillMount')
}

हुक के साथ, आपको जीवन चक्र विधि को हटाने की जरूरत है:

const hookComponent=()=>{
    console.log('componentWillMount')
    return <p>you have transfered componeWillMount from class component into hook </p>
}

मैं केवल उपयोग के बारे में पहले उत्तर में कुछ जोड़ना चाहता हूं।

useEffect(()=>{})

यूज़फेक हर रेंडर पर चलता है, यह कंपोनेंटड्यूपडेट, कंपोनेंटडिमाउंट और कंपोनेंटविलीयूएनमाउंट का एक संयोजन है।

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

यदि हम उपयोग में खाली सरणी जोड़ते हैं, तो यह घटक के माउंट होने पर ही चलता है। ऐसा इसलिए है क्योंकि useEffect आपके द्वारा पास किए गए सरणी की तुलना करेगा। तो यह एक खाली सरणी नहीं होना चाहिए। यह ऐसा सरणी हो सकता है जो बदल नहीं रहा है। उदाहरण के लिए, यह [1,2,3] या ['1,2'] हो सकता है। उपयोग अभी भी केवल तभी चलता है जब घटक आरोहित होता है।

यह आप पर निर्भर करता है कि आप चाहते हैं कि यह सिर्फ एक बार चले या हर रेंडर के बाद चले। यह खतरनाक नहीं है अगर आप एक सरणी जोड़ना भूल गए जब तक आप जानते हैं कि आप क्या कर रहे हैं।

मैंने हुक के लिए एक नमूना बनाया। कृपया यह देखें।

https://codesandbox.io/s/kw6xj153wr

---

21/08/2019 को अपडेट किया गया

उपरोक्त उत्तर लिखने के बाद से यह सफेद हो गया है। ऐसा कुछ है जो मुझे लगता है कि आपको ध्यान देने की आवश्यकता है। जब आप उपयोग करते हैं

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

जब प्रतिक्रिया आपके द्वारा दिए गए मानों की सरणी से तुलना करती है [], तो यह तुलना करने के लिए Object.is () का उपयोग करता है। यदि आप किसी वस्तु को पास करते हैं, जैसे कि

useEffect(()=>{},[{name:'Tom'}])

यह बिल्कुल वैसा ही है:

useEffect(()=>{})

यह हर बार फिर से प्रस्तुत करेगा क्योंकि जब Object.is () एक वस्तु की तुलना करता है, तो वह अपने संदर्भ की तुलना करता है न कि मूल्य की। यह वैसा ही है जैसे {} === {} झूठे लौटते हैं क्योंकि उनके संदर्भ अलग हैं। यदि आप अभी भी ऑब्जेक्ट की तुलना संदर्भ से नहीं करना चाहते हैं, तो आप कुछ इस तरह कर सकते हैं:

useEffect(()=>{},[JSON.stringify({name:'Tom'})])

Comments

और सवाल यह था कि इसे हुक के साथ कैसे लागू किया जाए

— शुभम खत्री

लेकिन आपको इसे हुक के साथ लागू करने की आवश्यकता नहीं है क्योंकि यह समर्थित नहीं होगा। हुक के साथ ऐसा करने के लिए सीखने की जरूरत नहीं है।

— मिंग डब्ल्यूयू

अब जब आपने उल्लेख किया है कि ComponentsDidMount उपयोग करने के लिए सही जीवनचक्र है, तो आप यह जोड़ सकते हैं कि इसे अपने उत्तर में कैसे लागू किया जाए और फिर आपका उत्तर स्वीकृत उत्तर की तुलना में अधिक समझ में आएगा

— शुभम् खत्री

निश्चित रूप से यह स्वीकृत उत्तर होना चाहिए - यह बताता है कि हूक्स प्रतिमान में ComponentWillMount उपलब्ध नहीं है। कार्यात्मक घटकों में प्रारंभिकीकरण सरल है - इसे केवल समारोह का हिस्सा बनाने की आवश्यकता है

— शिराज़

यह घटकव्यूमेनाउंट के समान ही कैसे है? यदि आप कार्यात्मक घटक में कोड को फेंकते हैं तो यह हर एक रेंडर को चलाएगा, न केवल तब जब घटक माउंट होने वाला हो।

— ओवरकोड

Answer 4

useLayoutEffectपर्यवेक्षकों के खाली सेट के साथ इसे पूरा कर सकते हैं ( []) यदि कार्यक्षमता वास्तव में समान है componentWillMount- यह पहली सामग्री के डोम पर पहुंचने से पहले चलेगी - हालांकि वास्तव में दो अपडेट हैं लेकिन वे स्क्रीन पर ड्राइंग से पहले सिंक्रोनस हैं।

उदाहरण के लिए:

function MyComponent({ ...andItsProps }) {
     useLayoutEffect(()=> {
          console.log('I am about to render!');
     },[]);

     return (<div>some content</div>);
}

useStateइनिलाइज़र / सेटर या के साथ लाभuseEffect यद्यपि यह एक रेंडर पास की गणना कर सकता है, DOM को कोई वास्तविक री-रेंडर नहीं है जो एक उपयोगकर्ता नोटिस करेगा, और यह पहले ध्यान देने योग्य रेंडर से पहले चलाया जाता है , जो इसके लिए नहीं है useEffect। नकारात्मक पहलू यह है कि आपके पहले रेंडर में थोड़ी देरी है क्योंकि स्क्रीन पर पेंटिंग करने से पहले एक चेक / अपडेट करना पड़ता है। यह वास्तव में आपके उपयोग-मामले पर निर्भर करता है, हालांकि।

मुझे लगता है कि व्यक्तिगत रूप से, useMemoकुछ आला मामलों में ठीक है , जहां आपको कुछ भारी करने की आवश्यकता है - जब तक आप ध्यान रखें कि यह आदर्श बनाम अपवाद है।

Comments

useLayoutEffect जाने का रास्ता है !!!! यह जाँचने के बारे में मेरे प्रश्न का उत्तर देता है कि क्या उपयोगकर्ता लॉग इन है? (समस्या यह थी, घटक लोड होंगे, फिर जांचें कि क्या उपयोगकर्ता लॉग इन है।) मेरा प्रश्न यह है कि क्या यह मानक अभ्यास है? मैं बहुत सारे स्थानों पर नहीं देख रहा हूँ

— जेसिका

हाँ यह बहुत आम है; आधिकारिक प्रतिक्रिया डॉक्स में भी उल्लेख किया गया है - सिर्फ छोटे पाठ में क्योंकि डबल डोम के प्रभाव के कारण उपयोगकर्ता के सामने तर्क चलाने के लिए प्रस्तुत किया जाता है।

— रोब

वास्तव में यह घटक को प्रस्तुत करने के बाद चलता है। तो यह पूरी तरह से अलग हैWillMount।

— जिरी मिहाल

Answer 5

यह तरीका है कि मैं useRefहुक का उपयोग करके कार्यात्मक घटकों में निर्माणकर्ता को कैसे अनुकरण करता हूं :

function Component(props) {
    const willMount = useRef(true);
    if (willMount.current) {
        console.log('This runs only once before rendering the component.');
        willMount.current = false;        
    }

    return (<h1>Meow world!</h1>);
}

यहाँ जीवन चक्र उदाहरण है:

function RenderLog(props) {
    console.log('Render log: ' + props.children);
    return (<>{props.children}</>);
}

function Component(props) {

    console.log('Body');
    const [count, setCount] = useState(0);
    const willMount = useRef(true);

    if (willMount.current) {
        console.log('First time load (it runs only once)');
        setCount(2);
        willMount.current = false;
    } else {
        console.log('Repeated load');
    }

    useEffect(() => {
        console.log('Component did mount (it runs only once)');
        return () => console.log('Component will unmount');
    }, []);

    useEffect(() => {
        console.log('Component did update');
    });

    useEffect(() => {
        console.log('Component will receive props');
    }, [count]);


    return (
        <>
        <h1>{count}</h1>
        <RenderLog>{count}</RenderLog>
        </>
    );
}

[Log] Body
[Log] First time load (it runs only once)
[Log] Body
[Log] Repeated load
[Log] Render log: 2
[Log] Component did mount (it runs only once)
[Log] Component did update
[Log] Component will receive props

बेशक कक्षा के घटकों में Bodyकदम नहीं होते हैं, फ़ंक्शंस और कक्षाओं की विभिन्न अवधारणाओं के कारण 1: 1 सिमुलेशन करना संभव नहीं है।

Comments

मैं आपके उदाहरण में नहीं आया, लेकिन आपका पहला कोड स्निपेट मेरे लिए काम करता है, धन्यवाद!

— सांड्री

Answer 6

मैंने एक कस्टम हुक लिखा है जो पहले रेंडर करने से पहले एक बार एक फ़ंक्शन चलाएगा।

useBeforeFirstRender.js

import { useState, useEffect } from 'react'

export default (fun) => {
  const [hasRendered, setHasRendered] = useState(false)

  useEffect(() => setHasRendered(true), [hasRendered])

  if (!hasRendered) {
    fun()
  }
}

उपयोग:

import React, { useEffect } from 'react'
import useBeforeFirstRender from '../hooks/useBeforeFirstRender'


export default () => { 
  useBeforeFirstRender(() => {
    console.log('Do stuff here')
  })

  return (
    <div>
      My component
    </div>
  )
}

Answer 7

लागू करने के लिए componentDidMountऔर componentWillUnmountसाथ में एक अच्छा समाधान है useEffect।

प्रलेखन के आधार पर, useEffect"क्लीनअप" फ़ंक्शन वापस कर सकते हैं। इस फ़ंक्शन को पहले useEffectकॉल पर, केवल बाद की कॉल पर लागू नहीं किया जाएगा ।

इसलिए, अगर हम useEffectहुक का उपयोग बिना किसी निर्भरता के साथ करते हैं, तो हुक को केवल उस समय कहा जाएगा जब घटक माउंट किया जाता है और घटक के अनमाउंट होने पर "क्लीनअप" फ़ंक्शन को कहा जाता है।

useEffect(() => {
    console.log('componentDidMount');

    return () => {
        console.log('componentWillUnmount');
    };
}, []);

क्लीनअप रिटर्न फंक्शन कॉल को केवल तब ही इनवॉइस किया जाता है जब घटक अनमाउंट होता है।

उम्मीद है की यह मदद करेगा।

Comments

यह कैसे मदद करता है अगर इसका कंपोनेंटवैलमाउंट से कोई लेना-देना नहीं है ? क्या मैं कुछ भूल रहा हूँ?

— १V:५३ पर ZenVentzi

हां, आप इस तथ्य को याद कर रहे हैं कि एक ही useEffectकॉल में आपको समान कार्यक्षमता मिलती है componentWillMountऔर componentWillUnmountअच्छे और साफ तरीके से

— AfikDeri

यह सच नहीं है, useEffectकेवल एक रेंडर के बाद componentWillMountचलता है जबकि घटक रेंडर से पहले चलता है।

— ओवरकोड

@ ऑवरकोड मैं बात componentDidMountनहीं कर रहा था componentWillMount। मुझे याद है कि सवाल में, मेरा बुरा।

— अफिकादेरी

Answer 8

आप एक कंपोनेंटविलीमाउंट जीवनचक्र इवेंट की नकल करने के लिए यूज़मेमो हुक को हैक कर सकते हैं। बस करो:

const Component = () => {
   useMemo(() => {
     // componentWillMount events
   },[]);
   useEffect(() => {
     // componentWillMount events
     return () => {
       // componentWillUnmount events
     }
   }, []);
};

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

यह काम करता है क्योंकि useMemo को वास्तव में एक मूल्य वापस करने की आवश्यकता नहीं होती है और आपको वास्तव में इसे किसी भी चीज़ के रूप में उपयोग करने की आवश्यकता नहीं होती है, लेकिन चूंकि यह निर्भरता के आधार पर एक मूल्य को याद करता है जो केवल एक बार ("[]") और इसके घटक के शीर्ष पर होगा। एक बार चलता है जब घटक किसी अन्य चीज से पहले आरोहित करता है।

Answer 9

https://reactjs.org/docs/hooks-reference.html#usememo

याद रखें कि रेंडरिंग के दौरान फ़ंक्शन का उपयोग करने के लिए पास किया गया है। वहाँ कुछ भी मत करो जो आप आमतौर पर प्रतिपादन करते समय नहीं करेंगे। उदाहरण के लिए, साइड इफेक्ट्स उपयोग में आते हैं, उपयोग नहीं।

Comments

usememo प्रदर्शन अनुकूलन के लिए है। यदि कोई प्रोपर परिवर्तन, जो लेखक के उद्देश्य को पराजित करता है, तो पहले से माउंट होने के बाद एक हुक फिर से प्रदान किया जाएगा।

— अधिकतम ५४

Answer 10

बेन कार्प का जवाब मुझे केवल एक मान्य लगता है।

लेकिन जब से हम कार्यात्मक तरीकों का उपयोग कर रहे हैं, बस एक और दृष्टिकोण को बंद करने और HoC से लाभ हो सकता है:

const InjectWillmount = function(Node, willMountCallback) {
  let isCalled = true;
  return function() {
    if (isCalled) {
      willMountCallback();
      isCalled = false;
    }
    return Node;
  };
};

फिर इसका उपयोग करें:

const YourNewComponent = InjectWillmount(<YourComponent />, () => {
  console.log("your pre-mount logic here");
});

Answer 11

आपके मूल प्रश्न का संक्षिप्त उत्तर , componentWillMountप्रतिक्रिया हुक के साथ कैसे उपयोग किया जा सकता है:

componentWillMountहै पदावनत और विरासत माना । प्रतिक्रिया की सिफारिश :

आमतौर पर, हम राज्य को इनिशियलाइज़ करने के बजाय कंस्ट्रक्टर () का उपयोग करने की सलाह देते हैं।

अब हुक अकसर किये गए सवाल में आपको पता चलता है कि फंक्शन कंपोनेंट्स के लिए क्लास कंस्ट्रक्टर के बराबर क्या है:

निर्माता: फ़ंक्शन घटकों को एक निर्माता की आवश्यकता नहीं है। आप स्टेट का उपयोग कर सकते हैं प्रारंभ में कॉल करें। यदि प्रारंभिक स्थिति की गणना करना महंगा है, तो आप उपयोग करने के लिए एक फ़ंक्शन पास कर सकते हैं।

तो componentWillMountइस तरह दिखता है एक उपयोग उदाहरण :

const MyComp = () => {
  const [state, setState] = useState(42) // set initial value directly in useState 
  const [state2, setState2] = useState(createInitVal) // call complex computation

  return <div>{state},{state2}</div>
};

const createInitVal = () => { /* ... complex computation or other logic */ return 42; };

Answer 12

बस उपयोग में एक खाली निर्भरता सरणी जोड़ें बस यह काम करेगा componentDidMount।

useEffect(() => {
  // Your code here
  console.log("componentDidMount")
}, []);

Answer 13

का उपयोग करके componentDidMountऔर अनुकरण करने के लिए एक सरल चाल है :componentWillUnmountuseEffect

useEffect(() => {
  console.log("componentDidMount");

  return () => {
    console.log("componentWillUnmount");
  };
}, []);