Why custom hooks are used in React - Visual Breakdown

Concept Flow - Why custom hooks are used

Write logic in component

↓

Notice repeated logic

↓

Extract logic into custom hook

↓

Use custom hook in multiple components

↓

Share stateful logic cleanly

↓

Simplify components and reuse code

This flow shows how repeated logic in components is extracted into a custom hook, which is then reused to share stateful logic cleanly.

Execution Sample

React

import { useState } from 'react';

function useCounter() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(c => c + 1);
  return { count, increment };
}

function Counter() {
  const { count, increment } = useCounter();
  return <button onClick={increment}>{count}</button>;
}

This code defines a custom hook useCounter to manage count state and increment logic, then uses it inside a Counter component.

Execution Table

Step	Action	State Before	State After	Component Rendered	Output
1	Call useCounter inside Counter	No count state	count=0	Counter	<button>0</button>
2	User clicks button	count=0	count=1	Counter	<button>1</button>
3	User clicks button again	count=1	count=2	Counter	<button>2</button>
4	Another component uses useCounter	No count state	count=0	AnotherComponent	Initial count 0
5	User clicks button in AnotherComponent	count=0	count=1	AnotherComponent	Count 1
6	No more clicks	count=1	count=1	No re-render	Output stable
7	Exit	N/A	N/A	N/A	User stops interaction

💡 User stops interacting, no further state changes or renders

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
count (Counter)	undefined	0	1	2	2
count (AnotherComponent)	undefined	undefined	undefined	undefined	1

Key Moments - 2 Insights

Why do we extract logic into a custom hook instead of copying it into each component?

Extracting into a custom hook lets us reuse the same logic easily and keeps components simpler, as shown in execution_table rows 1 and 4 where different components use the same hook.

Does each component using the custom hook share the same state?

No, each call to the custom hook creates independent state, as seen in variable_tracker where count in Counter and AnotherComponent are separate.

Visual Quiz - 3 Questions

Look at the execution_table at step 3, what is the count value in the Counter component?

A 0

B 1

C 2

D Undefined

💡 Hint

Check the 'State After' column for step 3 in execution_table

At which step does AnotherComponent first have count state initialized?

A Step 2

B Step 4

C Step 5

D Step 1

💡 Hint

Look for when AnotherComponent calls useCounter in execution_table

If we did not use a custom hook and copied logic into each component, what would change in variable_tracker?

A count variables would still be independent but code would be duplicated

B count variables would be shared between components

C count variables would not exist

D count variables would be global

💡 Hint

Recall that custom hooks help reuse logic but each component keeps its own state as shown in variable_tracker

Concept Snapshot

Custom hooks let you extract and reuse stateful logic across components.
They keep components simple and avoid code duplication.
Each use of a custom hook has its own independent state.
Use them to share behavior, not state.
Syntax: function useMyHook() { const [state, setState] = useState(); ... return {...}; }

Full Transcript

Custom hooks in React are functions that let you reuse stateful logic across multiple components. Instead of copying the same code into each component, you extract it into a custom hook. Each component calling the hook gets its own independent state. This keeps components simpler and your code DRY (Don't Repeat Yourself). For example, a useCounter hook manages count state and increment logic. When used in different components, each has its own count. The execution table shows how state changes on button clicks and how components re-render. Key points are that custom hooks share logic, not state, and help organize code better.