What Are Custom Hooks in React and When Should You Write One?

What Are Custom Hooks in React and When Should You Write One?

Custom hooks are where hooks truly click. They let you extract and reuse stateful logic across components. Here is what they are and when to write one.

What a Custom Hook Is

A custom hook is a function whose name starts with 'use', that can call other hooks. It lets you extract component logic into a reusable function. Components and other hooks can call it.

Why They Exist

In class components, reusable stateful logic was hard to share. You used render props or higher-order components, which were clunky. Custom hooks solve this cleanly by letting you extract logic that uses state and effects.

When to Write One

Write a custom hook when the same stateful logic appears in multiple components, or when a component's logic is complex enough that extracting it improves clarity. A useFetch hook, a useForm hook, or a useLocalStorage hook are common examples.

When Not to Write One

Do not write a custom hook for logic that has no state or effects. A pure function that formats a date is a utility function, not a hook. Hooks are for stateful, effectful logic.

The Naming Rule

The name must start with 'use', like useFetch or useTheme. This is not just convention; it lets the hooks lint plugin verify you follow the rules of hooks inside it.

What a Custom Hook Returns

A custom hook can return a value, an array like useState, or an object. Choose what makes the calling code clearest. Arrays are common when there are exactly two related values.

The Takeaway

Custom hooks let you extract and reuse stateful logic. Write one when the same logic appears in multiple components or when extraction improves clarity. Name it starting with 'use', and reserve hooks for stateful logic.