From fa7eafaa6d318f5cacee2e73d71a79bdc43a3244 Mon Sep 17 00:00:00 2001
From: Jed Fox <git@twopointzero.us>
Date: Mon, 10 Dec 2018 06:09:20 -0500
Subject: [PATCH] Add support for the React `useEffect` hook (#5608)

* Add support for the React `useEffect` hook

* Format

* Format

* [Refactor] remove unnecessary condition

`canHaveTrailingComma` is defined as `I(lastElem && ...)`, which will always be true when `lastElem === null`.

* Use a hacky method to allow the array to break

* Revert "[Refactor] remove unnecessary condition"

This reverts commit 91906ba22438afa0fe5e10c64a1fcf3cfa484ff3.

* Add tests for `React.useEffect` form
---
 src/language-js/printer-estree.js             | 17 +++++
 .../__snapshots__/jsfmt.spec.js.snap          | 71 +++++++++++++++++++
 tests/break-calls/react.js                    | 18 +++++
 3 files changed, 106 insertions(+)
 create mode 100644 tests/break-calls/react.js

diff --git a/src/language-js/printer-estree.js b/src/language-js/printer-estree.js
index 81fc2f852dc1..96019523ac22 100644
--- a/src/language-js/printer-estree.js
+++ b/src/language-js/printer-estree.js
@@ -3873,6 +3873,23 @@ function printArgumentsList(path, options, print) {
     ]);
   }
 
+  // useEffect(() => { ... }, [foo, bar, baz])
+  if (
+    args.length === 2 &&
+    args[0].type === "ArrowFunctionExpression" &&
+    args[0].body.type === "BlockStatement" &&
+    args[1].type === "ArrayExpression" &&
+    !args.find(arg => arg.leadingComments || arg.trailingComments)
+  ) {
+    return concat([
+      "(",
+      path.call(print, "arguments", 0),
+      ", ",
+      path.call(print, "arguments", 1),
+      ")"
+    ]);
+  }
+
   let anyArgEmptyLine = false;
   let hasEmptyLineFollowingFirstArg = false;
   const lastArgIndex = args.length - 1;
diff --git a/tests/break-calls/__snapshots__/jsfmt.spec.js.snap b/tests/break-calls/__snapshots__/jsfmt.spec.js.snap
index 196c17df4f92..ca9195dcaeef 100644
--- a/tests/break-calls/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/break-calls/__snapshots__/jsfmt.spec.js.snap
@@ -116,3 +116,74 @@ runtimeAgent.getProperties(
 
 ================================================================================
 `;
+
+exports[`react.js 1`] = `
+====================================options=====================================
+parsers: ["flow", "typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+function helloWorld() {
+  useEffect(() => {
+    // do something
+  }, [props.value])
+  useEffect(() => {
+    // do something
+  }, [props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value])
+}
+
+function helloWorldWithReact() {
+  React.useEffect(() => {
+    // do something
+  }, [props.value])
+  React.useEffect(() => {
+    // do something
+  }, [props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value])
+}
+
+
+=====================================output=====================================
+function helloWorld() {
+  useEffect(() => {
+    // do something
+  }, [props.value]);
+  useEffect(() => {
+    // do something
+  }, [
+    props.value,
+    props.value,
+    props.value,
+    props.value,
+    props.value,
+    props.value,
+    props.value,
+    props.value,
+    props.value,
+    props.value,
+    props.value
+  ]);
+}
+
+function helloWorldWithReact() {
+  React.useEffect(() => {
+    // do something
+  }, [props.value]);
+  React.useEffect(() => {
+    // do something
+  }, [
+    props.value,
+    props.value,
+    props.value,
+    props.value,
+    props.value,
+    props.value,
+    props.value,
+    props.value,
+    props.value,
+    props.value,
+    props.value
+  ]);
+}
+
+================================================================================
+`;
diff --git a/tests/break-calls/react.js b/tests/break-calls/react.js
new file mode 100644
index 000000000000..8400ca7967cd
--- /dev/null
+++ b/tests/break-calls/react.js
@@ -0,0 +1,18 @@
+function helloWorld() {
+  useEffect(() => {
+    // do something
+  }, [props.value])
+  useEffect(() => {
+    // do something
+  }, [props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value])
+}
+
+function helloWorldWithReact() {
+  React.useEffect(() => {
+    // do something
+  }, [props.value])
+  React.useEffect(() => {
+    // do something
+  }, [props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value])
+}
+