tgoop.com/sWebDev/3858
Create:
Last Update:
Last Update:
Синхронизация состояния компонента с URL
Кастомный хук useQueryState инкапсулирует логику синхронизации состояния с URL-параметрами. Данный подход объединяет useState и useSearchParams, очищая код компонента и беря начальное значение из URL.
Для обновления применяется useLayoutEffect, гарантируя изменение адресной строки до отрисовки браузером и исключая визуальную рассинхронизацию.
import { useState, useLayoutEffect } from 'react';
import { useSearchParams } from 'react-router-dom';
function useQueryState(queryKey, initialValue) {
const [searchParams, setSearchParams] = useSearchParams();
const [value, setValue] = useState(
searchParams.get(queryKey) ?? initialValue
);
useLayoutEffect(() => {
const newParams = new URLSearchParams(searchParams);
newParams.set(queryKey, value);
setSearchParams(newParams);
}, [value, queryKey, searchParams, setSearchParams]);
return [value, setValue];
}👉 @sWebDev
BY Frontender Libs - обзор библиотек JS / CSS
Share with your friend now:
tgoop.com/sWebDev/3858