Швидше за все, на інтервʼю це питання буде звучати так: чи чули ви щось про Suspense. Окрім цього, його часто запитують в контексті розмови про оптимізацію і зокрема React.lazy(). Якщо вас не запитали це напряму, хорошим тоном буде логічно доповнити lazy() згадкою про Suspense.
Отже, що ж це таке?
Suspense - це механізм, для керування очікуванням. Він дозволяє показувати fallback UI у той момент, коли частина застосунку ще не готова до рендеру. Простими словами, він відповідає за контент, який буде показуватись, поки React чекає на щось асинхронне. Це може бути loader, skeleton або будь-який інший тимчасовий контент.
Основне завдання - дати користувачу зрозуміти, що за кілька секунд тут з’явиться потрібний UI. Таким чином, в користувача не підгорає при поганому інтернет зʼєднанні, що в свою чергу позитивно впливає на UX.
Давайте розглянемо базовий приклад Suspense, разом з React.lazy().
У цьому прикладі за допомогою lazy loading ми обгортаємо компонент Profile і таким чином повідомляємо React, що його потрібно завантажити асинхронно. Ця техніка називається code splitting і про неї ви можете почитати тут.
Поки компонент ще не готовий, користувач буде бачити skeleton. Після завершення завантаження, React автоматично замінить його на компонент Profile.