Rules of Hooks

發表於 分類於

到目前為止已經介紹過不少 React Hooks，這章節將進一步這些 hooks 在使用上的限制

Only call React Hooks in React Functions

只有在兩種環境才使用 React Hooks

  • React Components Functions
    這在前面章節也不斷提到，React Hooks 無法運行在 Components Function 之外
  • Custom Hooks
    這在之後的章節會再進一步介紹，React Hooks 還可以客製化生成

Only call React Hooks in Top Level

  • Don’t call them in nested Functions
    在滿足第一個前提之下，React Hooks 只能直接被使用，無法再被其他 function 封裝
  • Don’t call them in any block statements
    不只是 function 內，所有 block statements (if、switch…) 也無法使用

Unofficial Rule for useEffect()

還有一個關於 useEffect() 的非官方限制，那就是如果在 useEffect() callback function 中參照的資料，那它就應該被加入 dependency，較現代 IDE 如 VSCode 就會直接給予提示

1
2
3
4
5
6
7
8
9
10
11
useEffect(() => {
  const identifier = setTimeout(() => {
    console.log("Checking from validity!");
    setFormIsValid(emailValid && passwordValid);
  }, 500);

  return () => {
    console.log("CLEANUP");
    clearTimeout(identifier);
  };
}, [emailValid]);

資料參考

React - The Complete Guide (Incl Hooks, React Router, Redux)
GitHub