Introducció

En aquest tema, explorarem la memorització en React utilitzant React.memo. La memorització és una tècnica d'optimització que permet evitar càlculs innecessaris emmagatzemant els resultats de funcions costoses i reutilitzant-los quan els mateixos inputs es tornen a utilitzar. React.memo és una funció d'ordre superior que podem utilitzar per memoritzar components funcionals, evitant així renderitzacions innecessàries.

Objectius

Comprendre què és la memorització i per què és útil.
Aprendre a utilitzar React.memo per optimitzar components funcionals.
Veure exemples pràctics de com React.memo pot millorar el rendiment de les aplicacions React.

Què és la Memorització?

La memorització és una tècnica d'optimització que consisteix a emmagatzemar els resultats de funcions costoses i reutilitzar-los quan els mateixos inputs es tornen a utilitzar. Això pot ser especialment útil en aplicacions React per evitar renderitzacions innecessàries de components.

`React.memo`

React.memo és una funció d'ordre superior que podem utilitzar per memoritzar components funcionals. Quan un component està embolicat amb React.memo, React memoritza el resultat de la renderització i només torna a renderitzar el component si les seves props han canviat.

Sintaxi

const MyComponent = React.memo(function MyComponent(props) {
  // Component code here
});

Exemple Bàsic

Vegem un exemple bàsic per entendre com funciona React.memo.

import React, { useState } from 'react';

const ChildComponent = React.memo(({ count }) => {
  console.log('ChildComponent render');
  return <div>Count: {count}</div>;
});

const ParentComponent = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <ChildComponent count={count} />
    </div>
  );
};

export default ParentComponent;

En aquest exemple, ChildComponent només es tornarà a renderitzar quan la prop count canviï. Si només canviem el text de l'input, ChildComponent no es tornarà a renderitzar gràcies a React.memo.

Comparació de Props Personalitzada

Per defecte, React.memo fa una comparació superficial de les props per determinar si el component s'ha de tornar a renderitzar. Si necessitem una comparació més complexa, podem proporcionar una funció de comparació personalitzada.

const ChildComponent = React.memo(
  ({ count, user }) => {
    console.log('ChildComponent render');
    return (
      <div>
        <div>Count: {count}</div>
        <div>User: {user.name}</div>
      </div>
    );
  },
  (prevProps, nextProps) => {
    return prevProps.count === nextProps.count && prevProps.user.id === nextProps.user.id;
  }
);

En aquest exemple, ChildComponent només es tornarà a renderitzar si count o user.id canvien.

Exercicis Pràctics

Exercici 1: Memoritzar un Component

Crea un component funcional anomenat ExpensiveComponent que accepti una prop value i mostri el valor.
Utilitza React.memo per memoritzar ExpensiveComponent.
Crea un component pare que tingui un estat value i un botó per incrementar value.
Afegeix un altre estat i un input per canviar aquest estat.
Observa com ExpensiveComponent només es torna a renderitzar quan value canvia.

Solució

import React, { useState } from 'react';

const ExpensiveComponent = React.memo(({ value }) => {
  console.log('ExpensiveComponent render');
  return <div>Value: {value}</div>;
});

const ParentComponent = () => {
  const [value, setValue] = useState(0);
  const [text, setText] = useState('');

  return (
    <div>
      <button onClick={() => setValue(value + 1)}>Increment Value</button>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <ExpensiveComponent value={value} />
    </div>
  );
};

export default ParentComponent;

Exercici 2: Comparació de Props Personalitzada

Crea un component funcional anomenat UserComponent que accepti una prop user i mostri el nom de l'usuari.
Utilitza React.memo per memoritzar UserComponent amb una funció de comparació personalitzada que només torni a renderitzar el component si user.id canvia.
Crea un component pare que tingui un estat user i un botó per canviar el nom de l'usuari.
Observa com UserComponent només es torna a renderitzar quan user.id canvia.

Solució

import React, { useState } from 'react';

const UserComponent = React.memo(
  ({ user }) => {
    console.log('UserComponent render');
    return <div>User: {user.name}</div>;
  },
  (prevProps, nextProps) => {
    return prevProps.user.id === nextProps.user.id;
  }
);

const ParentComponent = () => {
  const [user, setUser] = useState({ id: 1, name: 'John' });

  return (
    <div>
      <button onClick={() => setUser({ ...user, name: 'Jane' })}>
        Change Name
      </button>
      <UserComponent user={user} />
    </div>
  );
};

export default ParentComponent;

Conclusió

En aquesta secció, hem après què és la memorització i com utilitzar React.memo per optimitzar components funcionals en React. Hem vist exemples pràctics i hem realitzat exercicis per reforçar els conceptes apresos. La memorització és una tècnica poderosa per millorar el rendiment de les aplicacions React, especialment quan es treballa amb components costosos de renderitzar.

Memorització amb React.memo

Introducció

Objectius

Què és la Memorització?

`React.memo`

Sintaxi

Exemple Bàsic

Comparació de Props Personalitzada

Exercicis Pràctics

Exercici 1: Memoritzar un Component

Solució

Exercici 2: Comparació de Props Personalitzada

Solució

Conclusió

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