fix: append async keyword when replace async func with useCallback (#…

…48) * fix: append `async` keyword when replace async func with useCallback * chore: increase patch version * test: add test for inline async func * feat: add autofix for inline function
arthurgeron · Oct 22, 2024 · e47bb4d · e47bb4d
1 parent 778b05d
commit e47bb4d
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 6 deletions.
diff --git a/__tests__/require-usecallback.test.ts b/__tests__/require-usecallback.test.ts
@@ -153,16 +153,30 @@ describe('Rule - Require-usecallback', () =>  {
         errors: [{ messageId: "usememo-const" }],
       },
       {
-        code: `const Component = () => {
+        code: `
+        const Component = () => {
           return <Child prop={() => {}} />;
         }`,
         errors: [{ messageId: "function-usecallback-props" }],
+        output: `import { useCallback } from 'react';
+
+        const Component = () => {
+          const prop = useCallback(() => {}, []);
+          return <Child prop={prop} />;
+        }`,
       },
       {
-        code: `const Component = () => {
+        code: `
+        const Component = () => {
           return <Child prop={() => []} />;
         }`,
         errors: [{ messageId: "function-usecallback-props" }],
+        output: `import { useCallback } from 'react';
+
+        const Component = () => {
+          const prop = useCallback(() => [], []);
+          return <Child prop={prop} />;
+        }`,
       },
       {
         code: `class Component {
@@ -259,6 +273,47 @@ describe('Rule - Require-usecallback', () =>  {
         }`,
         errors: [{ messageId: "function-usecallback-props" }, { messageId: "function-usecallback-props" }],
       },
+      {
+        code: `
+        const Component = () => {
+          const myFn = async function test() {};
+          return <Child prop={myFn} />;
+        }`,
+        output: `import { useCallback } from 'react';
+
+        const Component = () => {
+          const myFn = useCallback(async () => {}, []);
+          return <Child prop={myFn} />;
+        }`,
+        errors: [{ messageId: "function-usecallback-props" }],
+      },
+      {
+        code: `
+        const Component = () => {
+          const myFn = async () => [];
+          return <Child prop={myFn} />;
+        }`,
+        output: `import { useCallback } from 'react';
+
+        const Component = () => {
+          const myFn = useCallback(async () => [], []);
+          return <Child prop={myFn} />;
+        }`,
+        errors: [{ messageId: "function-usecallback-props" }],
+      },
+      {
+        code: `
+        const Component = () => {
+          return <Child prop={async () => []} />;
+        }`,
+         output: `import { useCallback } from 'react';
+
+        const Component = () => {
+          const prop = useCallback(async () => [], []);
+          return <Child prop={prop} />;
+        }`,
+        errors: [{ messageId: "function-usecallback-props" }],
+      },
     ],
   });
 });
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@arthurgeron/eslint-plugin-react-usememo",
-  "version": "2.4.3",
+  "version": "2.4.4",
   "description": "",
   "main": "dist/index.js",
   "author": "Stefano J. Attardi <[email protected]> & Arthur Geron <[email protected]",

diff --git a/src/require-usememo/utils.ts b/src/require-usememo/utils.ts
@@ -150,7 +150,7 @@ function fixFunction(node: TSESTree.FunctionDeclaration | TSESTree.FunctionExpre
   const { body, params = [] } = node;
   const funcBody = sourceCode.getText(body as ESTree.Node);
   const funcParams = (params as Array<ESTree.Node>).map(node => sourceCode.getText(node));
-  let fixedCode = `useCallback((${funcParams.join(', ')}) => ${funcBody}, [])${shouldSetName ? ';' : ''}`
+  let fixedCode = `useCallback(${node.async ? 'async ' : ''}(${funcParams.join(', ')}) => ${funcBody}, [])${shouldSetName ? ';' : ''}`
   if (shouldSetName && node?.id?.name) {
     const name = node?.id?.name;
     fixedCode = `const ${name} = ${fixedCode}`;
@@ -178,10 +178,9 @@ export function fixBasedOnMessageId(node: Rule.Node, messageId: keyof typeof Mes
   const hook = messageIdToHookDict[messageId] || 'useMemo';
   const isObjExpression = node.type === 'ObjectExpression';
   const isJSXElement = (node as unknown as TSESTree.JSXElement).type === 'JSXElement';
-  const parentIsVariableDeclarator = (node as Rule.Node).parent.type === 'VariableDeclarator';
   const isArrowFunctionExpression = node.type === 'ArrowFunctionExpression';
   const isFunctionExpression = node.type === 'FunctionExpression';
-  const isCorrectableFunctionExpression = isFunctionExpression || (isArrowFunctionExpression && parentIsVariableDeclarator);
+  const isCorrectableFunctionExpression = isFunctionExpression || isArrowFunctionExpression;
   const fixes: Array<Rule.Fix> = [];
 
   // Determine what type of behavior to follow according to the error message