React › Custom Hooks

How is a custom hook different from a regular helper function?

Beginner

Answer

A custom hook can use other hooks like useState and useEffect internally, giving it access to a component's state and lifecycle, while a plain helper function cannot use hooks at all. If a function needs to remember values between renders or react to changes, it needs to be a hook and follow the rules of hooks.

// Plain function, no state or hooks involved
function formatPrice(amount) {
  return `$${amount.toFixed(2)}`;
}

// Custom hook, uses state internally
function useCounter() {
  const [count, setCount] = useState(0);
  return { count, increment: () => setCount(count + 1) };
}

Real-world example A team correctly writes formatPrice as a simple helper function since it does not need any state, but writes useCounter as a proper hook since it needs to remember and update a count value over time.

Common follow-ups: What error would you get if you tried to use useState inside a plain helper function?;How do you decide whether a piece of logic should become a custom hook or stay a regular function?

Hooks;Design Patterns in React