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.