Artikkelit

React hooks – React blogi part 2

Teknologia

Matrix-kuva "What if I told you functions can have state"-tekstillä

Otetaanpas jälleen kevyt tekstin aloitus asiaan liittyvällä meemillä.

Yleistä React hookeista

  • Hookit ovat täysin taaksepäin yhteensopivia.
  • Hookkeja ei ole pakko käyttää. Niitä voi helposti testata muutamassa komponentissa ilman, että joutuu kirjoittamaan olemassa olevaa koodia uusiksi.
  • Luokat eivät ole poistumassa Reactista.
  • Hookit tuli käytettäväksi Reactin 16.8 versiossa.

Mitä Hookit ovat?

Ne ovat funktioita, joilla voi hallita Reactin tilaa ja ”napata” kiinni elinkaaren (lifecycle) ominaisuuksiin funktionaalisissa komponenteissa. Hookkeja ei voi käyttää luokka-komponenteissa – ne sallivat Reactin käytön ilman luokkia.

Osalle JavaScript-luokkien käyttö on saattanut aiheuttaa päänvaivaa, sillä ne eroavat muiden kielien luokista melkoisesti. Luokkia voi kuitenkin huoletta käyttää jatkossakin, sillä ne eivät ole Reactista poistumassa.

Hookeilla voidaan ”kaivaa” tilallista logiikan komponenteista, joita voidaan riippumattomasti testata ja uudelleen käyttää. Hookit sallivat tilallisen logiikan uudelleenkäytön muuttamatta komponentin hierarkiaa. 

Hookit ovat JavaScript funktioita, mutta niillä on kaksi sääntöä:

  • Hookkeja ei saa kutsua looppien sisällä tai nestatuissa funktioissa.
  • Hookkeja ei saa kutsua tavallisista JavaScript funktioista –niitä voi käyttää vain Reactin funktionaalisissa komponenteissa.

Omasta kokemuksesta voin sanoa, että funktionaaliset komponentit + hookit yksinkertaistavat React-devausta ja ovat nopeampia oppia verrattuna luokka-komponentteihin.

Mitä Hookit korvaavat?

  • Luokat
  • Render Prop kuvion

Hieman vaihtelevaa mielipidettä on siitä, mitä ne eivät korvaa. Muutamia on tullut vastaan tuolla internetin ihmeellisessä maailmassa, mutta teemaksi on alkanut muotoutua esimerkiksi seuraavat:

  • Redux
  • Higher Order Components (HOC)

Tässä täytyy nyt mainita, että luokka-komponenttien kanssa HOC tulee epäilemättä pysymään käytössä, mutta funktionaalisissa komponenteissa sen voi korvata custom hookeilla. Täältä käytännön esimerkkiä kuinka korvata HOC custom hookeilla: https://dev.to/gethackteam/from-higher-order-components-hoc-to-react-hooks-2bm9

Erityisesti Reduxin suhteen tuntuu olevan paljon mietintää siitä, voivatko Hookit sen korvata. Reduxin käytöllä on omat etunsa, etenkin koko sovelluksen tilaa hallittaessa. Hookkeja käytettäessä taas ei tarvitse latailla/asentaa mitään riippuvuuksia. Molemmissa on puolensa, joten voidaan todeta, että riippuu täysin tilanteesta, sovelluksen koosta ja tarpeesta, kumpaa kannattaa käyttää; oman sovelluksen osalta ratkaisua kannattaa harkita ja päätös tehdä tilannekohtaisesti.

Lähteet ja lisää luettavaa

https://joinex.fi/react-pahkinankuoressa/

https://reactjs.org/docs/hooks-intro.html

https://medium.com/javascript-scene/do-react-hooks-replace-redux-210bab340672

https://www.simplethread.com/cant-replace-redux-with-hooks/