React useMemo Hook Example

If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.

ReactJS में useMemo hook एक optimization hook है जो expensive calculations को memoize करने के लिए use होता है।

इसका use तब होता है जब हम अपने components में ऐसे calculations कर रहे होते हैं जो हर render पर perform नहीं होनी चाहिए, क्योंकि ये calculations heavy या time-consuming हो सकती हैं।

useMemo के साथ हम calculated values को cache कर सकते हैं और unnecessary re-calculations को avoid कर सकते हैं, जो performance को optimize करता है।

इस topic में हम देखेंगे कि useMemo hook क्या है, कैसे काम करता है और कैसे इसे React applications में use कर सकते हैं।

●●●

What is useMemo Hook In React?

React में useMemo एक hook है जो calculated value को cache (memoize) करता है और specific dependencies change hone पर ही इस calculation को दोबारा perform करता है।

इसका use उन calculations के लिए किया जाता है जो expensive हो सकती हैं और हर render पर repeat नहीं होनी चाहिए।

useMemo का use mostly तब होता है जब हमारी calculation में कुछ heavy operations हो , जैसे sorting, filtering, या loops. ये hook React को बताता है कि अगर dependencies में change न आये तो old calculated value का ही reference use करे और re-calculation avoid करे।

useMemo Hook Syntax

const memoizedValue = useMemo(() => {
  // Calculation code
  return calculatedValue;
}, [dependencies]);

यहां

• memoizedValue : ये variable memoized value को hold करता है।

• dependencies : ये array उन values को specify करता है जो change hone पर calculation को दोबरा perform करना है।

●●●

useMemo Example In React

एक simple example के through हम useMemo का use समझेंगे जिसमे हम एक complex calculation को memoize करेंगे और unnecessary re-calculations को avoid करेंगे।

File : src/components/ExpensiveCalculation.js

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

// Simulate an expensive calculation function
function expensiveCalculation(num) {
  console.log('Performing expensive calculation...');
  for (let i = 0; i < 1000000000; i++) {} // Heavy computation
  return num * 2;
}

function ExpensiveCalculation() {
  const [number, setNumber] = useState(1);
  const [count, setCount] = useState(0);

  const doubleNumber = useMemo(() => {
    return expensiveCalculation(number);
  }, [number]);

  return (
    <div>
      <h2>Expensive Calculation Example</h2>
      <p>Double of {number}: {doubleNumber}</p>
      <button onClick={() => setNumber(number + 1)}>Increment Number</button>
      <button onClick={() => setCount(count + 1)}>Re-render Count: {count}</button>
    </div>
  );
}

export default ExpensiveCalculation;

Explanation

• expensiveCalculation function में एक heavy computation perform किया गया है जो number को double करता है।

• useMemo का use करके doubleNumber को memoize किया गया है। इसका calculation तभी दोबारा होगा जब number dependency change होगी।

• अगर आप Re-render Count button click करते हैं, तो number dependency change नहीं होती, इसलिए doubleNumber calculation दोबारा नहीं होती और useMemo cached value return करता है।

●●●

useMemo with Array Filtering

जब हमारे पास एक large array हो और हम उसको filter या sort करना चाहें तो useMemo का use करके unnecessary filtering और sorting operations को optimize कर सकते हैं।

File : src/components/FilteredList.js

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

function FilteredList() {
  const [query, setQuery] = useState('');
  const items = ['Apple', 'Banana', 'Grapes', 'Orange', 'Pineapple', 'Watermelon'];

  const filteredItems = useMemo(() => {
    console.log('Filtering items...');
    return items.filter((item) => item.toLowerCase().includes(query.toLowerCase()));
  }, [query]);

  return (
    <div>
      <h2>Filtered List Example</h2>
      <input
        type="text"
        placeholder="Search fruits"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <ul>
        {filteredItems.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default FilteredList;

Explanation

• items एक fruits कि list है।

• filteredItems को useMemo के through filter किया गया है। ये function सिर्फ तभी run होता है जब query में कोई change होता है।

• अगर query में कोई change नहीं होता, तो useMemo पुराना filtered result return करता है, जो performance को optimize करता है और unnecessary filtering को avoid करता है।

●●●

useMemo with Nested Components

जब हमारे पास nested components hon और हमें किसी derived value को calculate करना हो जो costly है, तो useMemo का use nested components में unnecessary re-renders को avoid करने में helpful हो सकता है।

File : src/components/ParentComponent.js

Copy
import React, { useState, useMemo } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  const squaredCount = useMemo(() => {
    console.log('Calculating squared count...');
    return count * count;
  }, [count]);

  return (
    <div>
      <h2>useMemo with Nested Component</h2>
      <input
        type="text"
        placeholder="Type something..."
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <p>Squared Count: {squaredCount}</p>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <ChildComponent squaredCount={squaredCount} />
    </div>
  );
}

export default ParentComponent;

File : src/components/ChildComponent.js

Copy
import React from 'react';

function ChildComponent({ squaredCount }) {
  console.log('ChildComponent re-rendered');
  
  return (
    <div>
      <h3>Squared Count from Parent: {squaredCount}</h3>
    </div>
  );
}

export default React.memo(ChildComponent);

Explanation

• ParentComponent में squaredCount एक expensive calculation है जो count के square को calculate करता है।

• useMemo का use करके, ये calculation तभी दोबारा perform होता है जब count change होता है।

• ChildComponent को React.memo के साथ wrap किया गया है जो child component को unnecessary re-render hone से बचाता है जब तक squaredCount का value same है।

Note : React.memo child components को props change hone पर ही re-render hone देता है, जो performance optimize करने में helpful होता है।

●●●

useCallback vs useMemo

useCallback और useMemo दोनो hooks similar लगते हैं, लेकिन इनका use different situations में होता है -

• useCallback : Functions को memoize करने के लिए use होता है।

• useMemo : Expensive computations या derived values को memoize करने के लिए use होता है।

In simple terms:

• useCallback में function return होता है।

• useMemo में calculated value return होती है।

Limitations of useMemo

useMemo का use सिर्फ तभी करें जब calculation heavy हो। अगर calculations simple हैं तो useMemo unnecessary complexity और memory overhead introduce कर सकता है।

यह small optimizations के लिए नहीं है, और ऐसे cases में React अपने आप optimized re-renders को handle कर लेता है।

●●●

I Hope , अब आपको useMemo hook के बारे में अच्छे से समझ आ गया होगा। ।

Happy coding! 🎉