Guida a useEffect in React

useEffect è uno degli hook più usati in React.

Ci sono vari modi di usarlo, ed in questo articolo vediamo qualche esempio.

Partiamo dal primo, che è quello meno usato, in quanto viene richiamato ogni volta che il componente fa il rendering:

import {useEffect, useState} from "react";

function App() {

    const [items, setItems] = useState([]);

    useEffect(() => {
        fetch("https://jsonplaceholder.typicode.com/users/1/posts")
            .then((resp) => resp.json())
            .then((data) => setItems(data));
    });

    return (
        <div className="App">
            {items && items.map((post) => <p key={post.title}>{post.title}</p>)}
        </div>
    );
}

export default App;

Nel secondo esempio, sicuramente più usato, passiamo un array di dipendenze vuoto:

import {useEffect, useState} from "react";

function App() {

    const [items, setItems] = useState([]);

    useEffect(() => {
        fetch("https://jsonplaceholder.typicode.com/users/1/posts")
            .then((resp) => resp.json())
            .then((data) => setItems(data));
    }, []);

    return (
        <div className="App">
            {items && items.map((it) => <p key={it.title}>{it.title}</p>)}
        </div>
    );
}

export default App;

Volendo possiamo passare un valore all'array; questo fa si che l'effect venga rifatto se cambia il valore.

Molto comodo, ad esempio, quando dobbiamo rieseguire la funzione se cambia un parametro:

import {useEffect, useState} from "react";

function App() {

    const [items, setItems] = useState([]);
    const [cerca, setCerca] = useState('');

    useEffect(() => {
        fetch("https://jsonplaceholder.typicode.com/users/1/posts")
            .then((resp) => resp.json())
            .then((data) => setItems(data));

        const itemsTrovati = items.filter((it) => it.title.includes(cerca));
        setItems(itemsTrovati);
    }, [cerca]);

    return (
        <div className="App">
            {items && (
                <input
                    type="text"
                    value={cerca}
                    onChange={(e) => setCerca(e.target.value)}
                />
            )}

            <hr/>

            {items && items.map((it) => <p key={it.title}>{it.title}</p>)}
        </div>
    );
}

export default App;

Infine, è possibile anche usare la cleanup-function, che ci consente diverse operazioni che possono essere utili:

• clean subscription
• chiusura di modal
• rimuovere listener di eventi
• cancellare timer

import {useEffect, useState} from "react";

function App() {

    const [items, setItems] = useState([]);

    useEffect(() => {
        let timer = setTimeout(() => getData(), 3000);

        return () => {
            clearTimeout(timer);
        }
    }, []);

    function getData() {
        fetch("https://jsonplaceholder.typicode.com/users/1/posts")
            .then((resp) => resp.json())
            .then((data) => setItems(data));
    }

    return (
        <div className="App">
            {items && items.map((it) => <p key={it.title}>{it.title}</p>)}
        </div>
    );
}

export default App;

E' un esempio banale, ma rende l'idea.

Enjoy!