API memo u React-u

Pre nego što pređemo na sledeći hook, potrebno je pomenuti i korisni API memo, koji nam pomaže da izbegnemo ponovno renderovanje komponente, ako njeni props-i ostanu nepromenjeni.

Hajde da ovo razmotrimo na primeru. Napravićemo komponentu App, u kojoj će biti dva input polja, u koja se, pretpostavimo, unose ime i prezime:

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

Dodajmo na početak komponente state-ove za njih:

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

Napravimo i child komponentu Child.js, neka ispisuje pozdrav u kome će se prikazivati uneseno ime. Takođe, u konzoli će se ispisivati string 'child render' pri svakom renderovanju ove komponente:

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

Dodajmo Child u razmetu glavne komponente posle poslednjeg input-a i prosledićemo mu ime kao props:

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

Importujmo ga u glavnu komponentu:

App.jsximport Child from './Child';

A sada otvorimo konzolu i krenimo da unosimo ime i prezime u polja. Ovde ćemo videti da čak i pri unosu simbola u polje za prezime, naša child komponenta će se svaki put ponovo renderovati. Nema nikakvih problema, pošto je naša komponenta mala. Ali zamislite da bi ova komponenta prikazivala veliku količinu podataka i da se pritom, svaki put ponovo renderovala.

A sada hajde da obmotamo child komponentu u memo, i da vidimo kako će se renderovanje promeniti. Za početak importujmo u nju memo:

Child.jsximport { memo } from 'react';

Zatim napravimo novu promenljivu i dodelimo joj naš Child, obmotanog u memo. Dobićemo sledeće funkcionalno izražavanje:

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

Otvorimo konzolu i krenimo ponovo da unosimo ime i prezime u polja. Sada vidimo da pri unosu prezimena, naša child komponenta se ne ponovo renderuje.

Treba zapamtiti da ovo neće raditi, ako se pri nepromenjenim props-ima menjaju state-ovi koje komponenta koristi ili context koji koristi promene.