रिॲक्ट परफॉर्मन्स ऑप्टिमायझेशन: useMemo, useCallback, आणि React.memo मध्ये प्राविण्य

रिॲक्ट, युझर इंटरफेस तयार करण्यासाठी एक लोकप्रिय जावास्क्रिप्ट लायब्ररी, तिच्या कंपोनेंट-आधारित आर्किटेक्चर आणि डिक्लेरेटिव्ह स्टाईलसाठी ओळखली जाते. तथापि, जसजसे ॲप्लिकेशन्सची जटिलता वाढते, तसतसे परफॉर्मन्स एक चिंतेचा विषय बनू शकतो. कंपोनेंट्सचे अनावश्यक री-रेंडर्स सुस्त परफॉर्मन्स आणि खराब युझर एक्सपिरीयन्सला कारणीभूत ठरू शकतात. सुदैवाने, रिॲक्ट परफॉर्मन्स ऑप्टिमाइझ करण्यासाठी अनेक टूल्स प्रदान करते, ज्यात useMemo, useCallback, आणि React.memo यांचा समावेश आहे. हे मार्गदर्शक या तंत्रांचा सखोल अभ्यास करते, तुम्हाला उच्च-कार्यक्षमता असलेले रिॲक्ट ॲप्लिकेशन्स तयार करण्यात मदत करण्यासाठी व्यावहारिक उदाहरणे आणि कृतीशील माहिती प्रदान करते.

रिॲक्ट री-रेंडर्स समजून घेणे

ऑप्टिमायझेशन तंत्रांमध्ये जाण्यापूर्वी, रिॲक्टमध्ये री-रेंडर्स का होतात हे समजून घेणे महत्त्वाचे आहे. जेव्हा एखाद्या कंपोनेंटचे स्टेट किंवा प्रॉप्स बदलतात, तेव्हा रिॲक्ट त्या कंपोनेंटचे आणि संभाव्यतः त्याच्या चाइल्ड कंपोनेंट्सचे री-रेंडर सुरू करते. रिॲक्ट वास्तविक DOM ला प्रभावीपणे अपडेट करण्यासाठी व्हर्च्युअल DOM वापरते, परंतु जास्त री-रेंडर्स तरीही परफॉर्मन्सवर परिणाम करू शकतात, विशेषतः जटिल ॲप्लिकेशन्समध्ये. एका जागतिक ई-कॉमर्स प्लॅटफॉर्मची कल्पना करा जिथे उत्पादनांच्या किमती वारंवार अपडेट होतात. ऑप्टिमायझेशनशिवाय, किमतीतील एक छोटासा बदल संपूर्ण उत्पादन सूचीमध्ये री-रेंडर्स सुरू करू शकतो, ज्यामुळे वापरकर्त्याच्या ब्राउझिंगवर परिणाम होतो.

कंपोनेंट्स री-रेंडर का होतात

• स्टेटमधील बदल: जेव्हा एखाद्या कंपोनेंटचे स्टेट useState किंवा useReducer वापरून अपडेट केले जाते, तेव्हा रिॲक्ट कंपोनेंटला री-रेंडर करते.
• प्रॉप्समधील बदल: जर एखाद्या कंपोनेंटला त्याच्या पेरेंट कंपोनेंटकडून नवीन प्रॉप्स मिळाल्यास, तो री-रेंडर होईल.
• पेरेंटचे री-रेंडर्स: जेव्हा पेरेंट कंपोनेंट री-रेंडर होतो, तेव्हा त्याचे चाइल्ड कंपोनेंट्स देखील डीफॉल्टनुसार री-रेंडर होतील, त्यांचे प्रॉप्स बदलले आहेत की नाही याची पर्वा न करता.
• कन्टेक्स्टमधील बदल: जे कंपोनेंट्स रिॲक्ट कन्टेक्स्ट वापरतात, ते कन्टेक्स्ट व्हॅल्यू बदलल्यावर री-रेंडर होतील.

परफॉर्मन्स ऑप्टिमायझेशनचे ध्येय अनावश्यक री-रेंडर्स रोखणे आहे, जेणेकरून कंपोनेंट्स फक्त तेव्हाच अपडेट होतील जेव्हा त्यांचा डेटा खरोखरच बदलला असेल. शेअर बाजाराच्या विश्लेषणासाठी रिअल-टाइम डेटा व्हिज्युअलायझेशनच्या परिस्थितीचा विचार करा. प्रत्येक लहान डेटा अपडेटवर चार्ट कंपोनेंट्स अनावश्यकपणे री-रेंडर झाल्यास, ॲप्लिकेशन प्रतिसाद देण्यास अक्षम होईल. री-रेंडर्स ऑप्टिमाइझ केल्याने एक सहज आणि प्रतिसाद देणारा युझर एक्सपिरीयन्स सुनिश्चित होईल.

useMemo ची ओळख: महागड्या कॅल्क्युलेशन्सचे मेमोइझिंग

useMemo हा एक रिॲक्ट हुक आहे जो कॅल्क्युलेशनच्या परिणामाचे मेमोइझेशन करतो. मेमोइझेशन हे एक ऑप्टिमायझेशन तंत्र आहे जे महागड्या फंक्शन कॉल्सचे परिणाम संग्रहित करते आणि तेच इनपुट पुन्हा आल्यावर ते परिणाम पुन्हा वापरते. यामुळे अनावश्यकपणे फंक्शन पुन्हा कार्यान्वित करण्याची गरज टाळता येते.

useMemo केव्हा वापरावे

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

useMemo कसे कार्य करते

useMemo दोन आर्गुमेंट्स घेतो:

1. गणना करणारे फंक्शन.
2. डिपेंडेंसीजची एक ॲरे.

हे फंक्शन फक्त तेव्हाच कार्यान्वित केले जाते जेव्हा ॲरेमधील डिपेंडेंसीजपैकी एक बदलते. अन्यथा, useMemo पूर्वी मेमोइझ केलेली व्हॅल्यू परत करते.

उदाहरण: फिबोनाची सिरीज कॅल्क्युलेट करणे

फिबोनाची सिरीज हे गणनात्मकदृष्ट्या तीव्र गणनेचे एक उत्कृष्ट उदाहरण आहे. चला एक कंपोनेंट तयार करूया जो useMemo वापरून n-वा फिबोनाची नंबर कॅल्क्युलेट करतो.

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

function Fibonacci({ n }) {
  const fibonacciNumber = useMemo(() => {
    console.log('Calculating Fibonacci...'); // कॅल्क्युलेशन केव्हा चालते हे दर्शवते
    function calculateFibonacci(num) {
      if (num <= 1) {
        return num;
      }
      return calculateFibonacci(num - 1) + calculateFibonacci(num - 2);
    }
    return calculateFibonacci(n);
  }, [n]);

  return 
Fibonacci({n}) = {fibonacciNumber}
;
}

function App() {
  const [number, setNumber] = useState(5);

  return (
    

       setNumber(parseInt(e.target.value))}
      />
      
    
  );
}

export default App;

या उदाहरणात, calculateFibonacci फंक्शन फक्त तेव्हाच कार्यान्वित होते जेव्हा n प्रॉप बदलते. useMemo शिवाय, हे फंक्शन Fibonacci कंपोनेंटच्या प्रत्येक री-रेंडरवर कार्यान्वित झाले असते, जरी n सारखेच राहिले तरी. कल्पना करा की हे कॅल्क्युलेशन एका जागतिक आर्थिक डॅशबोर्डवर होत आहे - बाजाराच्या प्रत्येक टिकमुळे संपूर्ण पुनर्गणना होते, ज्यामुळे लक्षणीय विलंब होतो. useMemo ते टाळते.

useCallback ची ओळख: फंक्शन्सचे मेमोइझिंग

useCallback हा आणखी एक रिॲक्ट हुक आहे जो फंक्शन्सचे मेमोइझेशन करतो. हे प्रत्येक रेंडरवर नवीन फंक्शन इन्स्टन्स तयार होण्यापासून प्रतिबंधित करते, जे चाइल्ड कंपोनेंट्सना कॉलबॅक प्रॉप्स म्हणून पास करताना विशेषतः उपयुक्त ठरू शकते.

useCallback केव्हा वापरावे

• कॉलबॅक प्रॉप्स म्हणून पास करणे: जेव्हा एखादे फंक्शन चाइल्ड कंपोनेंटला प्रॉप म्हणून पास केले जाते, जे री-रेंडर ऑप्टिमाइझ करण्यासाठी React.memo किंवा shouldComponentUpdate वापरते.
• इव्हेंट हँडलर्स: चाइल्ड कंपोनेंट्सचे अनावश्यक री-रेंडर्स टाळण्यासाठी कंपोनेंटमध्ये इव्हेंट हँडलर फंक्शन्स परिभाषित करताना.

useCallback कसे कार्य करते

useCallback दोन आर्गुमेंट्स घेतो:

1. मेमोइझ करायचे फंक्शन.
2. डिपेंडेंसीजची एक ॲरे.

हे फंक्शन फक्त तेव्हाच पुन्हा तयार केले जाते जेव्हा ॲरेमधील डिपेंडेंसीजपैकी एक बदलते. अन्यथा, useCallback तेच फंक्शन इन्स्टन्स परत करते.

उदाहरण: बटण क्लिक हाताळणे

चला एक कंपोनेंट तयार करूया ज्यात एक बटण आहे जे कॉलबॅक फंक्शनला ट्रिगर करते. आपण कॉलबॅक फंक्शन मेमोइझ करण्यासाठी useCallback वापरू.

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

function Button({ onClick, children }) {
  console.log('Button re-rendered'); // बटण केव्हा री-रेंडर होते हे दर्शवते
  return {children};
}

const MemoizedButton = React.memo(Button);

function App() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log('Button clicked');
    setCount((prevCount) => prevCount + 1);
  }, []); // रिकामी डिपेंडेंसी ॲरे म्हणजे फंक्शन फक्त एकदाच तयार होते

  return (
    

      
Count: {count}
      Increment
    
  );
}

export default App;

या उदाहरणात, handleClick फंक्शन फक्त एकदाच तयार केले जाते कारण डिपेंडेंसी ॲरे रिकामी आहे. जेव्हा App कंपोनेंट count स्टेट बदलल्यामुळे री-रेंडर होतो, तेव्हा handleClick फंक्शन तेच राहते. MemoizedButton कंपोनेंट, जो React.memo ने रॅप केलेला आहे, तो फक्त तेव्हाच री-रेंडर होईल जेव्हा त्याचे प्रॉप्स बदलतील. कारण onClick प्रॉप (handleClick) तेच राहते, Button कंपोनेंट अनावश्यकपणे री-रेंडर होत नाही. एका इंटरॲक्टिव्ह नकाशा ॲप्लिकेशनची कल्पना करा. प्रत्येक वेळी युझर संवाद साधतो, तेव्हा डझनभर बटण कंपोनेंट्सवर परिणाम होऊ शकतो. useCallback शिवाय, हे बटन्स अनावश्यकपणे री-रेंडर होतील, ज्यामुळे एक सुस्त अनुभव निर्माण होईल. useCallback वापरल्याने एक अधिक सहज संवाद सुनिश्चित होतो.

React.memo ची ओळख: कंपोनेंट्सचे मेमोइझिंग

React.memo हा एक हायर-ऑर्डर कंपोनेंट (HOC) आहे जो फंक्शनल कंपोनेंटला मेमोइझ करतो. जर कंपोनेंटचे प्रॉप्स बदलले नसतील तर तो कंपोनेंटला री-रेंडर होण्यापासून प्रतिबंधित करतो. हे क्लास कंपोनेंट्ससाठी PureComponent सारखेच आहे.

React.memo केव्हा वापरावे

• प्युअर कंपोनेंट्स: जेव्हा कंपोनेंटचे आउटपुट केवळ त्याच्या प्रॉप्सवर अवलंबून असते आणि त्याचे स्वतःचे कोणतेही स्टेट नसते.
• महागडे रेंडरिंग: जेव्हा कंपोनेंटची रेंडरिंग प्रक्रिया गणनात्मकदृष्ट्या महाग असते.
• वारंवार होणारे री-रेंडर्स: जेव्हा कंपोनेंटचे प्रॉप्स बदलले नसतानाही तो वारंवार री-रेंडर होतो.

React.memo कसे कार्य करते

React.memo फंक्शनल कंपोनेंटला रॅप करते आणि मागील आणि पुढील प्रॉप्सची शॅलो कम्पेरिझन करते. जर प्रॉप्स सारखेच असतील, तर कंपोनेंट री-रेंडर होणार नाही.

उदाहरण: युझर प्रोफाइल प्रदर्शित करणे

चला एक कंपोनेंट तयार करूया जो युझर प्रोफाइल प्रदर्शित करतो. जर युझरचा डेटा बदलला नसेल तर अनावश्यक री-रेंडर्स टाळण्यासाठी आपण React.memo वापरू.

import React from 'react';

function UserProfile({ user }) {
  console.log('UserProfile re-rendered'); // कंपोनेंट केव्हा री-रेंडर होतो हे दर्शवते
  return (
    

      
Name: {user.name}
      
Email: {user.email}
    
  );
}

const MemoizedUserProfile = React.memo(UserProfile, (prevProps, nextProps) => {
  // कस्टम कम्पेरिझन फंक्शन (पर्यायी)
  return prevProps.user.id === nextProps.user.id; // फक्त युझर आयडी बदलल्यास री-रेंडर करा
});

function App() {
  const [user, setUser] = React.useState({
    id: 1,
    name: 'John Doe',
    email: 'john.doe@example.com',
  });

  const updateUser = () => {
    setUser({ ...user, name: 'Jane Doe' }); // नाव बदलत आहे
  };

  return (
    

      
      Update User Name
    
  );
}

export default App;

या उदाहरणात, MemoizedUserProfile कंपोनेंट फक्त तेव्हाच री-रेंडर होईल जेव्हा user.id प्रॉप बदलेल. जरी user ऑब्जेक्टचे इतर गुणधर्म (उदा. नाव किंवा ईमेल) बदलले तरी, आयडी वेगळा असल्याशिवाय कंपोनेंट री-रेंडर होणार नाही. `React.memo` मधील हे कस्टम कम्पेरिझन फंक्शन कंपोनेंट केव्हा री-रेंडर होईल यावर अधिक नियंत्रण ठेवण्याची परवानगी देते. सतत अपडेट होणाऱ्या युझर प्रोफाइल असलेल्या सोशल मीडिया प्लॅटफॉर्मचा विचार करा. `React.memo` शिवाय, युझरचे स्टेटस किंवा प्रोफाइल पिक्चर बदलल्यास प्रोफाइल कंपोनेंटचे पूर्ण री-रेंडर होईल, जरी मुख्य युझर तपशील सारखेच राहिले तरी. `React.memo` लक्ष्यित अपडेट्सना परवानगी देते आणि परफॉर्मन्समध्ये लक्षणीय सुधारणा करते.

useMemo, useCallback, आणि React.memo एकत्र वापरणे

ही तीन तंत्रे एकत्र वापरल्यास सर्वात प्रभावी ठरतात. useMemo महागड्या कॅल्क्युलेशन्सचे मेमोइझेशन करते, useCallback फंक्शन्सचे मेमोइझेशन करते, आणि React.memo कंपोनेंट्सचे मेमोइझेशन करते. ही तंत्रे एकत्र करून, तुम्ही तुमच्या रिॲक्ट ॲप्लिकेशनमधील अनावश्यक री-रेंडर्सची संख्या लक्षणीयरीत्या कमी करू शकता.

उदाहरण: एक कॉम्प्लेक्स कंपोनेंट

चला एक अधिक जटिल कंपोनेंट तयार करूया जो ही तंत्रे एकत्र कशी वापरायची हे दर्शवतो.

import React, { useState, useCallback, useMemo } from 'react';

function ListItem({ item, onUpdate, onDelete }) {
  console.log(`ListItem ${item.id} re-rendered`); // कंपोनेंट केव्हा री-रेंडर होतो हे दर्शवते
  return (
    

      {item.text}
       onUpdate(item.id)}>Update
       onDelete(item.id)}>Delete
    
  );
}

const MemoizedListItem = React.memo(ListItem);

function List({ items, onUpdate, onDelete }) {
  console.log('List re-rendered'); // कंपोनेंट केव्हा री-रेंडर होतो हे दर्शवते
  return (
    

      {items.map((item) => (
        
      ))}
    
  );
}

const MemoizedList = React.memo(List);

function App() {
  const [items, setItems] = useState([
    { id: 1, text: 'Item 1' },
    { id: 2, text: 'Item 2' },
    { id: 3, text: 'Item 3' },
  ]);

  const handleUpdate = useCallback((id) => {
    setItems((prevItems) =>
      prevItems.map((item) =>
        item.id === id ? { ...item, text: `Updated ${item.text}` } : item
      )
    );
  }, []);

  const handleDelete = useCallback((id) => {
    setItems((prevItems) => prevItems.filter((item) => item.id !== id));
  }, []);

  const memoizedItems = useMemo(() => items, [items]);

  return (
    

      
    
  );
}

export default App;

या उदाहरणात:

• useCallback चा वापर handleUpdate आणि handleDelete फंक्शन्स मेमोइझ करण्यासाठी केला जातो, ज्यामुळे ते प्रत्येक रेंडरवर पुन्हा तयार होण्यापासून प्रतिबंधित होतात.
• useMemo चा वापर items ॲरे मेमोइझ करण्यासाठी केला जातो, ज्यामुळे ॲरेचा रेफरन्स बदलला नसल्यास List कंपोनेंटला री-रेंडर होण्यापासून प्रतिबंधित केले जाते.
• React.memo चा वापर ListItem आणि List कंपोनेंट्स मेमोइझ करण्यासाठी केला जातो, ज्यामुळे त्यांचे प्रॉप्स बदलले नसल्यास ते री-रेंडर होण्यापासून प्रतिबंधित होतात.

या तंत्रांचे संयोजन हे सुनिश्चित करते की कंपोनेंट्स फक्त आवश्यकतेनुसारच री-रेंडर होतात, ज्यामुळे परफॉर्मन्समध्ये लक्षणीय सुधारणा होते. एका मोठ्या प्रमाणात प्रोजेक्ट मॅनेजमेंट टूलची कल्पना करा जिथे कामांची यादी सतत अपडेट, डिलीट आणि पुन्हा क्रमवारी लावली जाते. या ऑप्टिमायझेशन्सशिवाय, कामांच्या यादीतील कोणताही छोटा बदल री-रेंडर्सची एक मालिका सुरू करेल, ज्यामुळे ॲप्लिकेशन मंद आणि प्रतिसाद न देणारे बनेल. useMemo, useCallback, आणि React.memo चा धोरणात्मक वापर करून, ॲप्लिकेशन जटिल डेटा आणि वारंवार होणाऱ्या अपडेट्ससह देखील कार्यक्षम राहू शकते.

अतिरिक्त ऑप्टिमायझेशन तंत्र

useMemo, useCallback, आणि React.memo ही शक्तिशाली साधने असली तरी, रिॲक्ट परफॉर्मन्स ऑप्टिमाइझ करण्यासाठी हे एकमेव पर्याय नाहीत. येथे काही अतिरिक्त तंत्रे आहेत ज्यांचा विचार केला पाहिजे:

• कोड स्प्लिटिंग: तुमच्या ॲप्लिकेशनला लहान भागांमध्ये विभाजित करा जे मागणीनुसार लोड केले जाऊ शकतात. यामुळे सुरुवातीचा लोड वेळ कमी होतो आणि एकूण परफॉर्मन्स सुधारतो.
• लेझी लोडिंग: कंपोनेंट्स आणि रिसोर्सेस फक्त तेव्हाच लोड करा जेव्हा त्यांची आवश्यकता असेल. हे विशेषतः इमेजेस आणि इतर मोठ्या मालमत्तेसाठी उपयुक्त ठरू शकते.
• व्हर्च्युअलायझेशन: मोठ्या यादी किंवा टेबलचा फक्त दिसणारा भाग रेंडर करा. मोठ्या डेटासेट हाताळताना हे परफॉर्मन्समध्ये लक्षणीय सुधारणा करू शकते. react-window आणि react-virtualized सारख्या लायब्ररीज यामध्ये मदत करू शकतात.
• डीबाउन्सिंग आणि थ्रॉटलिंग: फंक्शन्स कार्यान्वित होण्याचा दर मर्यादित करा. हे स्क्रोलिंग आणि रिसाइझिंग सारख्या इव्हेंट्स हाताळण्यासाठी उपयुक्त ठरू शकते.
• इम्युटेबिलिटी: अपघाती म्युटेशन्स टाळण्यासाठी आणि बदलांचा शोध सोपा करण्यासाठी अपरिवर्तनीय डेटा स्ट्रक्चर्स वापरा.

ऑप्टिमायझेशनसाठी जागतिक विचार

जागतिक प्रेक्षकांसाठी रिॲक्ट ॲप्लिकेशन्स ऑप्टिमाइझ करताना, नेटवर्क लेटन्सी, डिव्हाइस क्षमता आणि लोकलायझेशन यासारख्या घटकांचा विचार करणे महत्त्वाचे आहे. येथे काही टिप्स आहेत:

• कंटेंट डिलिव्हरी नेटवर्क्स (CDNs): तुमच्या वापरकर्त्यांच्या जवळच्या स्थानांवरून स्टॅटिक मालमत्ता सर्व्ह करण्यासाठी CDN वापरा. यामुळे नेटवर्क लेटन्सी कमी होते आणि लोड वेळ सुधारतो.
• इमेज ऑप्टिमायझेशन: वेगवेगळ्या स्क्रीन आकारांसाठी आणि रिझोल्यूशनसाठी इमेजेस ऑप्टिमाइझ करा. फाइल आकार कमी करण्यासाठी कॉम्प्रेशन तंत्र वापरा.
• लोकलायझेशन: प्रत्येक वापरकर्त्यासाठी फक्त आवश्यक भाषेचे रिसोर्सेस लोड करा. यामुळे सुरुवातीचा लोड वेळ कमी होतो आणि युझरचा अनुभव सुधारतो.
• ॲडॅप्टिव्ह लोडिंग: वापरकर्त्याचे नेटवर्क कनेक्शन आणि डिव्हाइस क्षमता ओळखा आणि त्यानुसार ॲप्लिकेशनचे वर्तन समायोजित करा. उदाहरणार्थ, तुम्ही धीमे नेटवर्क कनेक्शन किंवा जुन्या डिव्हाइस असलेल्या वापरकर्त्यांसाठी ॲनिमेशन्स अक्षम करू शकता किंवा इमेजची गुणवत्ता कमी करू शकता.

निष्कर्ष

एक सहज आणि प्रतिसाद देणारा युझर अनुभव देण्यासाठी रिॲक्ट ॲप्लिकेशनचा परफॉर्मन्स ऑप्टिमाइझ करणे महत्त्वाचे आहे. useMemo, useCallback, आणि React.memo सारख्या तंत्रांमध्ये प्राविण्य मिळवून, आणि जागतिक ऑप्टिमायझेशन धोरणांचा विचार करून, तुम्ही उच्च-कार्यक्षमता असलेले रिॲक्ट ॲप्लिकेशन्स तयार करू शकता जे विविध वापरकर्ता वर्गाच्या गरजा पूर्ण करण्यासाठी स्केलेबल असतील. परफॉर्मन्स बॉटलनेक्स ओळखण्यासाठी तुमच्या ॲप्लिकेशनची प्रोफाइलिंग करा आणि हे ऑप्टिमायझेशन तंत्र धोरणात्मकरित्या लागू करा. अकाली ऑप्टिमाइझ करू नका - अशा क्षेत्रांवर लक्ष केंद्रित करा जिथे तुम्ही सर्वात लक्षणीय परिणाम साधू शकता.

हे मार्गदर्शक रिॲक्ट परफॉर्मन्स ऑप्टिमायझेशन समजून घेण्यासाठी आणि लागू करण्यासाठी एक ठोस पाया प्रदान करते. तुम्ही रिॲक्ट ॲप्लिकेशन्स विकसित करत असताना, परफॉर्मन्सला प्राधान्य देण्याचे लक्षात ठेवा आणि युझरचा अनुभव सुधारण्यासाठी सतत नवीन मार्ग शोधा.