Hooks 規則

Hooks 是使用 JavaScript 函式定義的，但它們代表一種特殊類型的可重複使用 UI 邏輯，對其呼叫位置有限制。

僅在頂層呼叫 Hooks
僅從 React 函式呼叫 Hooks

僅在頂層呼叫 Hooks

在 React 中，名稱以 use 開頭的函式稱為 Hooks。

不要在迴圈、條件、巢狀函式或 try/catch/finally 區塊內呼叫 Hooks。 而是始終在 React 函式的頂層、任何提前返回之前使用 Hooks。你只能在 React 渲染函式元件時呼叫 Hooks

✅ 在函式元件主體的頂層呼叫它們。
✅ 在自定義 Hook主體的頂層呼叫它們。

function Counter() {
  // ✅ Good: top-level in a function component
  const [count, setCount] = useState(0);
  // ...
}

function useWindowWidth() {
  // ✅ Good: top-level in a custom Hook
  const [width, setWidth] = useState(window.innerWidth);
  // ...
}

在任何其他情況下呼叫 Hooks（以 use 開頭的函式）是不支援的，例如

🔴 不要在條件或迴圈內呼叫 Hooks。
🔴 不要在條件 return 陳述式之後呼叫 Hooks。
🔴 不要在事件處理器中呼叫 Hooks。
🔴 不要在類別元件中呼叫 Hooks。
🔴 不要在傳遞給 useMemo、useReducer 或 useEffect 的函式內呼叫 Hooks。
🔴 不要在 try/catch/finally 區塊內呼叫 Hooks。

如果你違反這些規則，你可能會看到這個錯誤。

function Bad({ cond }) {
  if (cond) {
    // 🔴 Bad: inside a condition (to fix, move it outside!)
    const theme = useContext(ThemeContext);
  }
  // ...
}

function Bad() {
  for (let i = 0; i < 10; i++) {
    // 🔴 Bad: inside a loop (to fix, move it outside!)
    const theme = useContext(ThemeContext);
  }
  // ...
}

function Bad({ cond }) {
  if (cond) {
    return;
  }
  // 🔴 Bad: after a conditional return (to fix, move it before the return!)
  const theme = useContext(ThemeContext);
  // ...
}

function Bad() {
  function handleClick() {
    // 🔴 Bad: inside an event handler (to fix, move it outside!)
    const theme = useContext(ThemeContext);
  }
  // ...
}

function Bad() {
  const style = useMemo(() => {
    // 🔴 Bad: inside useMemo (to fix, move it outside!)
    const theme = useContext(ThemeContext);
    return createStyle(theme);
  });
  // ...
}

class Bad extends React.Component {
  render() {
    // 🔴 Bad: inside a class component (to fix, write a function component instead of a class!)
    useEffect(() => {})
    // ...
  }
}

function Bad() {
  try {
    // 🔴 Bad: inside try/catch/finally block (to fix, move it outside!)
    const [x, setX] = useState(0);
  } catch {
    const [x, setX] = useState(1);
  }
}

你可以使用 eslint-plugin-react-hooks 插件來捕獲這些錯誤。

備註

自定義 Hooks可以呼叫其他 Hooks（這是它們的全部目的）。這是可行的，因為自定義 Hooks 也應該只在函式元件渲染時呼叫。

僅從 React 函式呼叫 Hooks

不要從常規 JavaScript 函式呼叫 Hooks。相反，你可以

✅ 從 React 函式元件呼叫 Hooks。 ✅ 從自定義 Hooks 呼叫 Hooks。

透過遵循此規則，你可以確保元件中的所有狀態邏輯在其原始碼中清晰可見。

function FriendList() {
  const [onlineStatus, setOnlineStatus] = useOnlineStatus(); // ✅
}

function setOnlineStatus() { // ❌ Not a component or custom Hook!
  const [onlineStatus, setOnlineStatus] = useOnlineStatus();
}

上一頁React 呼叫元件和 Hooks