Atkuriant būsenos priklausomybes „React Hooks“, reikia vengti kelių įprastų klaidų:
1. Kabliukų taisyklių nesilaikymas:
- Nekvieskite kabliukų kilpų, sąlygų ar įdėtųjų funkcijų viduje. Vietoj to visada naudokite kabliukus aukščiausiame React funkcijos lygyje, prieš pradėdami grąžinti.
- Nekvieskite kabliukų iš įprastų JavaScript funkcijų. Vietoj to galite iškviesti Hooks iš React funkcijos komponentų arba pasirinktinių kabliukų[1].
2. Protingai nenaudoti kabliukų:
- Venkite be reikalo naudoti kabliukus. Naudokite juos tik tada, kai būtina, ir nenaudokite jų per daug.
– Naudokite kabliukus būsenai ir šalutiniams poveikiams valdyti, bet nenaudokite jų kitiems tikslams, pvz., atvaizdavimui ar stiliui kurti[2].
3. Kabliukų netvarkymas ir struktūrizavimas:
- Laikykite savo kabliukus tvarkingus ir struktūrizuotus. Venkite maišyti skirtingų tipų kabliukų.
- Naudokite tinkintus kabliukus, kad įterptumėte sudėtingą logiką ir paverstumėte savo kodą lengviau skaitomu[2].
4. Nenaudojate ESLint papildinio:
- Naudokite ESLint įskiepį, kad įgyvendintumėte Hooks taisykles. Tai gali padėti pastebėti klaidas ir užtikrinti, kad jūsų kodas atitiktų geriausią praktiką[1].
5. Netikrinti kabliukų:
- Parašykite savo kabliukų vienetų testus, kad įsitikintumėte, jog jie veikia taip, kaip tikėtasi, ir tinkamai elgiasi su kraštinėmis.
- Norėdami išbandyti savo kabliukus, naudokite Jest ar kitas testavimo sistemas[4].
6. Nenaudojamas nenurodytas Kitas:
- Norėdami valdyti būseną centralizuotoje vietoje, naudokite Unstated Next. Tai gali padėti sumažinti priklausomybę nuo būsenų ir padaryti kodą lengviau prižiūrimą[5].
7. Geriausios praktikos nesilaikymas:
– Vadovaukitės geriausios „React“ būsenos valdymo praktikos pavyzdžiais, pvz., venkite nereikalingos būsenos ir naudokite konteksto API bendrinant būseną[3].
8. Žemėlapio ir atvaizdavimo masyvų nenaudojimas dinamiškai:
- Dinamiškai naudokite žemėlapio ir pateikimo masyvus, kad išvengtumėte nereikalingo atvaizdavimo ir pagerintumėte našumą[3].
9. Kabliukų nenaudojimas pašaliniams poveikiams:
- Naudokite Hooks, kad pašalintumėte šalutinį poveikį, pvz., gautumėte duomenis arba nustatytumėte laikmačius. Nenaudokite jų atvaizdavimui ar stiliui kurti[2].
10. Kabliukų nenaudojimas sudėtingai logikai:
- Naudokite Hooks sudėtingai logikai, apimančiai kelis būsenos kintamuosius arba šalutinį poveikį. Venkite jų naudoti kaip paprasta logika, kurią galima išspręsti kitomis priemonėmis[2].
Vengdami šių įprastų klaidų, galite užtikrinti, kad jūsų „React Hooks“ būtų geros struktūros, prižiūrimi ir veiksmingi.
Citatos:[1] https://legacy.reactjs.org/docs/hooks-rules.html
[2] https://www.smashingmagazine.com/2020/04/react-hooks-best-practices/
[3] https://bosctechlabs.com/react-hooks-practices-in-2024/
[4] https://www.linkedin.com/pulse/react-hooks-best-practices-efficient-maintainable-code-sasidharan-djlfc
[5] https://css-tricks.com/managing-state-in-react-using-unstated-next/