Зазвичай це питання задають в контексті розмови про оптимізацію ресурсів в SPA і гібридиних додатках, які часто не ефективно використовують ресурси. Якщо вас не запитали про React.memo на пряму, хорошою практикою буде згадати цю техніку самостійно.
React.memo - це один з способів, завдяки якому ми можемо оптимізувати наш додаток, уникаючи непотрібних нам ререндерів компонентів, якщо їхні props не змінилися.
Як це працює?
Зазвичай, коли відбувається re-render батьківського компонента, React за замовчуванням перемальовує сам компонент і все його дерево(дочірні компоненти).
Щоб уникнути непотрібних нам ререндерів в важких компонентах, ми можемо огорнути його в React.memo і при кожному оновлені батьківського компонента, React буде перевіряти чи змінились props. До важких компонентів можна віднести ті, які виконують CPU intensive задачі: великий і функціональний список, багато графіків, калькуляцій і тд.
За замовчуванням порівняння відбувається через Object.is, тобто:
- Примітиви порівнюються за значенням
- Об’єкти, масиви та функції - за посиланням
Якщо змін в props не відбулось - компонент не буде перемальовуватись. Найголовніше, треба памʼятати, що потрібно обгортати лише ті компоненти, де React.memo точно допоможе. Найгірше, що можна зробити це огортати все підряд, або оптимізовувати продуктивність без аналізу проблеми.