Sivuvaikutusten Käsittely useEffectin Avulla

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 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 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, 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: syntaksi. 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. Data poimitaan resp-objektista käyttäen resp.jokes-kenttää ja asetetaan articles-tilaan setArticles-funktiolla;
  • 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.

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ä se on 0;
• Rivillä 6-8: useEffect-hookin varsinainen 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.

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