10. Custom Hooks Architecture: Reusable Business Logic & Headless Component Design • React.js 18+ Architecture: Core Fiber to Enterprise Scale • Rishabh Ki Kaksha

Custom Hook ek normal JavaScript function hai jiska naam **`use` se start hota hai** (`useDebounce`, `useAuth`) aur jo apne andar doosre React hooks (`useState`, `useEffect`, `useRef`) ko call kar sakta hai.

**Staff Engineer Principle:**
> UI aur Business Logic ko hamesha alag rakho! Component sirf JSX render karega, saara state, API call aur event logic **Custom Hook** ke andar band hoga!

---

### 2. Production Custom Hook 1: `useDebounce<T>` (Search Optimization ⚡)

```typescript
import { useState, useEffect } from "react";

export function useDebounce<T>(value: T, delay: number = 300): T {
    const [debouncedValue, setDebouncedValue] = useState<T>(value);

useEffect(() => {
        const timer = setTimeout(() => setDebouncedValue(value), delay);
        return () => clearTimeout(timer); // Cleanup on fast typing!
    }, [value, delay]);

return debouncedValue;
}

// Usage in Search Component:
function SearchBox() {
    const [query, setQuery] = useState("");
    const debouncedQuery = useDebounce(query, 500);

useEffect(() => {
        if (debouncedQuery) api.search(debouncedQuery);
    }, [debouncedQuery]);
}
```

---

### 3. Production Custom Hook 2: `useLocalStorage<T>` (Synchronized Storage)

```typescript
import { useState, useEffect } from "react";

export function useLocalStorage<T>(key: string, initialValue: T): [T, (val: T | ((prev: T) => T)) => void] {
    const [storedValue, setStoredValue] = useState<T>(() => {
        try {
            const item = window.localStorage.getItem(key);
            return item ? JSON.parse(item) : initialValue;
        } catch (error) {
            return initialValue;
        }
    });

const setValue = (val: T | ((prev: T) => T)) => {
        const valueToStore = val instanceof Function ? val(storedValue) : val;
        setStoredValue(valueToStore);
        window.localStorage.setItem(key, JSON.stringify(valueToStore));
    };

return [storedValue, setValue];
}
```

---

### 4. Production Custom Hook 3: `useOnClickOutside` (Modals & Dropdowns)

```typescript
import { useEffect, RefObject } from "react";

export function useOnClickOutside<T extends HTMLElement = HTMLElement>(
    ref: RefObject<T>,
    handler: (event: MouseEvent | TouchEvent) => void
) {
    useEffect(() => {
        const listener = (event: MouseEvent | TouchEvent) => {
            const el = ref?.current;
            if (!el || el.contains((event?.target as Node) || null)) {
                return;
            }
            handler(event);
        };

document.addEventListener("mousedown", listener);
        document.addEventListener("touchstart", listener);
        return () => {
            document.removeEventListener("mousedown", listener);
            document.removeEventListener("touchstart", listener);
        };
    }, [ref, handler]);
}
```

---

### 5. Headless Component Architecture (Radix UI / TanStack Pattern 👑)

Headless pattern me library developer sirf **State & Keyboard Accessibility hooks** deta hai, koi CSS ya DOM HTML enforce nahi karta:

```
[ Headless Hook (useDropdown) ] ➔ Returns: { isOpen, toggle, getItemProps, getMenuProps }
                                            ⬇
                   [ Developer's Custom Tailored UI / CSS ]
```

---

### 6. Interview Ke 3 Sawal Is Topic Se

1. **Do components me ek hi custom hook use karne par kya unka state share hota hai?** -> Nahi! Har component execution par custom hook ka apna independent isolated state instance banta hai.
2. **Custom hook ka naam `use` se shuru hona kyu mandatory hai?** -> Kyunki ESLint plugin (`eslint-plugin-react-hooks`) `use` prefix dekh kar hi Hooks Rules (loops/conditions check) enforce karta hai.
3. **Headless UI components traditional UI libraries (MUI, Bootstrap) se behtar kyu maane jaate hain?** -> Kyunki ye zero CSS bundle bloat dete hain aur design system team ko 100% full visual customization freedom dete hain bina accessibility (a11y) rules tode.

---
**Next Topic:** 11. React DevTools Profiler: Flamegraphs, Ranked Charts & Re-render Auditing

Loading lesson content...

React JSX

Full IDE

Live Execution Terminal

Click "Execute Live" to run code.
                

Lesson Mastery AI Quiz

AI Doubt Solver

CERTIFICATE OF COMPLETION

Rishabh Gehlot

PHP 8+ & Laravel 11 Master Track