Как сохранять React состояние в URL.

В этом видео рассмотрим, как сохранять state компонента в url с помощью get параметров. Как обычно, в начале рассмотрим как решить эту "локально", затем перейдем к написанию хука.
Codesandbox:
codesandbox.io...
Github репозиторий с хуками:
github.com/Ayu...
Мой канал в Telegram:
telegram.me/ay...

[@МурадМавлидов]

Оо, это огонь))

[@ayub_begimkulov]

Спасибо за фидбэк!

[@sergei_sergeevu4]

Спасибо вам за интересную информацию.
Возможно, в одном из роликов вы сможете рассмотреть тему возврата React компонента из хуков.

[@sergei_sergeevu4]

Не знаю почему, но youtube почему-то банит комментарии со ссылками.
Хорошая статья на эту тему
`blog.bitsrc.io/new-react-design-pattern-return-component-from-hooks-79215c3eac00`
Пример Example E (usePopup) сделан по примеру ниже
`codesandbox.io/s/return-component-from-hooks-eljr00?file=/src/ExampleE/usePopup.tsx`
Пример от создателя react-table и react-query
`ua-cam.com/video/-UjbTFc9NL4/v-deo.html
codesandbox.io/s/how-to-return-components-from-react-hooks-tjmc8?file=/src/index.js`

[@ayub_begimkulov]

Подумаю, что можно снять по этому поводу.
Спасибо за предложение!

[@sergei_sergeevu4]

Было бы круто если бы в примерах был TypeScript)

[@ayub_begimkulov]

Я бы был не против, сам являюсь большим фанатом TS'а, однако на данный момент многие еще плохо в нем разбираются, хотелось бы тут сфокусироваться чисто на самом React'е.
Но идея хорошая, я думаю стоит в репозиторий с хуками из данных уроков добавлять версии с TS. Спасибо за фидбэк!

[@sergei_sergeevu4]

@@ayub_begimkulov Если честно благодаря TypeScript нашел ваш блог и канал)

[@seregaeinwanderer910]

Хай, это же для rrd5? на rrd6 useSearchParams?

[@ayub_begimkulov]

Да, в 6-й версии уже есть такой хук.

[@vladislavstepanov7591]

А почему не использовать вместо кастомных serialize и deserialize взять JSON.stringify и JSON.parse?

[@ayub_begimkulov]

Потому что `getSearchParam` будет возвращать null, если нету такого get параметра.

[@ГенаПетров-н5ы]

Вместо if проверок на null, лучше использовать stringOrNullVar ?? ""

[@ayub_begimkulov]

Это все дело вкуса, используй как тебе удобнее)

[@sergei_sergeevu4]

// Поможет не обрабатывать кейс с null в desirialize: (v) => (v ? v : "")
function getSearchParam(search, param) {
const searchParams = new URLSearchParams(search);
return searchParams.get(param) ?? "";
}
// Удалит при пустом value: ?name=
function setSearchParam2(search, param, value) {
const searchParams = new URLSearchParams(search);
Boolean(value)
? searchParams.set(param, value)
: searchParams.delete(param);
return searchParams.toString();
}

[@ayub_begimkulov]

Да, удаление параметра в данном примере я не рассматривал)