React hooks – React blogi part 2

Teknologia

Otetaanpas jälleen kevyt blogin aloitus asiaan liittyvä 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 on JavaScript luokkien käyttö 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 logiikka komponenteista, jota voidaan riippumattomasti testata ja uudelleen käyttää. Hookit sallivat tilallisen logiikan uudelleenkäytön muuttamatta komponentin hierarkiaa. 

Hookit ovat JavaScript funktioita, mutta niillä on 2 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ä siitä, mitä ne eivät korvaa on tullut vastaan tuolla internetin ihmeellisessä maailmassa, mutta teemaksi on alkanut muotoutua:

  • 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ä voiko Hookit sen korvata. Reduxin käytöllä on omat etunsa etenkin koko sovelluksen tilaa hallitessa. Hookkejä käytettäessä taas ei tarvitse latailla/asentaa mitään riippuvuuksia. Molemmissa on puolensa ja käsitykseksi jää, että riippuen tilanteesta, sovelluksen koosta ja tarpeesta kumpaa kannattaa käyttää. Tilannekohtaisesti kannattaa harkita kumman ottaa omaan sovellukseen käyttöön.

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/