eslintSuppressionRules を考察してみる

必要性

eslintSuppressionRules はデフォルトで次の 2 つのルールが登録されている

const DEFAULT_ESLINT_SUPPRESSIONS = [
  "react-hooks/exhaustive-deps",
  "react-hooks/rules-of-hooks",
];

これらのルールが無効化された場合、React Compiler は例外をスローする。これらのルールは React の基本的なルール²であり、無効化されることは React のルールに違反している可能性が高い。おさらいだが、React Compiler は React のルールに従ったコードのみを解析して最適化する。そのため eslintSuppressionRules は React のルールに違反しているコードを見つけ、例外をスローすることで React Compiler が正しく動作することを保証する。

(2024/06/11 追記) ただし、 "use no memo" ディレクティブを書いた場合は、React Compiler は例外をスローしない。

  // Top level "use no forget", skip this file entirely
  if (
    findDirectiveDisablingMemoization(program.node.directives, options) != null
  ) {
    return;
  }

    const useNoForget = findDirectiveDisablingMemoization(
      fn.node.body.directives,
      pass.opts
    );
    if (useNoForget != null) {
      pass.opts.logger?.logEvent(pass.filename, {
        kind: "CompileError",
        fnLoc: fn.node.body.loc ?? null,
        detail: {
          severity: ErrorSeverity.Todo,
          reason: 'Skipped due to "use no forget" directive.',
          loc: useNoForget.loc ?? null,
          suggestions: null,
        },
      });
      return null;

ESLint v9との関係と使い方

前項で eslintSuppressionRules は React Compiler が正しく動作するための設定であることを述べた。他にも eslintSuppressionRules が必要な理由が無いか考えてると、次のような理由があることに気づいた。

それは、ESLint v9 から stable となった flat config の仕様に関係している。flat config では次のようにプラグインを設定する。

// @ts-check

import qwikPlugin from "eslint-plugin-qwik";

export default [
	{
		files: ["src/**/*.tsx"],
		plugins: {
			qwik: qwikPlugin,
		},
		languageOptions: {
			parserOptions: {
				project: ["./tsconfig.json"],
			},
		},
		rules: {
			...qwikPlugin.configs.recommended.rules,
		},
	}
];

注目してほしいのは plugins の部分である。ここで各ユーザーがプラグインのプレフィックスを設定している。つまり以下のような設定が可能である。

// @ts-check

import reactHooks from "eslint-plugin-react-hooks";
import globals from "globals";

export default [
	// ... some settings

	{
		files: ["**/*.{js,jsx,mjs,cjs,ts,tsx}"],
		plugins: {
			r: reactHooks,
		},
		languageOptions: {
			parserOptions: {
				ecmaFeatures: {
					jsx: true,
				},
			},
			globals: {
				...globals.browser,
			},
		},
		rules: {
			// ... any rules you want
			"r/exhaustive-deps": "error",
			"r/rules-of-hooks": "error",
		},
		// ... others are omitted for brevity
	}
];

上のような設定をしたプロジェクトで React Copiler を使おうとするとある問題が発生する。前項にて述べたように、eslintSuppressionRules はデフォルトで react-hooks/exhaustive-deps と react-hooks/rules-of-hooks が登録されている。ユーザーは ESLint の設定で reac-hooks プラグインのプレフィックスを r に設定している。するとユーザーはあるタイミングで eslint を無効化させる時に次のようなコードを書く。

// eslint-disable-next-line r/exhaustive-deps
useEffect(() => {
	// some code
}, []);

このコードを含んだアプリケーションを React Compiler に食べさせると、本来は例外をスローされるべきコードがコンパイルされてしまい、挙動が変わってしまう恐れがある。プレイグラウンド³で試してみると一目瞭然だが、React Compiler はかなり元のコードを変更して最適化を行う。もちろん React のルールに則ったコードであれば正しく動作するが、そうでないコードは正しく動作する保証がない。

この問題を解決するために eslintSuppressionRules がある。ユーザーは次のように設定することで、eslintSuppressionRules に r/exhaustive-deps と r/rules-of-hooks を登録することで、上記の問題を解決できる。

import { defineConfig } from "vite";

export default defineConfig(() => {
	return {
		plugins: [
			react({
				babel: {
					plugins: [
						[
							"babel-plugin-react-compiler",
							{
								eslintSuppressionRules: ["r/exhaustive-deps", "r/rules-of-hooks"],
							}
						],
					],
				},
			}),
		],
		// ...
	};
});

このように設定することで、eslintSuppressionRules に登録されたルールが無効化された場合に例外をスローするようになる。これにより、React Compiler は正しく動作することが保証される。