useEffect-hookin avulla voidaan synkronoida komponentti ulkoisten tekijöiden tai palveluiden kanssa, kuten tietojen hakeminen, tilaukset, manuaaliset muutokset jne.

Syntaksi:

Ensimmäinen argumentti (setup) on nuolifunktio, joka suoritetaan jokaisen renderöinnin jälkeen. Toinen argumentti (dependencies) on valinnainen taulukko riippuvuuksista. Jos dependencies annetaan, efekti suoritetaan uudelleen vain, jos jokin riippuvuuksista on muuttunut edellisen renderöinnin jälkeen. Jos riippuvuustaulukko jätetään pois, efekti suoritetaan jokaisen renderöinnin jälkeen.

useEffect(setup, dependencies)

Koska tiedämme, että setup tulee olla nuolifunktio ja dependencies taulukko, saamme seuraavan useEffect-hookin rakenteen.

useEffect(() => {
  // Something that we need to do
  // after the component is rendered or updated
}, [<optional_dependencies>])

Esimerkki 1:

Luodaan Articles-komponentti, joka käyttää useEffect-hookia tietojen asettamiseen articles-tilaan. Tämä on erinomainen tilaisuus tutustua React-hookien tehokkaaseen yhdistelmään.

import { useEffect, useState } from "react";
import fetchData from "../service/api";

const Articles = () => {
  const [articles, setArticles] = useState([]);

  useEffect(() => {
    fetchData()
      .then((resp) => {
        setArticles(resp.jokes);
      })
      .catch((error) => {
        console.error(error);
      });
  }, []);

  return (
    // Render some markup based on the articles data
  );
};

Tässä komponentissa hyödynnetään useEffect-hookia, jotta articles-tila täytetään tiedoilla. Kuten aiemmin mainittiin, useEffect-funktio suoritetaan jokaisen renderöinnin jälkeen, mikä varmistaa, että tiedot näytetään käyttäjälle, jos ne on saatu. Tämä takaa sujuvan käyttökokemuksen ajantasaisella sisällöllä.

Rivikohtainen selitys:

• Rivi 1: Tuodaan useEffect- ja useState-hookit React-kirjastosta niiden toiminnallisuuden hyödyntämiseksi;
• Rivi 2: Tuodaan fetchData-funktio tiedostosta "../service/api". Tämä funktio vastaa API-kutsun tekemisestä ja datan hakemisesta;
• Rivi 4: Articles-komponentti määritellään perinteisellä funktiosyntaksilla;
• Rivi 5: Alustetaan tila useState-hookilla, joka edustaa articles-muuttujan alkutilaa. Tässä esimerkissä se on tyhjä taulukko;
• Rivillä 7-15: useEffect-hookin todellinen käyttötapaus;
  • Rivi 7 ja rivi 15: ovat syntaksia. Näin sitä käytetään;
  • Rivi 8: kutsutaan fetchData-funktiota. Tämän funktion odotetaan tekevän API-kutsun ja palauttavan promisen;
  • Rivillä 9-11: Kun promise täyttyy (then-lohko), vastaanotetaan resp-objekti. Datan poiminta resp-objektista käyttäen resp.jokes-kenttää ja asetetaan articles-tilaan setArticles-funktion avulla;
  • Rivillä 12-14: Jos API-kutsun aikana tapahtuu virhe (catch-lohko), se kirjataan konsoliin console.error-komennolla.
• Rivillä 17-19: Komponentin merkkaus renderöidään.

Koko sovelluksen koodi:

Esimerkki 2:

Luodaan Counter-komponentti seuraamaan counter-arvoa. Tehtävänä on kirjata counter-muuttujan arvo aina, kun se muuttuu. Tämän saavuttamiseksi käytetään useEffect-hookia, jonka riippuvuuslistana on counter-muuttuja.

import React, { useState, useEffect } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("Count has changed:", count);
  }, [count]);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
};

Rivikohtainen selitys:

• Rivi 1: Tuodaan useEffect- ja useState-hookit React-kirjastosta niiden toiminnallisuuden hyödyntämiseksi;
• Rivi 3: Perinteinen funktiosyntaksi määrittelee "Counter"-komponentin;
• Rivi 4: Alustetaan tila useState-hookilla, joka edustaa count-muuttujan alkutilaa. Tässä esimerkissä arvo on 0;
• Rivillä 6-8: Varsinainen useEffect-hookin käyttötapaus;
  • Rivi 7: Tämä logiikka suoritetaan aina, kun riippuvuuslistan arvo muuttuu. Tässä tapauksessa kyseessä on count-muuttuja;
  • Rivi 8: Riippuvuuslista. Ilmoitetaan Reactille, että kun count-muuttujan arvo muuttuu, suoritetaan koodi useEffect-hook-funktion sisällä.
• Rivillä 14-19: Komponentin merkkaus renderöidään.

Koko sovelluksen koodi:

Tarkastele hetki konsolia ja havainnoi useEffect-hookin sisällä olevan nuolifunktion suorituslogiikkaa. Nuolifunktio suoritetaan ensin alkuperäisen renderöinnin yhteydessä ja sen jälkeen aina, kun counter-muuttujan arvo muuttuu. Voit varmistaa tämän tarkkailemalla vastaavia lokimerkintöjä konsolissa.