Quando usare useMemo e useCallback: una breve guida per i fan di React

Se sei uno sviluppatore React, potresti esserti già imbattuto in discussioni React useMemo vs useCallback online e sei finito per essere più confuso che mai. Può essere molto difficile capire la differenza tra useMemo e useCallback. Va bene! All'inizio può essere difficile capire React-Hooks, ma possono essere estremamente utili su tutta la linea.

In questo articolo, ti mostreremo la differenza tra useCallback e useMemo e quando usare useCallback e useMemo.

La differenza tra useMemo e useCallback

Con React 16.8 sono stati introdotti due hook integrati. Queste funzionalità sono state introdotte per ottimizzare le prestazioni. La differenza tra useMemo e useCallback sembra trascurabile, quindi cercheremo di ripulire la confusione.

Cosa sono i React-Hook?

Gli hook sono nuove funzionalità introdotte in React che consentono useState e altre funzionalità di React senza scrivere una classe. Gli hook sono metodi e funzioni che si "agganciano" alle caratteristiche dello stato e del ciclo di vita di React.

useCallback vs useMemo

L'hook useCallback viene utilizzato ogni volta che un componente figlio viene riprodotto più e più volte senza che sia necessario. Quando si utilizza useCallback, è possibile evitare questo non necessario rieseguire il rendering restituendo la stessa istanza di quella funzione che viene passata invece di creare una nuova istanza ogni volta. Ciò può far risparmiare una notevole quantità di tempo (e denaro speso per le ore di sviluppo). Il passaggio di una matrice di dipendenze con una richiamata memorizzata risulterà in una versione memorizzata che verrà modificata solo quando la dipendenza cambia.

useMemo è utilizzato nel componente funzionale di React. Viene utilizzato per restituire un valore memorizzato. La memorizzazione si riferisce al processo di salvataggio del tempo di ricompilazione restituendo un risultato memorizzato nella cache invece di ricompilare nuovamente una funzione con lo stesso argomento per l'esecuzione successiva. Il risultato memorizzato nella cache viene restituito la prossima volta che viene chiamato. Gli hook useMemo forniscono valori mappati in memoria.

Chiaramente, ci sono alcune somiglianze. Sia in useMemo che in useCallback, l'hook accetta una funzione e un array di dipendenze. Tuttavia, useCallback ricorderà il valore restituito e useMemo ricorderà la funzione. In altre parole, uno memorizza nella cache un tipo di valore e l'altro memorizza nella cache una funzione.

• LEGGI DI PIÙ – Come e perché dovresti tenere i tuoi file organizzati
• I 9 modi migliori per utilizzare i gadget elettronici in classe

Quando usare useCallback vs useMemo

Quindi, quando dovresti usare useCallback e quando useMemo è l'opzione migliore? Diamo un'occhiata a un esempio. Se un codice computazionalmente pesante e costoso accetta argomenti e restituisce un valore, useMemo è l'opzione migliore. In questo modo, puoi continuare a fare riferimento al valore tra i rendering senza rieseguire il codice e sprecare tempo e potenza di calcolo.

Se è necessario mantenere un'istanza della funzione persistente su più rendering, è necessario utilizzare useCallback invece perché pone essenzialmente la funzione al di fuori dell'ambito del componente React per mantenerla intatta.

Cos'è useEffect?

Abbiamo già menzionato l'array di dipendenza, che potresti aver incontrato quando usi useEffect. useEffect è un altro hook di React. Viene utilizzato per gestire gli effetti collaterali nei componenti funzionali utilizzando la logica dell'argomento di callback. Le dipendenze sono l'elenco delle dipendenze dell'effetto collaterale, ad esempio oggetti di scena o valori di stato.

Questo hook mostra a React che il componente deve eseguire un'azione dopo il rendering. Quando il DOM viene aggiornato, l'effetto passato verrà memorizzato. Puoi anche eseguire il recupero dei dati per ottenere questo risultato.

In breve, useCallback, useMemo e useEffect si occupano tutti di migliorare le prestazioni tra il re-rendering dei componenti nelle applicazioni React.

È importante non abusare degli hook, però. Gli hook introducono una logica nuova e complessa e potrebbero potenzialmente avere l'effetto opposto a quello previsto, creando problemi di prestazioni invece di risolverli. useMemo dovrebbe essere usato solo per calcoli molto costosi.

Non utilizzare useMemo o useCallback per risolvere problemi fondamentali con la tua applicazione. Alla fine, questi problemi riemergeranno e ti perseguiteranno, quindi è meglio occuparsi prima di eventuali errori noti.

• LEGGI DI PIÙ – Come scegliere il miglior CMS
• Quali sono i pro ei contro dei metodi crittografici?

Conclusione

Si spera che questo articolo sia stato perspicace e tu capisca meglio i due ganci. In sintesi:

• Entrambi accettano una funzione e una matrice di dipendenze
• useMemo memorizza il valore restituito, useCallback memorizza la funzione.

La differenza tra useMemo e useCallback è abbastanza chiara! Questi strumenti hanno il potenziale per risparmiare tempo e denaro, ma solo se utilizzati nel contesto e nell'ambiente appropriati.

Spero che questo tutorial ti abbia aiutato a conoscere Quando usare useMemo e useCallback: una breve guida per i fan di React . Se vuoi dire qualcosa, faccelo sapere attraverso le sezioni dei commenti. Se ti piace questo articolo, condividilo e segui WhatVwant su Facebook, Twitter e YouTube per ulteriori suggerimenti tecnici.

Quando usare useMemo e useCallback – Domande frequenti