React Native

Оптимізація продуктивності

Оптимізація FlatList, memo, useMemo/useCallback, Hermes, профілювання, розмір bundle

24 питань зі співбесід·
Senior
1

Яка основна роль React.memo в оптимізації продуктивності React Native?

Відповідь

React.memo — це Higher-Order Component, який мемоізує результат рендерингу функціонального компонента. Він запобігає непотрібним повторним рендерам, порівнюючи поточні props з попередніми (за замовчуванням shallow comparison). Якщо props не змінилися, React повторно використовує мемоізований результат замість повторного рендерингу компонента, що значно покращує продуктивність у списках або складних деревах компонентів.

2

Яка властивість FlatList значно оптимізує прокрутку, надаючи розміри елементів заздалегідь?

Відповідь

getItemLayout — це необов'язкова властивість FlatList, яка дозволяє заздалегідь обчислити висоту, ширину та offset кожного елемента. Це позбавляє React Native необхідності динамічно вимірювати кожен елемент, що значно покращує продуктивність прокрутки, особливо під час переходу до конкретного індексу за допомогою scrollToIndex. Ця оптимізація особливо корисна, коли всі елементи мають однаковий розмір.

3

Яка основна різниця між useMemo та useCallback з точки зору оптимізації?

Відповідь

useMemo мемоізує результат витратного обчислення й повертає це обчислене значення, тоді як useCallback мемоізує саму функцію й повертає цю функцію. useMemo корисний для уникнення важких повторних обчислень під час кожного рендеру, а useCallback необхідний, щоб уникнути повторного створення функцій, які передаються як props до мемоізованих дочірніх компонентів, оскільки це зруйнувало б їхню оптимізацію React.memo.

4

Що таке Hermes і яка його основна перевага для застосунків React Native?

5

Чому критично важливо надавати FlatList стабільну функцію keyExtractor?

+21 питань зі співбесід

Інші теми співбесід React Native

Основи JavaScript

Junior
25 запитань

Основи React

Junior
20 запитань

Основи React Native

Junior
22 запитань

React Hooks

Junior
20 запитань

TypeScript для React та React Native

Junior
22 запитань

Компоненти та API React Native

Junior
20 запитань

Стилізація та макет у React Native

Junior
18 запитань

Навігація в React Native

Mid-Level
22 запитань

Управління станом у React Native

Mid-Level
24 запитань

Networking та API в React Native

Mid-Level
20 запитань

Збереження даних

Mid-Level
20 запитань

Форми та валідація

Mid-Level
18 запитань

Анімації React Native

Mid-Level
22 запитань

Native Modules & Bridge

Mid-Level
20 запитань

Код, специфічний для платформи

Mid-Level
18 запитань

Дозволи та API пристрою

Mid-Level
20 запитань

Push Notifications

Mid-Level
18 запитань

Тестування React Native

Mid-Level
20 запитань

Налагодження React Native

Mid-Level
18 запитань

Build & Deployment

Mid-Level
20 запитань

Expo vs React Native Bare

Mid-Level
18 запитань

Управління пам'яттю

Senior
20 запитань

Architecture Patterns

Senior
22 запитань

React Native New Architecture

Senior
24 запитань

Найкращі практики безпеки

Senior
20 запитань

Offline-First Architecture

Senior
20 запитань

CI/CD React Native

Senior
20 запитань

Monorepo та спільне використання коду

Senior
18 запитань

Складні теми

Senior
22 запитань

Життєвий цикл застосунку та фонове виконання

Mid-Level
20 запитань

Автентифікація та керування сесіями

Mid-Level
22 запитань

Monitoring & Crash Reporting

Senior
20 запитань

Опануй React Native для наступної співбесіди

Отримай доступ до всіх питань, flashcards, технічних тестів, вправ code review та симуляторів співбесід.

Почни безкоштовно