{"id":20675,"date":"2022-10-11T05:53:01","date_gmt":"2022-10-11T12:53:01","guid":{"rendered":"https:\/\/coderpad.io\/?p=20675"},"modified":"2023-06-05T14:02:18","modified_gmt":"2023-06-05T21:02:18","slug":"rules-of-react-hooks","status":"publish","type":"post","link":"https:\/\/coderpad.io\/blog\/development\/rules-of-react-hooks\/","title":{"rendered":"Rules of React Hooks"},"content":{"rendered":"\n

Over the years, React has become one of the most used and loved JavaScript frameworks in the world. <\/p>\n\n\n\n

React is a component-based library with two standard ways of defining its components: <\/p>\n\n\n\n

    \n
  1. As class components <\/li>\n\n\n\n
  2. As functional components <\/li>\n<\/ol>\n\n\n\n

    You can use these two methods to achieve the same outcome but with different syntax.<\/p>\n\n\n\n

    The class components are ES6 classes that return JSX and necessitate a React class extension, while the functional components are ES6 functions that return a React element as JSX. It is essential to know that they both return JSX (JavaScript XML), allowing us to write HTML elements in JavaScript. React then takes this JSX and places the elements in the DOM.<\/p>\n\n\n

    \n
    \"A<\/a><\/figure>\n<\/div>\n\n\n

    Before the introduction of React Hooks in version 16.8, the class component had always been the superior method of creating a component when you need to work with state (data management) and handle lifecycle methods, like component mounts, renders, updates, and unmounts. <\/p>\n\n\n\n

    In those days, you could only use the functional component to render a user interface. With the introduction of Hooks in 2019, functional components gained the superpowers that class components already possessed, which meant that you could work with state and handle lifecycle methods.<\/p>\n\n\n\n

    What are React Hooks?<\/h2>\n\n\n\n

    React Hooks help us Hook into<\/strong> React features in functional components. These features include state and side effects (similar to lifecycle methods). <\/p>\n\n\n\n

    The two most common React Hooks are useState()<\/code> and useEffect()<\/code>. The useState()<\/code> Hook acts as a store that allows it to use state variables and update them. You can even destructure the useState()<\/code> Hook to hold the state variable and update function separately. It also allows you to pass an initial value directly into the Hook.<\/p>\n\n\n

    \n
    \"A<\/a><\/figure>\n<\/div>\n\n\n

    With the useEffect()<\/code> Hook, you can efficiently perform side effects (similar to lifecycle methods) such as when your application mounts\/renders or when a value updates. You can read about useEffect()<\/code>, and its rules here<\/a>.<\/p>\n\n\n\n

    Understanding the rules that guide the operation of React Hooks will help you and your team avoid some unnecessary errors and bugs.<\/p>\n\n\n\n

    The two rules of React Hooks<\/h2>\n\n\n\n

    Two significant rules need to be followed when working with Hooks. These rules are essential to maintain order, avoid unnecessary bugs, and help us write clean code. These rules are:<\/p>\n\n\n\n

      \n
    1. Only call Hooks at the top level<\/li>\n\n\n\n
    2. Only call Hooks from React functional components or other Hooks<\/li>\n<\/ol>\n\n\n\n

      Only call Hooks at the top level of your functional component<\/h3>\n\n\n\n

      The top level of a functional component is the base of your function body before you return your JSX elements. This is where you can call all your Hooks, so React can preserve and take note of the order in which these Hooks are called.<\/p>\n\n\n

      \n
      \"A<\/a><\/figure>\n<\/div>\n\n\n

      Calling your Hooks at the top of the function means you must not be calling them within loops, conditions, and nested functions<\/strong>.<\/p>\n\n\n

      import<\/span> { useState, useEffect } from<\/span> 'react'<\/span>;\n\nconst<\/span> App = ()<\/span> =><\/span> {\n\u00a0 \u00a0 \/\/ \u2705 - correct<\/span>\n\u00a0 \u00a0 const<\/span> [todos, setTodos] = useState([]);\n\u00a0 \u00a0\n\u00a0 \u00a0 \/\/ \u274c - Breaks the call order<\/span>\n\u00a0 \u00a0 if<\/span> (todos) {\n\u00a0 \u00a0 \u00a0 \u00a0 const<\/span> [count, setSetcount] = useState(todos.length);\n\u00a0 \u00a0 }\n\n\u00a0 \u00a0 \/\/ \u274c - Breaks the call order<\/span>\n\u00a0 \u00a0 todos.forEach(todo<\/span> =><\/span> {\n\u00a0 \u00a0 \u00a0 \u00a0 useEffect(()<\/span> =><\/span> {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console<\/span>.log(todos);\n\u00a0 \u00a0 \u00a0 \u00a0 });\n\u00a0 \u00a0 });\n\u00a0 \u00a0\n\u00a0 \u00a0 \/\/ \u2705 - correct<\/span>\n\u00a0 \u00a0 useEffect(()<\/span> =><\/span> {\n\u00a0 \u00a0 \u00a0 \u00a0 console<\/span>.log(todos);\n\u00a0 \u00a0 });\n\n\u00a0 \u00a0 return<\/span> (\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/ ...<\/span>\n\u00a0 \u00a0 );\n};\n\nexport<\/span> default<\/span> App;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
      It is necessary to call Hooks at the top level of your functional component to ensure that every time your component renders, these Hooks are called in the same order. The call order is essential for Hooks to work correctly.<\/strong><\/p>\n\n\n\n
      For example, when you consider the code above, it uses the value of the todos<\/code> state to decide whether to call the second and third Hook. When the condition fails, or something happens to the loop, it breaks the order. React will then have a hard time figuring out how to preserve the state of your component.<\/p>\n\n\n\n
      This is what React does when you make use of Hooks. It identifies the order in which the Hooks are used at the initial render, then in subsequent renders, React will be able to preserve the state of your component.<\/p>\n\n\n\n
      A perfect example to explain this would be this: you have a functional component with a state that holds the user’s data, such as the firstName<\/code> and age<\/code>. Then you get the lastName<\/code> from another state. You now use the useEffect()<\/code> Hook to update your page title to reflect both names.<\/p>\n\n\n
      const<\/span> App = ()<\/span> =><\/span> {\n\u00a0 \u00a0 \/\/ 1. Use the user state variable<\/span>\n\u00a0 \u00a0 const<\/span> [user, setUser] = useState({\n\u00a0 \u00a0 \u00a0 \u00a0 firstName<\/span>: 'John'<\/span>,\n\u00a0 \u00a0 \u00a0 \u00a0 age<\/span>: 20<\/span>,\n\u00a0 \u00a0 });\n\n\u00a0 \u00a0 \/\/ 2. Use the lastName state variable<\/span>\n\u00a0 \u00a0 const<\/span> [lastName, setLastName] = useState('Doe'<\/span>);\n\n\u00a0 \u00a0 \/\/ 3. Use an effect for updating the user details and updating the title<\/span>\n\u00a0 \u00a0 useEffect(()<\/span> =><\/span> {\n\u00a0 \u00a0 \u00a0 \u00a0 document<\/span>.title = user.firstName + ' '<\/span> + lastName;\n\u00a0 \u00a0 });\n\n\u00a0 \u00a0 \/\/ ...<\/span>\n\n};<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
      This example will always work because the order is constant, and nothing affects the order on every render:<\/p>\n\n\n
      \/\/ First render<\/span>\n\/\/ ---<\/span>\n\/\/ 1. Initialize the name state variable with an object containing name and age<\/span>\nuseState({ firstName<\/span>: 'John'<\/span>, age<\/span>: 20<\/span> })\n\/\/ 2. Initialize the lastName state variable with 'Doe'<\/span>\nuseState('Doe'<\/span>)\n\/\/ 3. Add an effect to update the title<\/span>\nuseEffect()\n\n\/\/ Second render<\/span>\n\/\/ ---<\/span>\n\/\/ 1. Read the user state variable (the argument is ignored)<\/span>\nuseState({ firstName<\/span>: 'John'<\/span>, age<\/span>: 20<\/span> })\n\/\/ 2. Read the lastName state variable (the argument is ignored)<\/span>\nuseState('Doe'<\/span>)\n\/\/ 3. Replace the effect for updating the title<\/span>\nuseEffect()<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
      But in a situation where you put one of these Hooks in a condition, the order will break when the condition returns false<\/code>, leading to bugs:<\/p>\n\n\n
      \u274c - Breaks the call order\nif<\/span>(user.firstName){\n\u00a0 \u00a0 const<\/span> [lastName, setLastName] = useState('Doe'<\/span>);\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
      The condition will be true<\/code> on the first render, making React store the Hook’s order. If it returns false<\/code> in the next render, it then affects any other Hook declared after this one and returns the wrong state for that Hook.<\/p>\n\n\n\n
      If you must <\/em>have a condition, then you can take this Hook out of the condition statement and use the state update function (setLastName()<\/code> in our example) instead:<\/p>\n\n\n
      const<\/span> [lastName, setLastName] = useState(''<\/span>);\n\nif<\/span>(users.firstName && !lastName){\n\u00a0 \u00a0 setLastName('Doe'<\/span>);\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
      If it is a useEffect()<\/code> Hook, you can write your conditions or nested functions or loops within the Hook itself:<\/p>\n\n\n
      useEffect(()<\/span> =><\/span> {\n\u00a0 \u00a0 if<\/span> (condition) {\n\u00a0 \u00a0 \/\/ statement<\/span>\n\u00a0 \u00a0 }\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
      Only call Hooks from React functions<\/h3>\n\n\n\n
      A second rule is that Hooks should only be used and called in React functional components or custom Hooks<\/strong>, not regular JavaScript functions or React class components.<\/p>\n\n\n\n
      The example below is invalid because it is a standard JavaScript function. Even if you decided to import useState()<\/code>, it won’t work because it’s not a React component or custom Hook.<\/p>\n\n\n
      import<\/span> { useState } = \"react\"<\/span>;\n\nfunction<\/span> getName<\/span>(<\/span>) <\/span>{\n\u00a0 \u00a0 const<\/span> [name, setName] = useState(\"John Doe\"<\/span>);\n\u00a0 \u00a0 return<\/span> name;\n}\ndocument<\/span>.getElementById(\"user-name\"<\/span>).innerHTML = getName();<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
      To create a custom Hook, you simply create a JavaScript function where the function’s name begins with use<\/code>. From there, you can use it to call other Hooks. For example, here\u2019s an implementation of the custom Hook useMyName<\/code>:<\/p>\n\n\n
      export<\/span> default<\/span> function<\/span> useMyName<\/span>(name<\/span>) <\/span>{\n\u00a0 \u00a0 const<\/span> [state, setState] = useState(value);\n\u00a0 \u00a0\n\u00a0 \u00a0 useEffect(()<\/span> =><\/span> {\n\u00a0 \u00a0 \/\/ ...<\/span>\n\u00a0 \u00a0 });\n\u00a0 \u00a0\n\u00a0 \u00a0 return<\/span> anyThing;\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
      You can learn more about custom Hooks and how to create yours in the official React documentation<\/a>.<\/p>\n\n\n\n
      Enforcing Rules With ESLint Plug-in <\/h2>\n\n\n\n
      Knowing these rules is not enough; you must enforce and abide by them too. It is easy to follow these rules when working alone on a project, but when working in a team or on an external project, it is a good idea to devise ways to check if these rules are followed to reduce the chance of introducing bugs into the code.<\/p>\n\n\n\n
      React released an ESLint plugin called eslint-plugin-react-hooks<\/code><\/a> to help enforce both React Hook rules. If you want to try it out, you can do so by installing it with the following command:<\/p>\n\n\n
      npm install eslint-plugin-react-hooks --save-dev<\/code><\/span><\/pre>\n\n
      \/\/ Your ESLint configuration<\/span>\n{\n\u00a0 \u00a0 \"plugins\"<\/span>: [\n\u00a0 \u00a0 \/\/ ...<\/span>\n\u00a0 \u00a0 \"react-hooks\"<\/span>\n\u00a0 \u00a0 ],\n\u00a0 \u00a0 \"rules\"<\/span>: {\n\u00a0 \u00a0 \/\/ ...<\/span>\n\u00a0 \u00a0 \"react-hooks\/rules-of-hooks\"<\/span>: \"error\"<\/span>, \/\/ Checks rules of Hooks<\/span>\n\u00a0 \u00a0 \"react-hooks\/exhaustive-deps\"<\/span>: \"warn\"<\/span> \/\/ Checks effect dependencies<\/span>\n\u00a0 \u00a0 }\n}<\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n\n\n
      \n
      \"An<\/a><\/figure>\n<\/div>\n\n\n
      Try it out for yourself!<\/h2>\n\n\n\n
      You can take a turn implementing React Hook rules for yourself:<\/p>\n\n\n\n\t
      \u2139\ufe0f If you installed React via Create React App<\/a>, then this plugin is installed by default, and you will notice it will always flag situations where you don’t abide by the rules with errors like this:<\/p>\n\n\n