hook useEffect

Wprowadzenie React #6 (2020) – hook useEffect

Część szósta cyklu miała być ostatnią, ale zapomniałem o dość istotnym elemencie układanki, czyli hooku useEffect. Podobnie jak obsługa zdarzeń ten wpis będzie oparty na console.log, nie na faktycznych funkcjonalnościach, ale wiedza o useEffect pozwoli nam na zrobienie ciekawych, praktycznych rzeczy w przyszłości.

Do czego służy useEffect?

useEffect, jest to kolejny po useState, hook, czyli specjalna funkcja dostarczana przez bibliotekę react do wsparcia komponentów funkcyjnych.

Pozwala on na wykonanie logiki biznesowej przy wyrysowaniu (wyrenderowaniu) komponentu.

Sam hook ma przyjmuje dwa parametry: funkcję, która ma być wywołana oraz, opcjonalnie, listę zależności.


Pozostałe części cyklu:

  1. Utworzenie projektu i pierwszy komponent
  2. Komponenty i props
  3. Obsługa zdarzeń
  4. Stan komponentu i przepływ danych
  5. Dynamiczne tworzenie komponentów, key i forumlarz
  6. Hook useEffect
  7. Zapisywanie danych w chmurze – Firebase

Wywołanie przy każdym wyrenderowaniu komponentu

Podstawowym (ale też najrzadziej używanym) przypadkiem użycia hooka useEffect, jest wykonanie akcji przy każdym wyświetleniu komponentu.

Do osiągnięcia tego efektu wystarczy następujący kod

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

//...

export const App = () => {

   //...

   useEffect(() => {
    console.log("Component rendered");
  });

  //...

}

Przy tak zdefiniowanym hooku tekst “Component rendered” będzie obecny gdy tylko pojawią się nasze obrazy po raz pierwszy.

Dodatkowo będzie się pojawiał przy każdej zmianie stanu. Dlaczego? Ponieważ każda zmiana stanu powoduje ponowne wyrysowanie (render) komponentu, w którym ten stan się znaduje, czyli w naszym wypadku komponentu App, bo on posiada zarówno stan z listą obrazów, jak i aktualnie wyświetlanym w komponencie Showcase.

Warunkowe uruchomienie useEffect

Korzystając z drugiego parametru możemu uzależnić wywołanie funkcji zawartej w useEffect od zmian w konkretnym stanie.

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

//...

export const App = () => {

  const [showcaseURL, setShowcaseURL] = useState("");

  useEffect(() => {
    console.log("Showcase state changed - render called");
  }, [showcaseURL]);

  //...
}

Drugim parametrem jest tablica, więc możemy tam podać więcej niż jeden stan.

Powyższy kod wywoła console.log tylko, gdy zmieni się stan showcaseURL, czyli gdy klikniemy, na jeden z obrazów. Nie wywoła się natomiast gdy zaczniemy wpisywać dane do formularza (zmiana stanu newImageURL).

Wywołanie przy pierwszym wyrysowaniu

Bardzo użyteczne zachowanie dostaniemy, gdy podamy pustą tablicę dependencji. Wówczas nasza metoda wywoła się tylko raz przy pierwszym pojawieniu się komponentu.

Ta forma jest często wykorzystywana, gdy chcemy np. pobrać dane z zewnętrznego źródła i na ich podstawie zmienić stan.

  useEffect(() => {
    console.log("First render");
  }, []);

I na tym zakończymy ten wpis. Źródła dostępne są na GitHub.

Tradycyjnie zapraszam do dołączenia do newslettera, gdzie materiały odnośnie React również mają swoje miejsce.

2 myśli w temacie “Wprowadzenie React #6 (2020) – hook useEffect”

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *