React Custom Hooks: Best Practices and Examples

Introduction

React Hooks, introduced in React 16.8, have revolutionized the way developers manage state and side effects in functional components. Custom Hooks are a powerful tool that allows developers to create reusable stateful logic that can be shared across multiple components. In this article, we will discuss best practices for creating and using custom Hooks in React.

Naming Convention

It is a good practice to prefix your custom Hooks with "use" to adhere to the naming convention established by React.js. This helps other developers understand that the function is a Hook and should be used accordingly.

Single Responsibility Principle

Aim to keep your custom Hooks focused on a single responsibility. This improves code readability, reusability, and maintainability. If a Hook becomes too complex or handles multiple concerns, consider refactoring it into smaller, more specialized Hooks.

Dependency Injection

Design your custom Hooks to be flexible and accept necessary dependencies as arguments. This allows components using the Hook to provide their specific dependencies, promoting reusability. Avoid hardcoding dependencies within your custom Hooks.

Documentation and Examples

Provide clear and comprehensive documentation for your custom Hooks. Explain their purpose, required inputs, return values, and any additional configuration options. Include examples and usage patterns to help developers understand how to use the Hook effectively.

Skipping Effects (no array dependency)

Without an array dependency, the effect function will be run after every single render. This can be useful in certain scenarios, but be cautious when using it as it may lead to performance issues.

useEffect(() => {
  console.log("This will be logged after every render!");
});

Custom Hook Examples

Here are some examples of custom Hooks that you can use as a starting point for your projects:

useFetch: A custom Hook for fetching data asynchronously:

import { useEffect, useState } from "react";

export const useFetch = (url) => {
  const [resource, setResource] = useState({
    loading: true,
    error: null,
    data: null,
  });

  useEffect(() => {
    const fetchData = async () => {
      try {
        const req = await fetch(url);
        const data = await req.json();
        setResource((prev) => ({ ...prev, data }));
      } catch (error) {
        setResource((prev) => ({ ...prev, error: error.message }));
      } finally {
        setResource((prev) => ({ ...prev, loading: false }));
      }
    };
    fetchData();
  }, []);

  return resource;
};

useToggle: A custom Hook that manages a boolean state and provides a toggle function:

import { useState } from "react";

export const useToggle = (initialValue = false) => {
  const [value, setValue] = useState(initialValue);

  const toggle = () => {
    setValue((prevValue) => !prevValue);
  };

  return [value, toggle];
};

useRequireAuth: A custom Hook that checks if a user is authenticated and redirects them if they are not:

import { useEffect } from "react";
import { useHistory } from "react-router-dom";

export const useRequireAuth = (auth) => {
  const history = useHistory();

  useEffect(() => {
    if (!auth) {
      history.push("/login");
    }
  }, [auth, history]);
};

useCopyToClipboard: A custom Hook that provides a function to copy text to the clipboard:

import { useState } from 'react';

export const useCopyToClipboard = () => {
  const [copiedText, setCopiedText] = useState(null);

  const copy = async (text) => {
    if (!navigator?.clipboard) {
      console.warn('Clipboard not supported');
      return false;
    }

    try {
      await navigator.clipboard.writeText(text);
      setCopiedText(text);
      return true;
    } catch (error) {
      console.warn('Copy failed', error);
      setCopiedText(null);
      return false;
    }
  };

  return [copiedText, copy];
};

Conclusion

React custom Hooks offer a powerful way to encapsulate and reuse stateful logic across components. By following best practices and using optimization techniques, you can create efficient, maintainable, and performant React applications. Remember to keep your Hooks focused on a single responsibility, provide clear documentation, and consider using techniques like dependency injection, windowing, and asset optimization to enhance your application's performance.