next.jsでaddEventListener('scroll')が重複してしまいます

いつもお世話になります。

next.jsでスクロール数に応じて、さまざまな処理を書いているのですが、
ブラウザの開発者ツールで確認したところ、
1スクロールで2回、スクロールを続けていくうちに28回、50回、120回とどんどん重複していることがわかりました。

componentの書き方が悪いのかなと、
一度インストールし直して、まっさらな状態で試してみたのですが、
2回のみですが同様に重複していました。

js
1export default function Home() {
2　　if (typeof window !== "undefined") {
3    window.addEventListener("scroll", function () 
4        console.log(window.scrollY)
5    });
6 }
7
8 return (
9    <div className={styles.container}>
10      <Head>
11        <title>Create Next App</title>
12        <meta name="description" content="Generated by create next app"/>
13 　      <link rel="icon" href="/favicon.ico"/>
14      </Head>
15
16      <main className={styles.main}>
17        <h1 className={styles.title}>
18          Welcome to <a href="https://nextjs.org">Next.js!</a>
19        </h1>
20        ...
21  )
22}

vue.jsやバニラで試した場合は重複はしていませんでした。
調べても原因が分からなかったので、教えていただければと思います。

バージョン
"next": "12.0.7",
"react": "17.0.2",
"react-dom": "17.0.2"

よろしくお願いします

行動規範の内容に同意します

回答1件

ベストアンサー

今の実装だと、Homeコンポーネントの再描画がするたびに、addEventListenerが実行されるので、もしかしたら何らかの理由で2回以上再描画が走っているのかもしれませんね（親コンポーネントのStateに変化があったとか、<Link />で画面遷移が走ったとか・・・

試しに、次のような感じでconsole.logで確認してみると良いかもしれません。

export default function Home () {
  console.log('check')
  ...
}

この問題はuseEffectを使うと解決できると思います。useEffectについては、公式ドキュメントにわかりやすく説明されているので読んでみてください。

https://ja.reactjs.org/docs/hooks-effect.html

Javascript
1export default function Home() {
2  useEffect(() => {
3    const handleFunc = () => {
4      console.log(window.scrollY)
5    }
6
7    window.addEventListener('scroll', handleFunc)
8
9    // アンマウントされた時にremoveEventListenerされるように、
10    // ちゃんと解法処理も書きましょう。
11    return () => { 
12      window.removeEventListener('scroll', handleFunc)
13    }
14  }, [])
15
16  return (
17    <div className={styles.container}>
18      <Head>
19        <title>Create Next App</title>
20        <meta name="description" content="Generated by create next app"/>
21 　      <link rel="icon" href="/favicon.ico"/>
22      </Head>
23
24      <main className={styles.main}>
25        <h1 className={styles.title}>
26          Welcome to <a href="https://nextjs.org">Next.js!</a>
27        </h1>
28        ...
29  )
30}