Tạo custom hook trong React

Tạo custom hook trong React

Custom hook là một cách để tái sử dụng logic giữa các component. Thông thường tên hàm của custom hook bắt đầu bằng "use", và nó có thể gọi các hook khác như useState, useEffect, v.v.

Các bước để tạo Custom Hook trong React:

Bước 1: Tạo Custom Hook

Custom Hook thường được tạo để tách riêng một phần logic phức tạp mà có thể được dùng lại trong nhiều component.

Ví dụ: Tạo một Custom Hook để theo dõi trạng thái cửa sổ trình duyệt khi người dùng thay đổi kích thước (useWindowSize).

Ví dụ: Custom Hook useWindowSize

import { useState, useEffect } from 'react';
function useWindowSize() {
// Khởi tạo state để lưu kích thước cửa sổ
const [windowSize, setWindowSize] = useState({
width: window.innerWidth,
height: window.innerHeight,
});
// Cập nhật kích thước khi cửa sổ thay đổi
useEffect(() => {
function handleResize() {
setWindowSize({
width: window.innerWidth,
height: window.innerHeight,
});
}
// Lắng nghe sự kiện resize
window.addEventListener('resize', handleResize);
// Cleanup event listener khi component unmount
return () => window.removeEventListener('resize', handleResize);
}, []); // Chỉ chạy một lần khi component được mount
return windowSize; // Trả về kích thước hiện tại
}
export default useWindowSize;

Bước 2: Sử dụng Custom Hook trong Component

Sau khi tạo Custom Hook useWindowSize, bạn có thể sử dụng nó trong bất kỳ component nào.

import React from 'react';
import useWindowSize from './useWindowSize'; // Import custom hook
function MyComponent() {
const { width, height } = useWindowSize(); // Sử dụng custom hook
return (
<div>
<h1>Kích thước cửa sổ:</h1>
<p>Chiều rộng: {width}px</p>
<p>Chiều cao: {height}px</p>
</div>
);
}
export default MyComponent;

Giải thích:

Custom Hook (useWindowSize):

Theo dõi kích thước của cửa sổ bằng cách sử dụng useState để lưu trạng thái và useEffect để lắng nghe sự kiện resize.

Khi kích thước cửa sổ thay đổi, nó sẽ cập nhật state và component sẽ render lại với kích thước mới.

Sử dụng Custom Hook trong Component:

Component MyComponent sử dụng hook useWindowSize để lấy chiều rộng và chiều cao hiện tại của cửa sổ, và hiển thị chúng.

Lợi ích của Custom Hook:

Tái sử dụng logic: Bạn có thể sử dụng lại logic này trong nhiều component khác nhau mà không cần sao chép mã.

Sạch sẽ và dễ bảo trì: Tách riêng phần logic thành custom hook giúp component dễ đọc và bảo trì hơn.

Bạn có thể tạo nhiều custom hook khác nhau tùy theo nhu cầu như quản lý API, trạng thái người dùng, hoặc bất kỳ logic nào bạn muốn tái sử dụng trong ứng dụng React của mình.

Vote1