React Hooks: giải thích mọi hook qua ví dụ chạy trực tiếp

React hooks là những hàm có tên bắt đầu bằng use, cho phép function component dùng các tính năng của React: useState để ghi nhớ một giá trị, useEffect để chạy code sau khi render, useRef để giữ một DOM node, useContext để đọc dữ liệu dùng chung. Bạn gọi chúng ở đầu component, và React giữ giá trị của chúng giữa các lần render.

import { useState, useEffect, useRef, useMemo } from 'react';

const FRUITS = ['apple', 'banana', 'cherry', 'grape', 'mango', 'pear'];

export default function App() {
    const [query, setQuery] = useState('');
    const inputRef = useRef(null);

    const matches = useMemo(
        () => FRUITS.filter((f) => f.includes(query.toLowerCase())),
        [query]
    );

    useEffect(() => {
        console.log(`effect: ${matches.length} matches for "${query}"`);
    }, [query, matches.length]);

    return (
        <div>
            <input
                ref={inputRef}
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Filter fruit"
            />
            <button onClick={() => inputRef.current.focus()}>Focus</button>
            <ul>
                {matches.map((f) => (
                    <li key={f}>{f}</li>
                ))}
            </ul>
        </div>
    );
}

Ở đây có bốn hook phối hợp với nhau. useState lưu chữ đã gõ, useRef trỏ đến ô input để nút bấm có thể focus vào nó, useMemo giữ danh sách đã lọc cho đến khi query thay đổi, còn useEffect ghi log sau mỗi lần render mà query thay đổi. Gõ an và theo dõi Console: mỗi lần gõ phím một dòng, xuất hiện sau khi danh sách cập nhật.

Vì sao có hook

Trước React 16.8, một component cần state hoặc code lifecycle phải là một class. Logic của một tính năng bị chia ra componentDidMount, componentDidUpdate và componentWillUnmount, và muốn chia sẻ nó giữa các component thì phải dùng mixin (vốn không bao giờ chạy được với cú pháp class), higher order component hoặc render props, những cách đều bọc cây component của bạn trong thêm nhiều lớp.

// The class way: one feature, three methods
class Clock extends React.Component {
    state = { now: new Date() };
    componentDidMount() {
        this.id = setInterval(() => this.setState({ now: new Date() }), 1000);
    }
    componentWillUnmount() {
        clearInterval(this.id);
    }
    render() {
        return <p>{this.state.now.toLocaleTimeString()}</p>;
    }
}

Với hook, cùng tính năng đó nằm ở một chỗ: effect khởi động bộ đếm giờ và hàm cleanup của nó dừng bộ đếm.

import { useState, useEffect } from 'react';

function Clock() {
    const [now, setNow] = useState(new Date());

    useEffect(() => {
        console.log('timer started');
        const id = setInterval(() => setNow(new Date()), 1000);
        return () => {
            clearInterval(id);
            console.log('timer stopped');
        };
    }, []);

    return <p>{now.toLocaleTimeString()}</p>;
}

export default function App() {
    const [show, setShow] = useState(true);
    return (
        <div>
            <button onClick={() => setShow(!show)}>{show ? 'Hide' : 'Show'} clock</button>
            {show && <Clock />}
        </div>
    );
}

Ẩn đồng hồ đi và Console in ra timer stopped: React đã chạy cleanup khi Clock rời khỏi màn hình. Hiện lại và một bộ đếm giờ mới bắt đầu. Class component vẫn chạy trong React 19, nhưng code mới dùng hook.

Mọi hook có sẵn

React 19.2 nhóm các hook theo thứ chúng mang lại cho component. Bạn sẽ dùng hai nhóm đầu hằng ngày, còn những hook khác khi gặp một vấn đề cụ thể cần đến.

use, useActionState, useOptimistic và useFormStatus ra mắt cùng React 19, còn useEffectEvent trở nên ổn định trong 19.2. Mọi hook khác trong danh sách cũng chạy được trong React 18.

State gây render, ref thì không

Không phải hook nào cũng kích hoạt render. useState và useReducer thì có: thay đổi giá trị của chúng là React vẽ lại component. useRef đưa cho bạn một đối tượng có trường current mà bạn tùy ý thay đổi, và React không bao giờ render lại vì nó. Vì vậy đó là chỗ thích hợp để giữ id của timer, giá trị trước đó, hay một con số không hiển thị trên màn hình.

import { useState, useRef, useReducer, useEffect } from 'react';

function reducer(state, action) {
    if (action === 'add') return { items: state.items + 1 };
    if (action === 'clear') return { items: 0 };
    return state;
}

export default function App() {
    const [cart, dispatch] = useReducer(reducer, { items: 0 });
    const [note, setNote] = useState('');
    const commits = useRef(0);

    useEffect(() => {
        commits.current += 1;
        console.log(`render #${commits.current} reached the screen`);
    });

    return (
        <div>
            <p>Items in cart: {cart.items}</p>
            <button onClick={() => dispatch('add')}>Add item</button>
            <button onClick={() => dispatch('clear')}>Clear</button>
            <p>
                <input value={note} onChange={(e) => setNote(e.target.value)} placeholder="Note" />
            </p>
        </div>
    );
}

useReducer giữ giỏ hàng và useState giữ ghi chú; cả hai đều gây render khi thay đổi, và effect ghi một dòng log cho mỗi lần render. Effect cũng thay đổi commits.current, nhưng thay đổi đó không bao giờ tự gây ra render, nên log không bị lặp vô hạn. Con số được cập nhật trong effect chứ không phải trong thân component, vì thân component không nên thay đổi gì trong lúc render.

Quy tắc của hook

Mọi hook đều tuân theo hai quy tắc:

1. Gọi hook ở cấp cao nhất của component, không bao giờ trong câu lệnh điều kiện, vòng lặp hay hàm lồng nhau.
2. Chỉ gọi hook từ function component hoặc từ custom hook của chính bạn.

React không nhận biết hook theo tên. Nó nhận biết chúng theo thứ tự bạn gọi, và mong thứ tự đó giống nhau ở mọi lần render. Một hook nằm trong if sẽ làm lệch mọi hook phía sau. Trang quy tắc của hook cho thấy cái gì bị hỏng và cách sửa. use là ngoại lệ duy nhất: nó có thể được gọi bên trong câu lệnh điều kiện.

Custom hook đầu tiên của bạn

Khi hai component cần cùng một logic có state, hãy chuyển logic đó vào một hàm có tên bắt đầu bằng use. Hàm đó có thể gọi bất kỳ hook nào khác. Mỗi component gọi nó sẽ có state riêng.

import { useState } from 'react';

function useCounter(start, step) {
    const [count, setCount] = useState(start);
    const increment = () => setCount((c) => c + step);
    const reset = () => setCount(start);
    return { count, increment, reset };
}

function Counter({ label, start, step }) {
    const { count, increment, reset } = useCounter(start, step);
    return (
        <p>
            {label}: {count}{' '}
            <button onClick={increment}>+{step}</button>{' '}
            <button onClick={reset}>Reset</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <Counter label="Apples" start={0} step={1} />
            <Counter label="Points" start={100} step={10} />
        </div>
    );
}

Cả hai bộ đếm chạy cùng một hook, nhưng nhấn bộ đếm này không ảnh hưởng đến bộ đếm kia: custom hook chia sẻ logic, không chia sẻ state. Thêm một hàm decrement vào useCounter và một nút gọi hàm đó, cả hai bộ đếm đều có ngay. Các pattern khác (useToggle, useDebounce, useLocalStorage) có trong trang custom hook.

Nên dùng hook nào

• Màn hình cần thay đổi khi một giá trị thay đổi: useState, hoặc useReducer khi nhiều sự kiện cùng cập nhật một state.
• Bạn cần làm việc với thứ gì đó nằm ngoài React (timer, subscription, request): useEffect.
• Bạn cần một DOM node hoặc một giá trị không hiển thị trên màn hình: useRef.
• Nhiều component nằm sâu trong cây cần cùng một giá trị: useContext.
• Một lần render chậm vì một phép tính hoặc vì một component con đã memo vẫn render lại: useMemo và useCallback. React Compiler có thể tự thêm phần memo này cho bạn, nhưng viết tay vẫn chạy và vẫn phổ biến.
• Gõ phím thấy giật vì lần cập nhật phía sau quá nặng: useTransition hoặc useDeferredValue.