Самый эффективный способ структурировать приложение React с помощью многошагового, очень тяжелого «мастера» JS?

Я создаю веб-сайт приложения create-response-app, в котором есть многоэтапная форма «мастера», которую пользователь может заполнить. Мастер состоит из 8 шагов. Каждый 1 из этих 8 шагов имеет очень тяжелый javascript (каскадные средства выбора дерева с десятками тысяч строк).

В настоящее время я визуализирую / показываю все 8 шагов на одной странице: / приложение / мастер (реагировать-маршрутизатор-дом)

так что это очень длинная форма, которую пользователь может прокручивать по вертикали.

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

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

Я предпочитаю сделать каждый шаг / раздел отдельным маршрутом page / response-router-dom. Я склонен попробовать это решение, потому что в любой момент времени для него будет установлено меньше Javascript; и я считаю, что чем меньше вы смонтировали, тем меньше должен работать браузер.

Я понимаю, правильно ли реагирую и смонтирован? Поскольку каждый шаг представляет собой отдельный функциональный компонент, могу ли я теоретически иметь тысячи тяжелых компонентов javascript, загруженных на одну страницу / маршрут, не влияя на производительность?

Спасибо за чтение.