When to extract code to React custom hooks?

Why React hooks were introduced?

With React hooks, we can manage stateful logic and side effects in a more functional and declarative ways, using simple functions rather than complex classes.

Hooks can also make our code more modular and reusable, since we can extract and reuse logic across different components.

What are React custom hooks?

Custom hooks are a powerful feature of React that enables us to extract complex logic into reusable functions that can be shared across our application.

Hooks allow us to reuse stateful logic without changing our component hierarchy.

A custom hook is a JavaScript function that starts with the word “use” and uses built-in React hooks such as useState, useEffect, useContext, and others. Custom hooks are created by combining these built-in hooks with additional state and logic that is specific to our application.

Let’s assume we have to fetch github users along with their followers. We split this code into two components. The ‘App’ component fetches the current user and the ‘Followers’ component which fetches the current user’s followers.

Both components have similar data-fetching logic.

Let’s build this github example app with and without the custom useFetch hook.

Without custom hook

We observe the fetch logic to get user profiles and their followers are mostly the same.

Let’s extract this logic into a custom hook named useFetch and import it into App and Followers components.

With custom hook

Doesn’t the code look cleaner?

We have moved all the reusable data-fetching logic into the useFetch hook, and we are simply calling it in other components wherever we needed.

This helped us improve the reusability and readability of our code.

Let’s discuss these points in detail.

Reusability

The basic essence of hooks is the reusability of logic. By creating custom hooks, we can reuse the same logic across multiple components. This can reduce the amount of duplicate code in our project, making it easier to read and maintain. Reusable custom hooks also help promote consistency across our project, which can make our code more predictable and easier to understand.

Readability

Custom hooks allow us to encapsulate complex logic and functionality into a single function, making it easier to understand and reason about. By encapsulating this logic, we can create more modular and reusable code, which can improve readability and maintainability.

Things to remember before dealing with custom hooks

  1. Custom hooks should be called only at the top level. Do not call them inside loops, conditions, and nested functions.
  2. Custom hooks should only be called in React functions.

They cannot be called in - i. Class components ii. Event handlers iii. Functions passed to useMemo, useReducer, or useEffect

  1. The name of the custom hook should be chosen wisely to reflect the functionality of the hook. Choosing a bad name can lead to confusion and errors when other developers use it.

Why custom hooks are bad sometimes?

1. Complexity: Custom hooks can become complex as they try to address the needs of different components. If the hook becomes too complex, it can be difficult to understand and maintain, defeating the purpose of creating a reusable function in the first place.

Example: If the implementation of the hook relies on external APIs or libraries, changes to those APIs or libraries could cause the hook to break. Similarly, if the implementation of the hook is tightly coupled to the rest of the application, it could be difficult to make changes to the hook without affecting other parts of the application.

2. Compatibility: Custom hooks are not compatible with all versions of React. This can limit the reusability of our hooks, especially if we are working on a project with a team that uses different versions of React.

3. Overuse: It’s important to remember that not every piece of functionality needs to be abstracted into a custom hook. Overuse of custom hooks can lead to unnecessary complexity and make it difficult for other developers to understand the code. It’s important to use custom hooks only when they provide a clear benefit over other approaches.

Example: Let’s say we have a complex form that includes a lot of different input fields, and each field has some complex validation logic. We might be tempted to create a custom hook for each field that encapsulates the validation logic. While this approach might work well for a small number of fields, if we have a lot of input fields, it could lead to code bloat and make it harder to understand how the form works as a whole.

Conclusion

  • React custom hooks are useful for abstracting complex logic and improving code reuse
  • However, using hooks mindfully is important to avoid challenges and drawbacks
  • Custom hooks should be kept simple and easy to understand, without unnecessary complexity
  • This ensures that hooks are easy to maintain, test, and collaborate, without introducing bugs or performance issues
  • With careful planning and consideration, React custom hooks can be a powerful tool for building scalable and maintainable applications.

Need help on your Ruby on Rails or React project?

Join Our Newsletter