A memo API React-ben

Mielőtt rátérnénk a következő hookra, említenünk kell egy hasznos API-t, a memo-t, amely segít nekünk elkerülni egy komponens újrarenderelését, ha a propjai változatlanok maradnak.

Nézzük ezt egy példán keresztül. Hozzunk létre egy App komponenst, amelyben két bemenet lesz, tegyük fel, hogy a kereszt- és vezetéknevet kell beírni:

App.jsxreturn (
  <div>
    <label>
      név:
      <input value={name} onChange={(e) => setName(e.target.value)} />
    </label>
    <br />
    <label>
      vezetéknév:
      <input value={surn} onChange={(e) => setSurn(e.target.value)} />
    </label>
  </div>
);

Adjunk hozzá a komponens elején állapotokat ezekhez:

App.jsxconst [name, setName] = useState('');
const [surn, setSurn] = useState('');

Készítsünk még egy gyermek komponenst Child.js, jelenítse meg a üdvözlést, amelyben a beírt név jelenik meg. A konzolra írjon ki egy 'child render' stringet minden alkalommal, amikor ez a komponens renderelődik:

Child.jsxfunction Child({ name }) {
  console.log('child render');
  return <h3>Hello {name}!</h3>;
}

Adjuk hozzá a Child-t a fő komponens markup-jához az utolsó bemenet után és adjuk át neki prop-ként a nevet:

App.jsx<Child name={name} />

Importáljuk be a fő komponensbe:

App.jsximport Child from './Child';

Most nyissuk meg a konzolt és írjunk be a bemeneti mezőkbe nevet és vezetéknevet. Itt látni fogjuk, hogy még akkor is, ha a vezetéknév mezőbe írunk karaktereket, a gyermek komponensünk minden alkalommal újrarajzolódik. Ez nem jelent problémát, hiszen csak egy kis komponensről van szó. De képzeld el, ha ez a komponens nagyon sok adatot jelenítene meg és közben minden alkalommal újrarajzolódna.

Most pedig csomagoljuk be a gyermek komponenst memo-be, és figyeljük meg, hogyan változik a renderelés. Először importáljuk be a memo-t:

Child.jsximport { memo } from 'react';

Ezután hozzunk létre egy új változót és rendeljük hozzá a Child-unkat, becsomagolva memo-be. A következő függvény kifejezés adódik:

Child.jsxconst Child = memo( function Child({ name }) {
  console.log('child render');
  return <h3>Hello {name}!</h3>;
});

Nyissuk meg a konzolt és írjunk be újra nevet és vezetéknevet a mezőkbe. Most látjuk, hogy a vezetéknév beírásakor a gyermek komponensünk nem rajzolódik újra.

Nem szabad elfelejteni, hogy ez nem fog működni, ha a változatlan prop-ok mellett megváltoznak a komponens által használt állapotok vagy a változásokat használó kontextus.