adding useEffect example trick

Author: RVassili

src/examples/use-effect-1/ExampleUseEffect107.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import ActionButton from "../../commons/ActionButton";
+
+const Child = ({ strs, setStrs }: { strs: string[]; setStrs: (strs: string[]) => void }) => {
+  const [state, setState] = React.useState<string[]>(strs);
+
+  React.useEffect(() => {
+    setState(strs);
+    // eslint-disable-next-line
+  }, strs);
+
+  return (
+    <>
+      <pre>{JSON.stringify(state, null, 2)}</pre>
+      <ul>
+        <li>
+          <ActionButton
+            label="add string"
+            onClick={() => {
+              const str = prompt();
+              if (str) {
+                setStrs([...strs, str]);
+              }
+            }}
+          />
+        </li>
+      </ul>
+    </>
+  );
+};
+
+const ExampleUseEffect107 = () => {
+  const [strs, setStrs] = React.useState<string[]>([]);
+
+  return <Child strs={strs} setStrs={setStrs} />;
+};
+
+export default ExampleUseEffect107;

src/examples/use-effect-1/index.tsx

@@ -10,6 +10,8 @@ import ExampleUseEffect104Code from "!raw-loader!./ExampleUseEffect104";
 import ExampleUseEffect105Code from "!raw-loader!./ExampleUseEffect105";
 /* eslint import/no-webpack-loader-syntax: off */
 import ExampleUseEffect106Code from "!raw-loader!./ExampleUseEffect106";
+/* eslint import/no-webpack-loader-syntax: off */
+import ExampleUseEffect107Code from "!raw-loader!./ExampleUseEffect107";
 import React from "react";
 import { IExample } from "../../commons/types";
 import ExampleUseEffect101 from "./ExampleUseEffect101";
@@ -18,6 +20,7 @@ import ExampleUseEffect103 from "./ExampleUseEffect103";
 import ExampleUseEffect104 from "./ExampleUseEffect104";
 import ExampleUseEffect105 from "./ExampleUseEffect105";
 import ExampleUseEffect106 from "./ExampleUseEffect106";
+import ExampleUseEffect107 from "./ExampleUseEffect107";
 
 const examples: IExample[] = [
   {
@@ -139,6 +142,19 @@ const examples: IExample[] = [
         section what is its purpose.
       </>
     )
+  },
+  {
+    title: "useEffect 107",
+    Component: ExampleUseEffect107,
+    code: ExampleUseEffect107Code,
+    preface: <>How does a useEffect handle objects in dependencies ?</>,
+    explanation: (
+      <>
+        Unfortunately, badly.
+        <br />
+        Keep es-lint updated and be ready to tricks it many times.
+      </>
+    )
   }
 ];