Hook naming conventions in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a custom React hook that tracks window width.

React

function [1]() {
  const [width, setWidth] = React.useState(window.innerWidth);
  React.useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  return width;
}

Drag options to blanks, or click blank then click option'

AgetWindowWidth

BWindowWidthHook

CuseWindowWidth

DwindowWidth

Attempts:

3 left

💡 Hint

Common Mistakes

Naming the hook without the 'use' prefix

Using camelCase but missing 'use' at the start

Custom React hooks must start with use to follow naming conventions and enable React to identify them as hooks.

2fill in blank

medium

Complete the code to correctly name a hook that fetches user data.

React

function [1]() {
  const [user, setUser] = React.useState(null);
  React.useEffect(() => {
    fetch('/api/user')
      .then(res => res.json())
      .then(data => setUser(data));
  }, []);
  return user;
}

Drag options to blanks, or click blank then click option'

AfetchUserData

BuseUserData

CgetUser

DUserDataHook

Attempts:

3 left

💡 Hint

Common Mistakes

Using verbs like 'fetch' or 'get' without 'use' prefix

Naming the hook like a regular function

Hooks must start with use. useUserData follows this rule and clearly describes the hook's purpose.

3fill in blank

hard

Fix the error in the hook name to follow React hook naming conventions.

React

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

Drag options to blanks, or click blank then click option'

AuseCount

BCountHook

CcountState

DgetCount

Attempts:

3 left

💡 Hint

Common Mistakes

Naming hooks like regular functions without 'use' prefix

Using camelCase but missing 'use' at the start

The hook name must start with use. useCount is the correct form.

4fill in blank

hard

Fill both blanks to correctly name a hook and its internal state variable.

React

function [1]() {
  const [[2], setValue] = React.useState('');
  return [[2], setValue];
}

Drag options to blanks, or click blank then click option'

AuseInput

BinputValue

Cvalue

DInputHook

Attempts:

3 left

💡 Hint

Common Mistakes

Naming the hook without 'use' prefix

Using generic or unclear state variable names

The hook name must start with use, so useInput is correct. The state variable should be descriptive, like inputValue.

5fill in blank

hard

Fill all three blanks to create a hook that manages a boolean toggle state with proper naming.

React

function [1]() {
  const [[2], [3]] = React.useState(false);
  const toggle = () => [3](![2]);
  return [[2], toggle];
}

Drag options to blanks, or click blank then click option'

AuseToggle

BisOn

CsetIsOn

DtoggleState

Attempts:

3 left

💡 Hint

Common Mistakes

Using inconsistent names for state and setter

Not starting hook name with 'use'

The hook name useToggle follows conventions. The state variable isOn clearly shows a boolean. The setter setIsOn matches the state variable name.

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