{"id":54228,"date":"2022-05-10T08:05:28","date_gmt":"2022-05-10T07:05:28","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=54228&preview=true&preview_id=54228"},"modified":"2023-02-22T15:44:35","modified_gmt":"2023-02-22T14:44:35","slug":"usecallback-react","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/usecallback-react\/","title":{"rendered":"Come Utilizzare l’Hook useCallback di React"},"content":{"rendered":"

Non \u00e8 un segreto che React.js \u00e8 diventato molto popolare<\/a> negli ultimi anni. Ora \u00e8 la libreria JavaScript scelta<\/a> da molti degli attori pi\u00f9 importanti di internet, compresi Facebook e WhatsApp.<\/p>\n

Una delle ragioni principali della sua ascesa \u00e8 stata l’introduzione degli hook a partire dalla versione 16.8<\/a>. Gli hook permettono di attingere alle funzionalit\u00e0 di React senza scrivere componenti di classe. Ora i componenti funzionali con gli hook sono diventati la struttura preferita dagli sviluppatori che lavorano con React.<\/p>\n

In questo articolo, analizzeremo approfonditamente uno specifico hook – useCallback<\/code> – perch\u00e9 tocca una parte fondamentale della programmazione funzionale conosciuta come memoization. Saprete esattamente come e quando utilizzare l’hook useCallback<\/code> e sfruttarlo al massimo per migliorare le prestazioni.<\/p>\n

Siete pronti? Cominciamo!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Cos’\u00e8 la Memoizzazione?<\/h2>\n

La memoizzazione \u00e8 quando una funzione complessa memorizza il suo output in modo che la volta successiva venga chiamata con lo stesso input. \u00c8 simile al caching<\/a>, ma ad un livello pi\u00f9 locale. Pu\u00f2 saltare qualsiasi calcolo e restituire l’output pi\u00f9 velocemente perch\u00e9 questo \u00e8 gi\u00e0 calcolato.<\/p>\n

Questo pu\u00f2 avere un effetto significativo sull’allocazione della memoria e sulle prestazioni, e questa tensione \u00e8 ci\u00f2 che l’hook useCallback<\/code> ha lo scopo di alleviare.<\/p>\n

React’s useCallback vs useMemo<\/h3>\n

A questo punto, vale la pena dire che useCallback<\/code> si abbina bene con un altro hook chiamato useMemo<\/code>. Li analizzeremo entrambi, ma in questo articolo ci concentreremo su useCallback<\/code>.<\/p>\n

La differenza principale \u00e8 che useMemo<\/code> restituisce un valore memoizzato, mentre useCallback<\/code> restituisce una funzione memoizzata. Ci\u00f2 significa che useMemo<\/code> \u00e8 utilizzato per memoizzare un valore calcolato, mentre useCallback<\/code> restituisce una funzione che potete invocare in seguito.<\/p>\n

Questi hook vi restituiranno una versione in cache a meno che una delle dipendenze (ad esempio lo stato o le propriet\u00e0) non cambi.<\/p>\n

Diamo un’occhiata alle due funzioni in azione:<\/p>\n

import { useMemo, useCallback } from 'react'\nconst values = [3, 9, 6, 4, 2, 1]\n\n\/\/ Questo restituir\u00e0 sempre lo stesso valore, un array ordinato. Quando l'array dei valori cambia, viene ricalcolato.\nconst memoizedValue = useMemo(() => values.sort(), [values])\n\n\/\/ Questo mi restituir\u00e0 una funzione che potr\u00e0 essere richiamata in seguito. Restituir\u00e0 sempre lo stesso risultato, a meno che l'array dei valori non venga modificato.\nconst memoizedFunction = useCallback(() => values.sort(), [values])<\/code><\/pre>\n
Lo snippet di codice qui sopra \u00e8 un esempio artificioso ma mostra la differenza tra le due callback:<\/p>\n
    \n
  1. memoizedValue<\/code> diventer\u00e0 l’array [1, 2, 3, 4, 6, 9]<\/code>. Finch\u00e9 la variabile dei valori rimane, lo far\u00e0 anche memoizedValue<\/code> e non si ricompatter\u00e0 mai.<\/li>\n
  2. memoizedFunction<\/code> sar\u00e0 una funzione che restituir\u00e0 l’array [1, 2, 3, 4, 6, 9]<\/code>.<\/li>\n<\/ol>\n
    Il bello di queste due callback \u00e8 che vengono memoizzate nella cache e rimangono in giro fino a quando l’array di dipendenze non cambia. Questo significa che durante un rendering, non saranno garbage collected.<\/p>\n\n
    Rendering e React<\/h2>\n
    Perch\u00e9 la memoizzazione \u00e8 importante quando si parla di React?<\/p>\n
    La memoizzazione ha a che fare con il modo in cui React rende i vostri componenti. React utilizza un Virtual DOM archiviato in memoria per confrontare i dati e decidere cosa aggiornare.<\/p>\n
    Il DOM virtuale aiuta React nelle prestazioni e mantiene veloce la vostra applicazione. Di default, se un qualsiasi valore cambia nel vostro componente, l’intero componente viene reso nuovamente. Questo rende React “reattivo” all’input dell’utente e permette di aggiornare lo schermo senza ricaricare la pagina.<\/p>\n
    Non dovreste fare il rendering del vostro componente perch\u00e9 le modifiche non avranno effetto su quel componente. \u00c8 qui che diventa utile la memoizzazione attraverso useCallback<\/code> e useMemo<\/code>.<\/p>\n
    Quando React ri-renderizza il vostro componente, ricrea anche le funzioni che avete dichiarato all’interno del vostro componente.<\/p>\n
    Si noti che, quando si confronta l’uguaglianza di una funzione con un’altra funzione, sar\u00e0 sempre falsa. Dato che una funzione \u00e8 anche un oggetto, sar\u00e0 uguale solo a se stessa:<\/p>\n
    \/\/ queste variabili contengono la stessa identica funzione, ma non sono uguali\nconst hello = () => console.log('Hello Matt')\nconst hello2 = () => console.log('Hello Matt')\n\nhello === hello2 \/\/ false\nhello === hello \/\/ true<\/code><\/pre>\n
    In altre parole, quando React ri-renderizza il componente, vedr\u00e0 tutte le funzioni dichiarate nel componente come nuove funzioni.<\/p>\n
    Questo va bene nella maggior parte dei casi, le funzioni sono semplici da calcolare e non avranno un impatto sulle prestazioni. Ma le volte in cui non volete che la funzione sia vista come una nuova funzione, potete contare su useCallback<\/code>.<\/p>\n
    Potreste pensare: “Quando non voglio che una funzione sia vista come una nuova funzione? Beh, ci sono alcuni casi in cui useCallback<\/code> ha pi\u00f9 senso:<\/p>\n
      \n
    1. State passando la funzione ad un altro componente anche questo memoizzato (useMemo<\/code>)<\/li>\n
    2. La vostra funzione ha uno stato interno che deve ricordare<\/li>\n
    3. La vostra funzione \u00e8 una dipendenza di un altro hook, come useEffect<\/code><\/li>\n<\/ol>\n
      Benefici delle Prestazioni di React useCallback<\/h2>\n
      Se useCallback<\/code> \u00e8 usato in modo appropriato, pu\u00f2 aiutarvi a rendere pi\u00f9 veloce la vostra applicazione e ad evitare che i componenti vengano renderizzati nuovamente se non \u00e8 necessario.<\/p>\n
      Supponiamo, ad esempio, che avete un componente che recupera una grande quantit\u00e0 di dati ed \u00e8 responsabile della visualizzazione di quei dati sotto forma di un grafico o un diagramma<\/a>, come questo:<\/p>\n
      \n
      \"Un
      Grafico a barre generato utilizzando un componente React.<\/figcaption><\/figure><\/figure>\n
      Supponiamo che il componente genitore della vostra visualizzazione dei dati sia renderizzato nuovamente, ma le propriet\u00e0 o lo stato cambiati non abbiano effetto su quel componente. In questo caso, probabilmente non si dovrebbe o non si ha bisogno di fare un nuovo rendering e recuperare tutti i dati. Evitare questo re-render e refetch pu\u00f2 far risparmiare larghezza di banda al vostro utente e offrire una user experience pi\u00f9 fluida.<\/p>\n
      Svantaggi di React useCallback<\/h2>\n
      Anche se questo hook pu\u00f2 aiutarvi a migliorare le prestazioni, presenta anche le sue insidie. Alcune cose da considerare prima di usare useCallback<\/code> (e useMemo<\/code>) sono:<\/p>\n