Ребят, давайте обсудим, такая ситуация: Компонент форма логин и пароль

отправляет запрос серверу на авторизацию, при успехе <Suspense><lazy><Suspence> подгружает основной контент в котором есть шапка с именем аккаунта...имя аккаунта фетчится дополнительным запросом когда уже пользователь авторизован. Если обновить страницу, то через сессию авторизация не спадает и показывается сразу <Suspence> контент.
Вопрос: где лучше фетчить имя аккаунта? перед отрисовкой <Suspence> пробрасывая ему через пропсы имя аккаунат или внутри <Suspence> в useEffect() вызывая при этом два раза ререндер?

Почему не спасает?

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

"не фетчить из компонентов" тогда где фетчить? если не используется Redux thunk

допустим в "контейнерной" компоненте?норм же?

Например, из redux thunk. Или из mobx-модели. Или из эффекта в effector. Или из реакции в reatom

Компонент — это он. Если ты фетчишь из компонента-контейнера, то ты фетчишь из компонента

На одних только компонентах нельзя построить адекватную архитектуру. Без адекватной архитектуры первый вопрос не имеет смысла — в любом случае получится херово

этот контейнер же не играет роли никакой в представлении...а если приложение это только форма и имя аккаунта и что тогда? все равно подключать thunkи и ему подобные?

Т.е. тот момент, что для приложения только с одной формой реакт тянуть вас не смущает, а вот thunk конечно же перебор? Вы сейчас сам условия придумываешь какие то, что бы оправдать fetch в компонентах.

считаешь что dispatch(someThunk) в useEffect круче чем fetch?

В 99% случаев - определенно да.

Почему?

Да не подстраховывайся, в 100% случаях.

Тимофей, почему так считаешь? вот если рассматривать небольшое SPA

Разделение ответственностей, fetch даже в thunk не должно быть, там будет вызов api.getSmth

https://t.me/react_js/768110

Чище компоненты + если надо делать fetch по разным условиям, с разными параметрами, то от вида дублирования fetch тошнить начнет после второго условия.

При условии, что задача заключается только в форме, то для такой формы нецелесообразно подключать даже реакт. Достаточно создать входную точку с html и подключать туда модули. Модуля получится два — транспорт и логика формы. Какой диспатч, какой компонент. А если приложение собирается расти (так бывает почти всегда), то нужно планировать наперёд.

Собрать это всё можно парселем без конфигурации. Захотел — тс подключил сразу. И погнал. С тс’ом будет проще потом подключать реакт.

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

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

tdd разработка типа

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

А есть пример правильной архитектуры? Мне понять, где и как правильно делать

это опыт, который нарабатывается годами

А можно узнать, что Вы поняли на второй год, но не понимали в первый?)