React useCallback 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 में useCallback hook एक optimization hook है जो functions को memoize करने में help करता है। अगर आपके application में frequent re-renders होते हैं, तो useCallback hook उस function का reference store कर लेता है जो बार-बार render के वजह से re-create हो रहा है।

यह hook आपके React components कि performance improve करने के लिए बहुत useful होता है, specially जब आप child components को props के रूप में functions pass करते हैं।

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

●●●

What is useCallback Hook In React ?

React में useCallback एक hook है जो function को memoize करता है। यह hook एक function और dependencies को input के रूप में लेता है और अगर dependencies change नहीं होती हैं, तो यह hook वही function reference return करता है जो पहले था, बिना उस function को दोबारा create किये।

जब भी कोई component re-render होता है, उसके अंदर defined functions भी हर render पर re-create होते हैं। अगर ये functions child components को props के रूप में pass किये गए हैं, तो unnecessary renders हो सकते हैं।

useCallback का use यही avoid करने के लिए किया जाता है।

Memoization एक technique है जिससे recursive/computationally expensive functions के execution को function calls के result को caching करके speed up किया जाता है , अगर same inputs pass किया गया है ।

useCallback Hook Syntax

const memoizedCallback = useCallback(() => {
  // Function code
}, [dependencies]);

यहां

• memoizedCallback : यह variable memoized function को hold करता है।

• dependencies : यह array उन values को hold करती है जो function के re-creation को trigger करेंगी अगर इनमे कोई change होता है।

●●●

useCallback Example In React

एक simple example देखेंगे जिसमे हम एक counter component बनाएंगे और उसमे useCallback का use करेंगे। इस example में हम counter value को increment करने के लिए एक function को memoize करेंगे।

File : src/components/Counter.js

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

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

  // Increment function with useCallback
  const increment = useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, []);

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

Explanation

• useCallback का use करके हमने increment function को memoize किया है।

• क्योंकि increment function के dependencies array empty है, ये function सिर्फ एक बार create होता है और re-renders पर same reference return करता है।

• अगर dependency change नहीं होती है, तो React useCallback के साथ वही पुराना function return करता है और unnecessary re-renders avoid हो जाते हैं।

●●●

Using useCallback with Child Components

जब हम functional components में functions को props के रूप में pass करते हैं, तो parent component के re-render hone पर child component भी re-render हो सकता है।

useCallback के use से हम इस problem को avoid कर सकते हैं और unnecessary re-renders को optimize कर सकते हैं।

File : src/components/ParentComponent.js

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

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

  // Memoized function
  const increment = useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, []);

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={increment}>Increment</button>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Type something..."
      />
      <ChildComponent onClick={increment} />
    </div>
  );
}

export default ParentComponent;

File : src/components/ChildComponent.js

Copy
import React from 'react';

function ChildComponent({ onClick }) {
  console.log('ChildComponent re-rendered');

  return (
    <div>
      <button onClick={onClick}>Increment from Child</button>
    </div>
  );
}

export default React.memo(ChildComponent);

Explanation

• ParentComponent में increment function को useCallback के through memoize किया गया है।

• ChildComponent को React.memo के साथ wrap किया गया है जो child component को memoize करता है और अगर props same हैं, तो re-render को avoid करता है।

• क्योंकि increment function memoized है और useCallback के through same reference maintain करता है, ChildComponent unnecessary re-renders avoid करता है जब तक increment function के dependencies change नहीं होते।

Note: React.memo एक higher-order component है जो functional component को memoize करने के लिए use होता है। इसका use child component को unnecessary re-render hone से बचाता है जब तक props change न हो।

●●●

Using Dependencies with useCallback

useCallback में dependencies का use इसलिए होता है ताकि अगर कुछ specific values change हो तो function को दोबारा create किया जा सके। अगर dependencies में कोई state या prop हो और वो change हो जाये, तो useCallback function को नया reference return करेगा।

File : src/components/CounterWithStep.js

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

function CounterWithStep() {
  const [count, setCount] = useState(0);
  const [step, setStep] = useState(1);

  // increment function with dependency on `step`
  const increment = useCallback(() => {
    setCount((prevCount) => prevCount + step);
  }, [step]);

  return (
    <div>
      <h2>Count: {count}</h2>
      <input
        type="number"
        value={step}
        onChange={(e) => setStep(Number(e.target.value))}
        placeholder="Step value"
      />
      <button onClick={increment}>Increment by {step}</button>
    </div>
  );
}

export default CounterWithStep;

Explanation

• useCallback में step dependency specify कि गयी है, जो increment function को update करती है जब step change होता है।

• increment function का reference तभी update होता है जब step कि value change होती है।

●●●

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 होती है।

●●●

useCallback Hook Example In API Calls

useCallback का use API calls के साथ भी किया जा सकता है ताकि same function re-renders के बीच memoized हो जाये और unnecessary re-renders और API calls को optimize किया जा सके।

File : src/components/UserList.js

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

function UserList() {
  const [users, setUsers] = useState([]);
  const [count, setCount] = useState(0);

  const fetchUsers = useCallback(async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    const data = await response.json();
    setUsers(data);
  }, []);

  useEffect(() => {
    fetchUsers();
  }, [fetchUsers]);

  return (
    <div>
      <h2>User List</h2>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
      <button onClick={() => setCount(count + 1)}>Re-render Count: {count}</button>
    </div>
  );
}

export default UserList;

Explanation

• fetchUsers function useCallback का use करके memoized है ताकि वो तभी re-create हो जब dependencies change हो।

• useEffect में fetchUsers को dependency के रूप में दिया गया है, जो ensure करता है कि API call सिर्फ एक बार हो जब component mount होता है।

• अगर आप button click करते हैं तो component re-render होता है, लेकिन fetchUsers का reference same रहता है और दोबारा API call नहीं होता।

●●●

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

Happy coding! 🎉