Custom hooks
📚 What are Custom Hooks? A custom hook is a regular JavaScript function that starts with 'use' and calls built-in React hooks inside it. Custom hooks let you EXTRACT and REUSE stateful logic across multiple components -- without duplicating code. If two components share the same useEffect + useSta…
Appy Says…
State logic that you copy between components is a sign it should be a custom hook. Custom hooks let you extract useState + useEffect patterns into reusable functions — no components needed, just clean logic that any component can use.
What is a Custom Hook?
A custom hook is a JavaScript function whose name starts with use and that calls other hooks internally. It extracts stateful logic for reuse.
- •Must start with 'use':
function useWindowSize() { ... } - •Can call any other hooks (useState, useEffect, useRef, etc.)
- •Returns whatever is useful: state values, functions, derived data
- •No special API — just a function that follows hook rules
- •Each component using the hook gets its own isolated state
- •Common examples: useLocalStorage, useDebounce, useFetch, useWindowSize, useMediaQuery
Think of it like a reusable Roblox module script
In Roblox, module scripts let you define logic once and require it in multiple server scripts. Custom hooks are React's module scripts — write the logic once, import into any component, each gets its own isolated instance.
How It Works
- •1. Extract repeated logic into a function starting with 'use'
- •2. Move related useState + useEffect calls inside
- •3. Return the values/functions the component needs
- •4. Component:
const { width, height } = useWindowSize(); - •5. Two components using the same hook get independent state instances
- •6. Custom hooks can use other custom hooks — composition all the way down
Real-World Examples
- •
useLocalStorage('theme', 'light')— state that persists to localStorage - •
useDebounce(searchQuery, 300)— delays API call until typing stops - •
useFetch('/api/user')— returns { data, loading, error } - •
useMediaQuery('(max-width: 768px)')— returns boolean for responsive logic - •Applaa:
useAppyBuddy()abstracts AI tutor connection + message state
Key Facts
- •Custom hooks are the primary code reuse mechanism in modern React (replacing HOCs and render props)
- •The React docs call them 'a mechanism to reuse stateful logic, not state itself'
- •Popular hook libraries: react-use (100+ hooks), @tanstack/react-query, SWR
- •Custom hooks can be published to npm — many popular libraries are just collections of hooks
Watch Out!
Don't extract too eagerly — a hook with only one line of logic isn't worth the abstraction. Extract when: (a) the same useState+useEffect pattern appears in 2+ components, or (b) the logic is complex enough to benefit from being named and isolated.
Remember
Name starts with 'use', calls other hooks inside, returns values/functions. Each component using the hook gets its own state. Extract repeated logic to a custom hook when it appears in 2+ components.
What You Learned
- •Custom hooks: functions starting with 'use' that extract reusable stateful logic
- •Each component using a hook gets independent state; hooks can compose other hooks
- •Unlocks: eliminating copy-paste logic, building your own hook library, clean reusable stateful logic
Key Facts
- →Custom hooks are the primary code reuse mechanism in modern React (replacing HOCs and render props)
- →The React docs call them 'a mechanism to reuse stateful logic, not state itself'
- →Popular hook libraries: react-use (100+ hooks), @tanstack/react-query, SWR
- →Custom hooks can be published to npm — many popular libraries are just collections of hooks
Real-World Examples
Remember
Name starts with 'use', calls other hooks inside, returns values/functions. Each component using the hook gets its own state. Extract repeated logic to a custom hook when it appears in 2+ components.
Quick Quiz
Custom hook name usually starts with?