Milyen szabályok vannak a hook-ok írására React-ben?

• Csak a funkcionális komponensek felső szintjén vagy más egyedi hookokon belül hívja meg a hookokat. Ne hívja a hookokat ciklusokban, feltételekben vagy beágyazott függvényekben.
• Csak React funkcionális komponenseken belül hívja meg a hookokat. Ne hívja őket normál JavaScript függvényekben vagy osztálykomponensekben.
• Az useCallback funkciók memorizálására és az useMemo számítások memorizálására segít a teljesítmény optimalizálásában.
• Az useEffect-et használja mellékhatásokhoz (adatbetöltés, feliratkozások stb.), és adjon meg egy függőségi tömböt az effektus végrehajtásának irányításához.
• Tartsa be a hookok hívási sorrendjét minden komponens újrarenderelésekor. A React erre a sorrendre támaszkodik, hogy helyesen összekapcsolja az állapotokat és az effektusokat.
• Stabil függőségeket használjon az useEffect, useCallback, useMemo függőségi tömbjeiben. Ne adjon át objektumokat vagy funkciókat, amelyeket minden rendereléskor létrehoz, ha nincs rá szükség.
• Hozzon létre saját egyedi hookokat az állapotlogika újrafelhasználásához a komponensek között. Az egyedi hookok neveinek use-tel kell kezdődniük.

// Helyes példa: hookokat a felső szinten hívja meg
function MyComponent() {
  const [count, setCount] = useState(0); // Felső szinten

  useEffect(() => { // Felső szinten
    document.title = `Ön ${count} alkalommal kattintott`;
  }, [count]); // Függőségi tömb

  const handleClick = useCallback(() => { // Felső szinten
    setCount(c => c + 1);
  }, []); // Memorizált függvény

  return (
    <div>
      <p>Ön ${count} alkalommal kattintott</p>
      <button onClick={handleClick}>
        Kattints rám
      </button>
    </div>
  );
}

// Hibás példa: hook hívása feltételben
// function MyComponentWithBadHook() {
//   if (someCondition) {
//     const [count, setCount] = useState(0); // HIBÁS: feltételben
//   }
//   // ...
// }

// Hibás példa: hook hívása ciklusban
// function MyComponentWithAnotherBadHook() {
//   for (let i = 0; i < 5; i++) {
//     const [value, setValue] = useState(i); // HIBÁS: ciklusban
//   }
//   // ...
// }