Guida per principianti su useMemo in ReactJS

Ciao a tutti, futuri sviluppatori React! Oggi esploreremo uno dei hook più potenti di React: useMemo. Non preoccupatevi se siete nuovi alla programmazione; vi guiderò attraverso questo concetto passo per passo, proprio come ho fatto per innumerevoli studenti nei miei anni di insegnamento. Allora, prendete una tazza di caffè (o tè, se è la vostra bevanda preferita) e partiamo insieme per questa avventura entusiasmante!

Cos'è useMemo?

Prima di addentrarci nei dettagli, cerchiamo di capire di cosa si occupa useMemo. Immaginate di voler cuocere dei biscotti (adoro questa analogia perché, beh, chi non adora i biscotti?). Avete una ricetta che richiede alcune calcolazioni complesse per determinare la quantità perfetta di gocce di cioccolato. Ora, ricordereste questi calcoli ogni volta che fate i biscotti, o li scrivereste e li riutilizzereste? Ecco esattamente cosa fa useMemo - ricorda (o "memoizza") il risultato di un calcolo così non dovete ripeterlo inutilmente.

In termini di React, useMemo è un hook che vi permette di memorizzare il risultato di un calcolo tra i re-rendering. È come avere un assistente super-intelligente che ricorda i compiti complessi per voi!

Firma del Hook useMemo

Analizziamo come utilizziamo effettivamente il hook useMemo:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Non panicate! So che questa potrebbe sembrare un po' intimidatoria all'inizio, ma analizziamo:

1. useMemo è il nome del nostro hook.
2. Accetta due argomenti:

• Una funzione che esegue il nostro calcolo (() => computeExpensiveValue(a, b))
• Un array di dipendenze ([a, b])

3. Restituisce un valore memoizzato.

Pensateci in questo modo: useMemo sta dicendo, "Ehi React, esegui questo calcolo solo se a o b è cambiato. Altrimenti, dammi il risultato che ricordi dall'ultima volta."

Applicazione del Hook useMemo

Ora vediamo useMemo in azione con un esempio del mondo reale. Immaginate di costruire un carrello della spesa per un negozio online (perché chi non ama fare shopping online?).

import React, { useMemo, useState } from 'react';

function ShoppingCart() {
const [cart, setCart] = useState([
{ id: 1, name: "React T-Shirt", price: 20 },
{ id: 2, name: "React Hoodie", price: 40 },
{ id: 3, name: "React Cap", price: 15 }
]);

const totalPrice = useMemo(() => {
console.log("Calculating total price...");
return cart.reduce((total, item) => total + item.price, 0);
}, [cart]);

return (
<div>
<h2Il tuo carrello della spesa</h2>
{cart.map(item => (
<div key={item.id}>{item.name} - ${item.price}</div>
))}
<h3>Totale: ${totalPrice}</h3>
</div>
);
}

Analizziamo questo esempio:

1. Abbiamo un carrello della spesa con alcuni articoli, ciascuno con un nome e un prezzo.
2. Utilizziamo useMemo per calcolare il prezzo totale di tutti gli articoli nel carrello.
3. Il calcolo viene eseguito solo quando il cart cambia (è ciò che fa [cart] alla fine).

Perché è utile? Immaginate se calcolare il totale fosse un'operazione veramente complessa (forse coinvolgente sconti, tasse, ecc.). Senza useMemo, React zou recalcolare questo ogni volta che il componente si re-renderizza, anche se il carrello non è cambiato. Con useMemo, viene calcolato solo quando necessario, potenzialmente risparmiando molto tempo di elaborazione!

Conservazione dei Riferimenti

Un'altra funzionalità fantastica di useMemo è la sua capacità di conservare i riferimenti. "Cos'è?" chiedo io. Bene, spiego con un altro esempio.

Immaginate di costruire un'app per la lista delle cose da fare (perché ogni programmatore ha costruito una di queste almeno una volta, credetemi!). Vuoi filtrare i tuoi compiti in base al loro stato.

import React, { useMemo, useState } from 'react';

function TodoList() {
const [todos, setTodos] = useState([
{ id: 1, text: "Impara React", completed: false },
{ id: 2, text: "Crea app straordinarie", completed: false },
{ id: 3, text: "Cambia il mondo", completed: false }
]);

const [filter, setFilter] = useState('all');

const filteredTodos = useMemo(() => {
console.log("Filtering todos...");
switch(filter) {
case 'completed':
return todos.filter(todo => todo.completed);
case 'active':
return todos.filter(todo => !todo.completed);
default:
return todos;
}
}, [todos, filter]);

return (
<div>
<h2La mia lista delle cose da fare</h2>
<button onClick={() => setFilter('all')}>Tutto</button>
<button onClick={() => setFilter('active')}>Attivi</button>
<button onClick={() => setFilter('completed')}>Completati</button>
{filteredTodos.map(todo => (
<div key={todo.id}>{todo.text}</div>
))}
</div>
);
}

In questo esempio:

1. Abbiamo una lista di cose da fare e uno stato di filtraggio.
2. Utilizziamo useMemo per creare una lista di cose da fare filtrate in base al filtraggio corrente.
3. La lista filtrata viene ricalcolata solo quando todos o filter cambia.

La magia qui è che filteredTodos sarà sempre lo stesso riferimento oggetto a meno che todos o filter non cambi. Questo è estremamente importante per ottimizzare le prestazioni, specialmente quando si passa questa lista a componenti figli.

Conclusione

Eccoci arrivati, ragazzi! Abbiamo viaggiato attraverso il mondo di useMemo, dalla comprensione del suo concetto di base fino alla sua applicazione con esempi del mondo reale. Ricordate, useMemo è come il vostro fedele compagno, sempre lì per aiutarvi a ottimizzare le vostre applicazioni React evitando calcoli inutili.

Ecco una tabella di riepilogo dei metodi che abbiamo coperto:

Metodo	Scopo	Sintassi
useMemo	Memoizza calcoli costosi	useMemo(() => computation, dependencies)

Come con qualsiasi strumento nella programmazione, utilizzate useMemo con saggezza. È fantastico per ottimizzare le prestazioni, ma usarlo in eccesso può rendere il codice più complesso senza benefici significativi. Come sempre dico ai miei studenti, "Con grandi poteri arrivano grandi responsabilità!"

Continuate a praticare, a costruire e, soprattutto, a divertirvi con React. Prima di sapere, sarete in grado di creare applicazioni straordinarie che faranno dire agli sviluppatori esperti "Wow!" E ricorda, se mai ti senti bloccato, immagina di spiegare il tuo codice a un'anatra di gomma. Funziona meravigliosamente, credimi!

Buon coding, futuri maestri di React!

Credits: Image by storyset