diff --git a/app/client/.eslintrc.base.json b/app/client/.eslintrc.base.json index f5870275da..0cc41a1365 100644 --- a/app/client/.eslintrc.base.json +++ b/app/client/.eslintrc.base.json @@ -17,7 +17,8 @@ "cypress", "testing-library", "jest", - "@appsmith" + "@appsmith", + "react-perf" ], "extends": [ "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react @@ -26,6 +27,7 @@ "plugin:testing-library/react", "plugin:react-hooks/recommended", "plugin:@appsmith/recommended", + "plugin:react-perf/recommended", // Note: Please keep this as the last config to make sure that this (and by extension our .prettierrc file) overrides all configuration above it // https://www.npmjs.com/package/eslint-plugin-prettier#recommended-configuration "plugin:prettier/recommended" @@ -67,6 +69,17 @@ ], "no-console": "error", "no-debugger": "error", + "react-perf/jsx-no-new-array-as-prop": "warn", + "react-perf/jsx-no-new-function-as-prop": "warn", + "react-perf/jsx-no-jsx-as-prop": "warn", + "react-perf/jsx-no-new-object-as-prop": [ + "warn", + { + // we are disabling this rule here for native component since it won't make much difference in performance + // we want to target react components more since there is possibility they can be pure components and new istance props should be avoided for them + "nativeAllowList": "all" + } + ], "@typescript-eslint/no-restricted-imports": [ "error", { diff --git a/app/client/package.json b/app/client/package.json index 8629c64847..40afddb093 100644 --- a/app/client/package.json +++ b/app/client/package.json @@ -342,6 +342,7 @@ "eslint-plugin-prettier": "^5.0.0", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", + "eslint-plugin-react-perf": "^3.3.2", "eslint-plugin-sort-destructure-keys": "^1.5.0", "eslint-plugin-storybook": "^0.6.15", "eslint-plugin-testing-library": "^6.2.0", diff --git a/app/client/yarn.lock b/app/client/yarn.lock index c377c770b0..e2c9c3e395 100644 --- a/app/client/yarn.lock +++ b/app/client/yarn.lock @@ -13322,6 +13322,7 @@ __metadata: eslint-plugin-prettier: ^5.0.0 eslint-plugin-react: ^7.33.2 eslint-plugin-react-hooks: ^4.6.0 + eslint-plugin-react-perf: ^3.3.2 eslint-plugin-sort-destructure-keys: ^1.5.0 eslint-plugin-storybook: ^0.6.15 eslint-plugin-testing-library: ^6.2.0 @@ -18900,6 +18901,15 @@ __metadata: languageName: node linkType: hard +"eslint-plugin-react-perf@npm:^3.3.2": + version: 3.3.2 + resolution: "eslint-plugin-react-perf@npm:3.3.2" + peerDependencies: + eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 + checksum: 236982166bfb598c758a2ef0ba69e5173521c0f6481a8767aca5d29cf32928789d4bc1c7316aa274706baab820828bdb36336508c492071916bdb234a4c99417 + languageName: node + linkType: hard + "eslint-plugin-react@npm:^7.27.1, eslint-plugin-react@npm:^7.33.2": version: 7.33.2 resolution: "eslint-plugin-react@npm:7.33.2"