Introduzione a React useCallBack()

Quando si crea un sito Web utilizzando React, è importante considerare quanto velocemente si carica e quanto velocemente gli utenti possono interagire con esso. Un modo per rendere più veloce un sito Web React è impedire che svolga lavori non necessari, come il rendering di parti della pagina che non sono state modificate.

La funzioneuseCallback() in React ci aiuta a raggiungere questo obiettivo ricordando le funzioni che definiamo e ricreandole solo quando necessario.Ciò può rendere il sito Web più veloce e più reattivo per gli utenti. React è la libreria JavaScript front-end più popolare, secondo un sondaggio Stack Overflow nello stesso anno, suggerendo che useCallback() è probabilmente ampiamente utilizzato nel settore.

In questo articolo, spiegheremo cos'è useCallBack() in React e come usarlo nel nostro codice React per migliorare le prestazioni.

Cos'è useCallBack in React?

useCallback() è una funzione hook fornita da React che viene utilizzata per memorizzare una funzione. In altre parole, aiuta a ottimizzare le prestazioni di un componente evitando il re-rendering indesiderato.

In React, quando lo stato o l'elica di un componente cambia, il componente viene nuovamente renderizzato per riflettere i valori aggiornati. Questo processo è computazionalmente costoso e può ridurre le prestazioni dell'applicazione se gestito in modo improprio. È qui che useCallback() torna utile.

Con useCallback(), gli utenti possono memorizzare una funzione, il che significa che viene ridefinita solo quando le sue dipendenze cambiano. Ciò impedisce il re-rendering non necessario dei componenti, ottimizzando così le prestazioni dell'applicazione.

Ecco un esempio -

const memoizedCallback = useCallback(

() => {

fai qualcosa(a, b);

},

[a,b],

);

Mentre iniziare con React attraverso i tutorial è un ottimo modo, seguire un corso dinamico per iniziare con lo sviluppo può aiutarti in modo significativo ad aggiornare le tue abilità. Dai un'occhiata al corso Executive Post Graduate in Software Development - Specialization in Full Stack Development da upGrad a kickstart!

Vantaggi dell'utilizzo di useCallBack()

Ecco alcuni vantaggi dell'utilizzo di React useCallBack() –

• useCallback() può aiutare le applicazioni React a funzionare più velocemente impedendo aggiornamenti non necessari dei componenti.
• Se un componente recupera molti dati e li mostra come un grafico, può trarre vantaggio da useCallback().
• Se il componente principale del grafico si aggiorna, ma le modifiche non influiscono sul grafico, non è necessario aggiornarlo e recuperare nuovamente i dati.
• Utilizzando useCallback() per memorizzare la funzione che recupera i dati, possiamo evitare aggiornamenti non necessari e rendere l'applicazione più veloce e fluida.
• Questa ottimizzazione può migliorare l'esperienza dell'utente, poiché l'applicazione funzionerà in modo più rapido ed efficiente.

Dai un'occhiataai corsi di sviluppo software di upGrad per migliorare te stesso.

Sintassi e parametri di utilizzoCallBack()

const memoizedCallback = useCallback(

() => {

fare qualcosa();

},

[dipendenza1, dipendenza2]

);

Nell'esempio, l' hook useCallback() memorizza la funzione doSomething(), il che significa che memorizza nella cache la versione creata in precedenza. La funzione memorizzata nella cache verrà utilizzata solo nei rendering successivi a meno che il valore didependency1 o dependency2non cambi.

Se una di queste dipendenze cambia, verrà creata una nuova versione della funzionedoSomething() e la versione memorizzata nella cache verrà sostituita con quella nuova.Questo aiuta a ottimizzare le prestazioni dell'applicazione impedendo la creazione di funzioni non necessarie e il re-rendering.

Differenza tra useMemo() e useCallBack()

useCallback e useMemo sono React Hooks che possono migliorare le prestazioni di un'applicazione React memoizzando i valori. Entrambi gli hook accettano una funzione come argomento e restituiscono una versione memorizzata di quella funzione.

Ecco la differenza tra i due:

Scenari in cui utilizzare useCallBack()

Ecco gli scenari in cui è possibile utilizzare useCallBack():

Ottimizzazione dei componenti figlio

useCallback React ottimizza i componenti figli che si basano sull'uguaglianza dei riferimenti per evitare rendering non necessari, specialmente quando si passano callback a questi componenti figli.

Prevenzione di rendering non necessari

React useCallback è particolarmente utile quando si dispone di un componente con un elemento figlio che esegue ripetutamente il rendering senza che sia necessario. È possibile passare una funzione di callback e un array di dipendenza a useCallback per evitare rendering non necessari.

Sfrutta la tua occasione per comprendere in dettaglio la funzione useCallBack() con l'aiuto del corso Bootcamp per lo sviluppo di software Full Stack di upGrad.

Esplora i nostri famosi corsi di ingegneria del software

Esempi di utilizzoCallBack()

Ecco alcuni esempi di come implementare l'hook useCallBack().

useCallBack Esempio 1

Quando un componente padre passa una funzione come prop a un componente figlio, il frequente re-rendering del genitore può causare il re-rendering inutilmente del componente figlio. In tali casi, utilizzare useCallback per memoizzare la funzione che può aiutare a prevenire questi inutili re-rendering.

import React, { useCallback } from 'react';

funzione ParentComponent() {

const handleButtonClick = useCallback(() => {

console.log('Pulsante cliccato');

}, []);

ritorno (

<ChildComponent onClick={handleButtonClick} />

);

}

function ChildComponent({ onClick }) {

ritorno (

<button onClick={onClick}>Cliccami</button>

);

}

useCallBack Esempio 2

Supponiamo di avere una funzione che esegue calcoli complessi su un set di dati di grandi dimensioni. Se questa funzione viene chiamata frequentemente e richiede molto tempo per l'esecuzione, può causare problemi di prestazioni nell'applicazione. In questo scenario, puoi utilizzare useCallback per memorizzare la funzione e impedire una riesecuzione non necessaria del calcolo.

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

funzione ParentComponent() {

const [data, setData] = useState([]);

const processData = useCallback(() => {

const processData = “Dati elaborati”;

restituire i dati elaborati;

}, [dati]);

ritorno (

<ChildComponent processData={processData} />

);

}

function ChildComponent({ processData }) {

const risultato = processData();

ritorno (

<div>{risultato}</div>

);

}

Ottimizzazione delle prestazioni di reazione utilizzando useCallBack()

Un hook useCallback è un potente strumento in React che ti consente di memorizzare una funzione, assicurandoti che venga rifatta solo quando una delle sue dipendenze viene modificata. Ciò è particolarmente vantaggioso per le funzioni ad alta intensità di prestazioni che vengono chiamate frequentemente. Dai un'occhiata all'esempio qui sotto per vedere come può essere utilizzato -

import { useState, useEffect } from 'react';

funzione App() {

const [word, setWord] = useState("Bob");

const say = () => console.log(`La tua parola è: ${parola}`);

usaEffetto(() => {

Dire();

}, [Dire]);

return <div>Benvenuto!</div>;

}

L'esempio dimostra che l'hook useEffect dipende dalla funzione say, il che significa che dovrebbe attivarsi solo con un cambiamento nella funzione. Tuttavia, a causa dei controlli di uguaglianza referenziale di React, diciamo che la funzione risulterà sempre vera, anche in assenza di modifiche effettive, con conseguenti rendering non necessari.

Il callback useEffect verrà utilizzato su ogni rendering, che non è adatto per le prestazioni. Un modo per risolvere questo problema è riposizionare la funzione per utilizzare il blocco Effetto, ma questa non sarebbe una soluzione ideale poiché non saresti in grado di utilizzare la funzione in nessun altro posto. Dai un'occhiata a questo esempio qui sotto -

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

funzione App() {

const [word, setWord] = useState("Bob");

const say = () => console.log(`La tua parola è: ${parola}`);

usaEffetto(() => {

Dire();

}, [Dire]);

return <div>Benvenuto!</div>;

}

Un'altra soluzione consiste nell'implementare l' hook useCallback avvolgendo la funzione. È essenziale ricordare che la funzione useCallback richiede un array di dipendenze proprio come useEffect. Se la funzione accetta variabili, gli utenti possono passarla con l'array; oppure lasciarlo vuoto. Qui, poiché la funzione say si basa sulla parola variabile, la includiamo nell'array.

import {useState, useEffect,useCallback} da 'reagire'

funzione App(){

const [word,setWord]=useState("Bob")

const say = useCallback(()=>console.log(`La tua parola è: ${parola}`),[parola])

usaEffetto(()=>{

Dire()

},[Dire])

return <div>Benvenuto!</div>

}

Quando non utilizzare useCallBack()

Sebbene useCallback() sia uno strumento utile per ottimizzare le prestazioni in determinati scenari, ci sono anche momenti in cui non è necessario o addirittura dannoso. Ecco alcuni esempi di quando non utilizzare useCallback():

• Quando la funzione viene passata come prop è già una funzione pura che non si basa su uno stato esterno.
• Quando la funzione viene passata come prop, non causa problemi di prestazioni e non viene chiamata in modo eccessivo.
• Quando la funzione viene passata come oggetto di scena, viene utilizzata in più punti e deve essere ricreata ogni volta per riflettere comportamenti o dipendenze diversi.
• Quando la funzione viene passata come prop fa parte di un piccolo albero di componenti, il guadagno di prestazioni da useCallback() sarebbe trascurabile.
• Quando la funzione viene passata come prop viene utilizzata come gestore di eventi e viene chiamata solo una volta.

In questi casi, l'utilizzo di useCallback() può effettivamente ridurre le prestazioni a causa dell'overhead della creazione e della gestione del callback memorizzato. È importante considerare attentamente ogni caso d'uso e soppesare i potenziali vantaggi rispetto ai potenziali costi prima di decidere se utilizzare o meno useCallback().

Competenze di sviluppo software richieste

Conclusione

L'uso di useCallback può essere un potente strumento per ottimizzare le prestazioni della tua applicazione React. Memorizzando le funzioni, è possibile evitare inutili ripetizioni, portando a un'esperienza utente più fluida ed efficiente. Tuttavia, è importante usare useCallback con giudizio e comprendere gli scenari in cui è più efficace.

upGrad offre un programma di Master of Science in Computer Science che fornisce una formazione informatica completa incentrata sulle competenze rilevanti per il settore. Questo programma è rivolto a qualsiasi persona più fresca o più esperta per migliorare le proprie capacità di sviluppo software. Con questo corso, gli studenti saranno più che pronti ad aggiornare le loro carriere nel mondo reale e diventare esperti nei campi a cui aspirano.