What are custom hooks?

Question

Accepted Answer

Custom hooks are **your own functions that use built-in React hooks** and allow reusing logic between components. **Simple analogy:** Imagine you are a chef and often make béchamel sauce. Instead of doing it from scratch every time: melt butter, add flour, pour milk, stir — you just say: "Make béchamel sauce!" (calling a custom hook). **Example 1: useAuth (authorization check)** ```jsx import { useState, useEffect } from 'react'; function useAuth() { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { fetch('/api/me') .then(res => res.json()) .then(setUser) .finally(() => setLoading(false)); }, []); return { user, loading, isAuth: !!user }; } }; // Usage in any component function Profile() { const { user, loading } = useAuth(); if (loading) return ; return

Hello, {user.name}!

; } ``` **Example 2: useWindowSize (window size)** ```jsx function useWindowSize() { const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight }); useEffect(() => { const handler = () => setSize({ width: window.innerWidth, height: window.innerHeight }); window.addEventListener('resize', handler); return () => window.removeEventListener('resize', handler); }, []); return size; } ``` **Custom hook rules:** 1. Name must start with "use" (useAuth, useFetch, useDebounce). 2. Can use any built-in hooks (useState, useEffect, etc.). 3. Do NOT call hooks in conditions or loops (same rules apply).

React: What are custom hooks?