Привет! Подскажите пожалуйста Я создал свой масив из уникальными ИД const levels

= [
{
id: 1,
text: 'Текст 1',
answer: false,
infoText: 'Инфо 1',
},
{
id: 2,
text: 'Текст 2',
answer: false,
infoText: 'Инфо 2',
},
{
id: 3,
text: 'Текст 3',
answer: false,
infoText: 'Инфо 3',
},
{
id: 4,
text: 'Текст 4',
answer: false,
infoText: 'Инфо 4',
},
{
id: 5,
text: 'Текст 5',
answer: false,
infoText: 'Инфо 5',
},
{
id: 6,
text: 'Текст 6',
answer: false,
infoText: 'Инфо 6',
},
]

С помощью .map я создаю карточки для моего приложения

{this.state.renderLevelsArray.slice().map((cards) => (
<Card key={cards.id} style={styles.card}>
<Image
source={images.backgroundCard}
style={styles.cardBackground}
/>
<View style={styles.questionBox}>
<Text style={styles.questionText}>{cards.text}</Text>
</View>
</Card>
))}

И все элементы моего массива превращаются в карточки, элементов всего у меня 200 шт и поэтому мое приложения начинает лагать. Можно ли сделать так что бы .map применялся сначала для 5 первых элементов массива, потом для следующих 5 и тд.? или как поступить лучше в этой ситуации?

https://github.com/bvaughn/react-virtualized

спасибо, прочту

IntersectionObserver API посмотри что такое, (к нему лучше полифил если нужна поддержка хорошая)

Спасибо

Там в map вторым параметром передаеться index - порядковый номер. сделай map второй, перед тем что рендерит и выводи только те, типа для которых minIndex<index и index>=maxIndex А minIndex и maxIndex храни в стэйте. что то типа items.map( проверяем на по индексу ).map (здесь выводим)

Спасибо