प्रतिक्रिया useCallbackहुक

रिएक्ट useCallbackहुक एक मेमोइज्ड कॉलबैक फ़ंक्शन देता है।

यह हमें संसाधन गहन कार्यों को अलग करने की अनुमति देता है ताकि वे प्रत्येक रेंडर पर स्वचालित रूप से नहीं चलेंगे।

हुक केवल तभी चलता है जब उसकी कोई useCallbackएक निर्भरता अद्यतन होती है।

इससे प्रदर्शन में सुधार हो सकता है।

मुसीबत

उपयोग करने का एक कारण useCallbackएक घटक को फिर से प्रस्तुत करने से रोकना है जब तक कि उसके प्रॉप्स में बदलाव न हो।

इस उदाहरण में, आप सोच सकते हैं कि Todosघटक तब तक पुन: प्रस्तुत नहीं करेगा जब तक कि todosपरिवर्तन न हो:

import { useState } from "react";
import ReactDOM from "react-dom";
import Todos from "./Todos";

const App = () => {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState([]);

  const increment = () => {
    setCount((c) => c + 1);
  };
  const addTodo = () => {
    setTodos((t) => [...t, "New Todo"]);
  };

  return (
    <>
      <Todos todos={todos} addTodo={addTodo} />
      <hr />
      <div>
        Count: {count}
        <button onClick={increment}>+</button>
      </div>
    </>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

import { memo } from "react";

const Todos = ({ todos, addTodo }) => {
  console.log("child render");
  return (
    <>
      <h2>My Todos</h2>
      {todos.map((todo, index) => {
        return <p key={index}>{todo}</p>;
      })}
      <button onClick={addTodo}>Add Todo</button>
    </>
  );
};

export default memo(Todos);

इसे चलाने का प्रयास करें और काउंट इंक्रीमेंट बटन पर क्लिक करें।

आप देखेंगे कि Todosघटक परिवर्तन न होने पर भी पुन: प्रस्तुत करता todosहै।

यह काम क्यों नहीं करता? हम उपयोग कर रहे हैं memo, इसलिए Todosघटक को फिर से प्रस्तुत नहीं करना चाहिए क्योंकि गिनती बढ़ने पर न तो todosराज्य और न ही फ़ंक्शन बदल रहे हैं।addTodo

यह "संदर्भात्मक समानता" नामक किसी चीज़ के कारण है।

हर बार जब कोई घटक पुन: प्रस्तुत करता है, तो उसके कार्य पुन: निर्मित हो जाते हैं। इस वजह से, addTodoफ़ंक्शन वास्तव में बदल गया है।

समाधान

इसे ठीक करने के useCallbackलिए, जब तक आवश्यक न हो, फ़ंक्शन को फिर से बनाने से रोकने के लिए हम हुक का उपयोग कर सकते हैं।

घटक को अनावश्यक रूप से पुन: प्रस्तुत useCallbackकरने से रोकने के लिए हुक का उपयोग करें :Todos

import { useState, useCallback } from "react";
import ReactDOM from "react-dom";
import Todos from "./Todos";

const App = () => {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState([]);

  const increment = () => {
    setCount((c) => c + 1);
  };
  const addTodo = useCallback(() => {
    setTodos((t) => [...t, "New Todo"]);
  }, [todos]);

  return (
    <>
      <Todos todos={todos} addTodo={addTodo} />
      <hr />
      <div>
        Count: {count}
        <button onClick={increment}>+</button>
      </div>
    </>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

import { memo } from "react";

const Todos = ({ todos, addTodo }) => {
  console.log("child render");
  return (
    <>
      <h2>My Todos</h2>
      {todos.map((todo, index) => {
        return <p key={index}>{todo}</p>;
      })}
      <button onClick={addTodo}>Add Todo</button>
    </>
  );
};

export default memo(Todos);

अब Todosघटक केवल तभी फिर से प्रस्तुत होगा जब todosप्रोप बदल जाएगा।