Extracting Reusable Business Logic into Custom Hooks0%
Building Practical Custom Hooks (useLocalStorage, useDebounce)

Extracting Reusable Business Logic into Custom Hooks

Beginner12 min read•Updated: Jul 11, 2026
Study MaterialsCheatsheet

Extracting Reusable Business Logic into Custom Hooks

1. What Are Custom Hooks?

In early React, sharing stateful logic between components required complex patterns like Higher-Order Components (HOCs) or Render Props.

A Custom Hook is simply a JavaScript function whose name starts with use and that can call other React hooks (useState, useEffect, useRef, etc.).

Custom hooks allow you to extract component logic into reusable functions:

  • Components focus purely on presentation and user interface.
  • Custom hooks encapsulate state, network requests, and business rules.
Output
Component:
[Focus on JSX, Layout, CSS, and UI Controls]
│
▼ calls custom hook: const { isOnline } = useOnlineStatus();
Custom Hook (useOnlineStatus):
[Encapsulates useState, useEffect, window event listeners]

2. The Naming Convention Rule

A custom hook must start with the lowercase word use (e.g., useAuth, useWindowSize, useFetch):

  • React's ESLint plugin uses this naming prefix to automatically enforce the Rules of Hooks inside your custom function (ensuring hooks aren't called conditionally or in loops).
  • If you omit the use prefix, React will treat it as a standard function and will not warn you when hook violations occur.

3. Extracting a Window Dimensions Hook

Consider how multiple components (carousels, responsive charts, navigation drawers) need to know the browser's viewport width:

Without Custom Hook:

Every component duplicates 15 lines of useState, useEffect, and resize event listeners.

With Custom Hook (useWindowSize):

JavaScript
// src/hooks/useWindowSize.js
import { useState, useEffect } from 'react';
 
export function useWindowSize() {
const [windowSize, setWindowSize] = useState({
width: typeof window !== 'undefined' ? window.innerWidth : 1200,
height: typeof window !== 'undefined' ? window.innerHeight : 800
});
 
useEffect(() => {
const handleResize = () => {
setWindowSize({
width: window.innerWidth,
height: window.innerHeight
});
};
 
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
 
return windowSize;
}

Clean Consumer Component:

JSX
// src/components/ResponsiveDashboard.jsx
import React from 'react';
import { useWindowSize } from '../hooks/useWindowSize';
 
export default function ResponsiveDashboard() {
const { width } = useWindowSize(); // 1 clean line of code!
 
const isMobile = width < 768;
 
return (
<div>
{isMobile ? <MobileNavigation /> : <DesktopSidebar />}
</div>
);
}

4. Do Components Using the Same Custom Hook Share State?

*No! Custom Hooks share stateful logic, NOT state itself!*

Each call to a custom hook creates a completely independent container of state. If Component A and Component B both call useWindowSize(), each component has its own private windowSize state in React's Fiber tree. (If you want components to share the exact same state instance, combine the custom hook with React Context).

Interactive Quiz

Practice Quiz

Question 1
What prefix must all custom React hooks begin with?
Question 2
Do two components that call the same custom hook share the exact same state values?
Question 3
What can a custom hook return?
Question 4
Which of the following is a primary architectural benefit of extracting custom hooks?
Question 5
Can a custom hook invoke other built-in React hooks like useState and useEffect?
Next Lesson

Building Practical Custom Hooks (useLocalStorage, useDebounce)

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
The useMemo Hook and Expensive ComputationsBuilding Practical Custom Hooks (useLocalStorage, useDebounce)

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext