Hook naming conventions in React - Step-by-Step Execution

Concept Flow - Hook naming conventions

Start

↓

Define Hook Function

↓

Name starts with 'use'

Yes No↓

Valid Hook

↓

Use Hook in React Component

↓

React recognizes Hook

↓

Hook works correctly

↓

End

This flow shows how naming a function starting with 'use' lets React recognize it as a Hook, enabling correct behavior.

Execution Sample

React

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

function Counter() {
  const [count, setCount] = useCounter();
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Defines a custom Hook named 'useCounter' and uses it inside a React component to manage count state.

Execution Table

Step	Action	Hook Name Check	Result	React Behavior
1	Define function 'useCounter'	Starts with 'use'	Valid Hook	React will track state inside
2	Call 'useCounter' inside 'Counter' component	Hook name valid	State initialized to 0	React sets up state hook
3	Render 'Counter' component	N/A	Button shows '0'	React renders UI with state
4	Click button to increment	N/A	setCount called with count+1	React re-renders with updated count
5	Render after state update	N/A	Button shows updated count	React updates DOM
6	Rename hook to 'counterHook'	Does NOT start with 'use'	Invalid Hook	React warns or fails to track state
7	Call renamed hook in component	Invalid hook name	State not tracked properly	Hook behavior breaks

💡 Execution stops because React requires hook names to start with 'use' to track state correctly.

Variable Tracker

Variable	Start	After Step 2	After Step 4	After Step 5	After Step 6
count	undefined	0	1	1	undefined
setCount	undefined	function	function	function	undefined
hookNameValid	N/A	true	true	true	false

Key Moments - 2 Insights

Why must custom hooks start with 'use'?

React relies on the 'use' prefix to identify hooks during rendering. Without it, React cannot track hook calls properly, causing errors as shown in steps 6 and 7 of the execution table.

What happens if you call a hook outside a React component?

Hooks must be called only inside React function components or other hooks. Calling them elsewhere breaks React's rules and causes errors, similar to invalid hook names in the execution table.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'count' after step 4?

A 0

B 1

C undefined

D 2

💡 Hint

Check the 'count' variable in variable_tracker after Step 4.

At which step does React detect an invalid hook name?

A Step 2

B Step 4

C Step 6

D Step 3

💡 Hint

Look at the 'Hook Name Check' column in execution_table for invalid names.

If the hook was named 'useCustomCounter', how would the execution table change?

A React would treat it as a valid hook and track state correctly.

B React would treat it as invalid and throw an error.

C The hook would not be called at all.

D The component would not render.

💡 Hint

Hooks must start with 'use' to be valid, see steps 1 and 6 in execution_table.

Concept Snapshot

Hook Naming Conventions in React:
- Custom hooks must start with 'use'
- This naming lets React track hook calls
- Hooks manage state or effects inside components
- Invalid names cause React to fail tracking
- Always name hooks like 'useSomething'
- Use hooks only inside React function components

Full Transcript

In React, hooks are special functions that let you use state and other React features. For React to recognize a function as a hook, its name must start with 'use'. This naming rule helps React track hook calls during rendering. For example, a custom hook named 'useCounter' works correctly and React manages its state. If you rename it to 'counterHook' without the 'use' prefix, React will not recognize it as a hook, causing errors or unexpected behavior. Hooks must also be called only inside React function components or other hooks. This ensures React can maintain the correct state and lifecycle. Remember, always start your custom hook names with 'use' to follow React's rules and keep your app working smoothly.