Kokios taisyklės galioja rašant hooks React?

• Kviečiami hook'ai tik aukščiausio lygio funkciniuose komponentuose arba kituose naudotojo hook'uose. Negalima kviečiant hook'ų cikluose, sąlygose ar vidinėse funkcijose:
• Kviečiami hook'ai tik React funkciniuose komponentuose. Negalima jų kviečiant į paprastus JavaScript funkcijas ar klasės komponentus:
• useCallback naudojimas funkcijų memoizacijai ir useMemo naudojimas skaičiavimų memoizacijai padeda optimizuoti našumą:
• useEffect naudojimas šalutiniams efektams (duomenų įkėlimui, prenumeratoms ir kt.), nurodant priklausomybių masyvą efektui valdyti:
• Laikytis hook'ų kvietimo tvarkos kiekvieno komponento perrėmimo metu. React remiasi šia tvarka teisingam būsenos ir efektų susiejimui:
• Stabilios priklausomybės useEffect, useCallback, useMemo masyvuose. Nereikia perduoti objektų ar funkcijų, kurios kuriamos kiekvieno perrėmimo metu be reikalo:
• Kurti savo naudotojo hook'us, kad galėtumėte pakartotinai naudoti būsenos logiką tarp komponentų. Naudotojo hook'ų pavadinimai turi prasidėti use:

// Teisingas pavyzdys: hook'ų kvietimas aukščiausio lygio
function MyComponent() {
  const [count, setCount] = useState(0); // Kvietimas aukščiausio lygio

  useEffect(() => { // Kvietimas aukščiausio lygio
    document.title = `Jūs paspaudėte ${count} kartus`;
  }, [count]); // priklausomybių masyvas

  const handleClick = useCallback(() => { // Kvietimas aukščiausio lygio
    setCount(c => c + 1);
  }, []); // Memos funkcija

  return (
    <div>
      <p>Jūs paspaudėte {count} kartus</p>
      <button onClick={handleClick}>
        Spustelėk mane
      </button>
    </div>
  );
}

// Neteisingas pavyzdys: hook'ų kvietimas sąlygoje
// function MyComponentWithBadHook() {
//   if (someCondition) {
//     const [count, setCount] = useState(0); // Neteisinga: kvietimas sąlygoje
//   }
//   // ...
// }

// Neteisingas pavyzdys: hook'ų kvietimas cikle
// function MyComponentWithAnotherBadHook() {
//   for (let i = 0; i < 5; i++) {
//     const [value, setValue] = useState(i); // Neteisinga: kvietimas cikle
//   }
//   // ...
// }