Ottimizzazione dell'app React con react memo e useCallback h.

La funzione di React memoè un potente strumento per prevenire inutili rivalutazioni dei componenti funzionali. Avvolgendo un componente nella memofunzione, puoi dire a React di eseguire nuovamente il rendering del componente solo quando i suoi oggetti di scena sono cambiati. Questo può migliorare notevolmente le prestazioni della tua applicazione, soprattutto se hai un numero elevato di componenti che vengono frequentemente sottoposti a rendering.

Ecco un esempio di come utilizzare memoper evitare inutili rivalutazioni di un semplice componente:

import React, { memo } from 'react';

const TenchoComponent= (props) => {
  // component implementation
});

export default React.memo(TenchoComponent)

Se è così, allora perché non lo stiamo applicando a tutti i componenti? Anche l'uso del memo ha un costo. Quando usiamo il memo , prima del rendering, React va su TenchoComponent e confronta il vecchio valore con il nuovo valore. In questo processo, la reazione deve eseguire 2 attività, prima memorizzare il vecchio valore e quindi confrontare il vecchio valore con il nuovo valore che ha anche il proprio costo in termini di prestazioni. Pertanto dipende molto dal componente, dal numero di oggetti di scena che vengono passati al componente e dal numero di componenti figli. React memo può essere un ottimo strumento se disponiamo di un albero di componenti di grandi dimensioni con molti componenti figlio.

Il confronto tra il vecchio valore e il nuovo valore viene eseguito utilizzando un normale operatore di confronto ' === '. Questo confronto funzionerà solo su tipi di dati primitivi come boolean, string, ecc., ma non funzionerà per valori non primitivi come array, oggetti, ecc.

false===false
// will return true

'tencho' === 'tencho'
// will return true

[1,2,3]===[1,2,3]
//will return false

{} ==={}
// will return false

Ecco un esempio di utilizzo dell'hook useCallbackin un componente funzionale React:

import { useCallback } from 'react';

function MyComponent({ someProp }) {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <button onClick={handleClick}>Click Me</button>
      <p>You have clicked the button {count} times</p>
    </div>
  );
}

export default MyComponent;

Ciò è utile quando si dispone di un componente che esegue nuovamente il rendering frequentemente e si desidera impedire che determinate funzioni vengano ricreate a ogni rendering. Usando useCallbackper eseguire il wrapping di una funzione, puoi assicurarti che la funzione venga ricreata solo quando le dipendenze specificate nel secondo argomento sono cambiate.

Vale la pena notare che useCallbackè simile a useMemoed entrambi sono utili per evitare inutili re-render, ma useMemoè usato per memorizzare il valore di una funzione e useCallbackviene usato per memorizzare la funzione stessa.