Дякую за коментар.

Щойно перевірив — у мене все працює так, як у прикладі. Можливо, справа в тому, що ви натискаєте занадто швидко?
Чи могли б ви надіслати код, за допомогою якого намагаєтесь відтворити цю поведінку?

у простих проектах так. але потім проект розростається так, що у кожного свій спосіб обробки помилок в запитах, треба до кожного запиту додавати токен, retry, кешування, теги для ревалідації у випадку з react-query, а якщо треба інтегрувати нову обробку помилок? ви плануєте міняти це у 100 місцях? з useFetch все це можна написати в один рядок
{data, error, isLoading, refetch} = useFetch("/api/")

дякую. повністю згоден — index.js/.ts як public API дуже класна штука, коли її використовують за призначенням. проблема в тому, що можно побачити один index.ts на весь проект, де 100+ рядків імпортів. а насправді це має працювати в рамках інкапсуляції — щоб обмежити імпорти тільки конкретних речей з конкретного шару/модуля. де мі не експортуємо все підряд, а свідомо вибираємо публічний API і ховаємо внутрішню реалізацію. тоді це реально класний патерн

Саме так, у підсумку це все зводиться до простоти внесення змін

Дякую!)
А щодо Redux — оверінжиніринг це окрема біль:) Добре, що веб розробка рухається в бік більш зручних способів керувати глобальним стейтом

Згоден з тим, що як Ви сказали — it depends. Як я й підкреслював у статті — якщо ми відштовхуємось від архітектури, то може бути ситуація, коли компонент великий, але він уже складається з атомів, є цілісною фічею і зрозумілий у читанні. І тоді 400 рядків — це абсолютно нормально.

Питання ж не у «магічних цифрах», а в тому, наскільки швидко нова людина може зрозуміти, що відбувається. Якщо це забезпечено — розбивати далі немає сенсу.

Або Ви вважаєте, що незалежно від зрозумілості все ж існує умовна межа кількості рядків, після якої треба виносити щось окремо?

Дякую за коментар)
Повністю згоден, для таких випадків може підійти dynamic import. Його можна обернути у кастомний React Hook, щоб отримати стан завантаження та дані. Але за умови великої кількості таких компонентів, треба бути оборежним)

Читайте мою наступну статтю про next/dynamic в Next.js яка вже є на сторінкці) dou.ua/forums/topic/55221

Дякую!

Дякую!

Ви майже праві, але з важливою поправкою, тут суть у тому як працює гідратація у Next.js

HTML-код кнопки рендериться відразу. Але логіка всередині неї не чекає натискання, вона завантажується у фоновому режимі в окремому бандлі. Після того як браузер її завантажить, React «оживляє» кнопку і додає до неї всю інтерактивність.

Тобто, початкова розмітка є, але клікабельною кнопка стає через мілісекунди, що й називається гідратацією.

Дякую, що прочитали статтю. Дійсно, приклад із AddToCartButtonLazy може здатися надлишковим, оскільки цей компонент не містить нічого, окрім тексту.

Однак, що якби в цій кнопці відбувалася складна логіка ? Наприклад, запит на сервер, валідація форми чи інтеграція зі сторонніми бібліотеками по натисканню на цю кнопку ? Я зустрічай такий підхід не деяких проектах. У такому випадку має сенс винести її в окремий бандл.

Використання next/dynamic з ssr: true в цьому сценарії дає нам одразу дві важливі речі:

— SEO. Сервер рендерить HTML кнопки, і вона одразу доступна для пошукових систем.

— Продуктивність. JavaScript-код з усією складною логікою виноситься в окремий бандл. Основна частина сторінки завантажується швидше, а код кнопки завантажується лише тоді, коли це необхідно, не сповільнюючи початковий рендер.

Сподіваюсь мені вдалося відповісти на Ваше питання, якщо щось незрозуміло питайте.

Дякую за відгук!
Повністю згоден — командна узгодженість у патернах і наявність людини, яка може тримати технічний вектор, дійсно критично важливі. Часто й сам проєкт або підхід до розробки диктує вибір патернів.

Дуже радий, що стаття сподобалась!

Дякую за розгорнутий коментар!

Так, справді — чисті функції та інші принципи FP мають ключове значення для розуміння React. Повністю згоден, що саме на них варто звертати увагу в першу чергу.

Окрема подяка за згадку Elm-архітектури та патерну MVU — це чудова ідея для майбутніх статей, обов’язково розгляну!

Дуже приємно, що мої матеріали читають і коментують досвідчені розробники. Дякую за зворотний зв’язок — разом стаємо сильнішими 💪

Дякую!

Дякую! Радий, що було цікаво

Job Manager Link — manager-9a33d.web.app