Один из примеров того, как не нужно делать в React.
Есть некий компонент в котором через меню открывается одно из модальных окон:
function Comp() {
return (
<>
<Menu /* выбор какое окно открыть */ />
<ModalA isOpen={modal === 'a'} />
<ModalB isOpen={modal === 'b'} />
<ModalC isOpen={modal === 'c'} />
</>
);
}
Каждое из этих модальных окон это форма которой необходимы некоторые данные с сервера. React выполняет все эти компоненты, и как следствие, загружает все необходимые им данные разом. Получаем лишнюю нагрузку на браузер клиента и на сервер.
Дополнительной проблемой является то, что при закрытии такой формы, её состояние не сбрасывается, т.к. компонент продолжает “существовать”.
Решается это через условный render, ну или использованием функции по типу:
ui.openModal(<ModalA />)
Плюсом, можно обернуть каждый компонент в lazy. В таком случае, по “запросу” будут загружаться не только необходимые данные, но и сам код компонента.
Больше информации в Telegram канале https://t.me/around_dev
