What are the rules of React hooks?

React Hooks has changed the teachings of React to help us write more clean functional components that are easy to read, easy to write, and easy to test. Unfortunately, like all powerful tools, there are some best practices to follow and rules to obey in order to not fall into the most common pitfalls and make our applications great again. Today we will focus on the four basic rules of hooks in React and why it is important to follow these rules.

Photo by Lautaro Andreani on Unsplash

The four main rules of hooks

1. Use Hooks In Your React Functional Components Only

Hooks can be used inside a React functional component. Do not call hooks from regular JavaScript functions You can also use hooks in custom hooks (functions that are prefixed with use and call other hooks).

Worth Noting:

The order in which hooks are executed matters; otherwise, React would lose track of state between renders. The hooks are called in a specific order, with calling the hooks outside of React functions breaks this order and this usually causes a bunch of errors.

Example

function App() {
  const [petName, setPetName] = useState('Fluffy');
  
  function nameLooper() {
    // Invalid: useState used inside a regular function
    const [newName, setNewName] = useState('Rexy');
    setPetName(newName);
  }

  return <button onClick={nameLooper}>Pick a new name</button>;
}

2. It is necessary to call hooks at the highest level within the React component functions

That is, avoid putting them inside loops or conditions or any nested functions.

Significance:
By doing this, we ensure that all hooks are called in the same order whenever a component is rendered. If hooks are placed inside conditions or loops, it might lead to different orders of invocation of these hooks — which may produce errors at runtime.

Improper code demonstration

function App() {
  if (someCondition) {
    useEffect(() => {
      // Effect logic here
    }, []);
  }
  
  return <div>Example</div>;
}

Example of Valid Code

function App() {
  useEffect(() => {
    if (someCondition) {
      // Effect logic here
    }
  }, []);
  
  return <div>Example</div>;
}

3. Use Multiple Hooks in the Same Sequence

It is possible to use more than one hook within a component, but every hook must be invoked in a predetermined order each time the component renders. This principle serves as a safeguard against issues stemming from misaligned hook orders.

Why It Matters

React depends on the uniformity of hook invocation sequences to accurately synchronize hook states across different rendEer cycles.

Example

function App() {
  const [petName, setPetName] = useState('Fluffy');
  const [petAge, setPetAge] = useState(3);

  useEffect(() => {
    // Side effect logic here
  }, []);

  return <div>Example</div>;
}

4. Maintain the hook calls’ sequence

Ensure that you call hooks in the same order every time a component renders, without any conditions that could skip certain hook calls.

Why It’s Important:
Changing the sequence might make React misinterpret which state belongs to which hook, causing bugs and erratic application behavior.

Example of incorrect code

function App() {
  if (someCondition) {
    useState('Fluffy');
  }
  
  useState('Gizmo'); // This will break if someCondition changes
  
  return <div>Example</div>;
}

Example of Valid Code

function App() {
  const [petName, setPetName] = useState('Fluffy');
  const [isConditionMet, setConditionMet] = useState(false);

  if (isConditionMet) {
    // Use the state setting function inside the conditional
    setPetName('Gizmo');
  }

  return <div>Example</div>;
}

Conclusion

To write reliable and error-free React applications, it is necessary to understand and abide by these four basic principles of hooks include calling hooks from React functions only, at the top level, and in the same order which will enable you to make full use of hook functionality while avoiding common pitfalls. As you get used to these rules more, you will realize that hooks can significantly improve the functionality and readability of your React components.

If you stick to this advice in your React solutions, you will reap all the advantages of using hooks; they bring higher-quality applications that are easier to support.

Have a good coding!