Ի՞նչ կանոններ կան 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); // Սխալ՝ ցիկլում
//   }
//   // ...
// }