custom hooks

custom ჰუკებზე უკვე ვისაბურე რომ უნდა შექქმნათ კომპონენტისთვის როცა გჭირდებათ რაიმე ლოგიკის გაწერა იმისთვის რომ jsx სუფთა იყოს მაგრამ custom hook-ები, ბევრად ბევრად მეტია ამაზე და გთხოვთ რომ ხშირად გამოიენოთ.

რეაქტს აქვს ძლიერი კომპოზიციის შესაძლებლობა, რაც გულსიხმობს იმას რომ რეაქტში ძალიან კარგი საშუალება გვაქ რომ building block-ები ავაწყოთ ჰუკების და კომპონენტების საშუალებით და ამ ბლოკების კომბინაციის საშულებით, მაგრამ ეს იშვათად გამოყენებადია სამწუხაროდ, კოდის ასე სუფთად წერა საკამაოდ ძნელია და ბევრი გამოცდილება უნდა რომ არ ჩახლართო ძალიან კოდი მაგრამ ჯობია, რომ იფიქროთ ჰუკებზე და კომპონენტებზე როგორც ფუნცქებზე, იფიქროთ მათზე როგორც კობინაციის საშუალებაზე და ასაწყობ ბლოკებზე.

მოდი წარმოვდგინოთ სცენარი, რომ გვაქვს მოდალები აპლიკაცაში რომელიც click away-ზე იხურება, ამის გაკეთება შეგვიძლია window-ზე ივენტ ლისენერის ჩაბმით, პრობლემა თუ გასაგებია მოდი მოგვარების გზები ჩამოვთვალოთ:

• მოდალის კომპონენტი რაც გვაქ ინლინ გავწეროთ ეს ლოგიკა უბრალოდ useEffect-ის საშუალებით

  • ცუდი ვარიანტია, click away შეიძლება დროპდაუნსაც დაჭირდეს და ისეთი ლოგიკაა ეს click away რომ ადვილად შეიძლება მისი ენკაფსულაცია და ამის გამო ჯობია რომ გავყოთ უკეთ

• შევქმანთ useClickAwayListener რომელიც პარამეტრად მიიღებს ref-ს და ჩამხურავ ფუნქციას

  • good! but can be better, მოდი ამ ჰუკს დავწერ ქვემოთ როგორ გამოიყურება

import type { RefObject } from 'react';
import { useEffect } from 'react';

export const useClickAway = <Ref extends RefObject<HTMLElement>>(
  ref: Ref,
  callback: () => void,
  togglerRef?: RefObject<HTMLElement>,
) => {
  useEffect(() => {
    const handleClickAway = (event: MouseEvent) => {
      if (
        ref.current &&
        !ref.current.contains(event.target as Node) &&
        !togglerRef?.current?.contains(event.target as Node)
      ) {
        callback();
      }
    };

    window.addEventListener('click', handleClickAway);

    return () => {
      window.removeEventListener('click', handleClickAway);
    };
  }, [ref, callback]);
};

ოქეი ახლა ამ ჰუკს აქვს რამდენიმე პრობლემა. პირველი ის არის რომ 1 დანიშნულება აქვს მაგრამ შედგება ბლოკებისგან რომელიც შეიძლება რომ ბევრ ადგილზე გამოგვადგეს. მაგალითად აპლიკაცაში ხშირად დაგვჭირდება, რომ დავადოთ event listener ან window-ს და ყველა ჯერზე useEffect-ი რომ ვწერო ტვინის ჭმა იქნება 😢 და არა მარტო ეს შეიძლება დამავიწყდეს removeEventListener-ი რაც კატასტროფული შეიძლება იყოს. ამის გამო მოდი შევქმანთ კიდევ ერთი ჰუკი დავარქვათ useWindowListener და ჩავწეროთ შიგნით ასეთი რამ:

import { useEffect } from 'react';

export const useWindowListener = <Event extends keyof WindowEventMap>(
  event: Event,
  callback: (this: Window, e: WindowEventMap[Event]) => void,
  options: boolean | AddEventListenerOptions = false,
  eventDependencies: any[] = [],
) => {
  useEffect(() => {
    window.addEventListener(event, callback, options);
    return () => window.removeEventListener(event, callback);
  }, [event, callback, options, ...eventDependencies]);
};

როგორც ხედავთ უბრალოდ შევქემნი ჰუკი რომელიც ჩააბავს ევენტ ლისთენერს ფანჯარაზე. ალბათ კითხულობთ რატომ და რა ბენეფტი აქვსა ამას, მოდი მივუბრუნდეთ useClickAway-ს და გადავწეროთ useWindowListener-ის დახმარებით

import type { RefObject } from 'react';
import { useWindowListener } from '../useWindowListener/useWindowListener';

export const useClickAway = <Ref extends RefObject<HTMLElement>>(
  ref: Ref,
  callback: () => void,
  togglerRef?: RefObject<HTMLElement>,
) => {
  useWindowListener('click', (event) => {
    if (
      ref.current &&
      !ref.current.contains(event.target as Node) &&
      !togglerRef?.current?.contains(event.target as Node)
    ) {
      callback();
    }
  });
};

ნახეთ რამდენად გამარტივდა 💓 კაი შეიძლება არ მეთანხმებით მაგრამ კიდე წარმოგდგინეთ ქეისი რომ შეიზლება დამჭირდეს სქროლის ლისთენერი, ეგეც ახლიდან უნდა ვწერო 😫? არა! useWindowListener მაქ და კოდის რაღაცა ნაწილს ეს დაფარავს და აღარ მომიწევს იმდენის წერა რაც აქამდე მომიწევდა და კოდი მარტი საკითხავი გახდება, ბაგები ერთ ადგილზე იქნება და ადვილად გასწორდება და რაც მთავარია ჩვენ building block-ს გამოვიყენებთ.

მოდი კიდევ ერთი მაგალითი წარმოვიდგნიოთ, მაგრამ იგივე პროექტში ვართ და გვაქ useClickAway და useWindowListener-ი.

შემდეგი თასკი არის რომ ბევრი დროპდაუნი გავაკეთოთ, დროპდაუნს ევალება შემდეგი რაღაცები: უნდა ქონდეს ტრიგერ ღილაკი რომელიც მას გახსნის, უნდა იხურებოდეს გარე კლიკზე, ზოგიერთ შემთხვევაში უნდა იხურებოდეს როცა უსერი გასქროლავს ეკრანს. ეს არის ჩვენი დავალება და მოდი ვარიანტები ჩამოვთვალოთ

• შევქმნათ დროპდაუნ კომპონენტი რომელიც იღებს ტრიგერ ღილაკის კოსტუმიზაციას და დროპდაუნის ოფშენებს პროპებად და ყვეალფერი იქვე გავწეროთ. its an okay solution მაგრამ როგორც ადრე ვთქვი ყველა პირველი იდეა ცუდი იდეაა.

  • ცუდად დამთავრდება თუ ეს კომპონენტი ყველგან გამოვიყენოთ, კოსტუმიზაციის დონეს ვერ გაუძლებს

• შევქმნათ useDropdown hook რომელიც შექმნის 2 რეფეს, ჩააბავს click away event listener-ს და პარამეტრად მიიღებს ბულეანს უნდა ჩაიხუროს თუ არა ეს ბულეან სქროლზე და მერე შეგვიძლია სადაც დროპდაუნი დაგვჭირდება ეს ჰუკი გამოვიყენოთ

  • ეს კარგი გზაა, ბევრ რამეს გაუძლებს

• ზედა ვარიანტი კიდე უფრო შორს წავიღოთ და შევქმნათ 3 კომპონენტი, ღილაკი (ეს ალბათ ისედაც გაქვთ), დროპდაუნი რომელიც უბრალოდ ტრიგერ ღილაკის რეფს იღებს და მერე მაგას იყენებს anchor პოზიციად, და მერე დროპდაუნში აითის კომპონენტი და რაც Components სექციაში ვილაპარაკე დაახლებით ეგრე რომ ავაწყოთ ბილდინგ ბლოკები

  • ჩემი აზრით საუკეთსო გზაა და დაახლოებით ასეთ რამეს აკეთებს radix, shadcn/ui, material ui და სხვა ბევრი ბიბრარი მაგრამ ამის იმპლემტანციას არ დავიწყებ რახანც ეს სტატია არის ჰუკებზე და არა კომპონენტებზე, ზედა ვარიანტის ჰუკი და ამის ჰუკი ერთმანეთთან ახლოს არის ასერომ მარტო ზედას იმპლემენტაციას ვიზამ ამ სტატიაში ძაან რომ არ გაგვეწელოს ისედაც გრძელი სტატია

import { useRef, useState } from 'react';
import { useWindowListener } from '../useWindowListener/useWindowListener';
import { useClickAway } from '../useClickAway/useClickAway';

export const useDropdown = <Toggler extends HTMLElement>(closeOnScroll = false) => {
  const togglerRef = useRef<Toggler>(null);
  const dropdownRef = useRef<HTMLDivElement>(null);
  const [isOpen, setIsOpen] = useState(false);

  const open = () => setIsOpen(true);

  const close = () => setIsOpen(false);

  useWindowListener('scroll', () => {
    if (closeOnScroll) {
      close();
    }
  });

  useClickAway(dropdownRef, close, togglerRef);

  return [dropdownRef, isOpen, open, close, togglerRef] as const;
};

რათქმაუნდა იმპლმენტაციის დეტალებზე შეგიძლიათ შემედავოთ რამდენად კარგია მაგრამ ნახეთ იმის მაგივრად რომ ყვეალფერი ინლაინ მეწერა მე შევქემნი რამდენიმე ბლოკი კომპონენტი და ამ ჰუკების კომბინაციის საშუალებით შევძელი კომპლექსური ფუნქციონალის ადვილად გაკეთება.

იმედი მაქ რომ ამ მაგალითებმა განახეს თუ რატომ ჯობია რომ წეროთ ქასტუმ ჰუკები და კომპონენტებზე და კოდზე იფიქროთ როგორც ასაწყობ ბლოკებზე, რომელიც უნდა გადაანაწილოთ სწორად ისე რომ არ ჩახლართოთ ძაან და არც ბევრი წერა მოგწიოთ ხოლმე, ეს იქნება თქვენი მთავარი მიზანი პროგრამირებისას.