ჩაშენებული ჰუკები

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

ერთი წესი რაც ყველას ეხება ის არის რომ სულ. სულ. სულ. სულლლლლლლლ....... უნდა გაწეროთ ტიპები

• UseState

  • თუ ჩვენ რაიმე კომპლექსური value-ს გადაცემა გვინდა initial value-დ მაშინ უმჯობესია თუ ცალკე ფუნქციაში გავიტანთ ამ ლოგიკას

  • ინიციალიზაციის ფუნქცია არ გამოვიძახოთ ინლაინ, ეგრევე რეფერენსი ჯობია გადაცეთ და თვითონ რეაქტმა ჯობია გამოიძახოს როცა დაჭირდება.

  • მარტო updater state-ს თავი ავარიდოთ, ანუ ისეთ სტეიტს, რომელსაც მარტო იმისთვის ვიყნებთ რომ კომპონენტი დავააპდეითოთ. თუ ეს გვჭირდება რაღაცა ფუნდამენტალურად არასწორი ხდება.

• useRef

  • ეს ჰუკი არ გეგონოთ მარტო იმისთვის რომ dom element-ების რეფერენსები შევინახოთ. აქ ასევე შეგვიძლია შევინახოთ ისეთი ცვლადები, რომლებმაც არ უნდა გამოწვიოს რერენდერინგი კომპონენტის. თუ შევადარებთ ამ ჰუკს useState-ს, იგი მას გავს იმ კუთხით, რომ მისი გამოყენებით შეგვიძლია რენდერიდან რენდერამდე შევინახოთ რაღაც მონაცემი. ხოლო განსხვავებით useState-სგან, useRef-ის შემთხვევაში მონაცემის დააპდეიტება DOM-ის რერენდერს არ გამოიწვევს.

• UseEffect

  • ეს ჰუკია რომელზეც ალბათ ყველაზე ბევრ ცუდ "ჭორს" გაიგებთ და სამწუხაროდ ამ ჭორების უმეტესობა რეალობაა

  • არ გამოიყენოთ data fetching-ისთვის

  • არ გამოიყენოთ მშობელ კომპონენტთან ინფორმაციის დასიკვისთვის და მერე ლოკალურად setState-ის გაშვებისთვის. თუ ეს გიწევთ რაღაცას არასწორად აკეთებთ მარა თუ აუცილებლად გჭირდება მაშინ ეს ლოკალური state ref-ად რომ გადააკეთოთ უმჯობესი იქნება

  • useEffect არ გამოიყენოთ state-ისთვის initial ინფორმაციის მიცემისთვის, ამისთვის setState და უმეტესობა ჰუკს ინიცალიზატორი აქვს და ჯობია ეგ გამოყენოთ

  • ამ ჰუკის დანიშნულება არის რომ რეაქტის გარეთ რაც არსებობს იმასთან მოახდინოთ ინტერაქცია როგორიც არის გარე library-ები. window/localStorage და ასე შემდეგ და მხოლოდ ამ დანიშნულებისთვის უნდა გამოიყენოთ. avoid useEffect like a plague

  • don't overuse this hook. its a mistake in most places

  • მიუხედავად იმისა რომ ყველა ამბობს რომ სულ უნდა გავატანოთ ყვეალფერი რასაც ვიყენებთ dependency array-ში ეს მთლად სიმართლე არ არის და ყოველთვის არ არის ეს საჭირო. კარგად დაფიქრდით და მარტო მაშინ ჩაამატეთ თუ რეალურად უნდა განახდლეს ამ ცვლადის ცვილებაზე useEffect თუ არა მარტო მაშინ უნდა გაწეროთ როცა ეს useEffect ინტერაქციასთან შედის კომპონენტის გარე ობიექტზე, ანუ თუ ჩვენ გვაქ რამე ევენტ ლისთენერი ჩაბმული window-ზე და ამ ლისთენერის შიგნით ვიყენებთ რაიმე state-ს. ამ შემთხვევაში აუცილებლად უნდა გავწეროთ ეს state dependency array-ში რომ ცვილება აიასხოს მაგრამ თუ ჩვენ რაიმე ცვლადს მაინც რეაქტის კონტექსტში ვიყენებთ მაშინ გატანება არ არის საჭირო.

• useReducer

  • ეს ჰუკი გავს useState-ს მაგრამ მაინც დაფიქრდით რამდენად გჭირდებათ და მხოლოდ მაშინ გამოიყენეთ. ამ ჰუკის გამოყნების პატერნი ისეთია რომ dispatch ხდება რაიმე action-ის და მერე თვითონ რედიუსერი ჰენდალვს ამ ლოგიკას რაც საკმაოდ კარგია მაგრამ უმეტესობა შემთხვევაში თუ ამ ლოგიკას მარტო ერთგან ვიყენებთ ჯობია ეს ჰუკი არ გამოვიყენოთ და useState-ს დავჯერდეთ, რადგან მიუხედავად იმისა, რომ კარგი ჰუკია მაინც კომპლექსურს ხდის უფრო აპლიკაციას და მთლად კარგი გამოსაყენებელი არ არის typescript-ითაც კი

• useInsertionEffect

  • ამ ჰუკის დანიშნულება და მიზანი უფრო ლაიბრარებისთვის არის ასერომ აპლიკაციაში თუ გჭირდებათ დარწმუნდით რომ ნამდვილად საჭიროა რადგანაც მისი დანიშნულება css in js ლაიბრარებისთვის არის და თუ ეს გჭირდებათ, კიდევ დაფიქრდით შეიძლება useLayoutEffect/useEffect აკმაყოფილებს თქვენ მოთხოვნებს

• useLayoutEffect

  • ეს ჰუკი გავს useEffect-ს მაგრამ იგივე არ არის, ეს ჰუკი მაშინ გამოიყენოთ თუ css-ს ეხებით useEffect-იდან ან ისეთ რამეს რაც უზერმა უდნა დაინახოს ეგრევე და flashing არ უდნა იყოს გვერდზე.

  • არ დაგავიწყდეთ რომ ეს ჰუკი რენდერინგს ბლოკავს და ინტენსიური ლოგიკა არ გაუშვათ შიგნით.

• useSyncExternalStore

  • ეს ჰუკი არის კიდე ერთერთი ჩამანცვლებელი useEffect-ისა და თუ შეგიძლიათ ამ ჰუკის გამოყნეება ჯობია useEffect-ს თავი აარიდოთ და ეს გამოიყენოთ. საკმაოდ კარგი ჰუკია და გამოყენებას თუ უპოვით ძალიან კარგი ჰუკია და გარეთ ობიექტთან დასინკვა ჯობია useEffect-ით ევენტების ჩაბმას.

• useTransition

  • ეს ჰუკი ახალი დანამატია რეაქტში და საკმაოდ კარგია თუ რაიმე მძიმე ოპერაციას გამოიწვევს ჩვენი ჰუკი, ანუ დავუშვათ და ჩვენ გვინდა რომ ტაბი შეცვალოთ გვერდის state-ით და მეორე ტაბზე როცა გადადის ჩვენი კომენპენტი შეიძლება დარენდერებას დიდი ხანი მოუნდეს და ასეთ დროს თუ ამ სტეიტის ცვილებას გავახვევთ useTransition-ში მაშინ უსერს ამ სინელეს კი მოუწევს რომ დაელოდოს მაგრამ ეკრანი არ გაიყინება და უსერი ინტერაქციას შეძლებს რაც ყოველთვის კარგია

  • ყველგან არ გამოვიყენოთ ეს ჰუკი. ყველაფერს თავისი ფასი აქვს და ამ ჰუკსაც აქვს თავისი ფასი, ასერომ თუ მართლა არ გვჭირდება, თავი ავარდიდოთ გამოყენებას

  • isPending-ის საშულებით ლოადერიც გამოაჩინეთ ხოლმე ^^ ეგეც საჭიროა

• useMemo

  • ეს ჰუკი ცოტახანში აღარ იქნება გამოყენებაში, მაგრამ მაინც ავხსნი

  • ამაზე ალბათ ისედაც იცით რომ მინიმუმამდე უნდა დავიყვანოთ ამისი გამოყნება და უბრალოდ ზედმეტ ჩეკებს ამატებს მაგრამ თუ რაიმე ძნელი კალკულაცია ხდება its always worth it. ეს ჰუკი უბრალოდ იმ დეპენდენსი მასივს რაც კი დიდი დრო დაჭIრდება მარა დაფიქრდით რომელს უფრო დიდი დრო მოუნდება პატარა მასივს გადალუპვა თუ მძიმე კოდის გაშვებას. ეს გადაწონეთ და ასე გადაწყვითეთ საჭირო არის თუ არა მემოს გამოყნება

• useCallback

  • ამაზეც იგივეს თქმა შემიძლია რაც მემოზე. სხვა ახალი არაფრია