Devi aver sentito questo molto spesso che dovremmo memorizzare le funzioni di callback usando useCallback() per evitare inutili re-rendering dei componenti.

Ma cos'è esattamente useCallback() 🤔 . Ci hai mai pensato?

Lascia che ti aiuti a capire di cosa si tratta e dove utilizzarlo correttamente.

Per prima cosa comprendiamo i controlli di uguaglianza delle funzioni

Prima di vedere come lo usiamo, vediamo cosa risolve. Scriviamo una semplice funzione che restituisca una funzione:

mul1 e mul2 sono funzioni che moltiplicano due numeri. Sono stati creati dalla funzione di moltiplicazione .

Le funzioni in JavaScript sono l'oggetto normale. Le funzioni mul1 e mul2 condividono lo stesso codice ma sono oggetti funzione diversi. Confrontandoli valutiamo falso .

È proprio così che funzionano gli oggetti JavaScript. Un oggetto (incluso un oggetto funzione) è uguale solo a se stesso.

Ora lo scopo di useCallback()

React.useCallback() risolve sostanzialmente il controllo di uguaglianza delle funzioni che abbiamo visto sopra. Diversi oggetti funzione che condividono lo stesso codice vengono spesso creati all'interno dei componenti di React:

handleClick (funzione in linea) è un oggetto funzione diverso su ogni rendering di CustomComponent .

E non c'è alcun danno ad avere funzioni dichiarate in linea con React Components. Non avrà un impatto negativo sulle prestazioni.

Ma in alcuni casi, è necessario mantenere una singola istanza di funzione tra i rendering:

1. Come quando la funzione ha uno stato interno, ad esempio quando la funzione è antirimbalzo/limitata

2. Un componente funzionale avvolto all'interno React.memo()accetta un oggetto funzione prop.

Se un componente figlio che accetta un callback si basa su un controllo di uguaglianza referenziale (ad esempio: React.memo() o shouldComponentUpdate() ) per evitare inutili re-render quando i suoi props cambiano, allora è importante che tutti gli oggetti callback non cambino tra rende.

Pertanto, nel componente padre, possiamo avvolgere la proprietà di callback in useCallback() e garantire che stia passando lo stesso oggetto funzione nel componente figlio ottimizzato.

3. Quando l'oggetto funzione è una dipendenza da altri hook, ad es useEffect(..., [callback])

Nell'esempio sopra, se myFunction fa qualcosa che provoca la ricostruzione di MyComponent (ad esempio se fa qualcosa che cambia gli oggetti di scena o lo stato) ti porterà in uno stato di ciclo infinito.

Per evitare ciò, avvolgiamo useCallback() attorno a una funzione e definiamo le sue dipendenze per garantire che la funzione venga ricreata solo se le sue dipendenze sono cambiate. Quindi la funzione non viene più dichiarata ad ogni ciclo di rendering

Quindi i casi d'uso di cui sopra sono quando, useCallback hook è utile: dati gli stessi valori di dipendenza, l'hook restituisce la stessa istanza di funzione tra i rendering e aumenta le prestazioni.

Spero che ti abbia aiutato a capire che in realtà è useCallback()! 😊

Grazie per aver letto questo articolo. Se ti è piaciuto, non esitare a fare clic sul pulsante 👏 per aiutare gli altri a trovarlo.