fix(eslint): fix react-hooks/set-state-in-effect issues (#7614)

* fix(eslint): fix react-hooks/set-state-in-effect issues

* fix(connection-form): set show password initial state based on initial password

Author: gribnoysup

configs/eslint-config-compass/index.js

@@ -8,7 +8,6 @@ const chaiFriendly = require('eslint-plugin-chai-friendly');
 // TODO(COMPASS-9459): disabling a bunch of new rules to unblock automatic updates
 const tempNewEslintRulesDisabled = {
   'react-hooks/refs': 'off',
-  'react-hooks/set-state-in-effect': 'off',
   'react-hooks/preserve-manual-memoization': 'off',
   'react-hooks/static-components': 'off',
   '@typescript-eslint/no-unsafe-enum-comparison': 'off',

packages/compass-components/src/components/content-with-fallback.spec.tsx

@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import type HadronDocument from 'hadron-document';
 import { DocumentEvents, ElementEvents } from 'hadron-document';
 import type { Element } from 'hadron-document';
@@ -108,18 +114,6 @@ function useHadronDocumentStatus(
     []
   );
 
-  useEffect(() => {
-    if (status !== 'Initial') {
-      return;
-    }
-
-    if (editing) {
-      updateStatus('Editing');
-    } else if (deleting) {
-      updateStatus('Deleting');
-    }
-  }, [status, updateStatus, editing, deleting]);
-
   useEffect(() => {
     const onUpdate = () => {
       updateStatus(
@@ -214,7 +208,20 @@ function useHadronDocumentStatus(
     }
   }, [status, updateStatus]);
 
-  return { status, updateStatus, error };
+  const derivedStatus = useMemo(() => {
+    if (status !== 'Initial') {
+      return status;
+    }
+    if (editing) {
+      return 'Editing';
+    }
+    if (deleting) {
+      return 'Deleting';
+    }
+    return status;
+  }, [status, editing, deleting]);
+
+  return { status: derivedStatus, updateStatus, error };
 }
 
 const container = css({