{isMobile ? (

You are on a mobile device

) : (

You are on a desktop device

)}

) } `})}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsx)(e.h2,{children:"Why Custom Hooks?"}),` `,(0,n.jsxs)(e.p,{children:["Hooks like ",(0,n.jsx)(e.code,{children:"useState"}),", ",(0,n.jsx)(e.code,{children:"useEffect"}),", and ",(0,n.jsx)(e.code,{children:"useRef"})," give you power, but custom hooks give you structure."]}),` `,(0,n.jsx)(e.p,{children:"You can think of a custom hook as a dedicated block of logic or a shared source for a resource. Instead of stuffing everything into a component, pull logic into a dedicated function. You can test it, reuse it, and reason about it independently."}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsx)(e.h3,{children:"Before: The Bloated Component"}),` `,(0,n.jsx)(e.p,{children:"When logic is spread across multiple components, it can become hard to reason about and maintain. This component is a prime example of blending business logic with presentation logic, obscuring the true purpose of the component."}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-tsx",children:`import { useState, useEffect } from 'react' /** * Fetches a user from the API and returns the user data * @param {string} id - The ID of the user to fetch * @returns {Object} - The user data */ function UserCard({ id }) { const [user, setUser] = useState(null) const [loading, setLoading] = useState(true) const [error, setError] = useState(null) useEffect(() => { setLoading(true) fetch(\`/api/users/\${id}\`) .then((res) => res.json()) .then((data) => { setUser(data) setLoading(false) }) .catch((err) => { if (err.name === 'AbortError') return // Don't set error for cancelled requests setError(err instanceof Error ? err : new Error('Failed to fetch user')) setLoading(false) }) }, [id, setUser, setLoading, setError]) if (loading) return

Loading\u2026

if (error) return

Error!

return

{user.name}

} `})}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsx)(e.h3,{children:"After: Split the Logic"}),` `,(0,n.jsx)(e.p,{children:"Utilizing a custom hook, we can separate the logic from the presentation, making the component more focused and easier to maintain and extend:"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-tsx",children:`import { useState, useEffect } from 'react' interface User { id: string name: string } interface UseUserResult { user: User | null loading: boolean error: Error | null } /** * Fetches a user from the API and returns the user data * @param {string} id - The ID of the user to fetch * @returns {UseUserResult} - The user data */ function useUser(id: string): UseUserResult { const [user, setUser] = useState(null) const [loading, setLoading] = useState(true) const [error, setError] = useState(null) useEffect(() => { if (!id) { setError(new Error('ID is required')) setLoading(false) return } let isMounted = true const controller = new AbortController() const signal = controller.signal const fetchData = async () => { try { const response = await fetch(\`/api/users/\${id}\`, { signal }) if (!response.ok) { throw new Error('Failed to fetch user') } const data = await response.json() if (isMounted) { setUser(data) setLoading(false) setError(null) } } catch (err) { if (isMounted) { setError(err instanceof Error ? err : new Error('Unknown error')) setLoading(false) } } } fetchData() return () => { isMounted = false controller.abort() } }, [id, setUser, setLoading, setError]) return { user, loading, error } } /** * Displays a user card * @param {string} id - The ID of the user to display */ function UserCard({ id }) { // all logic is abstracted away into the custom hook, leaving the component simple and declarative const { user, loading, error } = useUser(id) if (loading) return

Loading\u2026

if (error) return

Error!

return

{user.name}

} `})}),` `,(0,n.jsx)(e.h3,{children:"Custom Hooks Encourage Separation of Concerns"}),` `,(0,n.jsx)(e.p,{children:"By moving logic into hooks:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"UI components stay small and declarative"}),` `,(0,n.jsx)(e.li,{children:"Logic becomes reusable and testable"}),` `,(0,n.jsx)(e.li,{children:"Teams can move faster with clearer boundaries"}),` `]}),` `,(0,n.jsx)(e.p,{children:"Some common examples:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Fetching data"}),": ",(0,n.jsx)(e.code,{children:"usePost"}),", ",(0,n.jsx)(e.code,{children:"useProducts"})]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Form logic"}),": ",(0,n.jsx)(e.code,{children:"useForm"}),", ",(0,n.jsx)(e.code,{children:"useValidation"})]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"DOM behavior"}),": ",(0,n.jsx)(e.code,{children:"useClickOutside"}),", ",(0,n.jsx)(e.code,{children:"useScrollLock"})]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"User Interaction"}),": ",(0,n.jsx)(e.code,{children:"useThrottle"}),", ",(0,n.jsx)(e.code,{children:"useDebounce"})]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Animation state"}),": ",(0,n.jsx)(e.code,{children:"useToggle"}),", ",(0,n.jsx)(e.code,{children:"useTimeout"})]}),` `]}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsx)(e.h3,{children:"Bonus: Hooks Compose Easily"}),` `,(0,n.jsxs)(e.p,{children:["Hooks can use other hooks. That means you can compose higher-level behavior without duplication. Here, we're using ",(0,n.jsx)(e.code,{children:"useUser"})," and ",(0,n.jsx)(e.code,{children:"usePostsByUser"})," to create a new hook that combines user and posts data into a single object:"]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-tsx",children:`interface UseUserWithPostsResult { user: User | null posts: Post[] loading: boolean } /** * Combines user and posts data into a single object * @param {string} userId - The ID of the user to fetch * @returns {UseUserWithPostsResult} - The user and posts data */ const useUserWithPosts = (userId): UseUserWithPostsResult => { const { user, loading: loadingUser } = useUser(userId) const { posts, loading: loadingPosts } = usePostsByUser(userId) return { user, posts, loading: loadingUser || loadingPosts, } } `})}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsx)(e.h2,{children:"Best Practices for Custom Hooks"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Create a custom hook"})," when logic is reused or your component starts handling multiple concerns."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:["Use clear, descriptive names that begin with ",(0,n.jsx)(e.code,{children:"use"})]}),", like ",(0,n.jsx)(e.code,{children:"useForm"}),", ",(0,n.jsx)(e.code,{children:"useFetch"}),", or ",(0,n.jsx)(e.code,{children:"useIsMobile"}),"."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsxs)(e.strong,{children:["Follow the ",(0,n.jsx)(e.a,{href:"https://reactjs.org/docs/hooks-rules.html",children:"Rules of Hooks"})]}),": only call hooks at the top level, and only inside function components or other hooks."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Keep hooks focused"}),": Each custom hook should ideally handle one piece of logic or functionality. This makes them easier to test and reuse."]}),` `]}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsx)(e.h2,{children:"Testing Custom Hooks"}),` `,(0,n.jsx)(e.p,{children:"Custom hooks are also easy to test. Here, we'll use Vitest and the React Testing Library. The following defines and tests a custom hook that increments a counter:"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-tsx",children:`import { useState } from 'react' import { renderHook, act } from '@testing-library/react' import { describe, it, expect } from 'vitest' /** * A simple counter hook to manage the state of a numeric counter * @returns {Object} - The current count and functions to manipulate it */ const useCounter = () => { const [count, setCount] = useState(0) const increment = () => { if (count >= 100) return setCount((c) => c + 1) } const decrement = () => { if (count <= 0) return setCount((c) => c - 1) } const reset = () => setCount(0) return { count, increment, decrement, reset } } describe('useCounter', () => { it('increments count', () => { const { result } = renderHook(() => useCounter()) expect(result.current.count).toBe(0) act(() => { result.current.increment() }) expect(result.current.count).toBe(1) }) }) `})}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsx)(e.h2,{children:"Final Thoughts"}),` `,(0,n.jsxs)(e.p,{children:["Custom hooks are more than a code organization trick; they're a ",(0,n.jsx)(e.strong,{children:"scaling strategy"}),"."]}),` `,(0,n.jsx)(e.p,{children:"They can:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"Enforce separation of concerns"}),` `,(0,n.jsx)(e.li,{children:"Improve readability"}),` `,(0,n.jsx)(e.li,{children:"Reduce duplication"}),` `]}),` `,(0,n.jsx)(e.p,{children:"If your React components are starting to feel bloated or tangled, that can be a signal that it's time to reach for a hook to give your logic a home of its own."})]})}function y(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(d,o)})):d(o)}var U=y;return v(E);})(); ;return Component;

Custom Hooks: A Key to Clean and Scalable React Code