Millised reeglid kehtivad Reactis hook'ide kirjutamisel?

• Kutsuge hookid ainult funktsionaalsete komponentide ülemisel tasandil või teistes kasutajate hookides. Hookide kutsumine tsüklites, tingimustes või sisemistes funktsioonides ei ole lubatud:
• Kutsuge hookid ainult Reacti funktsionaalsete komponentide sees. Ei ole lubatud neid kutsuda tavalistes JavaScripti funktsioonides või klassikomponentides:
• useCallback kasutamine funktsioonide memoiseerimiseks ja useMemo kasutamine arvutuste memoiseerimiseks aitab optimeerida jõudlust:
• useEffect kasutamine kõrvaltoimete jaoks (andmete laadimine, tellimused jms), määrates sõltuvuste massiivi efekti kontrollimiseks:
• Hoidke hookide kutsumise järjekord iga komponendi uuesti renderimisel. React toetub sellele järjekorrale, et õigesti siduda olek ja efektid:
• Stabiilsete sõltuvuste kasutamine useEffect, useCallback, useMemo massiivides. Ära edasta objekte või funktsioone, mis luuakse iga renderi ajal ilma vajaduseta:
• Looge oma kasutaja hookid, et taaskasutada oleku loogikat komponentide vahel. Kasutaja hookide nimed peaksid algama use:

// Õige näide: hookide kutsumine ülemisel tasandil
function MyComponent() {
  const [count, setCount] = useState(0); // Kutsumine ülemisel tasandil

  useEffect(() => { // Kutsumine ülemisel tasandil
    document.title = `Olete klõpsanud ${count} korda`;
  }, [count]); // Sõltuvuste massiiv

  const handleClick = useCallback(() => { // Kutsumine ülemisel tasandil
    setCount(c => c + 1);
  }, []); // Memoiseeritud funktsioon

  return (
    <div>
      <p>Olete klõpsanud {count} korda</p>
      <button onClick={handleClick}>
        Klõpsa mind
      </button>
    </div>
  );
}

// Vale näide: hooki kutsumine tingimuses
// function MyComponentWithBadHook() {
//   if (someCondition) {
//     const [count, setCount] = useState(0); // VALE: kutsutud tingimuses
//   }
//   // ...
// }

// Vale näide: hooki kutsumine tsüklis
// function MyComponentWithAnotherBadHook() {
//   for (let i = 0; i < 5; i++) {
//     const [value, setValue] = useState(i); // VALE: kutsutud tsüklis
//   }
//   // ...
// }