📝 What Are Custom Hook Naming Conventions?
A Custom Hook is simply a JavaScript function that follows React's Hook conventions. One of the most important conventions is its name. Every custom Hook must begin with the word use, making it immediately recognizable as a Hook to both React and other developers.
Important
🎯 Why Naming Conventions Matter
Consistent naming improves readability, makes code easier to maintain, and clearly communicates that a function contains Hook logic. Developers can instantly recognize that the function manages state, effects, or other React behavior.
- Clearly identifies custom Hooks.
- Supports the Rules of Hooks.
- Improves code readability.
- Makes reusable logic easier to discover.
📋 Basic Naming Rules
| Rule | Description |
|---|---|
| Start with use | Every custom Hook name must begin with use. |
| Use Pascal-style suffixes | Combine use with a descriptive name such as useCounter. |
| Be descriptive | The name should explain the Hook's responsibility. |
| One responsibility | Name the Hook after its primary purpose. |
🔄 Naming Process
💻 Example 1: Correct Naming
Well-Named Custom Hooks
function useCounter() {
// Counter logic
}
function useWindowSize() {
// Window size logic
}
function useOnlineStatus() {
// Network status logic
}Each Hook starts with use and clearly describes the logic it provides.
💻 Example 2: Incorrect Naming
Poor Hook Names
function counter() {
// ❌ Missing "use" prefix
}
function getWindowSize() {
// ❌ Looks like a utility function
}
function helper() {
// ❌ Name provides no meaning
}These functions do not follow React's naming convention and may confuse developers or violate the Rules of Hooks.
💻 Example 3: Descriptive Hook Names
Meaningful Naming
function useTheme() {}
function useLocalStorage() {}
function useFetch() {}
function useAuth() {}
function useFormValidation() {}Good Hook names immediately communicate their purpose without requiring developers to inspect their implementation.
📊 Good Names vs Poor Names
| Good Names | Poor Names |
|---|---|
| useCounter | counter |
| useWindowSize | window |
| useTheme | themeHelper |
| useOnlineStatus | status |
📅 Naming Workflow
Identify the reusable logic.
Select a descriptive name.
Add the use prefix.
Implement the custom Hook.
Reuse the Hook throughout the application.
🎯 Common Naming Patterns
Examples include useCounter, useToggle, and useTheme.
Examples include useWindowSize, useGeolocation, and useOnlineStatus.
Examples include useFetch, useUser, and useProducts.
Examples include useLocalStorage, useDebounce, and useClipboard.
⚠️ Common Mistakes
- Omitting the use prefix.
- Using vague names such as helper or utils.
- Naming Hooks after multiple unrelated responsibilities.
- Using names that resemble ordinary utility functions.
Warning
✅ Best Practices
- Always begin custom Hook names with use.
- Choose names that describe the Hook's primary responsibility.
- Keep Hook names concise and meaningful.
- Follow consistent naming patterns throughout the project.
- Avoid abbreviations unless they are widely understood.
📚 Official Resource
Learn more about custom Hook naming and the Rules of Hooks in the official React documentation at Reusing Logic with Custom Hooks.