前回isFallback
の位置を間違え、Reactフックの呼ばれる回数が変わりエラーが発生した
ドキュメントを読んでいると、lintのルールで検知できることがわかったので設定する
使うライブラリは以下だが、そもそもeslint類を導入していなかったので導入する
www.npmjs.com
prettierも合わせて導入したいので、次のライブラリをインストールする
npm install -D eslint eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-import eslint-config-prettier eslint-plugin-react-hooks
typescript用にこちらもインストールする
npm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser
.eslintrc
の設定
{ "env": { "browser": true, "node": true, "es6": true, "jest": true }, "extends": [ "eslint:recommended", "plugin:react/recommended", "plugin:react-hooks/recommended", "plugin:@typescript-eslint/recommended", "plugin:@typescript-eslint/eslint-recommended", "plugin:prettier/recommended", "prettier/@typescript-eslint" ], "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaFeatures": { "jsx": true }, "sourceType": "module" }, "plugins": [ "import", "react", "prettier", "@typescript-eslint" ], "settings": { "react": { "version": "detect" } } }
本命のhookの順序のエラー検知は以下で設定している
{ "extends": [ // ... "plugin:react-hooks/recommended" ] }