useState в React не всегда нужен - query и server components в Nextjs
ฝัง
- เผยแพร่เมื่อ 5 มิ.ย. 2024
- Сегодня разберём на примере каталога курсов, почему местами плохо использовать 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 - Заключение
🔗 Ссылки:
Репозиторий проекта github.com/AlariCode/youtube-state-demo
Про React 19: th-cam.com/video/jOzCABBhfTE/w-d-xo.html
Видео про терминал MacOS: th-cam.com/video/n3CWYPGjVns/w-d-xo.html
🎓 Курсы по разработке: purpleschool.ru
🎓 Курсы по React и Redux: purpleschool.ru/course/react-redux
🎓 Курсы по Next: purpleschool.ru/course/nextjs
💬 Telegram канал с полезными советами:
t.me/purple_code_channel
Поскольку FE разработка движется активно в сторону server components, делайте больше таких видео. Спасибо
Хорошо)
Антон, привет
6:28 минута. "Обернем в useCallback для оптимизации". В данном случае для деоптимизации, у тебя в итоге просто так хук будет вызываться на каждый рендер т.к сохранение ссылки на ф-ию в зависимости от searchParams здесь вообще не нужно, оно не несет никакого смысла (Зачем ?)
Так же:
1) Дублируются строчки при пробросе типа и направления в компоненты, можно было бы вынести в константы условия с оператором "??"
2) Когда перешли на серверные компоненты, то можно вынести query для href компонента Link в const переменную.
P.S Но это уже мелочи по сравнению с useCallback
Спасибо за дополнение
конкретно тут можно createQueryString вынести за компонент, добавив seachParams третьим аргументом. И будет ещё лучше в плане оптимизации
Очень круто!
Спасибо, за такой контент!
Пожалуйста!
Проблема такого подхода в том, что теперь на каждое обновление фильтра делается запрос к серверу. Для огромных интернет магазинов это вполне нормально, но для маленьких сайтов, где весь контент загружается сразу, это неоправданное усложнение. Есть ли у этой задачи правильное решение - я не знаю.
Пробовал несколько разных подходов, остановился на таком. Серверный компонент (страница) загружает исходные данные один раз и передает в клиентский компонент (фильтр + список). А на клиенте используется библиотека next-usequerystate (nuqs в новых версиях), которая обеспечивает синхронизацию кнопок фильтра с адресной строкой без перезагрузки страницы. Итог - статическая генерация с сохранением состояния в адресе.
Как раз почти все интернет магазины так и работают: на любое обновление фильтра делается новый запрос к серверу и тоже самое по нажатию на кнопку пагинации
Note to mention. Любое считывание searchParams в серверном компоненте автоматически делает рут динамическим. Ну должно, по крайней мере после того как ишью пофиксят с force-dynamic(или уже пофиксили) ну или это не partial prerendering
👍
Спасибо огромное, а можно исходники?
Сделал репозиторий github.com/AlariCode/youtube-state-demo
@@PurpleSchool Огромное Вам спасибо, хорошего дня)
4:09 зачем ты делаешь обёртку над сеттером?
Я просто заранее подготовил эти функции к демонстрации, так как дальше в них добавляется дополнительные строки кода
Исходники можно ?
Сделаю завтра отдельный репозиторий
@@PurpleSchool буду благодарен если поделитесь ссылкой, просто чтобы посмотреть и потыкать код написанный вами
@@PurpleSchool Привет. Тоже всегда хочется исходники. Прикладывайте к урокам. Спасибо!
можно пожалуйста поменьше этих музыкальных переходов,слишком уж часто они происходят, слушая в наушниках,это начинает давить на мозги
👍
А вдруг фильтров много и у них длинные названия и/или значения и url в 2048 знаков не уложится? :)