hooks series six: hook rules

join us!

Mountain" , to provide front-end developers with technical information and a series of basic articles. For a better user experience, please move to our official website novices (1610a3afbd4dc9 https://xhs-rookies.com/ ) to learn and get the latest articles in time.

"Code tailor" , if you are interested in our article or want to make some suggestions, follow "Novices of Xiaohe Mountain" public account, contact us, you can also watch it on WeChat Our article. Every suggestion or approval is a great encouragement to us!

Hooks usage rules

Hook is a new feature React 16.8 It allows you to use state and other React features class

Hook is essentially the JavaScript function, but there are two rules to follow when using it:

• Hook can only be used at the top level
• Only React calling function Hook

Next, we will talk about these two rules one by one.

Hook can only be used at the top level

Do not call Hook in a loop, condition or nested function

Make sure to always call them at the top level of React return By following this rule, you can ensure that Hook is called in the same order in every rendering. This allows React can many times useState and useEffect maintained between calls hook state correctly.

This React Hooks calling sequence, and if the time of each call, Hooks inconsistent recall order, React do not know who in the end of the call, so each call Hooks when calling sequence is the same, so it can work properly.

// ------------
// 首次渲染
// ------------
useState('Mary') // 1. 使用 'Mary' 初始化变量名为 name 的 state
useEffect(persistForm) // 2. 添加 effect 以保存 form 操作
useState('Poppins') // 3. 使用 'Poppins' 初始化变量名为 surname 的 state
useEffect(updateTitle) // 4. 添加 effect 以更新标题

// -------------
// 二次渲染
// -------------
useState('Mary') // 1. 读取变量名为 name 的 state（参数被忽略）
useEffect(persistForm) // 2. 替换保存 form 的 effect
useState('Poppins') // 3. 读取变量名为 surname 的 state（参数被忽略）
useEffect(updateTitle) // 4. 替换更新标题的 effect

// ...

If you want to know the detailed reasons, please see React explanation

Hook can only be called in React functions

Do not call Hook in ordinary JavaScript functions. you can:

• ✅ Call Hook in the function component of React
• ✅ Call other Hooks in custom Hooks (we will learn about this in a later chapter.)

Follow this rule to ensure that the state logic of the component is clearly visible in the code.

How to follow the rules of use

React officially released a eslint-plugin-react-hooks ESLint plug-in, use the plug-in to enforce these two rules.

Subsequent versions add this plugin by default to Create React App and other similar toolkits.

npm install eslint-plugin-react-hooks --save-dev

// 你的 ESLint 配置
{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error", // 检查 Hook 的规则
    "react-hooks/exhaustive-deps": "warn" // 检查 effect 的依赖
  }
}

Preview of the next section

In the next section, we will introduce you to custom hook, so stay tuned!