React Користувальницькі хуки

Хуки – це функції, які можна багаторазово використовувати.

Якщо у вас є логіка компонента, яка має використовуватися декількома компонентами, ми можемо вилучити цю логіку до спеціального хука.

Користувацькі хуки починаються з "use". Приклад: useFetch.

Створити хук

У наступному коді ми отримуємо дані в нашому компоненті Home і відображаємо їх.

Ми використовуватимемо службу JSONPlaceholder для отримання підроблених даних. Цей сервіс чудово підходить для тестування програм, коли немає наявних даних.

Щоб дізнатися більше, перегляньте розділ JavaScript Fetch API.

Використовуйте службу JSONPlaceholder, щоб отримати підроблені елементи "завдання" та відобразити заголовки на сторінці:

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) може також знадобитися в інших компонентах, тому ми витягнемо її в спеціальний хук.

Перемістіть логіку отримання до нового файлу, щоб використовувати його як спеціальний хук:

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

Пояснення прикладу

Ми створили новий файл під назвою useFetch.js, який містить функцію під назвою useFetch, яка містить усю логіку, необхідну для отримання даних.

Ми видалили жорстко закодовану URL-адресу та замінили її змінною url, яку можна передати в спеціальний хук.

Нарешті, ми повертаємо наші дані з хука.

У index.js ми імпортуємо наш хук useFetch і використовуємо його як будь-який інший хук. Тут ми передаємо URL-адресу для отримання даних.

Тепер ми можемо повторно використовувати цей спеціальний хук у будь-якому компоненті, щоб отримати дані з будь-якої URL-адреси.