Cosa fa useMemo? Quando usarlo? È necessario avvolgere un componente figlio in React.memo?

useMemo — è un hook in React che permette di memorizzare (cache) il risultato di una funzione per evitare calcoli ripetuti non necessari durante il rerender del componente.

Usare useMemo è consigliato quando si hanno calcoli costosi in termini di risorse o oggetti complessi che non devono essere ricreati senza motivo.

Esempio:

const valoreMemorizzato = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Qui, computeExpensiveValue verrà chiamata solo se a o b cambiano.

Per quanto riguarda React.memo — è un HOC che memorizza il componente stesso, impedendo il suo rerender se le props non cambiano.

È consigliato avvolgere il componente figlio in React.memo se:

• il componente viene renderizzato frequentemente,
• e le props non cambiano,
• e il rerender del componente è costoso.

In breve:

• useMemo ottimizza i calcoli interni del componente,
• React.memo ottimizza il render dei componenti figli.

Entrambi gli strumenti possono essere usati insieme per migliorare le prestazioni, ma devono essere applicati solo quando realmente necessario, per non complicare il codice.