React maxsus hooklar (custom hooks)

Siz o‘zingiz hook yasashingiz mumkin!

Agar sizda bir nechta componentlar tomonidan ishlatilishi mumkin bo‘lgan componentlar mavjud bo‘lsa, biz ushbu componentni maxsus Hookga chiqarishimiz mumkin.

Maxsus hooklar "foydalanish" bilan boshlanadi. Misol: useFetch.

Hook yaratish

Birinchidan, maxsus hooksiz misol keltiraylik.

Quyidagi kodda biz URL manzilidan ma’lumotlarni olamiz va uni ko‘rsatamiz.

Biz JSONPlaceholder xizmatidan soxta ma’lumotlarni olish uchun foydalanamiz.

Ma’lumotlarni olish haqida ko‘proq bilish uchun JavaScript Fetch API bo‘limiga qarang.

import { useState, useEffect } from 'react';
import { createRoot } from 'react-dom/client';

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>;
        })}
    </>
  );
};

createRoot(document.getElementById('root')).render(
  <Home />
);

Qabul qilish mantig‘i boshqa componentlarda ham kerak bo‘lishi mumkin, shuning uchun biz uni maxsus Hookga aylantiramiz.

Qabul qilish mantiqini maxsus Hook sifatida ishlatish uchun yangi faylga o‘tkazing.

Fayl nomi use bilan boshlanishi kerak, va .js bilan tugaydi va component bilan bir xil katalogga joylashtiriladi.

Faylga useFetch.js nom beramiz.

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;

Endi biz ushbu Hookni import qilishimiz va uni boshqa har qanday componentda ishlatishimiz mumkin:

import { createRoot } from 'react-dom/client';
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>;
        })}
    </>
  );
};

createRoot(document.getElementById('root')).render(
  <Home />
);

Misol tushuntirildi

Biz useFetch.js nomli yangi fayl yaratdik, unda useFetch funksiyasi mavjud bo‘lib, unda ma’lumotlarimizni olish uchun zarur bo‘lgan barcha mantiqlar mavjud.

Biz qattiq kodlangan URL manzilini olib tashladik va uni maxsus Hook-ga uzatilishi mumkin bo‘lgan url o‘zgaruvchisi bilan almashtirdik.

Nihoyat, biz Hook-dan ma’lumotlarimizni qaytaramiz.

main.jsx-da biz useFetch Hook-ni import qilamiz va undan boshqa har qanday Hook kabi foydalanamiz. Bu yerdan ma’lumotlarni olish uchun URL manziliga o‘tamiz.

Endi biz ushbu maxsus Hook-dan istalgan componentda istalgan URL-dan ma’lumotlarni olish uchun qayta foydalanishimiz mumkin.