Jakie zasady obowiązują przy pisaniu hooków w React?

• Wywołuj hooki tylko na najwyższym poziomie komponentów funkcyjnych lub wewnątrz innych niestandardowych hooków. Nie wywołuj hooków w pętlach, warunkach ani funkcjach zagnieżdżonych.
• Wywołuj hooki tylko wewnątrz komponentów funkcyjnych React. Nie wywołuj ich w zwykłych funkcjach JavaScript ani w komponentach klasowych.
• Użycie useCallback do memoizacji funkcji i useMemo do memoizacji obliczeń pomaga zoptymalizować wydajność.
• Używaj useEffect do efektów ubocznych (ładowanie danych, subskrypcje itp.), określając tablicę zależności, aby kontrolować wykonanie efektu.
• Zachowuj kolejność wywołań hooków przy każdym renderze komponentu. React polega na tej kolejności, aby poprawnie powiązać stan i efekty.
• Używaj stabilnych zależności w tablicach zależności useEffect, useCallback, useMemo. Nie przekazuj obiektów lub funkcji tworzonych przy każdym renderze bez potrzeby.
• Twórz własne niestandardowe hooki do ponownego użycia logiki stanu między komponentami. Nazwy niestandardowych hooków powinny zaczynać się od use.

// Poprawny przykład: wywoływanie hooków na najwyższym poziomie
function MyComponent() {
  const [count, setCount] = useState(0); // Na najwyższym poziomie

  useEffect(() => { // Na najwyższym poziomie
    document.title = `Kliknięto ${count} razy`;
  }, [count]); // Tablica zależności

  const handleClick = useCallback(() => { // Na najwyższym poziomie
    setCount(c => c + 1);
  }, []); // Funkcja memoizowana

  return (
    <div>
      <p>Kliknięto {count} razy</p>
      <button onClick={handleClick}>
        Kliknij mnie
      </button>
    </div>
  );
}

// Niepoprawny przykład: wywoływanie hooka w warunku
// function MyComponentWithBadHook() {
//   if (someCondition) {
//     const [count, setCount] = useState(0); // NIEPRAWIDŁOWE: wywołanie w warunku
//   }
//   // ...
// }

// Niepoprawny przykład: wywoływanie hooka w pętli
// function MyComponentWithAnotherBadHook() {
//   for (let i = 0; i < 5; i++) {
//     const [value, setValue] = useState(i); // NIEPRAWIDŁOWE: wywołanie w pętli
//   }
//   // ...
// }