El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Hooks useMemo i useCallback

Següent ►
►

En aquest tema, explorarem dos hooks avançats de React: useMemo i useCallback. Aquests hooks són essencials per optimitzar el rendiment de les aplicacions React, ja que ajuden a evitar càlculs innecessaris i a memoritzar funcions.

Objectius d'aprenentatge

  • Comprendre la necessitat de useMemo i useCallback.
  • Aprendre a utilitzar useMemo per memoritzar valors calculats.
  • Aprendre a utilitzar useCallback per memoritzar funcions.
  • Identificar situacions on aquests hooks poden millorar el rendiment de l'aplicació.

useMemo

Què és useMemo?

El hook useMemo és utilitzat per memoritzar el resultat d'una funció de càlcul costosa i només recalcular-lo quan les dependències específiques canvien. Això pot ajudar a evitar càlculs innecessaris en cada renderització.

Sintaxi

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
  • computeExpensiveValue és la funció de càlcul costosa.
  • [a, b] són les dependències. useMemo només tornarà a calcular el valor si alguna d'aquestes dependències canvia.

Exemple pràctic

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

function ExpensiveCalculationComponent({ a, b }) {
  const [count, setCount] = useState(0);

  const expensiveCalculation = (a, b) => {
    console.log('Calculant...');
    return a + b;
  };

  const memoizedValue = useMemo(() => expensiveCalculation(a, b), [a, b]);

  return (
    <div>
      <p>Resultat de la càlcul: {memoizedValue}</p>
      <button onClick={() => setCount(count + 1)}>Incrementar</button>
      <p>Comptador: {count}</p>
    </div>
  );
}

export default ExpensiveCalculationComponent;

Explicació

  • expensiveCalculation és una funció que simula un càlcul costós.
  • useMemo memoritza el resultat de expensiveCalculation(a, b) i només el recalcula si a o b canvien.
  • El botó "Incrementar" actualitza el comptador sense recalcular el valor memoritzat, a menys que a o b canviïn.

useCallback

Què és useCallback?

El hook useCallback és utilitzat per memoritzar funcions. Això és útil quan passes funcions a components fills que es renderitzen condicionalment o quan vols evitar la recreació de funcions en cada renderització.

Sintaxi

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);
  • doSomething és la funció que vols memoritzar.
  • [a, b] són les dependències. useCallback només tornarà a crear la funció si alguna d'aquestes dependències canvia.

Exemple pràctic

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

function Button({ handleClick }) {
  return <button onClick={handleClick}>Clica'm</button>;
}

function ParentComponent() {
  const [count, setCount] = useState(0);

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

  return (
    <div>
      <p>Comptador: {count}</p>
      <Button handleClick={increment} />
    </div>
  );
}

export default ParentComponent;

Explicació

  • increment és una funció que incrementa el comptador.
  • useCallback memoritza la funció increment i només la recrea si count canvia.
  • El component Button rep la funció increment com a prop, evitant la recreació innecessària de la funció en cada renderització del component pare.

Exercicis pràctics

Exercici 1: Utilitzar useMemo

Crea un component que calculi la suma de dos nombres només quan aquests canvien, utilitzant useMemo.

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

function SumComponent() {
  const [num1, setNum1] = useState(0);
  const [num2, setNum2] = useState(0);

  const sum = useMemo(() => {
    console.log('Calculant suma...');
    return num1 + num2;
  }, [num1, num2]);

  return (
    <div>
      <input type="number" value={num1} onChange={(e) => setNum1(Number(e.target.value))} />
      <input type="number" value={num2} onChange={(e) => setNum2(Number(e.target.value))} />
      <p>Suma: {sum}</p>
    </div>
  );
}

export default SumComponent;

Exercici 2: Utilitzar useCallback

Crea un component que incrementi un comptador només quan es clica un botó, utilitzant useCallback.

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

function IncrementButton({ onIncrement }) {
  return <button onClick={onIncrement}>Incrementar</button>;
}

function CounterComponent() {
  const [count, setCount] = useState(0);

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

  return (
    <div>
      <p>Comptador: {count}</p>
      <IncrementButton onIncrement={increment} />
    </div>
  );
}

export default CounterComponent;

Errors comuns i consells

  • No oblidis les dependències: Assegura't d'incloure totes les dependències necessàries en els arrays de dependències de useMemo i useCallback. Si oblides alguna dependència, podries obtenir resultats inesperats.
  • Evita l'ús excessiu: No utilitzis useMemo i useCallback per a tot. Utilitza'ls només quan hi hagi un benefici clar en termes de rendiment.
  • Depuració: Utilitza eines com React DevTools per verificar si els components es renderitzen innecessàriament.

Conclusió

Els hooks useMemo i useCallback són eines poderoses per optimitzar el rendiment de les aplicacions React. Utilitzant-los correctament, pots evitar càlculs innecessaris i memoritzar funcions, millorant així l'eficiència de la teva aplicació. Practica amb els exercicis proporcionats per consolidar els teus coneixements i estar preparat per aplicar aquests conceptes en projectes reals.

◄ Anterior
◄
Següent ►
►

Curs de React

Mòdul 1: Introducció a React

Mòdul 2: Components de React

Mòdul 3: Treballar amb esdeveniments

Mòdul 4: Conceptes avançats de components

Mòdul 5: Hooks de React

Mòdul 6: Enrutament en React

Mòdul 7: Gestió de l'estat

Mòdul 8: Optimització del rendiment

Mòdul 9: Proves en React

Mòdul 10: Temes avançats

Mòdul 11: Projecte: Construir una aplicació completa

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats