avoid unnecessary rerenders React components (#3124)

Co-authored-by: Ted Thibodeau Jr <[email protected]>
graphql · May 27, 2023 · c645932 · c645932
1 parent 7896fc5
commit c645932
Show file tree

Hide file tree

Showing 15 changed files with 481 additions and 348 deletions.
diff --git a/.changeset/dry-olives-crash.md b/.changeset/dry-olives-crash.md
@@ -0,0 +1,7 @@
+---
+'graphiql': patch
+'@graphiql/plugin-explorer': patch
+'@graphiql/react': patch
+---
+
+avoid unecessary renders by using useMemo or useCallback
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -50,6 +50,12 @@ module.exports = {
       },
 
       rules: {
+        '@arthurgeron/react-usememo/require-usememo': [
+          'error',
+          {
+            checkHookCalls: false,
+          },
+        ],
         // Possible Errors (http://eslint.org/docs/rules/#possible-errors)
         'no-console': 'error',
         'no-constant-binary-expression': 2,
@@ -310,7 +316,7 @@ module.exports = {
         '@typescript-eslint/no-namespace': 'off',
       },
 
-      plugins: ['promise', 'sonarjs', 'unicorn'],
+      plugins: ['promise', 'sonarjs', 'unicorn', '@arthurgeron/react-usememo'],
     },
     {
       // Rules that requires type information
@@ -348,6 +354,7 @@ module.exports = {
       rules: {
         'jest/no-conditional-expect': 'off',
         'jest/expect-expect': ['error', { assertFunctionNames: ['expect*'] }],
+        '@arthurgeron/react-usememo/require-usememo': 'off',
       },
     },
     {
@@ -413,6 +420,7 @@ module.exports = {
         'no-undef': 'off',
         'react/jsx-no-undef': 'off',
         'react-hooks/rules-of-hooks': 'off',
+        '@arthurgeron/react-usememo/require-usememo': 'off',
       },
     },
   ],

diff --git a/custom-words.txt b/custom-words.txt
@@ -65,6 +65,7 @@ LekoArts
 
 // packages and tools
 argparse
+arthurgeron
 atpl
 browserslist
 bundlephobia
@@ -104,6 +105,7 @@ templayed
 typedoc
 twing
 undici
+usememo
 velocityjs
 vite
 vitejs

diff --git a/examples/graphiql-parcel/src/index.tsx b/examples/graphiql-parcel/src/index.tsx
@@ -1,30 +1,29 @@
-import ReactDOM from 'react-dom';
+import { render } from 'react-dom';
 import { GraphiQL } from 'graphiql';
+import type { Fetcher } from '@graphiql/toolkit';
+import { CSSProperties } from 'react';
 
-const App = () => (
-  <GraphiQL
-    style={{ height: '100vh' }}
-    fetcher={async graphQLParams => {
-      const data = await fetch(
-        'https://swapi-graphql.netlify.app/.netlify/functions/index',
-        {
-          method: 'POST',
-          headers: {
-            Accept: 'application/json',
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify(graphQLParams),
-          credentials: 'same-origin',
-        },
-      );
-      return data.json().catch(() => data.text());
-    }}
-  />
-);
+const fetcher: Fetcher = async graphQLParams => {
+  const data = await fetch(
+    'https://swapi-graphql.netlify.app/.netlify/functions/index',
+    {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(graphQLParams),
+      credentials: 'same-origin',
+    },
+  );
+  return data.json().catch(() => data.text());
+};
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const style: CSSProperties = { height: '100vh' };
+
+const App = () => <GraphiQL style={style} fetcher={fetcher} />;
+
+render(<App />, document.getElementById('root'));
 
 // Hot Module Replacement
-if (module.hot) {
-  module.hot.accept();
-}
+module.hot?.accept();
diff --git a/examples/graphiql-webpack/src/index.jsx b/examples/graphiql-webpack/src/index.jsx
@@ -51,6 +51,25 @@ ${getQuery(arg, 2)}
 
 const snippets = [exampleSnippetOne, exampleSnippetTwo];
 
+const fetcher = async (graphQLParams, options) => {
+  const data = await fetch(
+    'https://swapi-graphql.netlify.app/.netlify/functions/index',
+    {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        ...options.headers,
+      },
+      body: JSON.stringify(graphQLParams),
+      credentials: 'same-origin',
+    },
+  );
+  return data.json().catch(() => data.text());
+};
+
+const style = { height: '100vh' };
+
 const App = () => {
   const [query, setQuery] = React.useState('');
   const explorerPlugin = useExplorerPlugin({
@@ -62,28 +81,18 @@ const App = () => {
     snippets,
   });
 
+  const plugins = React.useMemo(
+    () => [explorerPlugin, exporterPlugin],
+    [explorerPlugin, exporterPlugin],
+  );
+
   return (
     <GraphiQL
-      style={{ height: '100vh' }}
+      style={style}
       query={query}
       onEditQuery={setQuery}
-      plugins={[explorerPlugin, exporterPlugin]}
-      fetcher={async (graphQLParams, options) => {
-        const data = await fetch(
-          'https://swapi-graphql.netlify.app/.netlify/functions/index',
-          {
-            method: 'POST',
-            headers: {
-              Accept: 'application/json',
-              'Content-Type': 'application/json',
-              ...options.headers,
-            },
-            body: JSON.stringify(graphQLParams),
-            credentials: 'same-origin',
-          },
-        );
-        return data.json().catch(() => data.text());
-      }}
+      plugins={plugins}
+      fetcher={fetcher}
     />
   );
 };

diff --git a/package.json b/package.json
@@ -81,6 +81,7 @@
     "tsc": "tsc --build"
   },
   "devDependencies": {
+    "@arthurgeron/eslint-plugin-react-usememo": "^1.1.4",
     "@babel/cli": "^7.21.0",
     "@babel/core": "^7.21.0",
     "@babel/plugin-proposal-class-properties": "^7.18.6",