「なにをしたいuseEffectか」をコメントしておくと、後で読むときのコストが下がりやすい。

実際にプロダクトコードで書いたことがあるコメント↓ (簡略化してます)

// 画面内に入った動画を自動再生する+ほかの動画は停止する (すでに再生済みだったら再生しない)
useEffect(() => {
  if (inView && !hasBeenPlayed && canAutoplay) {
    /* ... */
    pauseOtherVideo();
    play();
  }
  /* ... */
});

このコンポーネントにはコレを含めて4つのコメント付きのuseEffectがあった。たびたび読み返す機会があったが、その度にこれらのコメントが大いに役立った。

なぜコメントが必要なのか?

useEffectの中身はたいてい複雑な処理になる。しかもたいてい無名関数を渡すので、実現したい仕様に関する情報がない。なので、 コメントがないと何をするuseEffectなのかが処理内容を読まないと把握できない。これはとてもめんどい。

コメントはコードを読むときだけでなく、リファクタするときにも役立つ。カスタムフックを抜き出すきっかけにもなるかもしれない。

コメントの書き方

コメントはやりたいことをベースにつける。たとえばこんな感じ↓

APIからデータを取得する
5秒後にフェードアウトさせる
オーバースクロールを制御する

後から読んだときに「なにがしたいコードなのか?」が伝わるように書こう。

別解

別解1: 関数に名前をつける

useEffect(function playWhenEnteringView() {
  // ...
});

別解2: カスタムフックに抜き出す

function usePlayWhenEnteringView() {
  useEffect(() => { /* ... */ });
}

追記: lintで縛る

Lintにしてしまうのが良さそうと思ったのでhttps://t.co/iQROX8PuAS
適当に書いた。

useEffectにはコメントをつけよう - Panda Noirhttps://t.co/Ls4cx7i4IG
— azu (@azu_re) 2025年1月30日

azuさんがリントルールを書かれたので紹介します

https://gist.github.com/azu/0dc07179f66a6471f0a0aa681709b2f5

useEffect または React.useEffect の直前にコメントがない場合にエラーを出すルールです。この記事の内容まんまのものになってます。よければ使ってみてください。