Hook naming conventions in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

Why must React hooks start with the word use?

React requires hooks to start with use so it can identify them as hooks and apply the rules of hooks correctly during rendering.

beginner

What is a good naming practice for custom hooks in React?

Custom hooks should start with use followed by a descriptive name that explains what the hook does, like useFetchData or useToggle.

intermediate

Can you name a hook that does NOT follow the naming convention and explain why it is a problem?

A hook named fetchData without the use prefix breaks the naming convention. React won't recognize it as a hook, which can cause bugs or warnings.

intermediate

What happens if you call a hook inside a regular JavaScript function that does not start with use?

React's Rules of Hooks require hooks to be called only at the top level of React function components or custom hooks. Calling hooks from regular JavaScript functions can break the rules of hooks and cause errors or unexpected behavior.

beginner

How does following hook naming conventions help your React app?

It helps React detect hooks automatically, enforces rules to avoid bugs, and makes your code easier to read and maintain by other developers.

Which of these is a valid React hook name?

A useDataFetch

B fetchDataHook

C getData

D dataUse

Hooks must start with 'use' to be recognized by React. 'useDataFetch' follows this rule.

Why should custom hooks start with 'use'?

A So React can apply hook rules and track their calls

B To make them look like regular functions

C To make them longer names

D To avoid naming conflicts with variables

React uses the 'use' prefix to identify hooks and enforce rules like calling hooks only at the top level.

What is a consequence of not following hook naming conventions?

A The app will run faster

B React will automatically fix the name

C Hooks might not work properly or cause errors

D There is no consequence

React relies on naming conventions to detect hooks. Breaking them can cause bugs or warnings.

Which of these is NOT a valid hook name?

A useToggle

B toggleUse

C useFetch

D useCounter

'toggleUse' does not start with 'use' and so is not a valid hook name.

Where should hooks be called in React components?

A Inside loops or conditions

B Inside regular JavaScript functions

C Anywhere in the code

D Only at the top level of React function components

Hooks must be called at the top level of React function components (or custom hooks) to follow the rules of hooks.

Explain why React hooks must start with 'use' and how this affects your code.

Think about how React knows which functions are hooks.

Describe best practices for naming custom hooks in React.

Consider how you would name a function that fetches data or toggles a value.

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