Custom Hooks

React Custom Hooks

Custom Hooks

Hooks — bu qayta foydalaniladigan funksiyalar.

Agar sizda bir nechta komponentlar tomonidan foydalanilishi kerak bo'lgan komponent logikasi mavjud bo'lsa, biz bu logikani custom Hook ga ajratishimiz mumkin.

Custom Hooks "use" bilan boshlanadi. Masalan: useFetch.

Hook Yaratish

Quyidagi kodda, biz Home komponentida ma'lumotlarni olib, ularni ko'rsatamiz.

Biz JSONPlaceholder xizmatidan soxta ma'lumotlarni olish uchun foydalanamiz. Bu xizmat mavjud ma'lumotlar yo'q bo'lganda ilovalarni sinovdan o'tkazish uchun juda yaxshi.

Ko'proq ma'lumot olish uchun, JavaScript Fetch API bo'limiga qarang.

JSONPlaceholder xizmatidan soxta "todo" elementlarini olish va sahifada sarlavhalarni ko'rsatish:

Misol:

index.js:

import { useState, useEffect } from 'react';
import ReactDOM 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>;
        })}
    </>
  );
};
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Home />);

Fetch logikasi boshqa komponentlarda ham kerak bo'lishi mumkin, shuning uchun biz uni custom Hook ga ajratamiz.

Fetch logikasini yangi faylga ko'chirib, custom Hook sifatida foydalanamiz:

Misol:

useFetch.js:

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;

index.js:

import ReactDOM 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>;
        })}
    </>
  );
};
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Home />);

Misol Tushuntirish

Yangi useFetch.js nomli fayl yaratdik, unda ma'lumotlarni olish uchun zarur bo'lgan barcha logika mavjud bo'lgan useFetch funksiyasini yozdik.

Qattiq kodlangan URL ni olib tashladik va uni custom Hook ga uzatiladigan url o'zgaruvchisi bilan almashtirdik.

Oxirida, Hook-dan ma'lumotlarni qaytaramiz.

index.js da, useFetch Hook-ni import qilamiz va uni boshqa Hook-lar kabi ishlatamiz. Bu yerda biz ma'lumot olish uchun URL ni uzatamiz.

Endi biz bu custom Hook-ni har qanday komponentda ma'lumotlarni har qanday URL dan olish uchun qayta ishlatishimiz mumkin.