Update recoil v4 states to getters (#3451)

Update v4 states to getters

Co-authored-by: Thomas Trompette <thomast@twenty.com>

packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx

@@ -69,8 +69,8 @@ export const TaskGroups = ({
 
   const openCreateActivity = useOpenCreateActivityDrawer();
 
-  const { activeTabIdState } = useTabList(TASKS_TAB_LIST_COMPONENT_ID);
+  const { getActiveTabIdState } = useTabList(TASKS_TAB_LIST_COMPONENT_ID);
-  const activeTabId = useRecoilValue(activeTabIdState());
+  const activeTabId = useRecoilValue(getActiveTabIdState());
 
   if (
     (activeTabId !== 'done' &&

packages/twenty-front/src/modules/object-record/hooks/useObjectRecordTable.ts

@@ -26,12 +26,15 @@ export const useObjectRecordTable = (objectNamePlural: string) => {
     },
   );
 
-  const { tableFiltersState, tableSortsState, tableLastRowVisibleState } =
+  const {
-    useRecordTableStates();
+    getTableFiltersState,
+    getTableSortsState,
+    getTableLastRowVisibleState,
+  } = useRecordTableStates();
 
-  const tableFilters = useRecoilValue(tableFiltersState());
+  const tableFilters = useRecoilValue(getTableFiltersState());
-  const tableSorts = useRecoilValue(tableSortsState());
+  const tableSorts = useRecoilValue(getTableSortsState());
-  const setLastRowVisible = useSetRecoilState(tableLastRowVisibleState());
+  const setLastRowVisible = useSetRecoilState(getTableLastRowVisibleState());
 
   const requestFilters = turnObjectDropdownFilterIntoQueryFilter(
     tableFilters,

packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBody.tsx

@@ -11,9 +11,9 @@ type RecordTableBodyProps = {
 };
 
 export const RecordTableBody = ({ objectNamePlural }: RecordTableBodyProps) => {
-  const { tableRowIdsState } = useRecordTableStates();
+  const { getTableRowIdsState } = useRecordTableStates();
 
-  const tableRowIds = useRecoilValue(tableRowIdsState());
+  const tableRowIds = useRecoilValue(getTableRowIdsState());
 
   return (
     <>

packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyEffect.tsx

@@ -20,10 +20,10 @@ export const RecordTableBodyEffect = ({
     loading,
   } = useObjectRecordTable(objectNamePlural);
 
-  const { tableLastRowVisibleState } = useRecordTableStates();
+  const { getTableLastRowVisibleState } = useRecordTableStates();
 
   const [tableLastRowVisible, setTableLastRowVisible] = useRecoilState(
-    tableLastRowVisibleState(),
+    getTableLastRowVisibleState(),
   );
 
   const isFetchingMoreObjects = useRecoilValue(

packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCellContainer.tsx

@@ -25,9 +25,9 @@ export const RecordTableCellContainer = ({
   const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
   const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState);
   const currentRowId = useContext(RowIdContext);
-  const { objectMetadataConfigState } = useRecordTableStates();
+  const { getObjectMetadataConfigState } = useRecordTableStates();
 
-  const objectMetadataConfig = useRecoilValue(objectMetadataConfigState());
+  const objectMetadataConfig = useRecoilValue(getObjectMetadataConfigState());
 
   const { setCurrentRowSelected } = useCurrentRowSelected();
 

packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderCell.tsx

@@ -81,17 +81,17 @@ export const RecordTableHeaderCell = ({
   createRecord: () => void;
 }) => {
   const {
-    resizeFieldOffsetState,
+    getResizeFieldOffsetState,
-    tableColumnsState,
+    getTableColumnsState,
     tableColumnsByKeySelector,
     visibleTableColumnsSelector,
   } = useRecordTableStates();
 
   const [resizeFieldOffset, setResizeFieldOffset] = useRecoilState(
-    resizeFieldOffsetState(),
+    getResizeFieldOffsetState(),
   );
 
-  const tableColumns = useRecoilValue(tableColumnsState());
+  const tableColumns = useRecoilValue(getTableColumnsState());
   const tableColumnsByKey = useRecoilValue(tableColumnsByKeySelector);
   const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector);
 
@@ -127,7 +127,7 @@ export const RecordTableHeaderCell = ({
 
         const resizeFieldOffset = getSnapshotValue(
           snapshot,
-          resizeFieldOffsetState(),
+          getResizeFieldOffsetState(),
         );
 
         const nextWidth = Math.round(
@@ -137,7 +137,7 @@ export const RecordTableHeaderCell = ({
           ),
         );
 
-        set(resizeFieldOffsetState(), 0);
+        set(getResizeFieldOffsetState(), 0);
         setInitialPointerPositionX(null);
         setResizedFieldKey(null);
 
@@ -153,8 +153,8 @@ export const RecordTableHeaderCell = ({
       },
     [
       resizedFieldKey,
+      getResizeFieldOffsetState,
       tableColumnsByKey,
-      resizeFieldOffsetState,
       tableColumns,
       handleColumnsChange,
     ],

packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx

@@ -82,13 +82,13 @@ export const RecordTableWithWrappers = ({
 }: RecordTableWithWrappersProps) => {
   const tableBodyRef = useRef<HTMLDivElement>(null);
 
-  const { numberOfTableRowsState, isRecordTableInitialLoadingState } =
+  const { getNumberOfTableRowsState, getIsRecordTableInitialLoadingState } =
     useRecordTableStates(recordTableId);
 
-  const numberOfTableRows = useRecoilValue(numberOfTableRowsState());
+  const numberOfTableRows = useRecoilValue(getNumberOfTableRowsState());
 
   const isRecordTableInitialLoading = useRecoilValue(
-    isRecordTableInitialLoadingState(),
+    getIsRecordTableInitialLoadingState(),
   );
 
   const { resetTableRowSelection, setRowSelectedState } = useRecordTable({

packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useCloseCurrentTableCellInEditMode.ts

@@ -5,7 +5,7 @@ import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotV
 
 export const useCloseCurrentTableCellInEditMode = (recordTableId?: string) => {
   const {
-    currentTableCellInEditModePositionState,
+    getCurrentTableCellInEditModePositionState,
     isTableCellInEditModeFamilyState,
   } = useRecordTableStates(recordTableId);
 
@@ -14,7 +14,7 @@ export const useCloseCurrentTableCellInEditMode = (recordTableId?: string) => {
       return async () => {
         const currentTableCellInEditModePosition = getSnapshotValue(
           snapshot,
-          currentTableCellInEditModePositionState(),
+          getCurrentTableCellInEditModePositionState(),
         );
 
         set(
@@ -23,6 +23,9 @@ export const useCloseCurrentTableCellInEditMode = (recordTableId?: string) => {
         );
       };
     },
-    [currentTableCellInEditModePositionState, isTableCellInEditModeFamilyState],
+    [
+      getCurrentTableCellInEditModePositionState,
+      isTableCellInEditModeFamilyState,
+    ],
   );
 };

packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useDisableSoftFocus.ts

@@ -5,8 +5,8 @@ import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotV
 
 export const useDisableSoftFocus = (recordTableId?: string) => {
   const {
-    softFocusPositionState,
+    getSoftFocusPositionState,
-    isSoftFocusActiveState,
+    getIsSoftFocusActiveState,
     isSoftFocusOnTableCellFamilyState,
   } = useRecordTableStates(recordTableId);
 
@@ -15,18 +15,18 @@ export const useDisableSoftFocus = (recordTableId?: string) => {
       return () => {
         const currentPosition = getSnapshotValue(
           snapshot,
-          softFocusPositionState(),
+          getSoftFocusPositionState(),
         );
 
-        set(isSoftFocusActiveState(), false);
+        set(getIsSoftFocusActiveState(), false);
 
         set(isSoftFocusOnTableCellFamilyState(currentPosition), false);
       };
     },
     [
-      isSoftFocusActiveState,
+      getIsSoftFocusActiveState,
+      getSoftFocusPositionState,
       isSoftFocusOnTableCellFamilyState,
-      softFocusPositionState,
     ],
   );
 };

packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useGetIsSomeCellInEditMode.ts

@@ -5,7 +5,7 @@ import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotV
 
 export const useGetIsSomeCellInEditModeState = (recordTableId?: string) => {
   const {
-    currentTableCellInEditModePositionState,
+    getCurrentTableCellInEditModePositionState,
     isTableCellInEditModeFamilyState,
   } = useRecordTableStates(recordTableId);
 
@@ -14,7 +14,7 @@ export const useGetIsSomeCellInEditModeState = (recordTableId?: string) => {
       () => {
         const currentTableCellInEditModePosition = getSnapshotValue(
           snapshot,
-          currentTableCellInEditModePositionState(),
+          getCurrentTableCellInEditModePositionState(),
         );
 
         const isSomeCellInEditModeState = isTableCellInEditModeFamilyState(
@@ -23,6 +23,9 @@ export const useGetIsSomeCellInEditModeState = (recordTableId?: string) => {
 
         return isSomeCellInEditModeState;
       },
-    [currentTableCellInEditModePositionState, isTableCellInEditModeFamilyState],
+    [
+      getCurrentTableCellInEditModePositionState,
+      isTableCellInEditModeFamilyState,
+    ],
   );
 };

packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useLeaveTableFocus.ts

@@ -14,14 +14,14 @@ export const useLeaveTableFocus = (recordTableId?: string) => {
   const closeCurrentCellInEditMode =
     useCloseCurrentTableCellInEditMode(recordTableId);
 
-  const { isSoftFocusActiveState } = useRecordTableStates(recordTableId);
+  const { getIsSoftFocusActiveState } = useRecordTableStates(recordTableId);
 
   return useRecoilCallback(
     ({ snapshot }) =>
       () => {
         const isSoftFocusActive = getSnapshotValue(
           snapshot,
-          isSoftFocusActiveState(),
+          getIsSoftFocusActiveState(),
         );
 
         const currentHotkeyScope = snapshot
@@ -39,6 +39,6 @@ export const useLeaveTableFocus = (recordTableId?: string) => {
         closeCurrentCellInEditMode();
         disableSoftFocus();
       },
-    [closeCurrentCellInEditMode, disableSoftFocus, isSoftFocusActiveState],
+    [closeCurrentCellInEditMode, disableSoftFocus, getIsSoftFocusActiveState],
   );
 };

packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useMoveEditModeToCellPosition.ts

@@ -8,7 +8,7 @@ import { TableCellPosition } from '../../types/TableCellPosition';
 export const useMoveEditModeToTableCellPosition = (recordTableId?: string) => {
   const {
     isTableCellInEditModeFamilyState,
-    currentTableCellInEditModePositionState,
+    getCurrentTableCellInEditModePositionState,
   } = useRecordTableStates(recordTableId);
 
   return useRecoilCallback(
@@ -16,7 +16,7 @@ export const useMoveEditModeToTableCellPosition = (recordTableId?: string) => {
       return (newPosition: TableCellPosition) => {
         const currentTableCellInEditModePosition = getSnapshotValue(
           snapshot,
-          currentTableCellInEditModePositionState(),
+          getCurrentTableCellInEditModePositionState(),
         );
 
         set(
@@ -24,11 +24,14 @@ export const useMoveEditModeToTableCellPosition = (recordTableId?: string) => {
           false,
         );
 
-        set(currentTableCellInEditModePositionState(), newPosition);
+        set(getCurrentTableCellInEditModePositionState(), newPosition);
 
         set(isTableCellInEditModeFamilyState(newPosition), true);
       };
     },
-    [currentTableCellInEditModePositionState, isTableCellInEditModeFamilyState],
+    [
+      getCurrentTableCellInEditModePositionState,
+      isTableCellInEditModeFamilyState,
+    ],
   );
 };

packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useRecordTableStates.ts

@@ -37,29 +37,35 @@ export const useRecordTableStates = (recordTableId?: string) => {
 
   return {
     scopeId,
-    availableTableColumnsState: getState(
+    getAvailableTableColumnsState: getState(
       availableTableColumnsStateScopeMap,
       scopeId,
     ),
-    tableFiltersState: getState(tableFiltersStateScopeMap, scopeId),
+    getTableFiltersState: getState(tableFiltersStateScopeMap, scopeId),
-    tableSortsState: getState(tableSortsStateScopeMap, scopeId),
+    getTableSortsState: getState(tableSortsStateScopeMap, scopeId),
-    tableColumnsState: getState(tableColumnsStateScopeMap, scopeId),
+    getTableColumnsState: getState(tableColumnsStateScopeMap, scopeId),
-    objectMetadataConfigState: getState(
+    getObjectMetadataConfigState: getState(
       objectMetadataConfigStateScopeMap,
       scopeId,
     ),
-    onColumnsChangeState: getState(onColumnsChangeStateScopeMap, scopeId),
+    getOnColumnsChangeState: getState(onColumnsChangeStateScopeMap, scopeId),
-    onEntityCountChangeState: getState(
+    getOnEntityCountChangeState: getState(
       onEntityCountChangeStateScopeMap,
       scopeId,
     ),
-    tableLastRowVisibleState: getState(
+    getTableLastRowVisibleState: getState(
       tableLastRowVisibleStateScopeMap,
       scopeId,
     ),
-    softFocusPositionState: getState(softFocusPositionStateScopeMap, scopeId),
+    getSoftFocusPositionState: getState(
-    numberOfTableRowsState: getState(numberOfTableRowsStateScopeMap, scopeId),
+      softFocusPositionStateScopeMap,
-    currentTableCellInEditModePositionState: getState(
+      scopeId,
+    ),
+    getNumberOfTableRowsState: getState(
+      numberOfTableRowsStateScopeMap,
+      scopeId,
+    ),
+    getCurrentTableCellInEditModePositionState: getState(
       currentTableCellInEditModePositionStateScopeMap,
       scopeId,
     ),
@@ -67,21 +73,27 @@ export const useRecordTableStates = (recordTableId?: string) => {
       isTableCellInEditModeFamilyStateScopeMap,
       scopeId,
     ),
-    isSoftFocusActiveState: getState(isSoftFocusActiveStateScopeMap, scopeId),
+    getIsSoftFocusActiveState: getState(
+      isSoftFocusActiveStateScopeMap,
+      scopeId,
+    ),
+    getTableRowIdsState: getState(tableRowIdsStateScopeMap, scopeId),
+    getIsRecordTableInitialLoadingState: getState(
+      isRecordTableInitialLoadingStateScopeMap,
+      scopeId,
+    ),
+    getResizeFieldOffsetState: getState(
+      resizeFieldOffsetStateScopeMap,
+      scopeId,
+    ),
     isSoftFocusOnTableCellFamilyState: getFamilyState(
       isSoftFocusOnTableCellFamilyStateScopeMap,
       scopeId,
     ),
-    tableRowIdsState: getState(tableRowIdsStateScopeMap, scopeId),
     isRowSelectedFamilyState: getFamilyState(
       isRowSelectedFamilyStateScopeMap,
       scopeId,
     ),
-    isRecordTableInitialLoadingState: getState(
-      isRecordTableInitialLoadingStateScopeMap,
-      scopeId,
-    ),
-    resizeFieldOffsetState: getState(resizeFieldOffsetStateScopeMap, scopeId),
     allRowsSelectedStatusSelector: getSelector(
       allRowsSelectedStatusSelectorScopeMap,
       scopeId,

packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useResetTableRowSelection.ts

@@ -4,18 +4,18 @@ import { useRecordTableStates } from '@/object-record/record-table/hooks/interna
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 
 export const useResetTableRowSelection = (recordTableId?: string) => {
-  const { tableRowIdsState, isRowSelectedFamilyState } =
+  const { getTableRowIdsState, isRowSelectedFamilyState } =
     useRecordTableStates(recordTableId);
 
   return useRecoilCallback(
     ({ snapshot, set }) =>
       () => {
-        const tableRowIds = getSnapshotValue(snapshot, tableRowIdsState());
+        const tableRowIds = getSnapshotValue(snapshot, getTableRowIdsState());
 
         for (const rowId of tableRowIds) {
           set(isRowSelectedFamilyState(rowId), false);
         }
       },
-    [isRowSelectedFamilyState, tableRowIdsState],
+    [getTableRowIdsState, isRowSelectedFamilyState],
   );
 };

packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSelectAllRows.ts

@@ -6,7 +6,7 @@ import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotV
 export const useSelectAllRows = (recordTableId?: string) => {
   const {
     allRowsSelectedStatusSelector,
-    tableRowIdsState,
+    getTableRowIdsState,
     isRowSelectedFamilyState,
   } = useRecordTableStates(recordTableId);
 
@@ -18,7 +18,7 @@ export const useSelectAllRows = (recordTableId?: string) => {
           allRowsSelectedStatusSelector,
         );
 
-        const tableRowIds = getSnapshotValue(snapshot, tableRowIdsState());
+        const tableRowIds = getSnapshotValue(snapshot, getTableRowIdsState());
 
         if (
           allRowsSelectedStatus === 'none' ||
@@ -33,7 +33,11 @@ export const useSelectAllRows = (recordTableId?: string) => {
           }
         }
       },
-    [allRowsSelectedStatusSelector, isRowSelectedFamilyState, tableRowIdsState],
+    [
+      allRowsSelectedStatusSelector,
+      getTableRowIdsState,
+      isRowSelectedFamilyState,
+    ],
   );
 
   return {

packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts

@@ -17,7 +17,7 @@ export const useSetRecordTableData = ({
 }: useSetRecordTableDataProps) => {
   const resetTableRowSelection = useResetTableRowSelection(recordTableId);
 
-  const { tableRowIdsState, numberOfTableRowsState } =
+  const { getTableRowIdsState, getNumberOfTableRowsState } =
     useRecordTableStates(recordTableId);
 
   return useRecoilCallback(
@@ -33,24 +33,24 @@ export const useSetRecordTableData = ({
             set(entityFieldsFamilyState(entity.id), entity);
           }
         }
-        const currentRowIds = getSnapshotValue(snapshot, tableRowIdsState());
+        const currentRowIds = getSnapshotValue(snapshot, getTableRowIdsState());
 
         const entityIds = newEntityArray.map((entity) => entity.id);
 
         if (!isDeeplyEqual(currentRowIds, entityIds)) {
-          set(tableRowIdsState(), entityIds);
+          set(getTableRowIdsState(), entityIds);
         }
 
         resetTableRowSelection();
 
-        set(numberOfTableRowsState(), entityIds.length);
+        set(getNumberOfTableRowsState(), entityIds.length);
         onEntityCountChange(entityIds.length);
       },
     [
-      numberOfTableRowsState,
+      getNumberOfTableRowsState,
+      getTableRowIdsState,
       onEntityCountChange,
       resetTableRowSelection,
-      tableRowIdsState,
     ],
   );
 };

packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetSoftFocusPosition.ts

@@ -7,8 +7,8 @@ import { TableCellPosition } from '../../types/TableCellPosition';
 
 export const useSetSoftFocusPosition = (recordTableId?: string) => {
   const {
-    softFocusPositionState,
+    getSoftFocusPositionState,
-    isSoftFocusActiveState,
+    getIsSoftFocusActiveState,
     isSoftFocusOnTableCellFamilyState,
   } = useRecordTableStates(recordTableId);
 
@@ -17,21 +17,21 @@ export const useSetSoftFocusPosition = (recordTableId?: string) => {
       return (newPosition: TableCellPosition) => {
         const currentPosition = getSnapshotValue(
           snapshot,
-          softFocusPositionState(),
+          getSoftFocusPositionState(),
         );
 
-        set(isSoftFocusActiveState(), true);
+        set(getIsSoftFocusActiveState(), true);
 
         set(isSoftFocusOnTableCellFamilyState(currentPosition), false);
 
-        set(softFocusPositionState(), newPosition);
+        set(getSoftFocusPositionState(), newPosition);
 
         set(isSoftFocusOnTableCellFamilyState(newPosition), true);
       };
     },
     [
-      softFocusPositionState,
+      getSoftFocusPositionState,
-      isSoftFocusActiveState,
+      getIsSoftFocusActiveState,
       isSoftFocusOnTableCellFamilyState,
     ],
   );

packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts

@@ -29,45 +29,47 @@ export const useRecordTable = (props?: useRecordTableProps) => {
 
   const {
     scopeId,
-    availableTableColumnsState,
+    getAvailableTableColumnsState,
-    tableFiltersState,
+    getTableFiltersState,
-    tableSortsState,
+    getTableSortsState,
-    tableColumnsState,
+    getTableColumnsState,
-    objectMetadataConfigState,
+    getObjectMetadataConfigState,
-    onEntityCountChangeState,
+    getOnEntityCountChangeState,
-    softFocusPositionState,
+    getSoftFocusPositionState,
-    numberOfTableRowsState,
+    getNumberOfTableRowsState,
-    onColumnsChangeState,
+    getOnColumnsChangeState,
-    isRecordTableInitialLoadingState,
+    getIsRecordTableInitialLoadingState,
-    tableLastRowVisibleState,
+    getTableLastRowVisibleState,
     numberOfTableColumnsSelector,
     selectedRowIdsSelector,
   } = useRecordTableStates(recordTableId);
 
   const setAvailableTableColumns = useSetRecoilState(
-    availableTableColumnsState(),
+    getAvailableTableColumnsState(),
   );
 
-  const setOnEntityCountChange = useSetRecoilState(onEntityCountChangeState());
+  const setOnEntityCountChange = useSetRecoilState(
+    getOnEntityCountChangeState(),
+  );
 
-  const setTableFilters = useSetRecoilState(tableFiltersState());
+  const setTableFilters = useSetRecoilState(getTableFiltersState());
 
   const setObjectMetadataConfig = useSetRecoilState(
-    objectMetadataConfigState(),
+    getObjectMetadataConfigState(),
   );
 
-  const setTableSorts = useSetRecoilState(tableSortsState());
+  const setTableSorts = useSetRecoilState(getTableSortsState());
 
-  const setTableColumns = useSetRecoilState(tableColumnsState());
+  const setTableColumns = useSetRecoilState(getTableColumnsState());
 
-  const setOnColumnsChange = useSetRecoilState(onColumnsChangeState());
+  const setOnColumnsChange = useSetRecoilState(getOnColumnsChangeState());
 
   const setIsRecordTableInitialLoading = useSetRecoilState(
-    isRecordTableInitialLoadingState(),
+    getIsRecordTableInitialLoadingState(),
   );
 
   const setRecordTableLastRowVisible = useSetRecoilState(
-    tableLastRowVisibleState(),
+    getTableLastRowVisibleState(),
   );
 
   const onColumnsChange = useRecoilCallback(
@@ -75,12 +77,12 @@ export const useRecordTable = (props?: useRecordTableProps) => {
       (columns: ColumnDefinition<FieldMetadata>[]) => {
         const onColumnsChange = getSnapshotValue(
           snapshot,
-          onColumnsChangeState(),
+          getOnColumnsChangeState(),
         );
 
         onColumnsChange?.(columns);
       },
-    [onColumnsChangeState],
+    [getOnColumnsChangeState],
   );
 
   const onEntityCountChange = useRecoilCallback(
@@ -88,12 +90,12 @@ export const useRecordTable = (props?: useRecordTableProps) => {
       (count: number) => {
         const onEntityCountChange = getSnapshotValue(
           snapshot,
-          onEntityCountChangeState(),
+          getOnEntityCountChangeState(),
         );
 
         onEntityCountChange?.(count);
       },
-    [onEntityCountChangeState],
+    [getOnEntityCountChangeState],
   );
 
   const setRecordTableData = useSetRecordTableData({
@@ -116,7 +118,7 @@ export const useRecordTable = (props?: useRecordTableProps) => {
       () => {
         const softFocusPosition = getSnapshotValue(
           snapshot,
-          softFocusPositionState(),
+          getSoftFocusPositionState(),
         );
 
         let newRowNumber = softFocusPosition.row - 1;
@@ -130,7 +132,7 @@ export const useRecordTable = (props?: useRecordTableProps) => {
           row: newRowNumber,
         });
       },
-    [setSoftFocusPosition, softFocusPositionState],
+    [getSoftFocusPositionState, setSoftFocusPosition],
   );
 
   const moveDown = useRecoilCallback(
@@ -138,12 +140,12 @@ export const useRecordTable = (props?: useRecordTableProps) => {
       () => {
         const softFocusPosition = getSnapshotValue(
           snapshot,
-          softFocusPositionState(),
+          getSoftFocusPositionState(),
         );
 
         const numberOfTableRows = getSnapshotValue(
           snapshot,
-          numberOfTableRowsState(),
+          getNumberOfTableRowsState(),
         );
 
         let newRowNumber = softFocusPosition.row + 1;
@@ -157,7 +159,11 @@ export const useRecordTable = (props?: useRecordTableProps) => {
           row: newRowNumber,
         });
       },
-    [numberOfTableRowsState, setSoftFocusPosition, softFocusPositionState],
+    [
+      getNumberOfTableRowsState,
+      setSoftFocusPosition,
+      getSoftFocusPositionState,
+    ],
   );
 
   const moveRight = useRecoilCallback(
@@ -165,7 +171,7 @@ export const useRecordTable = (props?: useRecordTableProps) => {
       () => {
         const softFocusPosition = getSnapshotValue(
           snapshot,
-          softFocusPositionState(),
+          getSoftFocusPositionState(),
         );
 
         const numberOfTableColumns = getSnapshotValue(
@@ -175,7 +181,7 @@ export const useRecordTable = (props?: useRecordTableProps) => {
 
         const numberOfTableRows = getSnapshotValue(
           snapshot,
-          numberOfTableRowsState(),
+          getNumberOfTableRowsState(),
         );
         const currentColumnNumber = softFocusPosition.column;
         const currentRowNumber = softFocusPosition.row;
@@ -208,9 +214,9 @@ export const useRecordTable = (props?: useRecordTableProps) => {
         }
       },
     [
-      softFocusPositionState,
+      getSoftFocusPositionState,
       numberOfTableColumnsSelector,
-      numberOfTableRowsState,
+      getNumberOfTableRowsState,
       setSoftFocusPosition,
     ],
   );
@@ -220,7 +226,7 @@ export const useRecordTable = (props?: useRecordTableProps) => {
       () => {
         const softFocusPosition = getSnapshotValue(
           snapshot,
-          softFocusPositionState(),
+          getSoftFocusPositionState(),
         );
 
         const numberOfTableColumns = getSnapshotValue(
@@ -256,7 +262,7 @@ export const useRecordTable = (props?: useRecordTableProps) => {
         }
       },
     [
-      softFocusPositionState,
+      getSoftFocusPositionState,
       numberOfTableColumnsSelector,
       setSoftFocusPosition,
     ],

packages/twenty-front/src/modules/object-record/record-table/hooks/useTableColumns.ts

@@ -18,14 +18,14 @@ export const useTableColumns = (props?: useRecordTableProps) => {
   });
 
   const {
-    availableTableColumnsState,
+    getAvailableTableColumnsState,
-    tableColumnsState,
+    getTableColumnsState,
     visibleTableColumnsSelector,
   } = useRecordTableStates(props?.recordTableId);
 
-  const availableTableColumns = useRecoilValue(availableTableColumnsState());
+  const availableTableColumns = useRecoilValue(getAvailableTableColumnsState());
 
-  const tableColumns = useRecoilValue(tableColumnsState());
+  const tableColumns = useRecoilValue(getTableColumnsState());
   const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector);
 
   const { handleColumnMove } = useMoveViewColumns();

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCurrentCellOnHover.ts

@@ -12,7 +12,7 @@ export const useMoveSoftFocusToCurrentCellOnHover = () => {
   const setSoftFocusOnCurrentTableCell = useSetSoftFocusOnCurrentTableCell();
 
   const {
-    currentTableCellInEditModePositionState,
+    getCurrentTableCellInEditModePositionState,
     isTableCellInEditModeFamilyState,
   } = useRecordTableStates();
 
@@ -21,7 +21,7 @@ export const useMoveSoftFocusToCurrentCellOnHover = () => {
       () => {
         const currentTableCellInEditModePosition = getSnapshotValue(
           snapshot,
-          currentTableCellInEditModePositionState(),
+          getCurrentTableCellInEditModePositionState(),
         );
 
         const isSomeCellInEditMode = snapshot
@@ -49,7 +49,7 @@ export const useMoveSoftFocusToCurrentCellOnHover = () => {
         }
       },
     [
-      currentTableCellInEditModePositionState,
+      getCurrentTableCellInEditModePositionState,
       isTableCellInEditModeFamilyState,
       setSoftFocusOnCurrentTableCell,
     ],

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useSetSoftFocus.ts

@@ -10,7 +10,7 @@ import { TableHotkeyScope } from '../../types/TableHotkeyScope';
 export const useSetSoftFocus = () => {
   const { setSoftFocusPosition } = useRecordTable();
 
-  const { isSoftFocusActiveState } = useRecordTableStates();
+  const { getIsSoftFocusActiveState } = useRecordTableStates();
 
   const setHotkeyScope = useSetHotkeyScope();
 
@@ -19,10 +19,10 @@ export const useSetSoftFocus = () => {
       (newPosition: TableCellPosition) => {
         setSoftFocusPosition(newPosition);
 
-        set(isSoftFocusActiveState(), true);
+        set(getIsSoftFocusActiveState(), true);
 
         setHotkeyScope(TableHotkeyScope.TableSoftFocus);
       },
-    [setSoftFocusPosition, isSoftFocusActiveState, setHotkeyScope],
+    [setSoftFocusPosition, getIsSoftFocusActiveState, setHotkeyScope],
   );
 };

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useTableCell.ts

@@ -26,10 +26,10 @@ export const DEFAULT_CELL_SCOPE: HotkeyScope = {
 };
 
 export const useTableCell = () => {
-  const { objectMetadataConfigState, tableRowIdsState } =
+  const { getObjectMetadataConfigState, getTableRowIdsState } =
     useRecordTableStates();
 
-  const objectMetadataConfig = useRecoilValue(objectMetadataConfigState());
+  const objectMetadataConfig = useRecoilValue(getObjectMetadataConfigState());
 
   const basePathToShowPage = objectMetadataConfig?.basePathToShowPage;
 
@@ -60,7 +60,7 @@ export const useTableCell = () => {
   );
 
   const deleteRow = useRecoilCallback(({ snapshot }) => async () => {
-    const tableRowIds = getSnapshotValue(snapshot, tableRowIdsState());
+    const tableRowIds = getSnapshotValue(snapshot, getTableRowIdsState());
 
     await deleteOneRecord(tableRowIds[0]);
   });

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx

@@ -57,8 +57,8 @@ export const ShowPageRightContainer = ({
 }: ShowPageRightContainerProps) => {
   const isMessagingEnabled = useIsFeatureEnabled('IS_MESSAGING_ENABLED');
 
-  const { activeTabIdState } = useTabList(TAB_LIST_COMPONENT_ID);
+  const { getActiveTabIdState } = useTabList(TAB_LIST_COMPONENT_ID);
-  const activeTabId = useRecoilValue(activeTabIdState());
+  const activeTabId = useRecoilValue(getActiveTabIdState());
 
   const { objectMetadataItem: targetableObjectMetadataItem } =
     useObjectMetadataItem({

packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx

@@ -34,9 +34,9 @@ const StyledContainer = styled.div`
 export const TabList = ({ tabs, tabListId }: TabListProps) => {
   const initialActiveTabId = tabs[0].id;
 
-  const { activeTabIdState, setActiveTabId } = useTabList(tabListId);
+  const { getActiveTabIdState, setActiveTabId } = useTabList(tabListId);
 
-  const activeTabId = useRecoilValue(activeTabIdState());
+  const activeTabId = useRecoilValue(getActiveTabIdState());
 
   React.useEffect(() => {
     setActiveTabId(initialActiveTabId);

packages/twenty-front/src/modules/ui/layout/tab/hooks/internal/useTabListStates.ts

@@ -15,6 +15,6 @@ export const useTabListStates = ({ tabListScopeId }: useTabListStatesProps) => {
 
   return {
     scopeId,
-    activeTabIdState: getState(activeTabIdStateScopeMap, scopeId),
+    getActiveTabIdState: getState(activeTabIdStateScopeMap, scopeId),
   };
 };

packages/twenty-front/src/modules/ui/layout/tab/hooks/useTabList.ts

@@ -3,14 +3,14 @@ import { useSetRecoilState } from 'recoil';
 import { useTabListStates } from '@/ui/layout/tab/hooks/internal/useTabListStates';
 
 export const useTabList = (tabListId?: string) => {
-  const { activeTabIdState } = useTabListStates({
+  const { getActiveTabIdState } = useTabListStates({
     tabListScopeId: `${tabListId}-scope`,
   });
 
-  const setActiveTabId = useSetRecoilState(activeTabIdState());
+  const setActiveTabId = useSetRecoilState(getActiveTabIdState());
 
   return {
-    activeTabIdState,
+    getActiveTabIdState,
     setActiveTabId,
   };
 };