CONTATTACI

Guide per aspiranti programmatori

Programmatore che esamina react al microscopio
Lezione 33 / 41

Quando usare gli effetti collaterali in React

Nella sezione in cui abbiamo parlato di useEffect, abbiamo visto alcuni ottimi esempi di utilizzo corretto degli effetti collaterali. Nella nostra applicazione di esempio, possiamo usare useEffect all’interno di useQuery e useQueryState, per sottolineare l’effetto collaterale che esiste già:

 

// File: src/hooks/useQuery.js

import { useEffect } from "react";
import { useCommand } from "./useCommand";

export function useQuery({ path, initialData }) {
  const [networkRequest, sendNetworkRequest] = useCommand({
    path,
    method: "GET",
  });

  useEffect(() => {
    if (networkRequest.isIdle()) {
      sendNetworkRequest(initialData);
    }
  }, [networkRequest, sendNetworkRequest, initialData]);

  return [networkRequest, sendNetworkRequest];
}
// File: src/hooks/useQueryState.js

import { useEffect, useState } from "react";
import { NetworkRequest } from "./NetworkRequest";
import { sendNetworkRequest } from "../mock/sendNetworkRequest";

export function useQueryState({ path, initialData }) {
  const [queryState, setQueryState] = useState(NetworkRequest.create());

  // FIXME:
  // eslint-disable-next-line react-hooks/exhaustive-deps
  const sendQuery = (data) => {
    setQueryState((state) => {
      return state.load();
    });

    sendNetworkRequest({ path, method: "GET", data }).then(
      (response) => {
        setQueryState((state) => {
          return state.succeed(response);
        });
      },
      (error) => {
        setQueryState((state) => {
          return state.fail(error);
        });
      }
    );
  };

  const setNetworkState = (setStateAction) => {
    setQueryState((state) => {
      return state.map((data) => {
        if (typeof setStateAction === "function") {
          return setStateAction(data);
        } else {
          return setStateAction;
        }
      });
    });
  };

  useEffect(() => {
    if (queryState.isIdle()) {
      sendQuery(initialData);
    }
  }, [queryState, sendQuery, initialData]);

  return [queryState, sendQuery, setNetworkState];
}
Notiamo come, in useQueryState, abbiamo aggiunto un commento:
// FIXME:
// eslint-disable-next-line react-hooks/exhaustive-deps

Questo commento spegne un avvertimento di React che ha a che fare con le dipendenze dell’effetto, che è proprio quello che non bisognerebbe fare! Ed ecco perché abbiamo usato “FIXME:” per tracciare il problema, con la nostra estensione di VS Code (se l’hai installata).

 

Approfondimenti

La guida ufficiale di React ha una serie di capitoli interi legati agli effetti, perché, come abbiamo detto, sono il concetto più mal interpretato e impropriamente usato di React. Per approfondire ulteriormente con altri esempi, puoi, appunto, fare riferimento alla guida ufficiale:

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.