diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useCell.ts b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useCell.ts
index 6db19ecbbd..8f2998902d 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useCell.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useCell.ts
@@ -1,14 +1,15 @@
-import { CellIdentifier } from '../../../stores/effects/database/cell/cell_bd_svc';
-import { CellCache } from '../../../stores/effects/database/cell/cell_cache';
-import { FieldController } from '../../../stores/effects/database/field/field_controller';
-import { CellControllerBuilder } from '../../../stores/effects/database/cell/controller_builder';
-import { DateCellDataPB, SelectOptionCellDataPB, URLCellDataPB } from '../../../../services/backend';
+import { CellIdentifier } from '$app/stores/effects/database/cell/cell_bd_svc';
+import { CellCache } from '$app/stores/effects/database/cell/cell_cache';
+import { FieldController } from '$app/stores/effects/database/field/field_controller';
+import { CellControllerBuilder } from '$app/stores/effects/database/cell/controller_builder';
+import { DateCellDataPB, SelectOptionCellDataPB, URLCellDataPB } from '$app/../services/backend';
 import { useEffect, useState } from 'react';
 
 export const useCell = (cellIdentifier: CellIdentifier, cellCache: CellCache, fieldController: FieldController) => {
   const [data, setData] = useState<DateCellDataPB | URLCellDataPB | SelectOptionCellDataPB | string | undefined>();
 
   useEffect(() => {
+    if (!cellIdentifier || !cellCache || !fieldController) return;
     const builder = new CellControllerBuilder(cellIdentifier, cellCache, fieldController);
     const cellController = builder.build();
     cellController.subscribeChanged({
@@ -21,10 +22,9 @@ export const useCell = (cellIdentifier: CellIdentifier, cellCache: CellCache, fi
     void cellController.getCellData();
 
     return () => {
-      // dispose is causing an error
       void cellController.dispose();
     };
-  }, []);
+  }, [cellIdentifier, cellCache, fieldController]);
 
   return {
     data,
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useRow.ts b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useRow.ts
index 659596612d..caed55ffeb 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useRow.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useRow.ts
@@ -1,7 +1,7 @@
-import { DatabaseController } from '../../../stores/effects/database/database_controller';
-import { RowController } from '../../../stores/effects/database/row/row_controller';
-import { RowInfo } from '../../../stores/effects/database/row/row_cache';
-import { CellIdentifier } from '../../../stores/effects/database/cell/cell_bd_svc';
+import { DatabaseController } from '$app/stores/effects/database/database_controller';
+import { RowController } from '$app/stores/effects/database/row/row_controller';
+import { RowInfo } from '$app/stores/effects/database/row/row_cache';
+import { CellIdentifier } from '$app/stores/effects/database/cell/cell_bd_svc';
 import { useEffect, useState } from 'react';
 
 export const useRow = (viewId: string, databaseController: DatabaseController, rowInfo: RowInfo) => {
@@ -9,6 +9,7 @@ export const useRow = (viewId: string, databaseController: DatabaseController, r
   const [rowController, setRowController] = useState<RowController>();
 
   useEffect(() => {
+    if (!databaseController || !rowInfo) return;
     const rowCache = databaseController.databaseViewCache.getRowCache();
     const fieldController = databaseController.fieldController;
     const c = new RowController(rowInfo, fieldController, rowCache);
@@ -17,7 +18,7 @@ export const useRow = (viewId: string, databaseController: DatabaseController, r
     return () => {
       // dispose row controller in future
     };
-  }, []);
+  }, [databaseController, rowInfo]);
 
   useEffect(() => {
     if (!rowController) return;
diff --git a/frontend/appflowy_tauri/src/appflowy_app/stores/effects/database/cell/cell_controller.ts b/frontend/appflowy_tauri/src/appflowy_app/stores/effects/database/cell/cell_controller.ts
index ee4feafd07..1cd73aad90 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/stores/effects/database/cell/cell_controller.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/stores/effects/database/cell/cell_controller.ts
@@ -108,6 +108,7 @@ export class CellController<T, D> {
   };
 
   dispose = async () => {
+    this.cellDataNotifier.unsubscribe();
     await this.cellObserver.unsubscribe();
     await this.fieldNotifier.unsubscribe();
   };