How to Use Custom Hook in React: Simple Guide with Example

In React, you use a custom hook by defining a function that starts with use and contains reusable logic using built-in hooks. Then, you call this custom hook inside your functional components just like any other hook to share stateful logic.

Syntax

A custom hook is a JavaScript function whose name starts with use. It can call other hooks inside it and returns values or functions to be used in components.

Example parts:

• function useCustomHook() { ... }: defines the custom hook.
• Inside, use React hooks like useState or useEffect to manage logic.
• Return any data or functions needed by components.
• Call useCustomHook() inside a React functional component.

jsx

function useCustomHook() {
  const [value, setValue] = React.useState(0);
  // logic here
  return [value, setValue];
}

function MyComponent() {
  const [value, setValue] = useCustomHook();
  return <button onClick={() => setValue(value + 1)}>{value}</button>;
}

Example

This example shows a custom hook useCounter that manages a counter state. The component uses it to display and update the count.

jsx

import React, { useState } from 'react';

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

export default function Counter() {
  const { count, increment, decrement } = useCounter(5);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increase</button>
      <button onClick={decrement}>Decrease</button>
    </div>
  );
}

Output

Count: 5
[Increase] [Decrease]

Common Pitfalls

Common mistakes when using custom hooks include:

• Not starting the function name with use, which breaks React's rules of hooks.
• Calling hooks conditionally inside the custom hook, which can cause errors.
• Using custom hooks outside React functional components or other hooks.
• Not returning useful values or functions from the custom hook.

jsx

/* Wrong: hook name does not start with 'use' */
function counterHook() {
  const [count, setCount] = React.useState(0);
  return [count, setCount];
}

/* Right: hook name starts with 'use' */
function useCounter() {
  const [count, setCount] = React.useState(0);
  return [count, setCount];
}

Quick Reference

Remember these tips when using custom hooks:

• Always start the hook name with use.
• Use built-in hooks inside your custom hook to manage state or effects.
• Return only what components need to keep the API clean.
• Call custom hooks only inside React functional components or other hooks.

Key Takeaways

Custom hooks are functions starting with 'use' that let you reuse React logic.

Call custom hooks inside functional components to share state or effects.

Avoid conditional hook calls inside custom hooks to follow React rules.

Return only necessary data or functions from your custom hook for clarity.

Use custom hooks to keep components clean and logic reusable.