Hook naming conventions in React - Mini Project: Build & Apply

Hook Naming Conventions in React

📖 Scenario: You are building a simple React component that uses hooks to manage state and effects. To keep your code clear and follow React best practices, you need to name your hooks correctly.

🎯 Goal: Create a React functional component that uses hooks with proper naming conventions. You will define a state hook and an effect hook, each named following React's rules.

📋 What You'll Learn

Create a state hook with a name starting with use

Create an effect hook using useEffect

Name the custom hook function starting with use

Use functional component syntax with hooks

💡 Why This Matters

🌍 Real World

Naming hooks correctly helps React identify them and enables tools to work properly. It also makes code easier to read and maintain.

💼 Career

Understanding hook naming conventions is essential for React developers to write clean, reusable, and bug-free components.

1

Create a custom hook function

Create a custom hook function called useCounter that returns a number 0.

React

# Create a function called useCounter that returns 0
# Your code here

Hint

Custom hooks must start with use and be functions.

2

Add a state hook inside the custom hook

Inside the useCounter function, create a state hook using useState with initial value 0. Name the state variable count and the setter setCount.

React

function useCounter() {
  // Use useState to create count and setCount
  // Your code here
}

Hint

Use const [count, setCount] = useState(0) inside the function.

3

Create a functional component using the custom hook

Create a React functional component called CounterDisplay that calls the useCounter hook and stores its result in a variable named count.

React

import { useState } from 'react';

function useCounter() {
  const [count, setCount] = useState(0);
  return count;
}

// Create CounterDisplay component
// Your code here

Hint

Define function CounterDisplay() and call useCounter() inside it.

4

Add an effect hook inside the component

Inside the CounterDisplay component, add a useEffect hook that runs once on mount. Use an empty dependency array []. The effect function can be empty.

React

import { useState, useEffect } from 'react';

function useCounter() {
  const [count, setCount] = useState(0);
  return count;
}

function CounterDisplay() {
  const count = useCounter();
  // Add useEffect hook here
  // Your code here
  return null;
}

Hint

Use useEffect(() => { }, []) inside the component.

Practice

1. Which of the following is the correct way to name a custom React hook?

easy

A. fetchDataHook

B. Usefetchdata

C. useFetchData

D. fetch_data

Solution

1. Step 1: Check the hook prefix

   React hooks must start with the word use to be recognized as hooks.

2. Step 2: Verify camelCase naming

   After use, the name should be camelCase for readability, like useFetchData.

3. Final Answer:

   useFetchData -> Option C

4. Quick Check:

   Hook names start with 'use' + camelCase [OK]

Hint: Hook names always start with 'use' and use camelCase [OK]

Common Mistakes:

• Not starting the name with 'use'
• Using underscores or all lowercase
• Capitalizing the first letter after 'use'

2. Which of these is a syntax error when naming a React hook?

easy

A. useDataLoader

B. use_data_loader

C. useDataLoaderHook

D. useData

Solution

1. Step 1: Identify invalid characters in hook names

   React hook names cannot contain underscores; they must use camelCase after 'use'.

2. Step 2: Check each option for syntax correctness

   use_data_loader uses underscores which is invalid syntax for hook names.

3. Final Answer:

   use_data_loader -> Option B

4. Quick Check:

   Underscores are not allowed in hook names [OK]

Hint: Avoid underscores; use camelCase after 'use' [OK]

Common Mistakes:

• Using underscores in hook names
• Starting hook names with uppercase 'Use'
• Adding spaces or special characters

3. What will happen if you name a custom hook as fetchData instead of useFetchData?

medium

A. React will automatically rename it to start with 'use'

B. React will throw a syntax error

C. The hook will work normally without issues

D. React will treat it as a normal function, not a hook

Solution

1. Step 1: Understand React hook naming rules

   React identifies hooks by names starting with 'use'. If it doesn't start with 'use', React treats it as a normal function.

2. Step 2: Analyze the effect of naming it 'fetchData'

   Since 'fetchData' does not start with 'use', React will not recognize it as a hook and will not apply hook rules.

3. Final Answer:

   React will treat it as a normal function, not a hook -> Option D

4. Quick Check:

   Hook names must start with 'use' to be recognized [OK]

Hint: Hooks must start with 'use' or React ignores them [OK]

Common Mistakes:

• Assuming any function can be a hook
• Expecting React to auto-fix hook names
• Confusing hook naming with component naming

4. Identify the error in this hook name: UseDataFetch

medium

A. Hook names must start with lowercase 'use', not uppercase 'Use'

B. Hook names must be all lowercase

C. Hook names cannot contain the word 'Data'

D. Hook names must end with 'Hook'

Solution

1. Step 1: Check the hook prefix case sensitivity

   React requires hooks to start with lowercase 'use' exactly, not uppercase 'Use'.

2. Step 2: Analyze the given name

   The name 'UseDataFetch' starts with uppercase 'U', which breaks the naming convention and causes React not to recognize it as a hook.

3. Final Answer:

   Hook names must start with lowercase 'use', not uppercase 'Use' -> Option A

4. Quick Check:

   Hook prefix 'use' is case-sensitive and must be lowercase [OK]

Hint: Hook prefix 'use' must be lowercase exactly [OK]

Common Mistakes:

• Capitalizing the 'U' in 'use'
• Adding unnecessary suffixes like 'Hook'
• Thinking hook names must be all lowercase

5. You want to create a custom hook that fetches user info and caches it. Which name best follows React hook naming conventions and clearly describes its purpose?

hard

A. useUserInfoCache

B. userInfoCacheHook

C. use_user_info_cache

D. UseUserInfoCache

Solution

1. Step 1: Confirm the hook prefix and casing

   The name must start with lowercase 'use' and use camelCase for readability.

2. Step 2: Evaluate each option for clarity and correctness

   useUserInfoCache, 'useUserInfoCache', starts with 'use', uses camelCase, and clearly describes the hook's purpose.

3. Final Answer:

   useUserInfoCache -> Option A

4. Quick Check:

   Clear, camelCase, and starts with 'use' [OK]

Hint: Start with 'use' + camelCase + clear purpose [OK]

Common Mistakes:

• Using underscores instead of camelCase
• Starting with uppercase 'Use'
• Omitting the 'use' prefix