Jaká pravidla platí pro psaní hooků v Reactu?

• Voláte hooky pouze na nejvyšší úrovni funkčních komponent nebo uvnitř jiných vlastních hooků. Nevoláte hooky v cyklech, podmínkách nebo vnořených funkcích.
• Voláte hooky pouze uvnitř React funkčních komponent. Nevoláte je v běžných JavaScriptových funkcích nebo ve třídních komponentách.
• Použití useCallback pro memoizaci funkcí a useMemo pro memoizaci výpočtů pomáhá optimalizovat výkon.
• Použijte useEffect pro vedlejší efekty (načítání dat, předplatné atd.) a určete pole závislostí pro řízení provádění efektu.
• Dodržujte pořadí volání hooků při každém renderu komponenty. React se na toto pořadí spoléhá, aby správně spojil stav a efekty.
• Používejte stabilní závislosti v polích závislostí useEffect, useCallback, useMemo. Nezasílejte objekty nebo funkce, které jsou vytvářeny při každém renderu bez potřeby.
• Vytvářejte vlastní vlastní hooky pro znovupoužití logiky stavu mezi komponentami. Názvy vlastních hooků by měly začínat use.

// Správný příklad: volání hooků na nejvyšší úrovni
function MyComponent() {
  const [count, setCount] = useState(0); // Na nejvyšší úrovni

  useEffect(() => { // Na nejvyšší úrovni
    document.title = `Stiskli jste ${count} krát`;
  }, [count]); // Pole závislostí

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

  return (
    <div>
      <p>Stiskli jste {count} krát</p>
      <button onClick={handleClick}>
        Klikněte na mě
      </button>
    </div>
  );
}

// Nesprávný příklad: volání hooku v podmínce
// function MyComponentWithBadHook() {
//   if (someCondition) {
//     const [count, setCount] = useState(0); // NESPRÁVNĚ: v podmínce
//   }
//   // ...
// }

// Nesprávný příklad: volání hooku v cyklu
// function MyComponentWithAnotherBadHook() {
//   for (let i = 0; i < 5; i++) {
//     const [value, setValue] = useState(i); // NESPRÁVNĚ: v cyklu
//   }
//   // ...
// }