Rules of Hooks trong React: vì sao thứ tự gọi quan trọng

Rules of Hooks gồm hai quy tắc: chỉ gọi hook ở cấp cao nhất của component, không bao giờ trong điều kiện, vòng lặp, hàm lồng nhau hay sau một lệnh return sớm; và chỉ gọi hook từ function component hoặc từ custom hook. Hai quy tắc này tồn tại vì React phân biệt các hook theo thứ tự bạn gọi chúng, nên thứ tự đó phải giống nhau ở mọi lần render.

React lưu giá trị các hook của một component trong một danh sách gắn với component đó. Ở mỗi lần render, nó duyệt danh sách: lời gọi hook đầu tiên nhận ô đầu tiên, lời gọi thứ hai nhận ô thứ hai, cứ thế tiếp tục. Không có tên, chỉ có vị trí. Ví dụ dưới đây là một phiên bản mô phỏng ý tưởng đó trong vài dòng JavaScript thuần, không phải code của React, nên bạn có thể thoải mái làm hỏng nó.

import { useState } from 'react';

const slots = [];
let index = 0;

function toyUseState(initial) {
    const i = index++;
    if (!(i in slots)) slots[i] = initial;
    return [slots[i]];
}

function renderForm(showNickname) {
    index = 0;
    const [name] = toyUseState('Ada');
    let nickname = '(no hook called)';
    if (showNickname) {
        [nickname] = toyUseState('Countess');
    }
    const [age] = toyUseState(36);
    return { name, nickname, age };
}

export default function App() {
    const [result, setResult] = useState(() => renderForm(true));
    return (
        <div>
            <button onClick={() => setResult(renderForm(true))}>Render with nickname</button>{' '}
            <button onClick={() => setResult(renderForm(false))}>Render without nickname</button>
            <p>
                name: {String(result.name)}, nickname: {String(result.nickname)}, age:{' '}
                {String(result.age)}
            </p>
            <p style={{ color: '#666' }}>slots: {JSON.stringify(slots)}</p>
        </div>
    );
}

Lần render đầu tiên lấp đầy ba ô: Ada, Countess, 36. Nhấn "Render without nickname": lời gọi trong điều kiện bị bỏ qua, nên lời gọi age chiếm ô 1 và đọc ra Countess. React thật phát hiện sự lệch này trong một số trường hợp và ném lỗi, còn trong những trường hợp khác thì đưa giá trị sai cho hook sai, điều này còn tệ hơn. Chuyển lời gọi toyUseState('Countess') lên trên if và cả hai nút đều cho ra đúng tuổi.

Hai quy tắc trong code

function Profile({ user }) {
    // Good: always called, always in this order
    const [tab, setTab] = useState('posts');
    const theme = useContext(ThemeContext);
    useEffect(() => {
        document.title = user.name;
    }, [user.name]);

    // Bad: inside a condition, a loop or a nested function
    if (user.isAdmin) {
        const [log, setLog] = useState([]); // breaks the order
    }
}

Một lời gọi hook luôn được chạy tới, theo cùng thứ tự, thì nằm ở đâu trong thân component cũng được, miễn là nó đứng trước mọi lệnh return sớm.

Sửa hook được gọi trong điều kiện

Linter báo lỗi này là React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render. Cách sửa luôn giống nhau: gọi hook mọi lúc và đặt điều kiện vào bên trong nó.

// Broken: the effect exists on some renders and not others
function Notifications({ user }) {
    if (user) {
        useEffect(() => {
            console.log('subscribe for', user.name);
        }, [user]);
    }
    return null;
}

import { useState, useEffect } from 'react';

function Notifications({ user }) {
    useEffect(() => {
        if (!user) return;
        console.log('subscribe for', user.name);
        return () => console.log('unsubscribe for', user.name);
    }, [user]);

    return <p>{user ? `Notifications for ${user.name}` : 'Log in to see notifications'}</p>;
}

export default function App() {
    const [user, setUser] = useState(null);
    return (
        <div>
            <button onClick={() => setUser(user ? null : { name: 'Ada' })}>
                {user ? 'Log out' : 'Log in'}
            </button>
            <Notifications user={user} />
        </div>
    );
}

Effect được khai báo ở mọi lần render, và câu lệnh if bên trong nó quyết định có làm gì hay không. Đăng nhập rồi đăng xuất vài lần, Console sẽ hiện một dòng subscribe cho mỗi lần đăng nhập và một dòng unsubscribe cho mỗi lần đăng xuất.

Hook sau một lệnh return sớm

Một lệnh return sớm cũng là một điều kiện. Đoạn code này gây lỗi "Rendered more hooks than during the previous render" ở lần đầu loading chuyển thành false, vì lần render đó chạy tới một hook mà lần trước chưa từng gọi. Khi một lần render gọi ít hook hơn lần trước, thông báo sẽ là "Rendered fewer hooks than expected".

// Broken: useState is skipped while loading
function Comments({ loading, comments }) {
    if (loading) return <p>Loading...</p>;
    const [expanded, setExpanded] = useState(false);
    return <List items={comments} expanded={expanded} />;
}

import { useState } from 'react';

function Comments({ loading, comments }) {
    const [expanded, setExpanded] = useState(false);

    if (loading) return <p>Loading...</p>;

    const shown = expanded ? comments : comments.slice(0, 2);
    return (
        <div>
            <ul>
                {shown.map((c) => (
                    <li key={c}>{c}</li>
                ))}
            </ul>
            <button onClick={() => setExpanded(!expanded)}>
                {expanded ? 'Show less' : `Show all ${comments.length}`}
            </button>
        </div>
    );
}

export default function App() {
    const [loading, setLoading] = useState(true);
    return (
        <div>
            <button onClick={() => setLoading(!loading)}>Toggle loading</button>
            <Comments loading={loading} comments={['Nice!', 'Agreed.', 'First.', 'Thanks']} />
        </div>
    );
}

Mọi hook đều nằm trên lệnh return, nên cả hai nhánh gọi cùng các hook. Nhấn "Toggle loading", mở rộng danh sách, rồi bật tắt loading hai lần: danh sách vẫn nhớ là đang mở rộng, vì state chưa bao giờ bị bỏ qua.

Hook trong vòng lặp

Bạn không thể gọi useState một lần cho mỗi mục trong vòng lặp, vì số mục thay đổi. Hãy cho mỗi mục một component riêng và gọi hook trong đó; mỗi instance có các ô riêng của nó.

import { useState } from 'react';

function Item({ name }) {
    const [qty, setQty] = useState(0);
    return (
        <li>
            {name}: {qty} <button onClick={() => setQty(qty + 1)}>+</button>
        </li>
    );
}

export default function App() {
    const [items, setItems] = useState(['Tea', 'Milk']);
    return (
        <div>
            <ul>
                {items.map((name) => (
                    <Item key={name} name={name} />
                ))}
            </ul>
            <button onClick={() => setItems([...items, `Item ${items.length + 1}`])}>
                Add item
            </button>
        </div>
    );
}

"Invalid hook call"

Thông báo bắt đầu bằng "Invalid hook call. Hooks can only be called inside of the body of a function component." Lỗi này thường có ba nguyên nhân:

1. Hook chạy khi React không render một function component. Trong trình xử lý sự kiện, bên trong callback của effect, trong class component, hoặc ở cấp module. Hãy chuyển nó vào thân component hoặc một custom hook, rồi gọi custom hook đó từ component.
2. Phiên bản react và react-dom không khớp. Cài cùng một phiên bản cho cả hai.
3. Có hai bản React. Một package cục bộ được link hoặc một thư viện tự đóng gói React riêng sẽ mang theo bản thứ hai, và hook từ bản này không hoạt động với renderer của bản kia. Chạy npm ls react và đảm bảo chỉ có một phiên bản xuất hiện.

npm ls react

Bản xem trước ở đây chạy như bản build production, vốn không in ra các thông báo này: một hook được gọi từ trình xử lý sự kiện sẽ lỗi với một TypeError đơn giản như "Cannot read properties of null", còn lỗi của chính React chỉ hiện dưới dạng mã ngắn "Minified React error". Chạy ứng dụng ở chế độ development để đọc thông báo đầy đủ.

Để linter kiểm tra giúp bạn

eslint-plugin-react-hooks kiểm tra cả hai quy tắc ngay khi bạn gõ, và kiểm tra cả mảng dependency của effect. Template React của Vite và cấu hình ESLint của Next.js đều có sẵn plugin này. Trong cấu hình ESLint dạng flat, hãy bật preset recommended của nó:

// eslint.config.js
import reactHooks from 'eslint-plugin-react-hooks';
import { defineConfig } from 'eslint/config';

export default defineConfig([reactHooks.configs.flat.recommended]);

Hai quy tắc cốt lõi là react-hooks/rules-of-hooks (báo lỗi) và react-hooks/exhaustive-deps (cảnh báo). Từ phiên bản 7, preset này còn bật các quy tắc đến từ React Compiler, như react-hooks/purity và react-hooks/refs, giúp phát hiện render không thuần và việc đọc ref trong lúc render. Để chọn từng quy tắc, hãy đăng ký plugin dưới dạng plugins: { 'react-hooks': reactHooks } và liệt kê những quy tắc bạn muốn.

Plugin nhận ra hook theo tên: mọi hàm có tên bắt đầu bằng use theo sau là một chữ in hoa đều được xem là hook, và chỉ component (tên viết hoa chữ đầu) cùng các hàm use khác mới được gọi nó. Đó là lý do custom hook phải dùng tiền tố này.

Ngoại lệ: use

use, được thêm vào từ React 19, đọc một promise hoặc một context, và khác với mọi hook khác, nó có thể được gọi trong điều kiện hoặc vòng lặp. Nó vẫn phải được gọi trong lúc render, bên trong component hoặc hook.

import { createContext, use, useState } from 'react';

const ThemeContext = createContext('light');

function Heading({ children, themed }) {
    let color = '#000';
    if (themed) {
        const theme = use(ThemeContext);
        color = theme === 'dark' ? '#7aa7ff' : '#c0392b';
    }
    return <h3 style={{ color }}>{children}</h3>;
}

export default function App() {
    const [theme, setTheme] = useState('light');
    return (
        <ThemeContext value={theme}>
            <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
                Theme: {theme}
            </button>
            <Heading>Plain heading</Heading>
            <Heading themed>Themed heading</Heading>
        </ThemeContext>
    );
}

Chỉ tiêu đề có theme đổi màu khi bạn chuyển theme. Thử làm tương tự với useContext bên trong if và linter sẽ báo lỗi. Trang hook use hướng dẫn cách đọc promise bằng nó.