Skip to main content

Rules of Hooks and Best Practices: `eslint-plugin-react-hooks` and How to Write Good Custom Hooks #88

📖 Introduction​

Following our exploration of various custom hooks, this article focuses on the foundational principles that govern how hooks work: the Rules of Hooks. We will also discuss best practices for writing your own custom hooks and how to enforce these rules automatically with the eslint-plugin-react-hooks.

📚 Prerequisites​

Before we begin, please ensure you have a solid grasp of the following concepts:

  • React Hooks, especially useState and useEffect.
  • Functional components.
  • Basic understanding of ESLint.

🎯 Article Outline: What You'll Master​

In this article, you will learn:

  • ✅ The Rules of Hooks: The two fundamental rules you must follow when using hooks.
  • ✅ Best Practices: Guidelines for writing clean, maintainable, and reusable custom hooks.
  • ✅ eslint-plugin-react-hooks: How to use this essential ESLint plugin to automatically enforce the Rules of Hooks.

🧠 Section 1: The Core Concepts of the Rules of Hooks​

React relies on a consistent call order of hooks between renders to work correctly. To ensure this, there are two simple rules you must follow:

1. Only Call Hooks at the Top Level Don't call hooks inside loops, conditions, or nested functions. By ensuring that hooks are called in the same order every time a component renders, React can correctly preserve the state of hooks between multiple useState and useEffect calls.

2. Only Call Hooks from React Functions Don't call hooks from regular JavaScript functions. Instead, only call hooks from:

  • ✅ React function components.
  • ✅ Custom hooks.

💻 Section 2: Best Practices for Writing Custom Hooks​

Beyond the two rules, here are some best practices to keep in mind when writing your own custom hooks:

  • Naming Convention: Always start the name of your custom hook with use. This is a convention that React uses to identify hooks.
  • Keep Hooks Focused: A good custom hook should have a single, clear purpose. If your hook is doing too many things, consider breaking it down into smaller, more focused hooks.
  • Return Values: Return values from your custom hook in a way that is easy to use. Returning an array (like useState) is great for hooks that manage a single value, while returning an object (like our useFetch hook) is better for hooks that manage multiple related values.
  • Memoization: Use useCallback and useMemo to memoize functions and values that are returned from your hook. This can help to prevent unnecessary re-renders in the components that use your hook.

🛠️ Section 3: Enforcing the Rules with eslint-plugin-react-hooks​

Remembering to follow the Rules of Hooks can be tricky, especially as your application grows. Fortunately, the React team provides an ESLint plugin that automatically enforces these rules for you.

The eslint-plugin-react-hooks plugin provides two rules:

  1. rules-of-hooks: Enforces the two main Rules of Hooks.
  2. exhaustive-deps: Checks the dependency array of hooks like useEffect and useCallback to ensure you've included all the necessary dependencies.

Setting up the ESLint Plugin​

If you're using Create React App, this plugin is already configured for you. If not, you can install it with npm:

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

Then, add it to your ESLint configuration file (e.g., .eslintrc.json):

{
  "plugins": [
    "react-hooks"
  ],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

Now, ESLint will automatically flag any violations of the Rules of Hooks in your code, helping you to catch bugs before they happen.

💡 Conclusion & Key Takeaways​

In this article, we've learned about the Rules of Hooks, best practices for writing custom hooks, and how to use the eslint-plugin-react-hooks to enforce these rules automatically. By following these guidelines, you can write cleaner, more maintainable, and more robust React applications.

Let's summarize the key takeaways:

  • The two Rules of Hooks are essential for ensuring that your components behave correctly.
  • Following best practices will help you to write clean, maintainable, and reusable custom hooks.
  • The eslint-plugin-react-hooks is an essential tool for any React developer.

Challenge Yourself: To solidify your understanding, go back to the custom hooks you've written in the previous articles and make sure they follow all the rules and best practices discussed in this article.

➡️ Next Steps​

This concludes our series on custom hooks. You now have a solid understanding of how to create and use your own custom hooks to write cleaner and more maintainable React code. In the next series, we will explore Routing with React Router.

Thank you for your dedication. Stay curious, and happy coding!

glossary​

  • ESLint: A tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.
  • Memoization: An optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again.

Further Reading​