Sivuvaikutusten Käsittely UseEffect-Hookilla

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 on annettu, 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 datan 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 datalla. Kuten aiemmin mainittiin, useEffect-funktio suoritetaan jokaisen renderöinnin jälkeen, mikä varmistaa, että data näytetään käyttäjälle, jos sitä on saatavilla. 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: syntaksi. 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 haetaan 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-hookin sisällä.
• Rivillä 14-19: Komponentin merkkaus renderöidään.

Sovelluksen koko koodi:

Tarkastele hetki konsolia ja seuraa, miten nuolifunktion suorituslogiikka toimii useEffect-hookin sisällä. Nuolifunktio suoritetaan ensin komponentin alustavan renderöinnin yhteydessä ja sen jälkeen aina, kun counter-muuttujan arvo muuttuu. Voit varmistaa tämän tarkkailemalla vastaavia lokitietoja konsolissa.