Ce reguli există pentru scrierea hook-urilor în React?

• Apelați hooks doar la nivelul superior al componentelor funcționale sau în interiorul altor hooks personalizați. Nu apelați hooks în bucle, condiții sau funcții imbricate.
• Apelați hooks doar în interiorul componentelor funcționale React. Nu le apelați în funcții JavaScript normale sau în componente de clasă.
• Utilizarea useCallback pentru memorarea funcțiilor și useMemo pentru memorarea calculelor ajută la optimizarea performanței.
• Folosiți useEffect pentru efecte secundare (încărcarea datelor, abonamente etc.), specificând un array de dependențe pentru a controla execuția efectului.
• Respectați ordinea de apelare a hooks la fiecare randare a componentului. React se bazează pe această ordine pentru a lega corect starea și efectele.
• Utilizați dependențe stabile în array-urile de dependențe ale useEffect, useCallback, useMemo. Nu transmiteți obiecte sau funcții create la fiecare randare fără necesitate.
• Creați hooks personalizate pentru reutilizarea logicii de stare între componente. Numele hooks-urilor personalizate trebuie să înceapă cu use.

// Exemplu corect: apelarea hooks-urilor la nivelul superior
function MyComponent() {
  const [count, setCount] = useState(0); // La nivelul superior

  useEffect(() => { // La nivelul superior
    document.title = `Ai apăsat de ${count} ori`;
  }, [count]); // Array de dependențe

  const handleClick = useCallback(() => { // La nivelul superior
    setCount(c => c + 1);
  }, []); // Funcție memorată

  return (
    <div>
      <p>Ai apăsat de {count} ori</p>
      <button onClick={handleClick}>
        Apasă-mă
      </button>
    </div>
  );
}

// Exemplu greșit: apelarea hook-ului în condiție
// function MyComponentWithBadHook() {
//   if (someCondition) {
//     const [count, setCount] = useState(0); // GREȘIT: apel în condiție
//   }
//   // ...
// }

// Exemplu greșit: apelarea hook-ului în buclă
// function MyComponentWithAnotherBadHook() {
//   for (let i = 0; i < 5; i++) {
//     const [value, setValue] = useState(i); // GREȘIT: apel în buclă
//   }
//   // ...
// }