_Continua a scrollare... Hai ormai risposto, giusto?_
_Ecco la risposta..._ ## Perché `useCallback` ha performance peggiori? Si legge spesso che l'uso di `React.useCallback` migliora le performance e che "le funzioni inline possono essere problematiche per le performance", quindi perché è meglio _non_ usare `useCallback`? Facciamo un passo indietro dall'esempio proposto e da React in generale. Consideriamo che: **Ogni linea di codice che viene eseguita ha un costo.** Proviamo ad esplodere l'esempio che usa `useCallback` al fine di illustrare meglio le istruzioni che vengono eseguite (senza cambiare il comportamento): ```js const dispense = (candy) => { setCandies((allCandies) => allCandies.filter((c) => c !== candy)); }; const dispenseCallback = React.useCallback(dispense, []); ``` Di nuovo l'originale: ```js const dispense = (candy) => { setCandies((allCandies) => allCandies.filter((c) => c !== candy)); }; ``` Notate qualcosa di strano? Guardiamo la diff: ```diff const dispense = (candy) => { setCandies((allCandies) => allCandies.filter((c) => c !== candy)); }; + const dispenseCallback = React.useCallback(dispense, []); ``` Sono _esattamente_ le stesse a part che la versione con `useCallback` esegue _più_ istruzioni. Non solo la definizione della funzione, ma anche la definizione di un array (`[]`) _e_ la chiamata a `React.useCallback` che sta a sua volta settando properties ed eseguendo altre istruzioni etc. In _entrambi_ i casi JavaScript deve allocare memoria per la definizione della funzione ad ogni _render_ e in base a come `useCallback` è implementata, si ottiene _altra_ allocazione per le definizioni delle funzioni (non è questo il caso, ma il punto resta valido). > Questo è stato anche oggetto di un sondaggio su [Twitter da parte di Kent](https://twitter.com/kentcdodds/status/1135943012410830848) Altra menzione è il fatto che nel secondo render del componente, la funzione `dispense` originale viene garbage collected (liberando spazio in memoria) ed un'altra viene creata. Invece, con utilizzo di `useCallback` la funzione `dispense` originale **non** viene garbage collected ed un'altra viene creata, quindi anche dal punto di vista dello spazio di memoria utilizzato le performance sono peggiori. Come nota correlata, se avete delle dipendenze allora è molto probabile che React stia mantenendo un riferimento alle funzioni precedenti perché la memoizzazione tipicamente significa che manteniamo copie dei vecchi valori da ritornare nel caso in cui otteniamo le stesse dipendenze fornite precedentemente. I più attenti di voi noteranno che questo significa che React deve anche mantenere un riferimento alle dipendenze per questo controllo di uguaglianza (che tra l'altro sta probabilmente già accadendo grazie alla vostra closure, ma è comunque qualcosa che vale la pena menzionare). ## In che modo `useMemo` è differente, ma allo stesso tempo simile? `useMemo` è simile `useCallback` tranne per il fatto che applica la memoization a qualsiasi tipo (non solo funzioni). Lo permette accettando una funzione che ritorna il valore e in seguito la funzione viene richiamata _solo_ quando il valore deve essere recuperato: tipicamente succede una volta sola per ogni cambio degli elementi dell'array delle dipendenze tra un render e l'altro. Quindi, se non volessi inizializzare `initialCandies` ad ogni render, potrei fare così: ```diff - const initialCandies = ['snickers', 'skittles', 'twix', 'milky way']; + const initialCandies = React.useMemo( + () => ['snickers', 'skittles', 'twix', 'milky way'], + [] + ); ``` E mi eviterei il problema, ma il risparmio sarebbe così minimo da non giustificare l'aggiunta di complessità al codice. Di fatti, è probabilmente peggio usare `useMemo` perché nuovamente stiamo chiamando una funzione che a sua volta sta assegnando properties etc. In questo caso particolare, la cosa migliore è probabilmente questa: ```diff + const initialCandies = ['snickers', 'skittles', 'twix', 'milky way'] function CandyDispenser() { - const initialCandies = ['snickers', 'skittles', 'twix', 'milky way'] const [candies, setCandies] = React.useState(initialCandies) ``` Ma non sempre si ha questa fortuna perché il valore è derivato dalle `props` o da altre variabili inizializzate nel body della funzione. Il punto resta comunque che i benefici di ottimizzare quel pezzo di codice sono talmente pochi che è meglio investire il tempo nel creare un prodotto migliore. ## Cosa mi porto a casa? **Le ottimizzazioni di performance non sono mai gratuite. Hanno SEMPRE un costo, ma il beneficio apportato NON sempre lo ripaga.** Perciò, _ottimizza responsabilmente_. ## Quindi quando _dovrei_ usare `useMemo` e `useCallback`? Ci sono ragione specifiche per cui questi hooks sono built-in in React: 1. Uguaglianza referenziale 2. Calcoli computazionalmente pesanti ## Uguaglianza referenziale Se siete nuovi alla programmazione/Javascript, imparerete velocemente che non tutti i tipi primitivi si comportano allo stesso modo quando si applica l'operatore di uguaglianza: ```js // EXPECTED true === true // true false === false // true 1 === 1 // true 'a' === 'a' // true // UNEXPECTED(?) {} === {} // false [] === [] // false () => {} === () => {} // false const z = {} z === z // true // NOTE: React in realtà usa Object.is, ma è molto simile a === ``` Senza scendere troppo nei dettagli, basta ricordare che ogni volta che si definisce un oggetto dentro un Function Component React, questo _non_ sarà referenzialmente uguale all'ultima volta in cui lo stesso oggetto è stato definito, anche se ha le stesse properties con gli stessi valori. Ci sono due casi in cui l'uguaglianza referenziale ha impatti in React, vediamoli uno alla volta. ### Liste di dipendenze Proviamo a partire da un esempio. > Attenzione, non fate troppo caso al codice che è volutamente complesso. Concentratevi sui concetti. ```tsx function Foo({ bar, baz }) { const options = { bar, baz }; React.useEffect(() => { buzz(options); }, [options]); // dobbiamo eseguire nuovamente questo effetto se bar o baz cambiano return