fix: function reference change cause rerender

tiddly-gittly · Mar 15, 2024 · 9366705 · 9366705
1 parent 96f442b
commit 9366705
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 13 deletions.
diff --git a/src/pages/WikiWebView/WikiViewer.tsx b/src/pages/WikiWebView/WikiViewer.tsx
@@ -51,15 +51,14 @@ export interface WikiViewerProps {
   wikiWorkspace: IWikiWorkspace;
 }
 
-export const WikiViewer = ({ wikiWorkspace, webviewSideReceiver, quickLoad }: WikiViewerProps) => {
+export function WikiViewer({ wikiWorkspace, webviewSideReceiver, quickLoad }: WikiViewerProps) {
   const theme = useTheme();
   // TODO: prevent swipe back work, then enable "use notification go back", maybe make this a config option. And let swipe go back become navigate back in the webview
   // useWikiWebViewNotification({ id: wikiWorkspace.id });
   useRequestNativePermissions();
 
   const [loaded, setLoaded] = useState(false);
   const onLoadEnd = useCallback(() => {
-    console.log(`Webview onLoadEnd`);
     setLoaded(true);
   }, []);
   const [rememberLastVisitState, preferredLanguage] = useConfigStore(state => [state.rememberLastVisitState, state.preferredLanguage]);
@@ -80,10 +79,7 @@ export const WikiViewer = ({ wikiWorkspace, webviewSideReceiver, quickLoad }: Wi
   }, []);
   servicesOfWorkspace.wikiHookService.setLatestTriggerFullReloadCallback(triggerFullReload);
   useEffect(() => {
-    servicesOfWorkspace.wikiHookService.resetWebviewReceiverReady();
-  }, [servicesOfWorkspace.wikiHookService]);
-
-  useEffect(() => {
+    console.log('resetWebviewReceiverReady on webViewKeyToReloadAfterRecycleByOS and init');
     servicesOfWorkspace.wikiHookService.resetWebviewReceiverReady();
     void backgroundSyncService.updateServerOnlineStatus();
   }, [servicesOfWorkspace.wikiHookService, webViewKeyToReloadAfterRecycleByOS]);

diff --git a/src/pages/WikiWebView/useTiddlyWiki.ts b/src/pages/WikiWebView/useTiddlyWiki.ts
@@ -11,7 +11,6 @@ import { getWikiFilePath } from '../../constants/paths';
 import { WikiHookService } from '../../services/WikiHookService';
 import { WikiStorageService } from '../../services/WikiStorageService';
 import { IWikiWorkspace } from '../../store/workspace';
-import { usePromiseValue } from '../../utils/usePromiseValue';
 import { useStreamChunksToWebView } from './useStreamChunksToWebView';
 import { createSQLiteTiddlersReadStream, SQLiteTiddlersReadStream } from './useStreamChunksToWebView/SQLiteTiddlersReadStream';
 
@@ -32,7 +31,6 @@ export function useTiddlyWiki(
   },
 ) {
   const [loadHtmlError, setLoadHtmlError] = useState('');
-  const pluginJSONStrings = usePromiseValue<ITidGiMobilePlugins>(() => getTidGiMobilePlugins());
   const tiddlersStreamReference = useRef<SQLiteTiddlersReadStream | undefined>();
   /**
    * Webview can't load html larger than 20M, we stream the html to webview, and set innerHTML in webview using preloadScript.
@@ -44,13 +42,14 @@ export function useTiddlyWiki(
 
   const webviewLoaded = loaded && webViewReference.current !== null;
   useEffect(() => {
-    if (!webviewLoaded || !pluginJSONStrings) return;
+    if (!webviewLoaded) return;
     void (async () => {
       try {
         /**
          * @url file:///data/user/0/host.exp.exponent/files/wikis/wiki/index.html or 'file:///data/user/0/host.exp.exponent/cache/ExponentAsset-8568a405f924c561e7d18846ddc10c97.html'
          */
         const html = `<!doctype html>${await fs.readAsStringAsync(getWikiFilePath(workspace))}`;
+        const pluginJSONStrings = await getTidGiMobilePlugins();
         if (tiddlersStreamReference.current !== undefined) {
           tiddlersStreamReference.current.destroy();
         }
@@ -66,10 +65,10 @@ export function useTiddlyWiki(
         setLoadHtmlError((error as Error).message);
       }
     })();
-    // React Hook useMemo has a missing dependency: 'workspace'. Either include it or remove the dependency array.
-    // but workspace reference may change multiple times, causing rerender
+    // React Hook useMemo has a missing dependency: 'injectHtmlAndTiddlersStore', 'quickLoad', and 'workspace'. Either include it or remove the dependency array.
+    // but workspace and injectHtmlAndTiddlersStore reference may change multiple times, causing rerender
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [workspace.id, injectHtmlAndTiddlersStore, webviewLoaded, keyToTriggerReload, pluginJSONStrings]);
+  }, [workspace.id, webviewLoaded, keyToTriggerReload]);
   return { loadHtmlError, loading, streamChunksToWebViewPercentage };
 }
 

diff --git a/src/services/WikiHookService/index.ts b/src/services/WikiHookService/index.ts
@@ -68,7 +68,7 @@ export class WikiHookService {
   public async waitForWebviewReceiverReady(tryGetReady: () => void): Promise<void> {
     await backOff(
       async () => {
-        console.log(`backoff retry waitForWebviewReceiverReady`);
+        console.log(`backoff retry waitForWebviewReceiverReady, #webViewReceiverReady: ${this.#webViewReceiverReady}`);
         if (this.#webViewReceiverReady) {
           return true;
         } else {