Русский
Открыть в Telegram

ПостОстерегайтесь скрытых проблем при работе с search params

17 июня 2025
З
Заметки про React
Ссылка
нажмите — покажем
Остерегайтесь скрытых проблем при работе с search params Типо-безопасность — это только вершина айсберга, о которой вспоминают разработчики при работе с search params. Автор библиотеки nuqs предупреждает о скрытых проблемах при работе с search params. Запись и чтение. Для получения типо-безопасного стейта search params необходимо внедрять библиотеки валидации (например Zod). Для записи в search params сложных стейтов, а потом для их чтения обратно, понадобятся функции сериализации и парсинга соответственно. В nuqs из коробки есть встроенные парсеры для основных типов данных. Помимо типо-безопасности, при чтении search params важно иметь runtime-безопасность. Даже после парсинга в корректный тип данных, это значение может быть невалидным. Например, значение валидно если находится в диапазоне -90/+90 или -180/+180. Или email написан правильно. Поэтому после парсинга должна происходить валидация данных. Аналогично, перед сериализацией должна происходить валидация, чтобы в URL не попали невалидные значения. Еще одна из скрытых проблем при работе с URL – частота обновления URL. У разных браузеров есть разный лимит на частоту обновлений URL (в Chrome это 50мс). Проблема может возникнуть из-за привязки URL к высокочастотному инпуту, например <input type="text"> или <input type="range">. Со временем схема стейта в URL может изменяться, т.е. могут переименовываться поля, удаляться или добавляться новые. Нужно поддержать возможность миграции на новую схему. При изменении URL может происходить замена текущей истории или добавлении в историю нового URL. При добавлении URL в историю появляется возможность управлять историей через браузерные кнопки вперед/назад. Это удобно для пользователя, но добавляет сложность для разработки, т.к. появляется два источника управления историей: через UI и браузерные кнопки вперед/назад. Например, при открытии модального окна добавляется в историю ?modalOpen=true. Теперь пользователь ожидает, что при нажатии на браузерную кнопку назад закроет окно. https://nuqs.47ng.com/blog/beware-the-url-type-safety-iceberg
39 · 3.5K ·

Рядом в ленте

ЗЗаметки про ReactАнонс TypeScript Native Вышла превью версия TypeScript написанная на Go. Ее можно установить через npm: npm install -D @typescript/native-preview Этот пакет преЗЗаметки про ReactПочему Error Boundary, а не просто try/catch для компонентов В React нельзя использовать try/catch чтобы отловить ошибки рендера компонента. Это связано с тем,
это сообщение
ЗЗаметки про ReactРеактивность – это легко Стандартный useContext заставляет обновляться все компоненты-потребители, даже если им не нужна изменившаяся часть состояния. Это приво
ЗЗаметки про ReactЗаметки про React@ru_react_notes · канал · Технологии
3 412подписчиков491постов в индексе
Лента площадки Открыть в Telegram

Открытая публичная лента из поискового индекса ChatCrawler — «Google по публичному Telegram»; обновляется по мере обхода площадки. Время — UTC.

Только публичный контент, официальный API Telegram. О проекте · Вопросы · Границы индекса · Убрать страницу из выдачи · Каталог · Поиск · Как мы считаем