Custom hook trong React: cách tự viết, kèm ví dụ

Custom hook là một hàm có tên bắt đầu bằng use và gọi các hook khác. Bạn viết một custom hook khi hai component cần cùng một logic có state: chuyển các lệnh gọi useState và useEffect vào hàm, trả về thứ component cần, rồi gọi nó từ từng component.

import { useState } from 'react';

function useToggle(initial = false) {
    const [on, setOn] = useState(initial);
    const toggle = () => setOn((v) => !v);
    return [on, toggle];
}

function Spoiler({ title, children }) {
    const [open, toggle] = useToggle();
    return (
        <div style={{ marginBottom: 8 }}>
            <button onClick={toggle}>{open ? 'Hide' : 'Show'} {title}</button>
            {open && <p>{children}</p>}
        </div>
    );
}

export default function App() {
    return (
        <div>
            <Spoiler title="ending">The butler did it.</Spoiler>
            <Spoiler title="sequel">The butler did it again.</Spoiler>
        </div>
    );
}

Cả hai spoiler đều gọi useToggle, và mở một cái thì cái kia vẫn đóng. Mỗi lần gọi chạy useState riêng, nên mỗi component có giá trị riêng. Custom hook chia sẻ logic, không chia sẻ state.

Quy tắc khi viết custom hook

• Tên bắt đầu bằng use và một chữ in hoa: useToggle, useOnlineStatus. Quy tắc lint cho hook dựa vào tiền tố này để tìm các lệnh gọi hook và kiểm tra chúng.
• Nó gọi ít nhất một hook. Một hàm hỗ trợ không gọi hook nào chỉ là hàm thông thường; hãy đặt tên là formatDate, không phải useFormatDate, để có thể gọi nó ở bất kỳ đâu, kể cả bên trong điều kiện.
• Nó tuân theo quy tắc của hook: gọi hook ở cấp cao nhất của nó, và chỉ gọi nó từ component hoặc từ custom hook khác.
• Nó trả về bất cứ thứ gì hữu ích. Mảng ([on, toggle]) tiện khi nơi gọi muốn đổi tên các giá trị; object ({ data, loading, error }) dễ đọc hơn khi có từ ba giá trị trở lên.

useLocalStorage: state còn nguyên sau khi tải lại trang

useState quên mọi thứ khi tải lại trang. Hook này đọc giá trị ban đầu từ localStorage và ghi lại mọi thay đổi vào đó.

import { useState, useEffect } from 'react';

function readStored(key, fallback) {
    try {
        const raw = window.localStorage.getItem(key);
        return raw === null ? fallback : JSON.parse(raw);
    } catch {
        console.warn('localStorage is not available, keeping the value in memory');
        return fallback;
    }
}

function useLocalStorage(key, initial) {
    const [value, setValue] = useState(() => readStored(key, initial));

    useEffect(() => {
        try {
            window.localStorage.setItem(key, JSON.stringify(value));
        } catch {
            // Storage blocked or full: the value still works for this visit
        }
    }, [key, value]);

    return [value, setValue];
}

export default function App() {
    const [name, setName] = useLocalStorage('demo-name', '');
    return (
        <div>
            <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Your name" />
            <p>Hello, {name || 'stranger'}.</p>
        </div>
    );
}

Phần xem trước chạy trong một frame sandbox nơi trình duyệt chặn localStorage, nên ở đây bạn sẽ thấy cảnh báo trong Console và hook quay về dùng state thông thường. Trên một trang bình thường, cái tên vẫn còn sau khi tải lại. Khối try/catch không chỉ dành cho phần xem trước này: chế độ duyệt web riêng tư, cookie bị chặn hay hết dung lượng đều khiến storage ném lỗi trong ứng dụng thật. Truyền một hàm vào useState nghĩa là storage chỉ được đọc một lần, ở lần render đầu tiên.

useDebounce: chờ tới khi người dùng ngừng gõ

Một ô tìm kiếm không nên gửi request sau mỗi lần gõ phím. useDebounce trả về một bản sao của giá trị, bản sao này chỉ cập nhật sau khi giá trị ngừng thay đổi trong một khoảng thời gian định sẵn.

import { useState, useEffect } from 'react';

function useDebounce(value, delay) {
    const [debounced, setDebounced] = useState(value);

    useEffect(() => {
        const id = setTimeout(() => setDebounced(value), delay);
        return () => clearTimeout(id);
    }, [value, delay]);

    return debounced;
}

export default function App() {
    const [text, setText] = useState('');
    const query = useDebounce(text, 500);

    useEffect(() => {
        if (query) console.log('search for:', query);
    }, [query]);

    return (
        <div>
            <input value={text} onChange={(e) => setText(e.target.value)} placeholder="Search" />
            <p>Typed: {text}</p>
            <p>Debounced: {query}</p>
        </div>
    );
}

Gõ nhanh một từ: Typed bám theo từng phím, Debounced bắt kịp nửa giây sau khi bạn dừng, và Console ghi một lần tìm kiếm. Mỗi lần gõ phím làm value thay đổi, nên React chạy cleanup (clearTimeout) trước khi bắt đầu một timer mới. Đổi 500 thành 0, mỗi lần gõ phím sẽ ghi một lần tìm kiếm riêng.

useWindowWidth: subscribe kèm cleanup

Một hook lắng nghe trình duyệt phải gỡ listener của nó khi component biến mất, nếu không mỗi lần mount sẽ để lại một listener.

import { useState, useEffect } from 'react';

function useWindowWidth() {
    const [width, setWidth] = useState(window.innerWidth);

    useEffect(() => {
        const onResize = () => setWidth(window.innerWidth);
        window.addEventListener('resize', onResize);
        console.log('resize listener added');
        return () => {
            window.removeEventListener('resize', onResize);
            console.log('resize listener removed');
        };
    }, []);

    return width;
}

function WidthBadge() {
    const width = useWindowWidth();
    return <p>This frame is {width}px wide: {width < 500 ? 'narrow' : 'wide'} layout.</p>;
}

export default function App() {
    const [show, setShow] = useState(true);
    return (
        <div>
            <button onClick={() => setShow(!show)}>{show ? 'Unmount' : 'Mount'} badge</button>
            {show && <WidthBadge />}
        </div>
    );
}

Thay đổi kích thước cửa sổ trình duyệt, con số sẽ thay đổi theo. Bấm nút, Console cho thấy listener đang được gỡ bỏ. Xóa return khỏi effect, rồi mount và unmount vài lần: mỗi lần bạn nhận được một dòng added mà không có removed, nên các listener cũ chồng chất lên nhau. Với những giá trị của trình duyệt như thế này, useSyncExternalStore là hook React tạo ra đúng cho việc đó, và rất nên gọi nó bên trong một custom hook.

Chia sẻ logic, không chia sẻ state

Hai component gọi cùng một hook sẽ nhận hai bản sao riêng biệt của mọi thứ bên trong nó. Điều này khiến những ai nghĩ hook hoạt động như một biến toàn cục bất ngờ.

import { useState } from 'react';

function useCounter() {
    const [count, setCount] = useState(0);
    return [count, () => setCount((c) => c + 1)];
}

function Counter({ name }) {
    const [count, increment] = useCounter();
    return (
        <p>
            {name}: {count} <button onClick={increment}>+1</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <Counter name="First" />
            <Counter name="Second" />
        </div>
    );
}

Bấm bất kỳ nút nào, chỉ bộ đếm đó thay đổi. Nếu cả hai cần hiển thị cùng một con số, hãy chuyển state vào App rồi truyền xuống, hoặc đặt nó trong context. Một custom hook có thể bọc state dùng chung đó cho tiện (useCart() đọc một CartContext), nhưng việc chia sẻ đến từ context, không phải từ hook.

Khi nào nên viết custom hook

Hãy tách ra một hook khi cùng một nhóm lệnh gọi hook xuất hiện ở hai component, hoặc khi logic effect của một component dài tới mức một cái tên sẽ giải thích nó tốt hơn (useOnlineStatus() dễ đọc hơn hai mươi dòng listener). Đừng bọc một lệnh useState duy nhất trong hook chỉ để đổi tên nó, và đừng viết những hook chỉ gọi useEffect để đặt state từ props; hãy tính giá trị đó ngay trong lúc render.