हम सभी वहाँ रहे है। आप एक रिएक्ट घटक खोलते हैं जिसे आपने कुछ महीने पहले लिखा था, और ऐसा महसूस होता है कि आप किसी ऐसे व्यक्ति द्वारा लिखे गए कोड को देख रहे हैं जो जल्दी में था - क्योंकि आप शायद थे। समय सीमा नजदीक आ रही थी, और सुविधाओं को भेजने की आवश्यकता थी। आज तेजी से आगे बढ़ें, और उस गंदे घटक को दोबारा तैयार करने का समय आ गया है।

तो, मैंने इससे कैसे निपटा।

प्रारंभिक भयावहता

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

पहला कदम वास्तविकता को स्वीकार करना था: यह कोड अब बनाए रखने योग्य नहीं था। यदि मैं, वह व्यक्ति जिसने इसे लिखा है, बमुश्किल यह देख पाता कि क्या हो रहा है, तो किसी और को मौका नहीं मिलेगा। इसलिए, मैंने इसे तोड़ने का फैसला किया।

इसे तोड़ना

मैंने घटक की विभिन्न जिम्मेदारियों की पहचान करके शुरुआत की। तीन स्पष्ट क्षेत्र थे:

1. राज्य प्रबंधन: घटक की स्थिति को संभालना यूआई तर्क के साथ जुड़ा हुआ था।

2. एपीआई कॉल: डेटा प्राप्त करना और लोडिंग स्थितियों को संभालना।

3. रेंडरिंग यूआई: डेटा को कुछ हद तक जटिल यूआई संरचना में प्रदर्शित करना।
   इनमें से प्रत्येक ज़िम्मेदारी को अलग करने की आवश्यकता है।

राज्य और एपीआई तर्क के लिए हुक निकालना

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

यहां कुछ कोड का उल्लेख कर रहा हूं (मूल कोड नहीं):

function useDataFetching(apiEndpoint) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        let response = await fetch(apiEndpoint);
        let result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, [apiEndpoint]);

  return { data, loading, error };
}

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

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

function renderLoading() {
  return 
Loading...
;
}

function renderError(error) {
  return 
Error: {error.message}
;
}

function renderData(data) {
  return 
{/* Complex UI logic here */}
;
}
//After that, component is ni much pretty shape

function MyComponent() {
  const { data, loading, error } = useDataFetching('/api/data-endpoint');

  if (loading) return renderLoading();
  if (error) return renderError(error);
  if (data) return renderData(data);

  return null;
}

अंतिम वार्ता

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

इस अनुभव ने मेरे लिए कुछ प्रमुख सबक मजबूत किए:

• रिफैक्टरिंग से डरें नहीं: गंदे कोड को वैसे ही छोड़ना आसान है, खासकर जब यह काम करता है। लेकिन इसे साफ करने के लिए समय निकालने से आपका जीवन - और आपके भविष्य का जीवन - बहुत आसान हो जाता है।

• चिंताओं को अलग करना: विभिन्न स्थानों (राज्य, एपीआई, यूआई) में अलग-अलग चिंताओं को रखने से कोड अधिक मॉड्यूलर, पुन: प्रयोज्य और परीक्षण योग्य हो गया।

• इसे सरल रखें: छोटे कार्यों में तर्क को हटाकर रेंडर फ़ंक्शन को सरल बनाना घटक को और अधिक पठनीय बनाता है।

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