Как правильно вызывать useRouter в NextJS, чтобы был 1 рендор и query был не пустым?

Question

[San Taganeiro]

const SomeName = () => {
  const router = useRouter();
  console.log(123); // 2 раза вывод в консоль
return <></>
}

Баг || фича выпадает только при перезагрузки страницы. При переходе по ссылке норм работает.
Роутер нужен для получения query.
Из мыслей как исправить - использовать стандартные методы window

UPD:
Если завернуть в useEffect, то получаю одиночный рендор компонеты, но тогда роутер приходит с пустом объектом query. Данные можно выдрать только через asPath. Как правильно вызывать useRouter, чтобы был 1 рендор и query был не пустым?

Comments

[godsplan]

Не уверен, но возможно тут есть объяснение (С таймкодом) https://youtu.be/ftu0b79oPis?t=317

[San Taganeiro]

godsplane, batching подразумевает групповое обновление стайта. У меня вроде только один вызов(хотя под капот routerера не заглядывал ).

Сейчас обновился до последних версий реакта и некста, но проблема не ушла. Значит не то.

[godsplan]

Legalas61, strict mode?

[San Taganeiro]

godsplane, не то

Answer 1

[San Taganeiro]

Пришел к такому костылю:

const router = useRouter();
const query = useRef({});

useEffect(() => {
    const urlQuery = new URLSearchParams(router.asPath.split("?")[1]);
    Array.from(urlQuery.entries()).forEach(([key, value]) => {
      query.current[key] = value;
    });
    console.log(query.current);
  }, [router.asPath]);