Reactin Hooks ja Context ovat mullistaneet tilanhallinnan ja datan jakamisen React-sovelluksissa. Kun hookit esiteltiin versiossa 16.8 vuonna 2019, kehittäjät saivat mahdollisuuden käyttää tilaa ja elinkaarimetodeja funktiokomponenteissa, mikä johti tiiviimpään ja helpommin luettavaan koodiin.

Context puolestaan tarjoaa yksinkertaisen tavan jakaa dataa komponenttien välillä ilman propseilla välittämistä. Tässä käsitellään React-hookien ja Contextin tehokasta yhteiskäyttöä, ja havainnollistetaan niiden yhdistettyä potentiaalia monimutkaisen tilanhallinnan yksinkertaistamisessa sekä saumattoman datavirran mahdollistamisessa komponenttipuussa.

Seuraavissa luvuissa käsitellään yksityiskohtaisesti seuraavia aiheita:

State hook

useState mahdollistaa komponentin tietojen säilyttämisen ja palauttamisen (esim. käyttäjän syöte). Esimerkiksi lomakekomponentti voi hyödyntää tilaa syötteen arvon tallentamiseen, kun taas kuvagalleriakomponentti voi käyttää tilaa valitun kuvan indeksin seuraamiseen.

function Form() {
  const [value, setValue] = useState('');
  // ...
}

Ref hook

useRef tarjoaa tavan säilyttää komponentissa tietoa, joka ei vaikuta renderöintiin, kuten DOM-solmu tai timeout-ID. Toisin kuin tilan muuttaminen, ref-arvon muuttaminen ei aiheuta komponentin uudelleenrenderöintiä. Ref toimii "pakotienä" tavanomaisesta React-paradigmasta ja on hyödyllinen erityisesti vuorovaikutuksessa muiden kuin React-järjestelmien, kuten selaimen natiivien APIen, kanssa.

function Form() {
  const inputRef = useRef(null);
  // ...
}

Effect hook

useEffect mahdollistaa komponentin yhteyden muodostamisen ja synkronoinnin ulkoisten järjestelmien kanssa, mukaan lukien verkon kanssa kommunikointi, selaimen DOM:n muokkaaminen, animaatioiden käsittely, muiden käyttöliittymäkirjastojen widgettien integrointi sekä ei-React-koodin saumaton yhdistäminen.

function Animation({ animationId }) {
  useEffect(() => {
    const animation = createAnimation(animationId);
    animation.start();
    
    // Cleaning up the animation when the component unmounts
    return () => animation.stop();
  }, [animationId]);
  // ...
}

Memo hook

useMemo parantaa renderöinnin suorituskykyä minimoimalla tarpeettomat laskutoimitukset. Esimerkiksi voimme ohjeistaa Reactia käyttämään välimuistissa olevaa laskentaa uudelleen tai välttämään uudelleenrenderöinnin, jos data ei ole muuttunut edellisestä renderöinnistä.

function NewspaperList({ data, filter }) {
  const filteredData = useMemo(
    () => performFiltering(data, filter),
    [data, filter]
  );
  // ...
}

Context hook

useContext mahdollistaa komponentin pääsyn tietoihin kaukaisilta vanhemmilta ilman propseja. Se mahdollistaa sovelluksen ylimmän tason komponentin välittää nykyisen käyttöliittymäteeman kaikille alikomponenteille, riippumatta niiden syvyydestä komponenttipuussa.

function Section() {
  const theme = useContext(ThemeContext);
  // ...
}