Building Custom, Reusable Hooks in React

A good custom hook in React is a reusable function starting with "use" that encapsulates stateful logic for sharing across components; it should solve a common problem, be flexible through parameters like useFetch(url, options), return a consistent structure such as an array or object, handle side effects safely with cleanup in useEffect, support SSR by checking for browser globals, and remain UI-agnostic; examples include useLocalStorage for persisting data and useEventListener for managing event listeners; you should create a custom hook when logic is repeated, independent of JSX, manages state or side effects, and can be generalized, but avoid calling hooks conditionally, passing JSX, managing UI directly, or overcomplicating when a simple utility function suffices, as custom hooks aim to reuse behavior, not markup, making components cleaner and logic more maintainable.

Custom hooks in React are a powerful way to extract component logic into reusable functions. They let you share stateful logic—like data fetching, form handling, or subscriptions—across multiple components without duplicating code. Here’s how to build effective, reusable custom hooks.

What Makes a Good Custom Hook?

A custom hook is just a JavaScript function whose name starts with use (e.g., useForm, useFetch). It can call other hooks like useState, useEffect, useCallback, etc. The key is encapsulation: your hook should hide internal complexity and expose a clean, intuitive API.

A good custom hook:

• Solves a common problem
• Is composable and flexible
• Doesn’t tie itself to a specific UI
• Handles edge cases gracefully
• Returns values and functions that are easy to use

Example: Building useLocalStorage

Let’s create a hook that syncs state with localStorage. This is useful for persisting user preferences, form inputs, or UI state.

import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.warn(`Error reading localStorage key "${key}":`, error);
      return initialValue;
    }
  });

  useEffect(() => {
    try {
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.warn(`Error setting localStorage key "${key}":`, error);
    }
  }, [key, value]);

  return [value, setValue];
}

Why this works well:

• Encapsulates logic: No need to repeat localStorage checks in every component.
• Handles errors: Prevents crashes if localStorage is full or disabled.
• Works with any type: Accepts strings, numbers, objects, arrays via JSON.parse/stringify.
• Easy to use:

function DarkModeToggle() {
  const [isDark, setIsDark] = useLocalStorage('darkMode', false);

  return (
    <button onClick={() => setIsDark(!isDark)}>
      {isDark ? 'Light' : 'Dark'} Mode
    </button>
  );
}

Tips for Writing Reusable Hooks

1. Accept parameters for flexibility

Let users customize behavior via arguments.

useFetch(url, options, shouldFetch)
useForm(initialValues, onSubmit, validate)

This makes your hook adaptable to different use cases.

2. Return a consistent structure

Always return values in a predictable way—usually an array (like useState) or object.

Array return (good for named destructuring):

const [value, setValue, clear] = useInput('');

Object return (better for many values):

const { data, loading, error, refetch } = useFetch(url);

Choose based on how many things you’re returning.

3. Handle side effects safely

Use useEffect cleanup to avoid memory leaks.

Example: useEventListener

function useEventListener(eventName, handler, element = window) {
  useEffect(() => {
    const target = element.current || element;
    target.addEventListener(eventName, handler);

    return () => target.removeEventListener(eventName, handler);
  }, [eventName, handler, element]);
}

Cleanup ensures the event listener is removed when the component unmounts.

4. Support SSR (Server-Side Rendering)

Avoid referencing browser globals like window or localStorage during SSR.

Improved useLocalStorage check:

if (typeof window === 'undefined') return [initialValue, setValue];

Or use a check inside:

const canUseDOM = typeof window !== 'undefined';

When to Build a Custom Hook?

Ask yourself:

• Is this logic repeated in multiple components?
• Is it independent of specific JSX?
• Does it manage state or side effects?
• Can it be generalized?

If yes → make a custom hook.

Common patterns:

• useMediaQuery(query) → responsive logic
• useOutsideClick(ref, callback) → detect clicks outside an element
• useDebounce(value, delay) → delay state updates
• useScrollPosition() → track scroll

Don’ts of Custom Hooks

• ❌ Don’t call hooks conditionally (follow the Rules of Hooks)
• ❌ Don’t pass children or JSX into hooks (they’re not components)
• ❌ Don’t manage UI directly—keep hooks UI-agnostic
• ❌ Don’t overcomplicate—sometimes a utility function is enough

Building custom hooks is about reusing behavior, not markup. When done right, they make your components cleaner, your logic more testable, and your app easier to maintain.

Basically: if you're copying and pasting useEffect or useState logic, it's probably time to make a custom hook.

The above is the detailed content of Building Custom, Reusable Hooks in React. For more information, please follow other related articles on the PHP Chinese website!