React Custom Hook-ların Yazılma Prinsipləri və Nümunələr

React komponentlərinin əsas vəzifəsi istifadəçi interfeysini (UI) ekrana çəkməkdir. Lakin layihə mürəkkəbləşdikcə tərtibatçılar eyni komponentin içinə həm pəncərə scroll-unu izləyən 'window.addEventListener', həm form xətalarını tənzimləyən məntiqi, həm də analitika zənglərini doldururlar. Nəticədə komponent 400 sətirlik "monstr"-a çevrilir. Bunun ən zərif çarəsi Custom Hook-lardır. 📌 1. Niyə Custom Hook? Custom Hook sadəcə adı 'use' ilə başlayan və daxilində digər React hook-larını ('useState', 'useEffect') çağıra bilən təmiz JavaScript funksiyasıdır. O, heç bir JSX (UI) qaytarmır; yalnız verilənləri və onları idarə edən funksiyaları qaytarır. 📌 2. Layihəmizdən Real Nümunə: 'useFormErrors' Baxın bizim 'src/hooks/useFormErrors.ts' hook-una: Bu hook Server Action-dan gələn xətaları qəbul edir, istifadəçi xanaya yazan kimi ('clearFieldError') xətanı dinamik silir və ümumi xətanı idarə edir. Əgər bu 50 sətirlik kod hər forma komponentinin içinə yazılsaydı, 'LoginForm', 'RegisterForm' və 'NewPostForm' tamamilə təkrar kodla dolardı. İndi isə hər bir form sadəcə bir sətirlə bu güclü imkandan istifadə edir: const { generalError, getFieldError, clearFieldError } = useFormErrors(state); 📌 3. Əsas Qaydalar: - Hook tək bir məqsədə xidmət etməlidir. - Geri qaytarılan dəyərlər aydın adlandırılmalıdır (adətən obyekt və ya massiv şəklində). - Lazımsız 'useEffect' asılılıqlarından qaçınaraq sonsuz renderlərin qarşısı alınmalıdır.