Custom Hooks vs Utility Functions: How to Choose in React

Custom Hooks vs Utility Functions: How to Choose in React

Custom hooks and utility functions both let you reuse logic, but they suit different cases. Choosing wrong creates unnecessary complexity. Here is how to choose.

What a Utility Function Is

A utility function is a plain function that takes inputs and returns outputs, with no state or side effects. It does not use hooks. Examples: formatting a date, sorting an array, calculating a total.

What a Custom Hook Is

A custom hook is a function starting with 'use' that uses React hooks internally, so it involves state or effects. Examples: useFetch, useLocalStorage, useForm.

The Decision

If the logic uses state or effects, it is a custom hook. If it is pure, taking inputs and returning outputs with no hooks, it is a utility function.

Why the Difference Matters

Utility functions are simpler. They can be used anywhere, even outside React. Custom hooks are tied to React's rules and can only be called from components or other hooks. Using a hook where a utility would do adds unnecessary constraints.

Examples

Formatting a price is a utility function. Managing form state with validation is a custom hook. Fetching data with loading and error is a custom hook. Sorting a list is a utility function.

The Common Mistake

Wrapping pure logic in a custom hook just to feel modern. This adds the rules of hooks for no benefit and makes the logic harder to test and reuse outside React.

The Takeaway

Use utility functions for pure logic with no state or effects. Use custom hooks for logic that uses state or effects. The presence of hooks is the deciding factor, not whether the logic is reused.