~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Comment0 / 300

en/tutorials/react/14react-custom-hooks

# Custom Hooks

Custom hooks let you extract component logic into reusable functions.

## Naming Convention

Custom hooks must start with `use`:

```jsx
function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);
  const increment = () => setCount((c) => c + 1);
  const decrement = () => setCount((c) => c - 1);
  return { count, increment, decrement };
}
```

## Using a Custom Hook

```jsx
function Counter() {
  const { count, increment, decrement } = useCounter(0);

return (
    <div>
      <p>{count}</p>
      <button onClick={decrement}>-</button>
      <button onClick={increment}>+</button>
    </div>
  );
}
```

Each component gets its own state.

## Example: useLocalStorage

```jsx
function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initialValue;
  });

useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

return [value, setValue];
}
```

## Example: useFetch

```jsx
function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((json) => {
        setData(json);
        setLoading(false);
      });
  }, [url]);

return { data, loading };
}
```

## Rules of Hooks

1. Only call hooks at the top level
2. Only call hooks from React functions or custom hooks
3. Prefix custom hooks with `use`

## Best Practices

1. One hook per piece of logic
2. Keep hooks small and focused
3. Return arrays for multiple values, objects for named values
4. Test custom hooks with `renderHook`

## Common Mistakes

1. Calling hooks inside conditions or loops
2. Not including all dependencies in effects
3. Naming without `use` prefix breaks linting rules

No changes yet

cancel