Как разделить код на React компоненты правильно | Эволюция моего подхода | Компоненты по SOLID

Когда был юнцом, разделял компоненты по принципу количества строк кода. Сейчас всё совсем по-другому. Есть прекрасные принципы SOLID, которые дают более качественные критерии, на основе которых нужно проводить разбиение.

Подписывайтесь на мой telegram канал:

01:44 Как я писал раньше
03:55 Преимущества и недостатки подходов
07:34 История с проекта
09:40 React query
12:39 Плоская структура
16:50 Пример кода
19:10 Преимущества плоской структуры
23:48 Недостатки

[sayrus]

Как мне нравится, как этот молодой человек рассказывает много интересных вещей и иногда шутит. Мое почтение.

[krowker]

И на каждое видео думаю "где же ты был раньше". Спасибо огромное!
На самом деле это база, но самому сложно дойти до каких-то вещей. Ты ускоряешь этот процесс. Спасибо за твой опыт и что делишься им.

[Elijah_Pavlov]

Очень годные видосы подряд, спасибо! Давно не было чего то нового и полезного в ютуб сегменте.

[steglaset]

Пока не видел ничего подобного, очень хорошая подача. Лайк, подписка

[antonjust]

Лайк за то, что понимаешь, что такое srp. Редко такое можно встретить у тех, кто пытается в solid в русском сегменте ютуба

[BOCbMOU]

Имхо, финальный подход актуален только для небольших проектов. А также ожидаются проблемы с переиспользованием компонентов (когда ты всё сам написал тут проблем нет, но вот когда приходит новый человек, проблемы уже появляются).
Попробуй взглянуть на Feature-Sliced Design. Я лично её полноценно ещё не использовал, но выглядит самым продуманным вариантов из тех, что я видел.

[trendsgallery]

Евгений, очень крутой ролик спасибо Вам большое!

[gaziev__]

Братан, хорош, давай, давай, вперёд! Контент в кайф, можно ещё? Вообще красавчик! Можно вот этого вот почаще?

[DemetriyArh]

ну. это здорово. А теперь попробуй перенести состояние в стейт менеджер. И в каждом компоненте селектить только нужные ему данные. Визуальные конфиги оставь в пропсах, бизнесовые - в sm

Ты обнаружишь что суперхук стал не нужным, он заменился на суперстейт, лишние ререндеры исчезли, и твой композиционный компонент стал в 2 раза меньше.

И, кстати да. Суперхук ведь у тебя огромный получается. Саги нужны именно для упрощения таких суперхуков/суперстейтов, т.с. декларативности мутаций состояния :)

[ilyaprotsenko]

Привет! Назидательный контент. Скажи, плиз, что думаешь о FSD архитектуре?

[ArtikMan]

Есть ли примеры кода из видео на гитхабе?

[cgrcvtc]

Очень годный контент.
А можно ли где-то найти вот эти схемы из миры? Я б сохранил

[di]

Я очень рад что появление react-query (ныне tanstack/query) выправило мозги многим реакт-разработчикам, мне было очень больно смотреть на все эти "прыжки с переподвыпердами" разаботчиков на redux (я сам довольно мало на нём писал).
Видос супер, правда как говорится - "только Ситхи всё возводят в абсолют", так что прямо форсить всё делать на рендер-пропсах, чтобы было супер-гибко, наверно излишне, но пользоваться этой техникой определённо стоит.

[antontsvil]

Не знаю в курсе ли ты, но есть фоновые помехи в звуке и надо чёт с этим делать )

[albert.bazaleev]

Большое спасибо за отличный контент!

Вопрос. А чем композиционный компонент отличается от простого компонента? Или композиционный компонент - это вы еще и контейнером называете? Разъясните, пожалуйста

[ivanosh]

Советую накидать пример немного посложнее - скажем страницу карточки товара какого-нибудь озона, или карточки фильма из кинопоиска.

Сразу всплывет, что "композиционный" компонент должен состоять из других "композиционных", которые в свою очередь должны также состоять из "композиционных" с другими "композиционными". И попытка все это передавать через пропсы и чилдрены превратится или в гигантское мега-дерево в рутовом компоненте, или останется точно-также поделить все на замкнутые компоненты со своими зависимостями, каждый из которых будет тянуться к нужной ему части стейта (неважно откуда), как уже было раньше при других подходах.🙃 То есть текущий подход по сути ничего и не решает.

[gggtjkl]

Еще подсказкой про разбиение на компоненты может стать БЭМ методология

[oleg_deezus]

Как при таком подходе обстоят дела с тестированием?

[daveyjonesx]

Когда в композиционном компоненте прокидывается сразу все и во все места - где тут SRP?)

[xwursct]

"доходило до 800 строчек" - поржал))) компонент на 800 строчек на моей работе считается отревьювнутым))