Next.jsでuseEffectでqueryの値が取れた時実行したい

Question

環境
react: 16.13.1
next: 9.5.2

Next.jsで検索機能を実装しているのですが、最初の数回値が取れない時があるので、最後のレンダリング時のみに実行させる方法があれば教えて欲しいです。
urlは以下のように変化します。
/page
↓
/page?q=xxxxxxx

値は
undefined
{q: 'xxxxxxx'}
のように順番に入ってきます。

実装したコードは以下になります。

  const [query, setQuesy] = useState('');
  useEffect(() => {
    // queryが利用可能になったら処理される
    if (router.asPath !== router.route) {
      setQuesy(router.query.q);
    }
  }, [query]);

  useEffect(() => {
    // 関数の実行
    async function getPosts(query) {
      setIsLoading(true);
      const allPosts = await fetchEntriesPost(limit, skip, query);
      setPosts([...allPosts]);
      setTimeout(() => {
        setIsLoading(false);
      }, 400);
    }
    getPosts(query);
  }, [query]);

query判定などで分岐かけましたが、複数回useEffect内の関数が呼ばれ、検索機能においてパラメータが渡されていない時のデータも一瞬表示されることがあります。
どのように改善するべきかアドバイスの方よろしくお願いいたします。
できれば、useEffectの実行回数を最小限に抑えたいです。

Answer 1

解決方法の記事を書きました
https://zenn.dev/sora_kumo/articles/e86bbf0291d4a7

• pages/_app.tsx

import App from 'next/app'
App.getInitialProps = async () => ({ pageProps: {} })
export default App

これを入れると初回undefinedが無くなるので、判定が簡単になります

Answer 2

やりたいことと違っていたら申し訳ないですが、こんな感じでどうですか?

const ExamplePage = () => {
  const router = useRouter();
  const { q } = router.query;

  useEffect(() => {
    async function getPosts(query) {
      //
    }
    if (q) {
      getPosts(q);
    }
  }, [q]);

  return ...
}

Comments

[kagepedia]

回答ありがとうございます。
上記のような方法も考えたのですが、queryがない時にデータが表示されないので断念しました。
queryがない時はそのまま表示で、queryがある時は絞り込みで表示したいです。
queryが空の時と入ってる時のデータの判定が難しいですね。
一度queryがある時でもundefinedで入ってきてデータが表示されるのが・・・

[nskhei]

そうでしたか、queryが無くてもデータ取得自体は行うんですね。
queryがあるのにundefinedが入るというのがよく分からないのですが、
こういうのもダメですか?
```
const ExamplePage = () => {
const router = useRouter();
const { q } = router.query;

useEffect(() => {
async function getPosts(query = "") {
setIsLoading(true);
const allPosts = await fetchEntriesPost(limit, skip, query);
setPosts([...allPosts]);
setTimeout(() => {
setIsLoading(false);
}, 400);
}
getPosts(q);
}, [q]);
}
```

[kagepedia]

処理が二重で入っていて、最初からで入ってくるので記事が表示されてその後検索文字列でヒットするのでレンダリングが2回表示されることになっています。
この際、最後の方のレンダリングにはqueryが入っているのでその時だけ実行したいのですが、そのような方法はあるのでしょうか？

[nskhei]

自分には質問の意味がよく分かっておらず、これ以上答えられそうにないです。
申し訳ないです。