TypeScript, Flow: Fix breaking ordering comments in React.useEffect (#6270)

CHANGELOG.unreleased.md

@@ -216,12 +216,54 @@ foo // comment
 `;
 ```
 
+#### JavaScript: Fix moving comments in function calls like `useEffect` second argument ([#6270] by [@sosukesuzuki])
+
+This fixes a bug that was affecting function calls that have a arrow function as first argument and an array expression as second argument, such as the common React's `useEffect`. A comment in its own line before the second argument would be moved to the line above.
+
+The bug was only present when using the Flow and TypeScript parsers.
+
+<!-- prettier-ignore -->
+```js
+// Input
+useEffect(
+  () => {
+    console.log("some code", props.foo);
+  },
+
+  // We need to disable the eslint warning here,
+  // because of some complicated reason.
+  // eslint-disable line react-hooks/exhaustive-deps
+  []
+);
+
+// Output (Prettier stable)
+useEffect(() => {
+  console.log("some code", props.foo);
+}, // We need to disable the eslint warning here,
+// because of some complicated reason.
+// eslint-disable line react-hooks/exhaustive-deps
+[]);
+
+// Output (Prettier master)
+useEffect(
+  () => {
+    console.log("some code", props.foo);
+  },
+
+  // We need to disable the eslint warning here,
+  // because of some complicated reason.
+  // eslint-disable line react-hooks/exhaustive-deps
+  []
+);
+```
+
 [#6186]: https://github.com/prettier/prettier/pull/6186
 [#6206]: https://github.com/prettier/prettier/pull/6206
 [#6209]: https://github.com/prettier/prettier/pull/6209
 [#6217]: https://github.com/prettier/prettier/pull/6217
 [#6234]: https://github.com/prettier/prettier/pull/6234
 [#6236]: https://github.com/prettier/prettier/pull/6236
+[#6270]: https://github.com/prettier/prettier/pull/6270
 [@duailibe]: https://github.com/duailibe
 [@gavinjoyce]: https://github.com/gavinjoyce
 [@sosukesuzuki]: https://github.com/sosukesuzuki

src/language-js/printer-estree.js

@@ -4045,7 +4045,7 @@ function printArgumentsList(path, options, print) {
     args[0].params.length === 0 &&
     args[0].body.type === "BlockStatement" &&
     args[1].type === "ArrayExpression" &&
-    !args.find(arg => arg.leadingComments || arg.trailingComments)
+    !args.find(arg => arg.comments)
   ) {
     return concat([
       "(",

tests/break-calls/__snapshots__/jsfmt.spec.js.snap

@@ -156,6 +156,20 @@ function helloWorldWithReact() {
   }, [props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value])
 }
 
+function MyComponent(props) {
+  useEffect(
+    () => {
+      console.log("some code", props.foo);
+    },
+
+    // We need to disable the eslint warning here,
+    // because of some complicated reason.
+    // eslint-disable line react-hooks/exhaustive-deps
+    []
+  );
+
+  return null;
+}
 
 =====================================output=====================================
 function helloWorld() {
@@ -200,5 +214,20 @@ function helloWorldWithReact() {
   ]);
 }
 
+function MyComponent(props) {
+  useEffect(
+    () => {
+      console.log("some code", props.foo);
+    },
+
+    // We need to disable the eslint warning here,
+    // because of some complicated reason.
+    // eslint-disable line react-hooks/exhaustive-deps
+    []
+  );
+
+  return null;
+}
+
 ================================================================================
 `;

tests/break-calls/react.js

@@ -16,3 +16,17 @@ function helloWorldWithReact() {
   }, [props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value])
 }
 
+function MyComponent(props) {
+  useEffect(
+    () => {
+      console.log("some code", props.foo);
+    },
+
+    // We need to disable the eslint warning here,
+    // because of some complicated reason.
+    // eslint-disable line react-hooks/exhaustive-deps
+    []
+  );
+
+  return null;
+}