fix(app): lack of memoization for api (#1166)

Author: dasein108

src/containers/ipfs/ipfs.tsx

@@ -20,24 +20,28 @@ function Ipfs() {
   const [cid, setCid] = useState<string>('');
 
   const { fetchParticle, status, content } = useQueueIpfsContent(cid);
-  const { ipfsApi, isIpfsInitialized } = useBackend();
+  const { ipfsApi, isIpfsInitialized, isReady } = useBackend();
   const [ipfsDataDetails, setIpfsDatDetails] = useState<IPFSContentDetails>();
 
   const { setAdviser } = useAdviser();
 
   const isText = useMemo(() => !query.match(PATTERN_IPFS_HASH), [query]);
   useEffect(() => {
+    if (!isReady) {
+      return;
+    }
+
     if (!isText) {
       setCid(query);
     } else if (isIpfsInitialized) {
       (async () => {
         const cidFromQuery = (await getIpfsHash(encodeSlash(query))) as string;
-        // console.log('Ipfs()', isIpfsInitialized, ipfsApi, ipfsApi?.addContent);
         await ipfsApi!.addContent(query);
+
         setCid(cidFromQuery);
       })();
     }
-  }, [isText, query, ipfsApi, isIpfsInitialized]);
+  }, [isText, isReady, query, ipfsApi, isIpfsInitialized]);
 
   useEffect(() => {
     (async () => {

src/contexts/backend/backend.tsx

@@ -213,16 +213,30 @@ function BackendProvider({ children }: { children: React.ReactNode }) {
     return () => channel.close();
   }, [dispatch, createDbApi]);
 
+  const ipfsApi = useMemo(
+    () => (isIpfsInitialized ? backgroundWorkerInstance.ipfsApi : null),
+    [isIpfsInitialized]
+  );
+
+  const ipfsNode = useMemo(
+    () =>
+      isIpfsInitialized ? backgroundWorkerInstance.ipfsApi.getIpfsNode() : null,
+    [isIpfsInitialized]
+  );
+
+  const defferedDbApi = useMemo(
+    () => (isDbInitialized ? backgroundWorkerInstance.defferedDbApi : null),
+    [isDbInitialized]
+  );
+
   const valueMemo = useMemo(
     () =>
       ({
         // backgroundWorker: backgroundWorkerInstance,
         cozoDbRemote: cozoDbWorkerInstance,
-        ipfsApi: backgroundWorkerInstance.ipfsApi,
-        defferedDbApi: backgroundWorkerInstance.defferedDbApi,
-        ipfsNode: isIpfsInitialized
-          ? backgroundWorkerInstance.ipfsApi.getIpfsNode()
-          : null,
+        ipfsApi,
+        defferedDbApi,
+        ipfsNode,
         restartSync: (name: SyncEntryName) =>
           backgroundWorkerInstance.restartSync(name),
         dbApi,