chore: use 2 effects instead

Author: SimenB

src/Reporter.tsx

@@ -95,11 +95,8 @@ const CompletedTests: React.FC<{
   let testOutputs = completedTests.map(({ testResult, config }) => (
     <React.Fragment key={testResult.testFilePath + config.name}>
       <ResultHeader config={config} testResult={testResult} />
-      <VerboseTestList
-              testResult={testResult}
-              globalConfig={globalConfig}
-            />
-            <TestConsoleOutput
+      <VerboseTestList testResult={testResult} globalConfig={globalConfig} />
+      <TestConsoleOutput
         console={testResult.console}
         verbose={globalConfig.verbose}
         cwd={config.cwd}
@@ -219,6 +216,26 @@ const RunningTests: React.FC<{
   );
 };
 
+const Exiter: React.FC<{ done: boolean }> = ({ done }) => {
+  const { exit } = useApp();
+
+  const [shouldExit, setShouldExit] = React.useState(false);
+
+  React.useEffect(() => {
+    if (done) {
+      setShouldExit(true);
+    }
+  }, [done, exit]);
+
+  React.useEffect(() => {
+    if (shouldExit) {
+      exit();
+    }
+  }, [exit, shouldExit]);
+
+  return null;
+};
+
 const Reporter: React.FC<Props> = ({
   register,
   globalConfig,
@@ -249,13 +266,6 @@ const Reporter: React.FC<Props> = ({
   } = state;
   const { estimatedTime = 0 } = options;
 
-  const { exit } = useApp();
-  React.useEffect(() => {
-    if (done) {
-      setImmediate(exit);
-    }
-  }, [done, exit]);
-
   const summary = (
     <Summary
       aggregatedResults={aggregatedResults}
@@ -280,6 +290,7 @@ const Reporter: React.FC<Props> = ({
       />
       <RunningTests tests={currentTests} width={width} />
       {done ? null : summary}
+      <Exiter done={done} />
     </Box>
   );
 };