प्रतिक्रिया कस्टम हुक

हुक पुन: प्रयोज्य कार्य हैं।

जब आपके पास घटक तर्क होता है जिसे कई घटकों द्वारा उपयोग करने की आवश्यकता होती है, तो हम उस तर्क को एक कस्टम हुक में निकाल सकते हैं।

कस्टम हुक "उपयोग" से शुरू होते हैं। उदाहरण useFetch:।

एक हुक बनाएँ

निम्नलिखित कोड में, हम अपने Homeघटक में डेटा ला रहे हैं और इसे प्रदर्शित कर रहे हैं।

हम नकली डेटा लाने के लिए JSONPlaceholder सेवा का उपयोग करेंगे। जब कोई मौजूदा डेटा नहीं होता है तो यह सेवा अनुप्रयोगों के परीक्षण के लिए बहुत अच्छी होती है।

अधिक जानने के लिए, JavaScript Fetch API अनुभाग देखें।

नकली "टूडू" आइटम लाने और पृष्ठ पर शीर्षक प्रदर्शित करने के लिए JSONPlaceholder सेवा का उपयोग करें:

import { useState, useEffect } from "react";
import ReactDOM from "react-dom";

const Home = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos")
      .then((res) => res.json())
      .then((data) => setData(data));
 }, []);

  return (
    <>
      {data &&
        data.map((item) => {
          return <p key={item.id}>{item.title}</p>;
        })}
    </>
  );
};

ReactDOM.render(<Home />, document.getElementById("root"));

अन्य घटकों में भी लाने के तर्क की आवश्यकता हो सकती है, इसलिए हम इसे एक कस्टम हुक में निकालेंगे।

कस्टम हुक के रूप में उपयोग करने के लिए फ़ेच लॉजिक को एक नई फ़ाइल में ले जाएँ:

import { useState, useEffect } from "react";

const useFetch = (url) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => setData(data));
  }, [url]);

  return [data];
};

export default useFetch;

import ReactDOM from "react-dom";
import useFetch from "./useFetch";

const Home = () => {
  const [data] = useFetch("https://jsonplaceholder.typicode.com/todos");

  return (
    <>
      {data &&
        data.map((item) => {
          return <p key={item.id}>{item.title}</p>;
        })}
    </>
  );
};

ReactDOM.render(<Home />, document.getElementById("root"));

उदाहरण समझाया गया

हमने एक नई फ़ाइल बनाई है जिसे useFetch.jsएक फ़ंक्शन कहा जाता useFetchहै जिसमें हमारे डेटा को लाने के लिए आवश्यक सभी तर्क शामिल हैं।

हमने हार्ड-कोडेड यूआरएल को हटा दिया और इसे एक urlवेरिएबल से बदल दिया जिसे कस्टम हुक में पास किया जा सकता है।

अंत में, हम अपने डेटा को अपने हुक से वापस कर रहे हैं।

में index.js, हम अपने useFetchहुक का आयात कर रहे हैं और किसी अन्य हुक की तरह इसका उपयोग कर रहे हैं। यह वह जगह है जहां से हम डेटा लाने के लिए यूआरएल में पास होते हैं।

अब हम इस कस्टम हुक को किसी भी URL से डेटा लाने के लिए किसी भी घटक में पुन: उपयोग कर सकते हैं।