API memo у React-у

Пре него што пређемо на следећи кукац, потребно је споменути и корисни API memo, који нам помаже да избегнемо поновно рендерирање компоненте, ако су њени пропси остали непромењени.

Хајде да то размотримо на примеру. Направимо компоненту App, у којој ће бити два уносна поља, у која, претпоставимо, уносимо име и презиме:

App.jsxreturn (
  <div>
    <label>
      име:
      <input value={name} onChange={(e) => setName(e.target.value)} />
    </label>
    <br />
    <label>
      презиме:
      <input value={surn} onChange={(e) => setSurn(e.target.value)} />
    </label>
  </div>
);

Додајмо на почетку компоненте стање за њих:

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

Направимо још и дете компоненту Child.js, нека исписује поздрав, у коме ће се приказивати уносимо име. Такође, у конзоли ће се исписивати стринг 'child render' при сваком рендерирању ове компоненте:

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

Додајмо Child у верстку основне компоненте после последњег уносног поља и као пропс ћемо му проследити име:

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

Импортујмо га у основну компоненту:

App.jsximport Child from './Child';

А сада отворимо конзолу и почнимо да у уносна поља уносимо име и презиме. Овде ћемо видети да чак и при уносу симбола у поље за презиме, наша дете компонента ће сваки пут да се поновно исцртава. Нема проблема, имајући у виду да је наша компонента мала. Али замислите да је компонента приказивала велику количину података и притом, сваки пут поновно исцртавана.

А сада хајде да обмотамо дете компоненту у memo, и да погледамо како ће се рендерирање променити. За почетак импортујмо у њу memo:

Child.jsximport { memo } from 'react';

Затим направимо нову променљиву и доделимо јој наш Child, обмотан у memo. Добићемо следећи функциони израз:

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

Отворимо конзолу и почнимо поново да уносимо име и презиме у поља. Сада видимо да при уносу презимена, наша дете компонента не поништава се.

Треба имати у виду да ово неће функционисати, ако се при непромењеним пропсима мењају стања, која се користе у компоненти или контекст, који користи промене.