React में useEffect का उपयोग कब टालें और अपना कोड ऑप्टिमाइज़ करें

React प्रोजेक्ट्स में, हम अक्सर useEffect का उपयोग आदतन करते हैं, लेकिन यह दृष्टिकोण कभी-कभी आपके कोड को अनावश्यक रूप से जटिल बना सकता है। इस लेख में, हम देखेंगे कि कब आपको useEffect की आवश्यकता नहीं है और कैसे इसके गलत उपयोग से बचकर अपने कोड को ऑप्टिमाइज़ कर सकते हैं।

useEffect की भूमिका को समझना

useEffect हुक साइड इफेक्ट्स को मैनेज करने के लिए उपयोगी है, जैसे सब्सक्रिप्शन या ऐसे ऑपरेशन जो मुख्य रेंडरिंग प्रवाह के बाहर ट्रिगर होने चाहिए। हालांकि, कुछ सामान्य उपयोग के मामलों को useEffect के बिना सरल किया जा सकता है।

1. useEffect के बिना स्टेट इनिशियलाइज़ करना

आप अक्सर कंपोनेंट माउंट होने पर props या इनिशियल वैल्यू के आधार पर स्टेट इनिशियलाइज़ करना चाहते हैं। useEffect का उपयोग करके इस स्टेट को सेट करने के बजाय, आप इसे सीधे useState के साथ कर सकते हैं, जो आपके कोड को अधिक स्पष्ट बनाएगा और अनावश्यक कॉल से बचाएगा।

useEffect के साथ गलत प्रैक्टिस:

typescript
1import { useState, useEffect } from "react";
2
3interface GreetingProps {
4  name: string;
5}
6
7function Greeting({ name }: GreetingProps) {
8  const [greeting, setGreeting] = useState<string>("");
9
10  useEffect(() => {
11    setGreeting(`Hello, ${name}`);
12  }, [name]);
13
14  return <h1>{greeting}</h1>;
15}

useEffect के बिना सही प्रैक्टिस:

यहाँ, हम बस useState में एक फंक्शन का उपयोग करके greeting स्टेट को इनिशियलाइज़ कर सकते हैं:

typescript
1import { useState } from "react";
2
3interface GreetingProps {
4  name: string;
5}
6
7function Greeting({ name }: GreetingProps) {
8  const [greeting] = useState<string>(() => `Hello, ${name}`);
9
10  return <h1>{greeting}</h1>;
11}

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

2. डेराइव्ड वैल्यू की गणना

यदि आपको स्टेट या props के आधार पर कोई वैल्यू कैलकुलेट करनी है, तो useEffect के बजाय एक डेराइव्ड वेरिएबल या memo का उपयोग करने का प्रयास करें।

useEffect के साथ उदाहरण (टालें):

typescript
1import { useState, useEffect } from "react";
2
3interface CartItem {
4  price: number;
5}
6
7interface CartProps {
8  items: CartItem[];
9}
10
11function Cart({ items }: CartProps) {
12  const [total, setTotal] = useState<number>(0);
13
14  useEffect(() => {
15    setTotal(items.reduce((sum, item) => sum + item.price, 0));
16  }, [items]);
17
18  return <p>Total: ${total}</p>;
19}

useEffect के बिना समाधान:

यहाँ, total वैल्यू को सीधे रेंडर के दौरान कैलकुलेट किया जा सकता है, useEffect पर निर्भर हुए बिना:

typescript
1interface CartItem {
2  price: number;
3}
4
5interface CartProps {
6  items: CartItem[];
7}
8
9function Cart({ items }: CartProps) {
10  const total = items.reduce((sum, item) => sum + item.price, 0);
11
12  return <p>Total: ${total}</p>;
13}

यह तरीका न केवल अधिक साफ है, बल्कि अतिरिक्त स्टेट मैनेज करने की आवश्यकता को भी समाप्त करता है।

3. भारी कैलकुलेशन के लिए useMemo का उपयोग

महंगे या कई वेरिएबल्स पर निर्भर कैलकुलेशन के लिए, useMemo का उपयोग करें ताकि हर रेंडर पर लॉजिक को री-एक्जीक्यूट करने से बचा जा सके, बिना स्टेट मैनेज करने के लिए useEffect की आवश्यकता के।

useEffect के साथ उदाहरण:

typescript
1import { useState, useEffect } from "react";
2
3interface ExpensiveCalculationProps {
4  num: number;
5}
6
7function ExpensiveCalculation({ num }: ExpensiveCalculationProps) {
8  const [result, setResult] = useState<number>(0);
9
10  useEffect(() => {
11    const computation = heavyComputation(num);
12    setResult(computation);
13  }, [num]);
14
15  return <p>Result: {result}</p>;
16}
17
18function heavyComputation(num: number): number {
19  // भारी कैलकुलेशन का सिमुलेशन
20  return num * 2; // सरलीकृत उदाहरण
21}

useMemo के साथ ऑप्टिमाइज्ड दृष्टिकोण:

typescript
1import { useMemo } from "react";
2
3interface ExpensiveCalculationProps {
4  num: number;
5}
6
7function ExpensiveCalculation({ num }: ExpensiveCalculationProps) {
8  const result = useMemo(() => heavyComputation(num), [num]);
9
10  return <p>Result: {result}</p>;
11}
12
13function heavyComputation(num: number): number {
14  // भारी कैलकुलेशन का सिमुलेशन
15  return num * 2; // सरलीकृत उदाहरण
16}

यहाँ, useMemo इफेक्ट मैनेज किए बिना रिजल्ट को मेमोराइज़ करने की अनुमति देता है, जो कंपोनेंट को अधिक प्रिडिक्टेबल और परफॉर्मेंट बनाता है।

4. कंट्रोल्ड कंपोनेंट की प्रॉपर्टीज को सिंक्रोनाइज़ करना

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

useEffect के साथ उदाहरण (अनावश्यक):

typescript
1import { useState, useEffect } from "react";
2
3interface TextInputProps {
4  value: string;
5  onChange: (value: string) => void;
6}
7
8function TextInput({ value, onChange }: TextInputProps) {
9  const [text, setText] = useState<string>(value);
10
11  useEffect(() => {
12    setText(value);
13  }, [value]);
14
15  return <input value={text} onChange={(e) => onChange(e.target.value)} />;
16}

useEffect के बिना समाधान:

typescript
1interface TextInputProps {
2  value: string;
3  onChange: (value: string) => void;
4}
5
6function TextInput({ value, onChange }: TextInputProps) {
7  return <input value={value} onChange={(e) => onChange(e.target.value)} />;
8}

props का सीधा उपयोग कोड को सरल बनाता है और अनावश्यक स्टेट अपडेट की संख्या को कम करके प्रदर्शन में सुधार करता है।

5. रेंडर में सीधे DOM को मैनिपुलेट करना

यदि आप स्टेट के आधार पर स्टाइल या क्लास लागू करना चाहते हैं, तो अक्सर useEffect का उपयोग करने की आवश्यकता नहीं होती। React इस प्रकार के सिंक्रोनाइजेशन को रेंडर के दौरान बहुत अच्छी तरह से संभालता है।

useEffect के साथ उदाहरण:

typescript
1import { useState, useEffect } from "react";
2
3interface HighlightedTextProps {
4  isHighlighted: boolean;
5  text: string;
6}
7
8function HighlightedText({ isHighlighted, text }: HighlightedTextProps) {
9  const [className, setClassName] = useState<string>("");
10
11  useEffect(() => {
12    setClassName(isHighlighted ? "highlight" : "");
13  }, [isHighlighted]);
14
15  return <span className={className}>{text}</span>;
16}

useEffect के बिना समाधान:

typescript
1interface HighlightedTextProps {
2  isHighlighted: boolean;
3  text: string;
4}
5
6function HighlightedText({ isHighlighted, text }: HighlightedTextProps) {
7  return <span className={isHighlighted ? "highlight" : ""}>{text}</span>;
8}

निष्कर्ष

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