Kādi noteikumi pastāv, rakstot hooks React?

• Izsauciet hookus tikai augstākajā līmenī funkciju komponentos vai citos lietotāja hookos. Nav atļauts izsaukt hookus ciklos, nosacījumos vai iekšējās funkcijās:
• Izsauciet hookus tikai React funkciju komponentu iekšpusē. Nav atļauts izsaukt tos parastajās JavaScript funkcijās vai klases komponentos:
• useCallback izmanto funkciju memorizācijai un useMemo skaitļošanas memorizācijai, kas palīdz optimizēt veiktspēju:
• useEffect izmanto blakus efektiem (datu ielāde, abonementi utt.), norādot atkarību masīvu efektu kontrolei:
• Saglabājiet hooku izsaukšanas kārtību katrā pārkrāsošanā. React balstās uz šo kārtību, lai pareizi sasaistītu stāvokli un efektus:
• Stabilas atkarības useEffect, useCallback, useMemo masīvos. Neizsūtiet tur objektus vai funkcijas, kas tiek izveidotas katrā pārkrāsošanā bez nepieciešamības:
• Izveidojiet savus lietotāja hookus, lai atkārtoti izmantotu stāvokļa loģiku starp komponentiem. Lietotāja hooku nosaukumi jā sāk ar use:

// Pareizs piemērs: hooku izsaukšana augstākajā līmenī
function MyComponent() {
  const [count, setCount] = useState(0); // Izsaukums augstākajā līmenī

  useEffect(() => { // Izsaukums augstākajā līmenī
    document.title = `Jūs nospiedāt ${count} reizes`;
  }, [count]); // Atkarību masīvs

  const handleClick = useCallback(() => { // Izsaukums augstākajā līmenī
    setCount(c => c + 1);
  }, []); // Memos funkcija

  return (
    <div>
      <p>Jūs nospiedāt {count} reizes</p>
      <button onClick={handleClick}>
        Nospied mani
      </button>
    </div>
  );
}

// Nepareizs piemērs: hooku izsaukšana nosacījumā
// function MyComponentWithBadHook() {
//   if (someCondition) {
//     const [count, setCount] = useState(0); // NEPAREIZI: izsaukts nosacījumā
//   }
//   // ...
// }

// Nepareizs piemērs: hooku izsaukšana ciklā
// function MyComponentWithAnotherBadHook() {
//   for (let i = 0; i < 5; i++) {
//     const [value, setValue] = useState(i); // NEPAREIZI: izsaukts ciklā
//   }
//   // ...
// }