Как передать данные с одного микрофронтенда на другой в React?

Что проверяют

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

Как отвечать

Начните с того, что обычные механизмы React через границу микрофронтенда не работают: Context живёт внутри одного дерева, а у каждого микрофронтенда свой корень createRoot и нередко своя копия React. Дальше варианты по возрастанию связанности:

• URL: фильтры, выбранный id, текущая вкладка в адресе. Переживает перезагрузку, даёт ссылку, не требует общего кода;
• пропсы от хоста: оболочка передаёт данные и колбэки при монтировании, как customProps в single-spa или обычные пропсы удалённого компонента в Module Federation;
• события браузера: window.dispatchEvent(new CustomEvent("cart:add", { detail })) и addEventListener на другой стороне. Зависимости по коду нет, но контракт события нужно описать и версионировать, например типами в общем пакете;
• общий стор: маленький store (Zustand или свой observable) в модуле, который Module Federation шарит как singleton. Решает проблему опоздавшего подписчика: текущее состояние можно прочитать в любой момент;
• между вкладками и iframe: BroadcastChannel и postMessage с проверкой origin.

Хороший ответ заканчивается принципом: передаём события и минимум данных, а не общее состояние целиком, иначе микрофронтенды снова склеиваются в монолит, только распределённый.

Где спотыкаются

Предлагают React Context или один Redux store на все микрофронтенды. Контекст за границу корня не проходит, а store без общего экземпляра модуля у каждого получается свой.

Забывают отписываться от событий при размонтировании. Обработчики копятся, и одно действие срабатывает несколько раз.

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