Robur

Правильный ответ я уже дал тут: Нужно ли использовать useMemo в hooks?

никакой график и уж тем более таблица на экране не вместит миллионы значений. даже больше 100 - редкость. Вам не нужно все это грузить и пытаться вывести разом.

Чтобы не грузить больше чем надо:
- фильтрация (например "данные за сегодня" или "вот по этому человеку")
- пагинация (следующие 50 записей начиная с 123849)
- аггрегация (средний доход по каждому году за последние 10 лет - получаете 10 записей в ответе)
- виртуализированные таблицы которые рендерят только то что нужно, а не все 100500 записей которые вы ей скормили (https://github.com/bvaughn/react-virtualized, дальше погуглите)

Чтобы не тормозило на сервере:
- правильные индексы
- по максимуму использовать возможности SQL
- грамотная организация данных/работы с ними (по возможности)

То что вы делаете - это правильно. передавайте переменную и onChange, в нем меняйте эту переменную, храните все в стейте родителя. Если проблемы с тем чтобы в onChange поменять нужную переменную - это решаемо - это и решайте.
Так как вы хотите сделать тоже можно, но это будет даже не грабли а весьма плохой код, чтобы не плодить количество говнокода на планете, не буду объяснять как.

Поиск по тостеру дубликатов вопросов. Проверить можете на этом вопросе, как найдет 100500 подобных - значит заработал.

модал лучше сделать один отдельно, положите его в галерею, в галерее же храните в стейте id текущего фото которое нужно показывать в модале.
при клике на фото ставьте этот id в id фото на котором кликнули и показывайте модал, передавайте ему этот id.
при клике влево-вправо меняйте id на следующий/предыдущий, модал перерисуется с новым id, в модале берите нужный урл из списка с фото

1. .map файлы вообще не нужны для работы приложения. вы их можете просто не копировать.
2. Убедитесь что вы делаете production build https://facebook.github.io/create-react-app/docs/p...
3. уменьшить количество файлов можно, с помощью https://github.com/timarney/react-app-rewired можно поменять конфиг вебпака как вам хочется, или просто сделать eject и поменять конфиг напрямую.

Про dynamics ничего не знаю, но выглядит так будто у вас проблема не с количеством файлов а в чем-то другом.

записывайте не просто продукт а продукт + количество

basket.push({product, count: 1})

и потом, перед тем как пушить, проверяйте, если там уже такой же продукт, если есть то вместо .push
пишите увеличивайте count.

const productInBucket = bucket.find(item => /* проверить что item.product == product так как вам нужно*/)
if (productInBucket) productInBucket.count++
else basket.push({product, count: 1})

Поставьте редирект, который будет проверять, на каком шаге пользователь был в прошлый раз и отправлять его туда.
Его можно поставить или на каждую страницу или один глобальный который рендерится выше по дереву чем все эти страницы.

Кем "не рекомендуется"?
Чтобы решать проблему нужно убедиться что есть проблема и четко сформулировать ее.
Если вы решаете проблему что код не подходит под какие-то рекомендации, то это одно, а если вы решаете проблемы с памятью во время выполнения приложения это совсем другое.
Во втором случае у вас на руках должны быть данные полученные в результате анализа того как ваше приложение работает.
Подавляющее большинство render функций вызывается на самом деле достаточно редко чтобы это имело значение.