React: get параметры в useEffect

Question

Использую параметр из строки url, чтобы передать его в ajax запросе внутри useEffect. Получаю такую ошибку: conditional could make the dependencies of useEffect Hook

let query = new URLSearchParams(useLocation().search);
let sort = query.get('sort') ? JSON.parse(query.get('sort')) : [];
useEffect(() => {
    $.ajax({
        ...
        data: {jwt: localStorage.getItem('jwt'), sort: sort},
        ...
}, [sort]);

Как можно исправить? Советует useMemory, но тот хук в свою очередь агрится на query. Как я понял - проблема в параметрах строки.

Answer 1

Сейчас sort, при каждом рендере будет новым объектом, соответственно при передаче его в качестве зависимости приведет к выполнению useEffect на любое изменение компонента.

Сохранить значение можно с помощью useMemo, позволяющее получать один и тот же объект, если ничего не поменялось

const query = useLocation().search;
let sort = useMemo(()=> new URLSearchParams(query).get('sort') ? JSON.parse(query.get('sort')) : [], [query]);

Теперь значение sort обновиться только если изменился текущий query.

БЛОГ НА HUSL

React: get параметры в useEffect

Ответы (1 шт):