Aké pravidlá platia pre písanie hookov v React?

• Volajte hooky iba na najvyššej úrovni funkčných komponentov alebo vo vnútri iných vlastných hookov. Nevolajte hooky v cykloch, podmienkach alebo vnorených funkciách.
• Volajte hooky iba vo vnútri React funkčných komponentov. Nevolajte ich v bežných JavaScriptových funkciách alebo v triednych komponentoch.
• Použitie useCallback na memoizáciu funkcií a useMemo na memoizáciu výpočtov pomáha optimalizovať výkon.
• Použite useEffect na vedľajšie efekty (načítanie dát, odberné miesta atď.), pričom určíte pole závislostí na kontrolu vykonania efektu.
• Dodržiavajte poradie volania hookov pri každom renderovaní komponentu. React sa na toto poradie spolieha, aby správne prepojil stav a efekty.
• Používajte stabilné závislosti v poliach závislostí useEffect, useCallback, useMemo. Neodovzdávajte objekty alebo funkcie, ktoré sa vytvárajú pri každom renderovaní bez potreby.
• Vytvárajte vlastné vlastné hooky na opätovné použitie logiky stavu medzi komponentami. Názvy vlastných hookov by mali začínať s use.

// Správny príklad: volanie hookov na najvyššej úrovni
function MyComponent() {
  const [count, setCount] = useState(0); // Na najvyššej úrovni

  useEffect(() => { // Na najvyššej úrovni
    document.title = `Stlačili ste ${count} krát`;
  }, [count]); // Pole závislostí

  const handleClick = useCallback(() => { // Na najvyššej úrovni
    setCount(c => c + 1);
  }, []); // Memoizovaná funkcia

  return (
    <div>
      <p>Stlačili ste {count} krát</p>
      <button onClick={handleClick}>
        Klikni ma
      </button>
    </div>
  );
}

// Nesprávny príklad: volanie hooku v podmienke
// function MyComponentWithBadHook() {
//   if (someCondition) {
//     const [count, setCount] = useState(0); // NESPRÁVNE: v podmienke
//   }
//   // ...
// }

// Nesprávny príklad: volanie hooku v cykle
// function MyComponentWithAnotherBadHook() {
//   for (let i = 0; i < 5; i++) {
//     const [value, setValue] = useState(i); // NESPRÁVNE: v cykle
//   }
//   // ...
// }