Hooki React – useEffect tutorial

Hook useEffect pozwala na przeprowadzanie efektów ubocznych w komponentach funkcyjnych. Kod umieszczony w useEffect zadziała po każdym renderowaniu, albo przy wybranych renderowaniach, jeśli tak zadecydujemy (musimy wtedy ustawić tablicę zależności, która określa, kiedy kod ma zostać wykonany). Ponieważ hook ten „odpala się” zaraz po wyrenderowaniu komponentu, możemy za jego pomocą modyfikować stan, zanim jeszcze zostanie on wyświetlony w przeglądarce. Jest to przydatne np. podczas pobierania danych, tworzenia subskrypcji lub ręcznej ingerencji w drzewo DOM.

Zasadniczo możemy użyć hook-a useEffect w dwóch głównych sytuacjach:

1. Do efektów, które nie wymagają czyszczenia (rejestrowanie, żądania sieciowe lub ręczne mutacje DOM).
2. Do efektów, które wymagają czyszczenia (np. zatrzymanie funkcji setTimeout).

Efekty, które nie wymagają czyszczenia

Tego rodzaju efektów nie trzeba oczyszczać, więc możemy je ustawić i zapomnieć o nich. Na przykład możemy dynamicznie ustawić tytuł naszego dokumentu, korzystając ze stanu:

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

  useEffect(() => {
    document.title = `Clicked ${count} times`;
  });
}

Cokolwiek umieścimy w funkcji useEffect, będzie ona renderowana za każdym razem, gdy komponent jest renderowany. Możemy jednak ograniczyć liczbę renderowań i wywołać funkcję useEffect tylko wtedy, gdy zmienią się określone wartości, przekazując zależności tablicowe. Jeśli tablica jest pusta, funkcja useEffect uruchomi się tylko raz, po pierwszym renderowaniu.

const HookExample = (props) => {    
    const [points, setPoints] = useState(0);

    useEffect(() => {
        // this will display only if state points will change
        console.log("state changed");
    },[points]);

    useEffect(() => {
        // this will display only if props points will change
        console.log("props changed");
    },[props.points]);

    useEffect(() => {
        // this will display only one time, with first render
        console.log("one time display");
    },[]);

    return (
        ...
    );
}

Efekty wymagające czyszczenia

Niektóre efekty wymagają oczyszczenia (np. W celu uniknięcia wycieku pamięci). W takim przypadku możemy zwrócić funkcję czyszczącą w ramach funkcji useEffect:

const HookExample = (props) => {    
    const [points, setPoints] = useState(0);

    useEffect(() => {
        // this will display only one time, before the component is removed from the UI, and its called "clean-up function"

        return () => {
            console.log("component unmount");
        } 
    },[]);

    return (
        ...
    );
}

export default HookExample;

Zobacz DEMO  i sprawdź, jak działa hook useEffect

Kod do tego postu możesz naleźć tu: https://github.com/love-coding-pl/React-Hooks-Examples/tree/Hook-4-useEffect