Является ли этот пользовательский крючок для управления фильтрами с URLSearchParams в next.js 13+ идиоматической и масшт ⇐ Javascript

[Anonymous]

Я работаю над системой фильтрации в приложении Next.js 13+ (приложение маршрутизатор). Я нашел крючок в другом проекте, улучшил его для моих нужд, и, похоже, он работает хорошо-но у меня все еще есть некоторые опасения по поводу его правильности, производительности и долгосрочной обслуживаемости < /p>
о том, что я не уверен: < /p>
Я использую Usememo и Usecallback? Object.Fromentries (SearchParams)?import { useRouter, useSearchParams } from "next/navigation";
import { useMemo, useCallback } from "react";

const identity = (value) => value;
const toggle = (list, value) => list.includes(value) ? list.filter((item) => item !== value) : [...list, value];

export const useSearchParamsApi = () => {
const router = useRouter();
const searchParams = useSearchParams();

const record = useMemo(
() => Object.fromEntries(searchParams),
[searchParams]
);

const replace = useCallback(
(value, params) => {
router.replace(`?${new URLSearchParams(value)}`, {
scroll: false,
...params,
});
},
[router]
);

const update = useCallback(
(value, params) => {
const next = { ...record, ...value };

if (!("page" in value)) {
next.page = "1";
}

const cleaned = Object.fromEntries(
Object.entries(next).filter(
([_, v]) => v !== undefined && v !== null && v !== ""
)
);

replace(cleaned, params);
},
[replace, record]
);

return { record, searchParams, replace, update };
};

export function useFiltersQuery() {
const { record, update, replace, searchParams } = useSearchParamsApi();

const valueFilter = (name, fallback, deserialize = identity) => ({
value: useMemo(() => {
return record[name] ? deserialize(record[name]) : fallback;
}, [record, name]),

update: useCallback(
(next) => update({ [name]: String(next) }),
[name, update]
),

remove: useCallback(() => update({ [name]: undefined }), [name, update]),
hasFilter: searchParams.has(name),
});

const arrayFilter = (name, defaultValue = []) => {
const field = valueFilter(name, defaultValue, (v) => v.split(","));

return {
...field,
toggle: useCallback(
(value) => field.update(toggle(field.value, value)),
[field.value, field.update]
),
};
};

const clearFilter = useCallback(
(key, params) => {
update(
{
[key]: undefined,
page: "1",
},
params
);
},
[update]
);

const resetFilters = useCallback(
(params) => {
replace({}, params);
},
[replace]
);

return {
record,
valueFilter,
arrayFilter,
clearFilter,
resetFilters,
};
}

< /code>
Что я попробовал и что я ожидал: < /p>
Я использовал этот крюк на нескольких фильтрованных страницах - например, каталог компаний, где в URL хранятся такие фильтры, такие категории, языки и тип услуг. Это работает как и ожидалось: < /p>
Фильтры отображаются в пользовательском интерфейсе и синхронизированы с URL. декларативное решение для обработки фильтров без местного государства. Похоже, он работает хорошо, но мне бы хотелось отзыв о:
может ли это вызвать проблемы в будущем,
и есть ли какие-либо анти-паттерны, которые я могу отсутствовать.

Подробнее здесь: https://stackoverflow.com/questions/796 ... -js-13-idi