Web開発ブログ

警告「React Hook useEffect has a missing dependency」を出なくするためESLintのexhaustive-depsを無効にする

React

Next.js

作成

2023/07/13

次のようにuseEffectを使用しているとVSCodeに次の警告が出る。


React Hook useEffect has a missing dependency: 'setColorMode'


const [colorMode, setColorMode] = useRecoilState(colorModeAtom);
const toggleColorMode = () => {
    setColorMode(colorMode === 'light' ? 'dark' : 'light');
};
useEffect(() => {
    if (colorMode === null) {
        setColorMode(savedValue);
        ...
    }
}, [colorMode]);

第二引数の配列にsetColorModeを含めれば警告は消えるが、ここではcolorModeのみが変更された場合のみuseEffectを実行するようにしたい。

正しく警告を出なくするためには、toggleColorModeをuseCallbackでメモ化する必要がある。


const toggleColorMode = useCallback(() => {
    setColorMode(colorMode => colorMode === 'light' ? 'dark' : 'light');
}, []);

こういう状況は他にもよく遭遇するが、その度にuseCallback化するのは正直面倒だ。
なので、警告が出ないようにESLintの設定を変更してしまう。

.eslintrc.json（CRAを使っている場合はpackage.jsonのeslintConfig）の"rules"に次のように書く。


{
  ...
  "rules": {
    "react-hooks/exhaustive-deps": "off"
    ...
  }
}

ただ、本当に依存している変数を渡してなくても警告がでなくなるため、useEffectやuseCallback内で使用する変数には注意しなければならない。