React-ში hooks-ის დაწერის რა წესები არსებობს?

• მხოლოდ ფუნქციონალური კომპონენტების ზედა დონეზე ან სხვა მომხმარებლის ხურებში გამოიძახეთ ჰუკები. არ შეიძლება ჰუკების გამოძახება ციკლებში, პირობებში ან შიგნით ფუნქციებში:
• გამოიძახეთ ჰუკები მხოლოდ React-ის ფუნქციონალურ კომპონენტებში. არ შეიძლება გამოძახება ჩვეულებრივ JavaScript ფუნქციებში ან კლასის კომპონენტებში:
• useCallback-ის გამოყენება ფუნქციების მემოიზაციისთვის და useMemo-ის გამოყენება გამოთვლების მემოიზაციისთვის ხელს უწყობს პროდუქტიულობის ოპტიმიზაციას:
• useEffect-ის გამოყენება გვერდითი ეფექტებისთვის (მონაცემების ჩატვირთვა, გამოწერები და ა.შ.), დამოკიდებულების მასივის მითითებით ეფექტის შესრულების კონტროლისთვის:
• ჰუკების გამოძახების წესის დაცვა თითოეულ რენდერზე. React ამ წესზე მყარად არის დამოკიდებული სწორ მდგომარეობასა და ეფექტებს შორის კავშირის უზრუნველსაყოფად:
• სტაბილური დამოკიდებულებების გამოყენება useEffect, useCallback, useMemo-ის მასივებში. არ უნდა გადაცეთ ობიექტები ან ფუნქციები, რომლებიც ყოველ რენდერზე შეიქმნება საჭიროების გარეშე:
• საკუთარი მომხმარებლის ჰუკების შექმნა მდგომარეობის ლოგიკის გადამეორებისთვის კომპონენტებს შორის. მომხმარებლის ჰუკების სახელები უნდა იწყებოდეს use-ით:

// სწორი მაგალითი: ჰუკების გამოძახება ზედა დონეზე
function MyComponent() {
  const [count, setCount] = useState(0); // ზედა დონეზე გამოძახება

  useEffect(() => { // ზედა დონეზე გამოძახება
    document.title = `თქვენ დაწკაპეთ ${count} ჯერ`; 
  }, [count]); // დამოკიდებულების მასივი

  const handleClick = useCallback(() => { // ზედა დონეზე გამოძახება
    setCount(c => c + 1);
  }, []); // მემოიზირებული ფუნქცია

  return (
    <div>
      <p>თქვენ დაწკაპეთ {count} ჯერ</p>
      <button onClick={handleClick}>
        დაწკაპეთ მე
      </button>
    </div>
  );
}

// არასწორი მაგალითი: ჰუკების გამოძახება პირობაში
// function MyComponentWithBadHook() {
//   if (someCondition) {
//     const [count, setCount] = useState(0); // არასწორია: პირობაში
//   }
//   // ...
// }

// არასწორი მაგალითი: ჰუკების გამოძახება ციკლში
// function MyComponentWithAnotherBadHook() {
//   for (let i = 0; i < 5; i++) {
//     const [value, setValue] = useState(i); // არასწორია: ციკლში
//   }
//   // ...
// }