useState в React не всегда нужен - query и server components в Nextjs

Рет қаралды 4,576

Күн бұрын

Сегодня разберём на примере каталога курсов, почему местами плохо использовать useState и какие альтернативные пути работы с состояниям у нас есть.
🔗 Ссылки:
Репозиторий прокета: github.com/AlariCode/youtube-...
Про React 19: • React 19 - React Compi...
Видео про терминал MacOS: • Красивый терминал на M...
🎓 Курсы по разработке: purpleschool.ru
🎓 Курсы по React и Redux: purpleschool.ru/course/react-...
🎓 Курсы по Next: purpleschool.ru/course/nextjs
💬 Telegram канал с полезными советами:
t.me/purple_code_channel
Разделы видео:
0:00 - Введение
0:16 - Обзор проекта
2:40 - Реализация с useState
5:05 - Хранение состояния в URL
9:08 - Получение из URL
10:29 - Удаление useState
11:28 - Улучшение типизации
14:45 - Server components
18:27 - Заключение

Пікірлер: 25

@PurpleSchool 22 күн бұрын

🔗 Ссылки: Репозиторий проекта github.com/AlariCode/youtube-state-demo Про React 19: kzfaq.info/get/bejne/oLWqdqRzp87KhHk.html Видео про терминал MacOS: kzfaq.info/get/bejne/pJlziryBrNC6nqc.html 🎓 Курсы по разработке: purpleschool.ru 🎓 Курсы по React и Redux: purpleschool.ru/course/react-redux 🎓 Курсы по Next: purpleschool.ru/course/nextjs 💬 Telegram канал с полезными советами: t.me/purple_code_channel

@andreyzhukov9134 15 күн бұрын

Очень круто! Спасибо, за такой контент!

@PurpleSchool 15 күн бұрын

Пожалуйста!

@BlueCell 19 күн бұрын

Поскольку FE разработка движется активно в сторону server components, делайте больше таких видео. Спасибо

@PurpleSchool 19 күн бұрын

Хорошо)

@user-gw8zk6xx5x 22 күн бұрын

Антон, привет 6:28 минута. "Обернем в useCallback для оптимизации". В данном случае для деоптимизации, у тебя в итоге просто так хук будет вызываться на каждый рендер т.к сохранение ссылки на ф-ию в зависимости от searchParams здесь вообще не нужно, оно не несет никакого смысла (Зачем ?) Так же: 1) Дублируются строчки при пробросе типа и направления в компоненты, можно было бы вынести в константы условия с оператором "??" 2) Когда перешли на серверные компоненты, то можно вынести query для href компонента Link в const переменную. P.S Но это уже мелочи по сравнению с useCallback

@PurpleSchool 22 күн бұрын

Спасибо за дополнение

@dmitryrazdobudko4914 21 күн бұрын

конкретно тут можно createQueryString вынести за компонент, добавив seachParams третьим аргументом. И будет ещё лучше в плане оптимизации

@user-ik7rp8qz5g 21 күн бұрын

Проблема такого подхода в том, что теперь на каждое обновление фильтра делается запрос к серверу. Для огромных интернет магазинов это вполне нормально, но для маленьких сайтов, где весь контент загружается сразу, это неоправданное усложнение. Есть ли у этой задачи правильное решение - я не знаю. Пробовал несколько разных подходов, остановился на таком. Серверный компонент (страница) загружает исходные данные один раз и передает в клиентский компонент (фильтр + список). А на клиенте используется библиотека next-usequerystate (nuqs в новых версиях), которая обеспечивает синхронизацию кнопок фильтра с адресной строкой без перезагрузки страницы. Итог - статическая генерация с сохранением состояния в адресе.

@chirkov 18 күн бұрын

Как раз почти все интернет магазины так и работают: на любое обновление фильтра делается новый запрос к серверу и тоже самое по нажатию на кнопку пагинации

@funkjoker 22 күн бұрын

Note to mention. Любое считывание searchParams в серверном компоненте автоматически делает рут динамическим. Ну должно, по крайней мере после того как ишью пофиксят с force-dynamic(или уже пофиксили) ну или это не partial prerendering

@PurpleSchool 22 күн бұрын

👍