JavaScript

Ano at paano gamitin ang Hooks sa React? [Filipino]

Published on

Hooks sa React

TL;DR: Ginagamit ang hooks upang mas simple at mas malinis ang ating React code.

Nag-post ako dati ng isang video sa aking page tungkol sa Hooks at kung ano ang nagagawa nito bago pa ito ilabas. Ngayon, titingnan natin kung papaano siya gamitin.

Ngunit bakit nga ba natin kailangan maging mas simple at malinis ang ating code? Di pa ba sapat ang ginagawa nating pag-cocode ngayon? Mas madali itong makita sa isang halimbawa. Halimbawa, kailangan mong gumawa ng React component na Button, na tumatanggap ng color na prop bilang kulay ng button na iyon. Maaaring ganito ang magiging itsura niya, dahil simpleng button lang naman siya:

Button JSX code

Button JSX Code

Ngayon, anong mangyayari kung gawin natin siyang ToggleButton? Kailangan natin siyang dagdagan ng state. Ngunit function pa siya ngayon (tinatawag nating presentational component). Dapat natin siyang gawing class para magkaroon siya ng state diba?

Bago mag React v16.8, ganun nga dapat ang mangyayari. Ngunit ngayong na-release na ang version 16.8 ng React, hindi na natin kailangang gawing class ang isang functional component para magkaroon ito ng state. Maaari na tayong magdagdag ng state sa ating mga presentational/function components gamit ang Hooks. Ang mga Hooks sa React ay mga abilidad na maaaring gamitin sa iba't ibang uri ng components upang mapadali at maging mas malinis ang pag gamit sa mga ito.

Upang mas maintindihan natin ang mga Hooks na ito, gawin natin ang ToggleButton gamit ang React Hooks.

Code sa pag gamit ng useState
Code sa pag gamit ng useState

Ngunit di lang doon nagtatapos ang kakayahan ng hooks. Isang maaaring gamit ng Hooks ay ang pag gamit ng lifecycle methods gamit ang isang mas malinis na pamamaraan gamit ang useEffect hook.

How to use the useEffect hook
Code sa pag gamit ng useEffect na hook.

Kung pamilyar kayo sa Redux, mayroon ring useReducer na hook ang React na pwede nating gamitin upang di na tayo gumamit ng external libraries na hindi naman natin kailangan.

Custom Hooks

Kung nakukulangan ka pa sa mga ito, maaari ka din gumawa ng sarili mong Hooks! Ito ay isa sa mga pinakamagandang naiidudulot ng Hooks. Pwede kang gumawa ng mga abilidad na pwede mong ilagay sa mga component mo. Narito ang mga halimbawa ng mga hooks na ginawa ng mga React developers katulad niyo:

  • useDebounce - Mag-debounce ng mga bagay na mabilis na nangyayari, katulad ng mga search o autocomplete.
  • useLocalStorage - Mag lagay o kumuha ng mga bagay sa LocalStorage ng browser.
  • useMedia - May kakayahang bantayan kung may nagbago sa laki ng screen at gumawa ng pag-babago depende sa pangyayari.
  • useDarkMode - Gumawa ng dark mode na itsura para sa inyong site.

Maaari ninyong makita ang mga Hooks na iyan at marami pang iba sa site na ito: https://usehooks.com/.

Rules

Dahil sa mala himalang abilidad ng hooks, mayroong mga kailangang sundin na mga palatuntunin upang magamit ang mga ito. Simple lang naman ang mga palatuntuning ito. Alaman dito sa link na ito.

Para sa karagdagang detalye, mas magandang basahin ninyo ang mga post tungkol sa Hooks doon sa React blog


If you liked this post please Buy Me a Coffee at ko-fi.com