CONTATTACI

Guide per aspiranti programmatori

Programmatore che esamina react al microscopio
Lezione 38 / 41

Che cos’è una reference in React

Nel corso delle varie sezioni, abbiamo citato un paio di volte il concetto di ref: una volta per dire che, insieme a key e children, è un attributo valido per ogni elemento o componente React; un’altra volta quando si parlava dei valori che sopravvivono (cioè non vengono ricalcolati) ai cicli di rendering di React.

In React, la parola reference descrive un valore che viene mantenuto in memoria tra un ciclo di rendering e l’altro, e il cui cambiamento non scatena un nuovo ciclo di rendering.

React ci fornisce una funzione hook, che si chiama useRef (con ref che abbrevia, appunto, reference) e che ci permette di generare un valore di questo tipo. Cominciamo con la sintassi:

 

const myRef = useRef(initialValue);

In modo analogo a (uno dei due usi di) useState, inizializziamo il riferimento passando a useRef il suo valore iniziale. A differenza di useState, però, useRef non restituisce un array ma un oggetto, con una sola chiave che ha nome current e contiene il valore iniziale:

 

const myRef = useRef(0);

/*
myRef === {
  current: 0
}
*/

Perché questo strato di complessità? In linguaggio JavaScript, numeri, stringhe, booleani, null e undefined, quando passano da una variabile all’altra, vengono clonati all’interno della memoria. Array, oggetti e funzioni, diversamente, vengono salvati in memoria con un sistema più complesso e viene loro assegnato un indirizzo di memoria (un puntatore) che permette al processore di recuperarli. Non sapendo cosa i riferimenti conterranno, React inserisce il loro valore in un oggetto, così che non venga mai clonato dalla memoria, causando eventuali imprevisti.

 

Che cos’è una ref in React

In sostanza, i riferimenti rappresentano la mutabilità in React. Abbiamo visto come, in programmazione funzionale, per assicurare l’assenza degli effetti collaterali, si vieta la mutabilità (come l’uso di let, l’aggiornamento di elementi di un array o dei valori di un oggetto). Per i casi in cui la mutabilità è richiesta, React prevede i riferimenti.

Infatti, mentre utilizziamo le funzioni setter per dare in pasto a React il “prossimo” stato, possiamo aggiornare i riferimenti direttamente, per esempio:

 

myRef.current = 42;

Essendo i componenti di React delle funzioni pure, i riferimenti non possono far parte del ciclo di rendering. Permettendo la mutabilità, i riferimenti devono necessariamente rimanere fuori dal contesto di React, infatti:

  1. I riferimenti rimangono identici tra un ciclo di rendering e l’altro: React non li include nella fase di “ricalcolo dell’interfaccia”.
  2. Modificare il valore di un riferimento non scatena un ciclo di rendering: React non si occupa di sincronizzarne l’aggiornamento con gli stati.

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.