Replace useEffect with useEffectOnce

tact-lang · Sep 18, 2023 · 1f554bf · 1f554bf
1 parent b8247be
commit 1f554bf
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 11 deletions.
diff --git a/src/components/shared/LogView/LogView.tsx b/src/components/shared/LogView/LogView.tsx
@@ -1,6 +1,8 @@
 import { LogType } from '@/interfaces/log.interface';
 import EventEmitter from '@/utility/eventEmitter';
-import { FC, createRef, useEffect, useRef } from 'react';
+import { FC, createRef, useRef } from 'react';
+import { useEffectOnce } from 'react-use';
+
 import 'xterm/css/xterm.css';
 
 import s from './LogView.module.scss';
@@ -29,7 +31,7 @@ const LogView: FC<Props> = ({ type, text }) => {
     reset: '\x1b[0m',
   };
 
-  useEffect(() => {
+  useEffectOnce(() => {
     let terminal: any | null = null;
 
     const initTerminal = async () => {
@@ -88,7 +90,7 @@ const LogView: FC<Props> = ({ type, text }) => {
       EventEmitter.off('LOG_CLEAR');
       terminal?.dispose();
     };
-  }, []);
+  });
 
   return <div className={s.root} ref={logViewerRef} id="app-terminal"></div>;
 };

diff --git a/src/components/workspace/BottomPanel/BottomPanel.tsx b/src/components/workspace/BottomPanel/BottomPanel.tsx
@@ -4,7 +4,8 @@ import { useLogActivity } from '@/hooks/logActivity.hooks';
 import { LogOptions, LogType } from '@/interfaces/log.interface';
 import { debounce } from '@/utility/utils';
 import { Tooltip } from 'antd';
-import { FC, useEffect, useState } from 'react';
+import { FC, useState } from 'react';
+import { useEffectOnce } from 'react-use';
 import s from './BottomPanel.module.scss';
 
 type logType = LogType | 'all';
@@ -41,9 +42,9 @@ const BottomPanel: FC = () => {
     setFilter({ text: searchTerm, type: filter.type });
   }, 200);
 
-  useEffect(() => {
+  useEffectOnce(() => {
     setIsLoaded(true);
-  }, []);
+  });
 
   return (
     <div className={s.root}>
@@ -69,10 +70,12 @@ const BottomPanel: FC = () => {
         </div>
       </div>
       <div className={s.view}>
-        <LogView
-          text={filter?.text || undefined}
-          type={filter.type !== 'all' ? filter.type : undefined}
-        />
+        {isLoaded && (
+          <LogView
+            text={filter?.text || undefined}
+            type={filter.type !== 'all' ? filter.type : undefined}
+          />
+        )}
       </div>
     </div>
   );

diff --git a/src/components/workspace/WorkSpace/WorkSpace.tsx b/src/components/workspace/WorkSpace/WorkSpace.tsx
@@ -7,6 +7,7 @@ import { Blockchain } from '@ton-community/sandbox';
 import { Spin } from 'antd';
 import { useRouter } from 'next/router';
 import { FC, useEffect, useState } from 'react';
+import { useEffectOnce } from 'react-use';
 import BottomPanel from '../BottomPanel/BottomPanel';
 import BuildProject from '../BuildProject';
 import Editor from '../Editor';
@@ -96,9 +97,12 @@ const WorkSpace: FC = () => {
     if (tab) {
       setActiveMenu(tab as WorkSpaceMenu);
     }
-    setIsLoaded(true);
   }, [tab]);
 
+  useEffectOnce(() => {
+    setIsLoaded(true);
+  });
+
   return (
     <div className={`${s.root} show-file-icons`}>
       <div className={`${s.sidebar} onboarding-workspace-sidebar`}>