😍React Custom Hooks

https://www.w3schools.com/react/react_customhooks.asp

Hook là những hàm có thể tái sử dụng.

Khi bạn có logic thành phần cần được nhiều thành phần sử dụng, chúng ta có thể trích xuất logic đó thành một Hook tùy chỉnh.

Custom Hooks bắt đầu bằng "use". Ví dụ: useFetch.

Build a Hook

Trong đoạn mã sau, chúng tôi đang lấy dữ liệu trong Homethành phần của mình và hiển thị nó.

Chúng tôi sẽ sử dụng dịch vụ JSONPlaceholder để lấy dữ liệu giả. Dịch vụ này rất tuyệt vời để thử nghiệm các ứng dụng khi không có dữ liệu hiện có.

Ví dụ:

src\App.jsx

import Home from "./Father";
function App() {
  return (
    <>
      <Home />
    </>
  );
}
export default App;

src\Father.jsx

import { useCallback, useEffect, useMemo, useState, Component, useRef, createRef } from "react";
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>;
      })}
    </>
  );
};
export default Home;

Logic tìm nạp cũng có thể cần thiết trong các thành phần khác, vì vậy chúng ta sẽ trích xuất logic đó vào một Hook tùy chỉnh.

Di chuyển logic tìm nạp sang một tệp mới để sử dụng làm Hook tùy chỉnh:

src\Father.jsx

import { useCallback, useEffect, useMemo, useState, Component, useRef, createRef } from "react";
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>;
        })}
    </>
  );
};
export default Home;

Chú ý đổi tên cũng chẳng sao cả ví dụ

src\useFetch.jsx

import { useState, useEffect } from "react";
const Test = (url) => {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => setData(data));
  }, [url]);
  return [data];
};
export default Test;

src\Father.jsx

import { useCallback, useEffect, useMemo, useState, Component, useRef, createRef } from "react";
import Test from "./useFetch";
const Home = () => {
  const [data] = Test("https://jsonplaceholder.typicode.com/todos");
  return (
    <>
      {data &&
        data.map((item) => {
          return <p key={item.id}>{item.title}</p>;
        })}
    </>
  );
};
export default Home;