Для корректной организации хранения данных и создания новых блоков без перерисовки всего компонента при скролле в React, подходят несколько подходов и библиотек.
Один из подходов - это использование библиотеки React Virtualized. Она предоставляет компоненты, такие как List и Grid, которые эффективно отображают большие списки или сетки данных, обеспечивая виртуализацию элементов на основе скроллинга. Компоненты List и Grid создают только видимые элементы списка, а при скролле переиспользуют существующие элементы, предотвращая лишние перерисовки. Таким образом, они помогают избежать проблем с производительностью при работе с большими объемами данных.
Еще одним подходом является использование React Window, что является альтернативой React Virtualized. Эта библиотека также предоставляет специальные компоненты, которые сообщают React о том, какие элементы отображать и когда. Она работает аналогично React Virtualized, оптимизируя отображение больших списков или таблиц.
Если вам необходимо организовать такую функциональность самостоятельно, вы можете использовать технику виртуализации скроллинга при помощи обычных компонентов React. Для этого вам понадобится хранить данные в состоянии компонента или в глобальном хранилище, таком как Redux или MobX. При скролле вы можете обновлять данные и/или вычислять видимые элементы на основе текущего положения скролла. Затем, используя эту информацию, вы можете создавать или обновлять только необходимые блоки, избегая перерисовки всего компонента.
Все эти подходы имеют свои достоинства и недостатки, поэтому выбор конкретного метода будет зависеть от конкретного случая использования и ваших предпочтений. Но в общем, они позволяют эффективно управлять большими объемами данных при скроллинге и улучшают производительность при работе с элементами, которые не находятся в видимой области экрана.