React मध्ये useEffect आणि useState योग्यरित्या कसे वापरायचे

होम पेज » python ला » React मध्ये useEffect आणि useState योग्यरित्या कसे वापरायचे

रिअॅक्ट हुकमुळे आपण घटक कसे लिहितो ते पूर्णपणे बदलले., आणि मास्टरींग useState आणि useEffect मुळात आधुनिक React कोड लिहिण्यासाठी हा प्रवेशद्वार आहे. जर तुम्ही ते आधीच वापरत असाल पण तरीही अनंत लूप, जुनी स्थिती किंवा गोंधळात टाकणारे अवलंबित्व अ‍ॅरे यात अडकला असाल, तर हे मार्गदर्शक तुम्हाला सर्व गहाळ भागांना व्यावहारिक मार्गाने जोडण्यास मदत करेल.

या लेखात आपण योग्यरित्या कसे वापरायचे याबद्दल सखोल माहिती घेऊ useState आणि useEffect एकत्र, सुरुवातीला हुक का सादर केले गेले, अधिकृत नियम आणि सावधानता, अवलंबित्वे प्रत्यक्षात हुड अंतर्गत कशी कार्य करतात, तुमचे घटक खंडित करणारे सामान्य तोटे आणि वास्तविक प्रकल्पांमध्ये दुष्परिणाम, स्वच्छता आणि स्थिती व्यवस्थापनासाठी युद्ध-चाचणी केलेले नमुने.

हुक का आणि विशेषतः useState आणि useEffect का?

फंक्शन घटकांना क्लासेसशिवाय स्टेट आणि लाइफसायकल वैशिष्ट्ये वापरता यावीत यासाठी React 16.8 मध्ये हुक जोडले गेले.. त्याआधी, तुम्हाला स्थानिक स्थिती ठेवण्यासाठी, बाह्य डेटा सबस्क्राइब करण्यासाठी किंवा माउंटिंग आणि अनमाउंटिंग सारख्या जीवनचक्र घटनांवर प्रतिक्रिया देण्यासाठी वर्ग घटक लिहावे लागायचे.

वर्गांमधील मोठी समस्या अशी होती की संबंधित तर्कशास्त्र बहुतेकदा अनेक जीवनचक्र पद्धतींमध्ये विभागले जात असे. जसे componentDidMount, componentDidUpdate आणि componentWillUnmount. तुम्हाला एकाच वैशिष्ट्याचे तुकडे वेगवेगळ्या पद्धतींवर आधारित विखुरलेले मिळतील तेव्हा त्याऐवजी ते धावतात काय ते करतात, ज्यामुळे कोड वाचणे, चाचणी करणे आणि पुन्हा वापरणे कठीण होते.

या मॉडेलला हुक उलटे करतात: सह useState तुम्ही स्टेटला थेट फंक्शन घटकाशी जोडता आणि useEffect तुम्ही साइड इफेक्ट्स थेट त्या लॉजिकशी जोडता ज्याला त्यांची आवश्यकता आहे. अशा प्रकारे तुम्ही एकाच चिंतेशी संबंधित सर्व गोष्टी एकाच ठिकाणी गटबद्ध करू शकता आणि नंतर पुन्हा वापरता येण्याजोगे हुक सहजपणे काढू शकता.

सर्व हुकमध्ये, useState आणि useEffect मूळ आदिम आहेत. तुम्ही बहुतेक दैनंदिन वैशिष्ट्ये फक्त या दोन गोष्टींसह तयार करू शकता: फॉर्म आणि टॉगल, नेटवर्क रिक्वेस्ट, सबस्क्रिप्शन, टाइमर, DOM अपडेट्स आणि बरेच काही यासारख्या UI स्थिती. इतर हुक (useRef, useReducer, useContext, useMemo…) उत्तम आहेत, पण ते एकाच कल्पनांवर आधारित आहेत.

रिअॅक्ट हुकचे नियम जे तुम्ही कधीही मोडू नयेत

रिअॅक्ट हुकमध्ये काही कडक नियम असतात जे त्यांना सर्व रेंडरमध्ये विश्वसनीयरित्या काम करण्यास मदत करतात.. जर तुम्ही त्यांचे उल्लंघन केले तर तुम्हाला रनटाइम एरर दिसतील किंवा खूप सूक्ष्म, डीबग करायला कठीण बग दिसतील.

पहिला नियम: फक्त React फंक्शन घटकांमध्ये किंवा कस्टम हुकमध्ये हुक कॉल करा.. तुम्ही वापरू शकत नाही useState or useEffect वर्ग घटकांमध्ये, नियमित उपयुक्तता कार्यांमध्ये किंवा कोणत्याही घटकाबाहेर. यासारखा नमुना अवैध आहे:

import React, { Component, useState } from 'react';

class App extends Component {
  // ❌ This will throw - hooks don’t work in classes
  const  = useState(0);
  render() {
    return <h1>Hello, I am a Class Component!</h1>;
  }
}

जर तुम्हाला हुक वापरायचे असतील तर फंक्शन घटकाकडे जाणे हा योग्य दृष्टिकोन आहे.:

import React, { useState } from 'react';

function App() {
  const  = useState('');

  return (
    <div>
      Your JSX code goes in here...
    </div>
  );
}

export default App;

दुसरा नियम: तुमच्या घटकाच्या वरच्या स्तरावर फक्त हुक कॉल करा.. म्हणजे लूप, कंडिशन किंवा नेस्टेड फंक्शन्समध्ये कोणतेही हुक नाहीत. React प्रत्येक रेंडरवर "जुळवण्यासाठी" त्याच क्रमाने हुक कॉल करण्यावर अवलंबून असते. useState आणि useEffect त्याच्या संग्रहित डेटासह कॉल करा, म्हणून हे अवैध आहे:

function BadComponent({ enabled }) {
  if (enabled) {
    // ❌ Wrong: hook inside a conditional
    const  = useState(0);
  }
  // ...
}

त्याऐवजी, वरच्या बाजूला बिनशर्त हुक घोषित करा आणि इफेक्ट किंवा JSX मध्ये कंडिशनल वापरा.. हुक नेहमीच कॉल केला पाहिजे, परंतु तो चालवत असलेले लॉजिक सशर्त असू शकते:

function ConditionalEffectComponent() {
  const  = useState(false);

  useEffect(() => {
    if (isMounted) {
      console.log('Component mounted');
    }
  }, );

  return (
    <div>
      <button onClick={() => setIsMounted(!isMounted)}>
        {isMounted ? 'Unmount' : 'Mount'}
      </button>
    </div>
  );
}

तिसरा गर्भित नियम असा आहे की हुक हे रिअॅक्ट (किंवा हुक लायब्ररी) मधून आयात केले पाहिजेत, अ‍ॅड-हॉक अंमलात आणलेले नाहीत.. हे स्पष्ट आहे, पण सांगण्यासारखे आहे: जादू React च्या अंतर्गत हुक डिस्पॅचरमध्ये आहे जी रेंडर्समध्ये हुक कॉल ट्रॅक करते.

useState वापरून स्थानिक स्थितीचे योग्य व्यवस्थापन करणे

useState तुम्हाला फंक्शन घटकाला स्टेट जोडण्याची आणि करंट व्हॅल्यू आणि अपडेटर फंक्शन दोन्ही मिळवण्याची परवानगी देते.. संकल्पनात्मकदृष्ट्या ते चे कार्यात्मक प्रतिरूप आहे this.state आणि this.setState वर्ग घटकांमध्ये.

एक किमान काउंटर उदाहरण useState असे दिसते:

import React, { useState } from 'react';

function Counter() {
  const  = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

जेव्हा तुम्ही फोन करता useState(initialValue), React ती स्थिती साठवते आणि जोडी परत करते.: वर्तमान स्थिती मूल्य आणि सेटर. सामान्य स्थानिक चलांपेक्षा वेगळे, स्थिती रेंडरमध्ये टिकून राहते, म्हणून count घटक फंक्शन प्रत्येक वेळी चालू असताना मूल्य 0 वर रीसेट होत नाही.

तुम्ही स्थितीसाठी कोणतेही अनुक्रमांकित मूल्य वापरू शकता: संख्या, स्ट्रिंग, बुलियन, अ‍ॅरे, ऑब्जेक्ट्स आणि अगदी फंक्शन्स.. आपण कॉल देखील करू शकता useState एकाच घटकात अनेक वेळा वापरल्याने सर्व काही एकाच ऑब्जेक्टमध्ये ढकलण्याऐवजी संबंधित मूल्ये वेगळी राहतील.

जेव्हा नवीन स्थिती मूल्य मागील स्थितीवर अवलंबून असते, तेव्हा नेहमी फंक्शनल अपडेट फॉर्म वापरा.. जेव्हा एकापाठोपाठ एक अनेक स्टेट अपडेट्स होतात तेव्हा हे बग टाळते:

setCount(prev => prev + 1);

आणखी एक सूक्ष्म पण महत्त्वाची माहिती म्हणजे सेटर कॉल केल्याने संपूर्ण स्टेट व्हॅल्यूची जागा घेतली जाते, ती ऑब्जेक्ट्स विलीन करत नाही जसे की this.setState वर्गांमध्ये. जर तुमची स्थिती ऑब्जेक्ट किंवा अ‍ॅरे असेल, तर तुम्हाला मागील मूल्य स्वतः पसरवावे लागेल:

const  = useState({ name: 'Alex', age: 30 });

// ✅ Correct: copy and update
setUser(prev => ({ ...prev, age: prev.age + 1 }));

महागड्या प्रारंभिक मूल्यांसाठी तुम्ही फंक्शन पास करून स्थिती आळशी-इनिशियलाइज करू शकता useState. React फक्त पहिल्या रेंडरवरच कॉल करेल:

const  = useState(() => calculateInitialValue());

वापराच्या परिणामांसह दुष्परिणाम हाताळणे

useEffect फंक्शन घटकांमध्ये साइड इफेक्ट्स चालवण्यासाठी React चे API आहे. "साइड इफेक्ट" म्हणजे बाह्य जगाला स्पर्श करणारी कोणतीही गोष्ट: डेटा आणणे, लॉगिंग करणे, थेट DOM बदलणे, सदस्यता, टाइमर, ब्राउझर API इ.

संकल्पनांनी, useEffect च्या संयोजनाची जागा घेते componentDidMount, componentDidUpdate आणि componentWillUnmount वर्ग घटकांमधून. एका परिणामाचे तीन जीवनचक्र पद्धतींमध्ये विभाजन करण्याऐवजी, तुम्ही तो एकदाच घोषित करता आणि तो चालू झाल्यावर आणि साफ झाल्यावर React ला हाताळू देता.

मूलभूत स्वाक्षरी आहे useEffect(setup, dependencies?). अगोदर निर्देश केलेल्या बाबीसंबंधी बोलताना setup फंक्शन ही तुमची इफेक्ट बॉडी आहे; ते पर्यायीरित्या क्लीनअप फंक्शन परत करू शकते. द dependencies जेव्हा परिणाम पुन्हा चालवायचा असतो तेव्हा अ‍ॅरे React ला सांगते.

useEffect(() => {
  // side effect logic here

  return () => {
    // optional cleanup logic here
  };
}, );

डीफॉल्टनुसार, दुसऱ्या युक्तिवादाशिवाय, प्रत्येक रेंडर नंतर प्रभाव चालेल. (पहिले माउंट आणि त्यानंतरचे प्रत्येक अपडेट). नेटवर्क विनंत्यांसाठी किंवा महागड्या लॉजिकसाठी ते अनेकदा खूप जास्त असते.

जेव्हा जेव्हा स्थिती बदलते तेव्हा बाह्य काहीतरी अद्यतनित करणे ही एक सामान्य पद्धत आहे.. उदाहरणार्थ, क्लिक संख्येनुसार पृष्ठ शीर्षक अद्यतनित करणे:

import React, { useState, useEffect } from 'react';

function Counter() {
  const  = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, ); // effect re-runs only when `count` changes

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

कामगिरी आणि शुद्धतेसाठी अवलंबित्व अ‍ॅरे महत्त्वपूर्ण आहे.. React ने इफेक्ट कधी पुन्हा चालवावा हे ते नियंत्रित करते: जर त्यानुसार कोणतेही अवलंबित्व बदलले असेल तर Object.is तुलना केल्यास, परिणाम साफ होतो आणि पुन्हा चालू होतो; जर काहीही बदलले नाही, तर ते वगळले जाते.

एखाद्या व्यावसायिकाप्रमाणे अवलंबित्व अ‍ॅरे समजून घेणे

अवलंबित्व अ‍ॅरे ही सर्वात सूक्ष्म जागा आहे useEffect किडे येतात. React अ‍ॅरेच्या प्रत्येक घटकाची त्याच्या मागील मूल्याशी तुलना करते. Object.isजर सर्व मूल्ये समान असतील, तर परिणाम वगळला जातो; जर किमान एक वेगळा असेल, तर परिणाम पुन्हा कार्यान्वित केला जातो.

तुम्ही नेहमीच वापरत असलेले तीन मुख्य अवलंबित्व कॉन्फिगरेशन आहेत.:

• दुसरा युक्तिवाद नाही.: प्रत्येक रेंडरनंतर प्रभाव चालतो.
• रिकामा अ‍ॅरे []: प्रभाव फक्त एकदाच माउंटवर चालतो आणि अनमाउंटवर साफ होतो.
• मूल्यांसह अ‍ॅरे : प्रभाव माउंट नंतर आणि जेव्हाही कोणतेही अवलंबित्व बदलते तेव्हा चालतो.

जेव्हा अवलंबित्वे ही आदिम मूल्ये असतात (संख्या, स्ट्रिंग्ज, बुलियन), तेव्हा हे सोपे असते. जेव्हा तुम्ही ऑब्जेक्ट्स, अ‍ॅरे किंवा फंक्शन्स डिपेंडेंशन्समध्ये ठेवता तेव्हा समस्या सुरू होतात, कारण समानता संदर्भ-आधारित असते. वेगवेगळ्या संदर्भांसह दोन समान ऑब्जेक्ट्स "भिन्न" मानले जातात, ज्यामुळे प्रत्येक रेंडरवर पुन्हा चालते.

यावर अवलंबून असलेल्या परिणामाचा विचार करा team प्रॉप्समधील ऑब्जेक्ट:

function Team({ team }) {
  useEffect(() => {
    console.log(team.id, team.active);
  }, ); // ⚠️ might re-run every render if `team` reference changes
}

जरी प्रत्यक्ष टीम कंटेंट बदलला नाही तरी, प्रत्येक रेंडरवर एक नवीन ऑब्जेक्ट रेफरन्स इफेक्ट पुन्हा चालवण्यास भाग पाडेल.. हे टाळण्यासाठी, तुम्ही प्रत्यक्षात वापरत असलेल्या आदिम क्षेत्रांवर अवलंबून राहा किंवा परिणामाच्या आतच वस्तूची पुनर्बांधणी करा.

एक सुरक्षित आवृत्ती फक्त परिणामाला खरोखर काय आवश्यक आहे ते ट्रॅक करते.:

function Team({ team }) {
  const { id, active } = team;

  useEffect(() => {
    console.log(id, active);
  }, );
}

जर तुम्हाला खरोखरच संपूर्ण ऑब्जेक्ट इफेक्टमध्ये हवा असेल, तर तुम्ही ते डिपेंडन्सी म्हणून वापरण्याऐवजी तिथे पुन्हा तयार करू शकता.. अशाप्रकारे अवलंबित्व यादी अजूनही आदिमांवर आधारित असू शकते:

function Team({ team }) {
  const { id, active, name } = team;

  useEffect(() => {
    const localTeam = { id, active, name };
    // use `localTeam` here
  }, );
}

शेवटचा उपाय म्हणून तुम्ही मेमोइझेशन वापरू शकता useMemo or useCallback महागड्या वस्तू किंवा कार्यांसाठी, परंतु लक्षात ठेवा की मेमोइझेशनची स्वतःची किंमत असते. "फक्त काही बाबतीत" ते सर्वत्र शिंपडू नका; जेव्हा एखाद्या विशिष्ट अवलंबित्वामुळे खरोखरच कामगिरीच्या समस्या उद्भवत असतील तेव्हा ते जोडा.

परिणाम योग्यरित्या साफ करणे

काही दुष्परिणाम असे संसाधने वाटप करतात जे सोडले पाहिजेत: सबस्क्रिप्शन, सॉकेट्स, इंटरव्हल, टाइमआउट्स, इव्हेंट लिसनर्स, इ. त्यांना साफ करायला विसरल्याने मेमरी लीक किंवा डुप्लिकेट काम सहजपणे होऊ शकते.

In useEffect, क्लीनअप इफेक्टमधून फंक्शन परत करून हाताळले जाते.. नवीन अवलंबित्वेसह इफेक्ट पुन्हा चालवण्यापूर्वी React हे फंक्शन कॉल करेल, आणि घटक अनमाउंट झाल्यावर शेवटचे देखील.

import { useEffect } from 'react';

function LogMessage({ message }) {
  useEffect(() => {
    const log = setInterval(() => {
      console.log(message);
    }, 1000);

    return () => {
      clearInterval(log);
    };
  }, );

  return <div>logging to console "{message}"</div>;
}

या उदाहरणात, प्रत्येक वेळी message बदल, React प्रथम जुना मध्यांतर साफ करते, नंतर अपडेट केलेल्या संदेशासह एक नवीन सेट करते.. जेव्हा घटक UI मधून गायब होतो, तेव्हा शेवटचा क्लीनअप मध्यांतर कायमचा साफ करतो.

हे "सेटअप + क्लीनअप" पेअरिंग मानसिक मॉडेलमध्ये केंद्रस्थानी आहे useEffect. प्रत्येक परिणामाला एक स्वयंपूर्ण प्रक्रिया म्हणून विचार करण्याचा प्रयत्न करा जी सेटअप फंक्शनमध्ये सुरू होते आणि क्लीनअप फंक्शनमध्ये पूर्णपणे थांबते. रिअॅक्ट डेव्हलपमेंटमध्ये (विशेषतः स्ट्रिक्ट मोड अंतर्गत) अनेक सेटअप/क्लीनअप सायकल चालवू शकते जेणेकरून तुमचा क्लीनअप खरोखर सर्वकाही पूर्ववत करतो याची चाचणी घेतली जाऊ शकेल.

चॅट एपीआय किंवा ब्राउझर इव्हेंट सारख्या बाह्य स्रोताची सदस्यता घेणे हे एक उत्कृष्ट उदाहरण आहे (पहा React मध्ये onKeyDown हाताळणे):

useEffect(() => {
  function handleClick(event) {
    console.log('Clicked', event.clientX, event.clientY);
  }

  document.addEventListener('click', handleClick);

  return () => {
    document.removeEventListener('click', handleClick);
  };
}, []); // runs once on mount, cleans up on unmount

डेटा मिळवण्यासाठी useState आणि useEffect एकत्र वापरणे

वास्तविक जगातील सर्वात सामान्य कॉम्बोंपैकी एक म्हणजे वापरणे useState आणि useEffect API मधून डेटा आणण्यासाठी. तुम्ही डेटा (आणि कदाचित लोडिंग/एरर फ्लॅग्ज) स्थितीत ठेवता आणि विनंती अशा प्रभावाने करता जी घटक माउंट झाल्यावर किंवा काही पॅरामीटर बदलल्यावर चालते.

एकदा माउंट केल्यानंतर डेटा आणण्यासाठीचा मूलभूत नमुना असा दिसतो.:

import { useEffect, useState } from 'react';

function FetchItems() {
  const  = useState([]);

  useEffect(() => {
    let ignore = false;

    async function fetchItems() {
      try {
        const response = await fetch('/items');
        const fetchedItems = await response.json();
        if (!ignore) {
          setItems(fetchedItems);
        }
      } catch (error) {
        console.error('Error fetching items:', error);
      }
    }

    fetchItems();

    return () => {
      // avoid updating state if the component unmounted
      ignore = true;
    };
  }, []);

  return (
    <div>
      {items.map(item => (
        <div key={item.id ?? item}>{item.name ?? item}</div>
      ))}
    </div>
  );
}

येथे, रिक्त अवलंबित्व अ‍ॅरे खात्री करते की विनंती एकदाच चालते.अंतर्गत ignore जर विनंती उशिरा सोडवली गेली तर अनमाउंट केलेल्या घटकावर स्थिती सेट करणे टाळण्याचा फ्लॅग हा एक सोपा मार्ग आहे.

डेटा येत असताना लोडिंग फ्लॅग जोडणे आणि स्पिनर किंवा प्लेसहोल्डर दाखवणे देखील खूप सामान्य आहे.:

const Statistics = () => {
  const  = useState([]);
  const  = useState(true);

  useEffect(() => {
    const getStats = async () => {
      try {
        const statsData = await getData();
        setStats(statsData);
      } finally {
        setLoading(false);
      }
    };

    getStats();
  }, []);

  if (loading) {
    return <div>Loading statistics...</div>;
  }

  return (
    <ul>
      {stats.map(stat => (
        <li key={stat.id}>{stat.label}: {stat.value}</li>
      ))}
    </ul>
  );
};

जर तुमची क्वेरी एखाद्या पॅरामीटरवर अवलंबून असेल (जसे की श्रेणी, फिल्टर किंवा रूट पॅरामीटर), तर ते पॅरामीटर डिपेंडन्सी अ‍ॅरेमध्ये जोडा. म्हणून जेव्हा तो बदलतो तेव्हा परिणाम पुन्हा चालू होतो:

useEffect(() => {
  async function fetchItems() {
    const response = await fetch(`/items?category=${category}`);
    const data = await response.json();
    setItems(data);
  }

  fetchItems();
}, );

"प्रत्येक रेंडरवरील परिणाम" विरुद्ध "जीवनचक्र" मध्ये विचार करणे

जर तुम्हाला वर्ग घटकांची सवय असेल, तर मानसिकदृष्ट्या नकाशा बनवणे मोहक ठरू शकते useEffect पद्धती माउंट/अपडेट/अनमाउंट करण्यासाठी, परंतु त्यामुळे सहसा अधिक गोंधळ होतो. एक सोपा मानसिक मॉडेल असा आहे: "रेंडर्सनंतर परिणाम होतात आणि पुढील रनपूर्वी ते साफ होऊ शकतात".

वर्गांमध्ये, तुम्हाला अनेकदा तर्कशास्त्राची नक्कल करावी लागत असे componentDidMount आणि componentDidUpdate कारण तुम्हाला माउंट आणि अपडेट्स दोन्हीवर समान प्रभाव चालवायचा होता. हुकसह, ते डुप्लिकेशन नाहीसे होते: एकच प्रभाव दोन्ही केसेस कव्हर करतो आणि रन दरम्यान साफसफाईची काळजी React घेते.

हे डिझाइन अपडेट्स योग्यरित्या न हाताळण्याशी संबंधित बग्सचा एक संपूर्ण वर्ग देखील काढून टाकते.. उदाहरणार्थ, एखाद्या मित्राच्या ऑनलाइन स्थितीचे सदस्यत्व घेणाऱ्या वर्ग घटकामध्ये, जेव्हा props.friend बदल, ज्यामुळे जुने सबस्क्रिप्शन किंवा अनमाउंट करताना क्रॅश होतात. सह useEffect ते यादी करते friend.id अवलंबित्व म्हणून, React जुन्या मित्रासाठी क्लीनअप आणि नवीनसाठी सेटअप स्वयंचलितपणे चालवेल.

लक्षात ठेवा की डेव्हलपमेंट स्ट्रिक्ट मोडमध्ये, रिअॅक्ट मुद्दाम तुमचा सेटअप + क्लीनअप सायकल माउंटवर दोनदा चालवते.. हे उत्पादनात घडत नाही, परंतु तुमची साफसफाई खरोखरच सर्वकाही पूर्ववत करते आणि तुमचा परिणाम अनेक वेळा सुरक्षितपणे चालवता येतो याची पुष्टी करण्यासाठी ही एक उपयुक्त ताण चाचणी आहे.

वापराचे ऑप्टिमायझेशन आणि समस्यानिवारण परिणाम वर्तन

जेव्हा एखादा परिणाम तुमच्या अपेक्षेपेक्षा जास्त वेळा चालतो, तेव्हा सर्वप्रथम तपासण्याची गोष्ट म्हणजे अवलंबित्व अ‍ॅरे. एकतर प्रत्येक रेंडरवर अवलंबित्व बदलते (इनलाइन ऑब्जेक्ट्स/फंक्शन्समध्ये सामान्य) किंवा तुम्ही अ‍ॅरे निर्दिष्ट करायला विसरलात.

अवलंबित्व मूल्ये लॉग करणे हा डीबग करण्याचा एक जलद मार्ग आहे:

useEffect(() => {
  console.log('Effect deps:', dep1, dep2);
}, );

जर तुम्हाला दरवेळी वेगवेगळे लॉग दिसले, तर कोणते अवलंबित्व प्रत्यक्षात बदलत आहे ते तपासा.. बऱ्याचदा तुम्हाला प्रत्येक रेंडरमध्ये इनलाइन ऑब्जेक्ट किंवा अ‍ॅरो फंक्शन पुन्हा तयार केले जात असल्याचे आढळेल. इफेक्टमध्ये ऑब्जेक्ट क्रिएशन हलवणे, किंवा घटकाबाहेर फंक्शन्स उचलणे, किंवा त्यांना मेमोइझ करणे useCallback गरज पडल्यास अवलंबित्वे स्थिर करू शकते.

जेव्हा एखादा परिणाम मूल्यावर अवलंबून असतो आणि तोच मूल्य बिनशर्त अपडेट करतो तेव्हा अनंत लूप होतात.. उदाहरणार्थ:

useEffect(() => {
  setCount(count + 1); // ⚠️ will cause a loop if `count` is a dependency
}, );

प्रत्येक वेळी count बदल, परिणाम चालू, अद्यतने count पुन्हा, दुसरे रेंडर ट्रिगर करते, आणि असेच पुढे. तो पॅटर्न मोडण्यासाठी, स्टेट अपडेट खरोखरच एखाद्या इफेक्टमध्ये आहे का, ते वापरकर्त्याच्या परस्परसंवादाने ट्रिगर केले पाहिजे का, किंवा तुम्ही वेगळ्या मूल्यावर अवलंबून राहू शकता का याचा विचार करा.

कधीकधी तुम्हाला एखाद्या इफेक्टमधील काही स्टेट किंवा प्रॉप्सचे नवीनतम मूल्य वाचायचे असते, परंतु ते मूल्य पुन्हा चालवण्यास ट्रिगर करत नाही.. त्या प्रगत परिस्थितींमध्ये, "प्रभाव कार्यक्रम" सारखे नवीन API (मार्गे useEffectEvent React docs मध्ये) किंवा refs मदत करू शकतात, परंतु बहुतेक व्यावहारिक प्रकरणांमध्ये, अवलंबित्वांशी विश्वासू राहणे अधिक सुरक्षित आणि सोपे आहे.

सर्वकाही एकत्र करणे, वापरून useState आणि useEffect काही मुख्य सवयींशी योग्यरित्या जुळते: स्टेट लहान आणि केंद्रित ठेवा, जुन्या स्टेटमधून नवीन स्टेट मिळवताना फंक्शनल अपडेट्सना प्राधान्य द्या, सेटअप/क्लीनअप पेअर्सभोवती स्ट्रक्चर इफेक्ट्स, डिपेंडन्सी अ‍ॅरेसह प्रामाणिक आणि स्पष्ट रहा आणि नेहमी हुकच्या नियमांचा आदर करा जेणेकरून रिअॅक्ट कुठे आहे ते विश्वसनीयरित्या ट्रॅक करू शकेल. जेव्हा तुम्ही त्या तत्त्वांचे पालन करता तेव्हा तुमचे घटक अंदाजे राहतात, तुमचे साइड इफेक्ट्स वागतात आणि तुमचा रिअॅक्ट कोडबेस तुमचा अॅप वाढत असताना विकसित होणे खूप सोपे होते.