Update recoil v4 states to getters (#3451)

Update v4 states to getters Co-authored-by: Thomas Trompette <thomast@twenty.com>
2024-01-15 18:18:55 +01:00
parent 4695e99458
commit 4e36c6d584
26 changed files with 169 additions and 135 deletions
--- a/packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx
+++ b/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 activeTabId = useRecoilValue(activeTabIdState());
+  const { getActiveTabIdState } = useTabList(TASKS_TAB_LIST_COMPONENT_ID);
+  const activeTabId = useRecoilValue(getActiveTabIdState());

  if (
    (activeTabId !== 'done' &&
--- a/packages/twenty-front/src/modules/object-record/hooks/useObjectRecordTable.ts
+++ b/packages/twenty-front/src/modules/object-record/hooks/useObjectRecordTable.ts
@ -26,12 +26,15 @@ export const useObjectRecordTable = (objectNamePlural: string) => {
    },
  );

-  const { tableFiltersState, tableSortsState, tableLastRowVisibleState } =
-    useRecordTableStates();
+  const {
+    getTableFiltersState,
+    getTableSortsState,
+    getTableLastRowVisibleState,
+  } = useRecordTableStates();

-  const tableFilters = useRecoilValue(tableFiltersState());
-  const tableSorts = useRecoilValue(tableSortsState());
-  const setLastRowVisible = useSetRecoilState(tableLastRowVisibleState());
+  const tableFilters = useRecoilValue(getTableFiltersState());
+  const tableSorts = useRecoilValue(getTableSortsState());
+  const setLastRowVisible = useSetRecoilState(getTableLastRowVisibleState());

  const requestFilters = turnObjectDropdownFilterIntoQueryFilter(
    tableFilters,
--- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBody.tsx
+++ b/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 (
    <>
--- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyEffect.tsx
+++ b/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(
--- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCellContainer.tsx
+++ b/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();

--- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderCell.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderCell.tsx
@ -81,17 +81,17 @@ export const RecordTableHeaderCell = ({
  createRecord: () => void;
 }) => {
  const {
-    resizeFieldOffsetState,
-    tableColumnsState,
+    getResizeFieldOffsetState,
+    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,
    ],
--- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx
+++ b/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({
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useCloseCurrentTableCellInEditMode.ts
+++ b/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,
+    ],
  );
 };
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useDisableSoftFocus.ts
+++ b/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,
-    isSoftFocusActiveState,
+    getSoftFocusPositionState,
+    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,
    ],
  );
 };
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useGetIsSomeCellInEditMode.ts
+++ b/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,
+    ],
  );
 };
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useLeaveTableFocus.ts
+++ b/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],
  );
 };
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useMoveEditModeToCellPosition.ts
+++ b/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,
+    ],
  );
 };
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useRecordTableStates.ts
+++ b/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),
-    tableSortsState: getState(tableSortsStateScopeMap, scopeId),
-    tableColumnsState: getState(tableColumnsStateScopeMap, scopeId),
-    objectMetadataConfigState: getState(
+    getTableFiltersState: getState(tableFiltersStateScopeMap, scopeId),
+    getTableSortsState: getState(tableSortsStateScopeMap, scopeId),
+    getTableColumnsState: getState(tableColumnsStateScopeMap, scopeId),
+    getObjectMetadataConfigState: getState(
      objectMetadataConfigStateScopeMap,
      scopeId,
    ),
-    onColumnsChangeState: getState(onColumnsChangeStateScopeMap, scopeId),
-    onEntityCountChangeState: getState(
+    getOnColumnsChangeState: getState(onColumnsChangeStateScopeMap, scopeId),
+    getOnEntityCountChangeState: getState(
      onEntityCountChangeStateScopeMap,
      scopeId,
    ),
-    tableLastRowVisibleState: getState(
+    getTableLastRowVisibleState: getState(
      tableLastRowVisibleStateScopeMap,
      scopeId,
    ),
-    softFocusPositionState: getState(softFocusPositionStateScopeMap, scopeId),
-    numberOfTableRowsState: getState(numberOfTableRowsStateScopeMap, scopeId),
-    currentTableCellInEditModePositionState: getState(
+    getSoftFocusPositionState: getState(
+      softFocusPositionStateScopeMap,
+      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,
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useResetTableRowSelection.ts
+++ b/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],
  );
 };
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSelectAllRows.ts
+++ b/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 {
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts
+++ b/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,
    ],
  );
 };
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetSoftFocusPosition.ts
+++ b/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,
-    isSoftFocusActiveState,
+    getSoftFocusPositionState,
+    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,
-      isSoftFocusActiveState,
+      getSoftFocusPositionState,
+      getIsSoftFocusActiveState,
      isSoftFocusOnTableCellFamilyState,
    ],
  );
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts
@ -29,45 +29,47 @@ export const useRecordTable = (props?: useRecordTableProps) => {

  const {
    scopeId,
-    availableTableColumnsState,
-    tableFiltersState,
-    tableSortsState,
-    tableColumnsState,
-    objectMetadataConfigState,
-    onEntityCountChangeState,
-    softFocusPositionState,
-    numberOfTableRowsState,
-    onColumnsChangeState,
-    isRecordTableInitialLoadingState,
-    tableLastRowVisibleState,
+    getAvailableTableColumnsState,
+    getTableFiltersState,
+    getTableSortsState,
+    getTableColumnsState,
+    getObjectMetadataConfigState,
+    getOnEntityCountChangeState,
+    getSoftFocusPositionState,
+    getNumberOfTableRowsState,
+    getOnColumnsChangeState,
+    getIsRecordTableInitialLoadingState,
+    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,
    ],
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/useTableColumns.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/useTableColumns.ts
@ -18,14 +18,14 @@ export const useTableColumns = (props?: useRecordTableProps) => {
  });

  const {
-    availableTableColumnsState,
-    tableColumnsState,
+    getAvailableTableColumnsState,
+    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();
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCurrentCellOnHover.ts
+++ b/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,
    ],
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useSetSoftFocus.ts
+++ b/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],
  );
 };
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useTableCell.ts
+++ b/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]);
  });
--- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx
+++ b/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 activeTabId = useRecoilValue(activeTabIdState());
+  const { getActiveTabIdState } = useTabList(TAB_LIST_COMPONENT_ID);
+  const activeTabId = useRecoilValue(getActiveTabIdState());

  const { objectMetadataItem: targetableObjectMetadataItem } =
    useObjectMetadataItem({
--- a/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx
+++ b/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);
--- a/packages/twenty-front/src/modules/ui/layout/tab/hooks/internal/useTabListStates.ts
+++ b/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),
  };
 };
--- a/packages/twenty-front/src/modules/ui/layout/tab/hooks/useTabList.ts
+++ b/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,
  };
 };