useEffect-hookin avulla komponentti voidaan synkronoida 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-parametrin tulee olla nuolifunktio ja dependencies-parametrin taulukko, saamme seuraavanlaisen useEffect-hookin rakenteen.

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

Huomio

React-komponentit hyödyntävät usein useEffect- ja useState-hookien yhdistelmää. Nämä hookit toimivat yhdessä halliten komponenttien tilaa ja sivuvaikutuksia.

Esimerkki 1:

Luodaan Articles-komponentti, joka hyödyntää 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 varmistaaksemme, että articles-tila täytetään datalla. Kuten aiemmin mainittiin, useEffect-funktio suoritetaan jokaisen renderöinnin jälkeen, mikä takaa, että data näytetään käyttäjälle, jos sitä on saatu. Tämä varmistaa saumattoman 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 tavanomaisella funktiosyntaksilla;
• Rivi 5: Alustetaan tila useState-hookilla, joka edustaa articles-muuttujan alkutilaa. Tässä esimerkissä se on tyhjä taulukko;
• Rivillä 7-15: useEffect-hookin varsinainen 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 lupauksen (promise);
  • Rivillä 9-11: Kun lupaus täyttyy (then-lohko), vastaanotetaan resp-objekti. Data poimitaan resp-objektista käyttämällä 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.

Sovelluksen koko 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äytämme 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ä se on 0;
• Rivillä 6-8: Varsinainen useEffect-hookin käyttö;
  • 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 useEffect-hookin sisällä oleva koodi.
• Rivillä 14-19: Komponentin merkkaus renderöidään.

Koko sovelluksen koodi:

Tarkastele hetki konsolia ja havainnoi nuolifunktion suorituslogiikkaa useEffect-hookin sisällä. Nuolifunktio suoritetaan ensin komponentin ensimmäisellä renderöinnillä ja sen jälkeen aina, kun counter-muuttujan arvo muuttuu. Voit varmistaa tämän toiminnan seuraamalla vastaavia lokimerkintöjä konsolissa.