feat: use new component state api for record table (#8143)

This PR drop the use of the old component state api in favour of the new
component state api V2.

packages/twenty-front/src/modules/action-menu/states/actionMenuEntriesComponentSelector.ts

@@ -8,7 +8,7 @@ export const actionMenuEntriesComponentSelector = createComponentSelectorV2<
   ActionMenuEntry[]
 >({
   key: 'actionMenuEntriesComponentSelector',
-  instanceContext: ActionMenuComponentInstanceContext,
+  componentInstanceContext: ActionMenuComponentInstanceContext,
   get:
     ({ instanceId }) =>
     ({ get }) =>

packages/twenty-front/src/modules/localization/utils/__tests__/formatTimeZoneLabel.test.ts

@@ -18,7 +18,7 @@ describe('formatTimeZoneLabel', () => {
 
   it('should format the time zone label correctly when location is not included in the label', () => {
     const ianaTimeZone = 'America/New_York';
-    const expectedLabel = '(GMT-04:00) Eastern Daylight Time - New York';
+    const expectedLabel = '(GMT-05:00) Eastern Standard Time - New York';
 
     const formattedLabel = formatTimeZoneLabel(ianaTimeZone);
 

packages/twenty-front/src/modules/object-record/hooks/__tests__/useObjectRecordTable.test.tsx

@@ -4,8 +4,7 @@ import { ReactNode } from 'react';
 
 import { mocks } from '@/auth/hooks/__mocks__/useAuth';
 import { useLoadRecordIndexTable } from '@/object-record/record-index/hooks/useLoadRecordIndexTable';
-import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
+import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
-import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
 import { getJestMetadataAndApolloMocksWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksWrapper';
 
 const recordTableId = 'people';
@@ -24,12 +23,12 @@ const Wrapper = ({ children }: { children: ReactNode }) => {
   return (
     <HookMockWrapper>
       <ObjectNamePluralSetter>
-        <RecordTableScope
+        <RecordTableComponentInstance
-          recordTableScopeId={getScopeIdFromComponentId(recordTableId)}
+          recordTableId={recordTableId}
           onColumnsChange={onColumnsChange}
         >
           {children}
-        </RecordTableScope>
+        </RecordTableComponentInstance>
       </ObjectNamePluralSetter>
     </HookMockWrapper>
   );

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-import { useContext } from 'react';
 
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 
@@ -11,7 +10,8 @@ import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/
 import { useSelectFilter } from '@/object-record/object-filter-dropdown/hooks/useSelectFilter';
 import { FiltersHotkeyScope } from '@/object-record/object-filter-dropdown/types/FiltersHotkeyScope';
 import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+import { hiddenTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector';
+import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem';
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
@@ -21,6 +21,7 @@ import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/
 import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
 import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { useContext } from 'react';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-ui';
 
@@ -57,6 +58,8 @@ type ObjectFilterDropdownFilterSelectProps = {
 export const ObjectFilterDropdownFilterSelect = ({
   isAdvancedFilterButtonVisible,
 }: ObjectFilterDropdownFilterSelectProps) => {
+  const { recordIndexId } = useContext(RecordIndexRootPropsContext);
+
   const {
     setObjectFilterDropdownSearchInput,
     objectFilterDropdownSearchInputState,
@@ -78,15 +81,18 @@ export const ObjectFilterDropdownFilterSelect = ({
   const availableFilterDefinitions = useRecoilComponentValueV2(
     availableFilterDefinitionsComponentState,
   );
-  const { recordIndexId } = useContext(RecordIndexRootPropsContext);
-  const { hiddenTableColumnsSelector, visibleTableColumnsSelector } =
-    useRecordTableStates(recordIndexId);
 
-  const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector());
+  const visibleTableColumns = useRecoilComponentValueV2(
+    visibleTableColumnsComponentSelector,
+    recordIndexId,
+  );
   const visibleColumnsIds = visibleTableColumns.map(
     (column) => column.fieldMetadataId,
   );
-  const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector());
+  const hiddenTableColumns = useRecoilComponentValueV2(
+    hiddenTableColumnsComponentSelector,
+    recordIndexId,
+  );
   const hiddenColumnIds = hiddenTableColumns.map(
     (column) => column.fieldMetadataId,
   );

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/__stories__/MultipleFiltersDropdownButton.stories.tsx

@@ -4,14 +4,13 @@ import { TaskGroups } from '@/activities/tasks/components/TaskGroups';
 import { MultipleFiltersDropdownButton } from '@/object-record/object-filter-dropdown/components/MultipleFiltersDropdownButton';
 import { ObjectFilterDropdownScope } from '@/object-record/object-filter-dropdown/scopes/ObjectFilterDropdownScope';
 import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
-import { RecordTableScopeInternalContext } from '@/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext';
+import { tableColumnsComponentState } from '@/object-record/record-table/states/tableColumnsComponentState';
 import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState';
 import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
 import { within } from '@storybook/test';
-import { useSetRecoilState } from 'recoil';
 import { ComponentDecorator } from 'twenty-ui';
 import { FieldMetadataType } from '~/generated/graphql';
 import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';
@@ -30,9 +29,10 @@ const meta: Meta<typeof MultipleFiltersDropdownButton> = {
         instanceId,
       );
 
-      const { tableColumnsState } = useRecordTableStates(instanceId);
+      const setTableColumns = useSetRecoilComponentStateV2(
-
+        tableColumnsComponentState,
-      const setTableColumns = useSetRecoilState(tableColumnsState);
+        instanceId,
+      );
 
       setTableColumns([
         {
@@ -91,15 +91,15 @@ const meta: Meta<typeof MultipleFiltersDropdownButton> = {
         <ObjectFilterDropdownComponentInstanceContext.Provider
           value={{ instanceId }}
         >
-          <RecordTableScopeInternalContext.Provider
+          <RecordTableComponentInstanceContext.Provider
-            value={{ scopeId: instanceId, onColumnsChange: () => {} }}
+            value={{ instanceId: instanceId, onColumnsChange: () => {} }}
           >
             <ViewComponentInstanceContext.Provider value={{ instanceId }}>
               <ObjectFilterDropdownScope filterScopeId={instanceId}>
                 <Story />
               </ObjectFilterDropdownScope>
             </ViewComponentInstanceContext.Provider>
-          </RecordTableScopeInternalContext.Provider>
+          </RecordTableComponentInstanceContext.Provider>
         </ObjectFilterDropdownComponentInstanceContext.Provider>
       );
     },

packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx

@@ -6,7 +6,8 @@ import { OBJECT_SORT_DROPDOWN_ID } from '@/object-record/object-sort-dropdown/co
 import { useObjectSortDropdown } from '@/object-record/object-sort-dropdown/hooks/useObjectSortDropdown';
 import { ObjectSortDropdownScope } from '@/object-record/object-sort-dropdown/scopes/ObjectSortDropdownScope';
 import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+import { hiddenTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector';
+import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@@ -15,6 +16,7 @@ import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/Styl
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import { useContext } from 'react';
 import { SORT_DIRECTIONS } from '../types/SortDirection';
@@ -77,6 +79,8 @@ export const ObjectSortDropdownButton = ({
     resetSearchInput,
   } = useObjectSortDropdown();
 
+  const { recordIndexId } = useContext(RecordIndexRootPropsContext);
+
   const { isDropdownOpen } = useDropdown(OBJECT_SORT_DROPDOWN_ID);
 
   const handleButtonClick = () => {
@@ -94,15 +98,17 @@ export const ObjectSortDropdownButton = ({
 
   const { getIcon } = useIcons();
 
-  const { recordIndexId } = useContext(RecordIndexRootPropsContext);
+  const visibleTableColumns = useRecoilComponentValueV2(
-  const { hiddenTableColumnsSelector, visibleTableColumnsSelector } =
+    visibleTableColumnsComponentSelector,
-    useRecordTableStates(recordIndexId);
+    recordIndexId,
-
+  );
-  const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector());
   const visibleColumnsIds = visibleTableColumns.map(
     (column) => column.fieldMetadataId,
   );
-  const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector());
+  const hiddenTableColumns = useRecoilComponentValueV2(
+    hiddenTableColumnsComponentSelector,
+    recordIndexId,
+  );
   const hiddenColumnIds = hiddenTableColumns.map(
     (column) => column.fieldMetadataId,
   );

packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexTableContainerEffect.tsx

@@ -1,5 +1,4 @@
 import { useContext, useEffect } from 'react';
-import { useRecoilValue } from 'recoil';
 
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata';
@@ -9,8 +8,13 @@ import { useHandleToggleColumnFilter } from '@/object-record/record-index/hooks/
 import { useHandleToggleColumnSort } from '@/object-record/record-index/hooks/useHandleToggleColumnSort';
 import { recordIndexFiltersState } from '@/object-record/record-index/states/recordIndexFiltersState';
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
+import { hasUserSelectedAllRowsComponentState } from '@/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState';
+import { selectedRowIdsComponentSelector } from '@/object-record/record-table/states/selectors/selectedRowIdsComponentSelector';
+import { unselectedRowIdsComponentSelector } from '@/object-record/record-table/states/selectors/unselectedRowIdsComponentSelector';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { useSetRecordCountInCurrentView } from '@/views/hooks/useSetRecordCountInCurrentView';
+import { useRecoilValue } from 'recoil';
 
 export const RecordIndexTableContainerEffect = () => {
   const { recordIndexId, objectNameSingular } = useContext(
@@ -22,11 +26,8 @@ export const RecordIndexTableContainerEffect = () => {
   const {
     setAvailableTableColumns,
     setOnEntityCountChange,
-    selectedRowIdsSelector,
     setOnToggleColumnFilter,
     setOnToggleColumnSort,
-    hasUserSelectedAllRowsState,
-    unselectedRowIdsSelector,
   } = useRecordTable({
     recordTableId: recordIndexId,
   });
@@ -78,9 +79,18 @@ export const RecordIndexTableContainerEffect = () => {
   const setContextStoreTargetedRecords = useSetRecoilComponentStateV2(
     contextStoreTargetedRecordsRuleComponentState,
   );
-  const hasUserSelectedAllRows = useRecoilValue(hasUserSelectedAllRowsState);
+  const hasUserSelectedAllRows = useRecoilComponentValueV2(
-  const selectedRowIds = useRecoilValue(selectedRowIdsSelector());
+    hasUserSelectedAllRowsComponentState,
-  const unselectedRowIds = useRecoilValue(unselectedRowIdsSelector());
+    recordIndexId,
+  );
+  const selectedRowIds = useRecoilComponentValueV2(
+    selectedRowIdsComponentSelector,
+    recordIndexId,
+  );
+  const unselectedRowIds = useRecoilComponentValueV2(
+    unselectedRowIdsComponentSelector,
+    recordIndexId,
+  );
 
   const recordIndexFilters = useRecoilValue(recordIndexFiltersState);
 

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

@@ -5,7 +5,8 @@ import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/u
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { getFilterTypeFromFieldType } from '@/object-metadata/utils/formatFieldMetadataItemsAsFilterDefinitions';
 import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+import { isSoftDeleteFilterActiveComponentState } from '@/object-record/record-table/states/isSoftDeleteFilterActiveComponentState';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { useUpsertCombinedViewFilters } from '@/views/hooks/useUpsertCombinedViewFilters';
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
 import { useRecoilCallback } from 'recoil';
@@ -28,7 +29,12 @@ export const useHandleToggleTrashColumnFilter = ({
     useColumnDefinitionsFromFieldMetadata(objectMetadataItem);
 
   const { upsertCombinedViewFilter } = useUpsertCombinedViewFilters(viewBarId);
-  const { isSoftDeleteActiveState } = useRecordTableStates(viewBarId);
+
+  const isSoftDeleteFilterActiveComponentRecoilState =
+    useRecoilComponentCallbackStateV2(
+      isSoftDeleteFilterActiveComponentState,
+      viewBarId,
+    );
 
   const handleToggleTrashColumnFilter = useCallback(() => {
     const trashFieldMetadata = objectMetadataItem.fields.find(
@@ -69,9 +75,9 @@ export const useHandleToggleTrashColumnFilter = ({
   const toggleSoftDeleteFilterState = useRecoilCallback(
     ({ set }) =>
       (currentState: boolean) => {
-        set(isSoftDeleteActiveState, currentState);
+        set(isSoftDeleteFilterActiveComponentRecoilState, currentState);
       },
-    [isSoftDeleteActiveState],
+    [isSoftDeleteFilterActiveComponentRecoilState],
   );
   return {
     handleToggleTrashColumnFilter,

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

@@ -7,9 +7,12 @@ import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { turnSortsIntoOrderBy } from '@/object-record/object-sort-dropdown/utils/turnSortsIntoOrderBy';
 import { computeViewRecordGqlOperationFilter } from '@/object-record/record-filter/utils/computeViewRecordGqlOperationFilter';
 import { useRecordTableRecordGqlFields } from '@/object-record/record-index/hooks/useRecordTableRecordGqlFields';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
+import { tableFiltersComponentState } from '@/object-record/record-table/states/tableFiltersComponentState';
+import { tableSortsComponentState } from '@/object-record/record-table/states/tableSortsComponentState';
+import { tableViewFilterGroupsComponentState } from '@/object-record/record-table/states/tableViewFilterGroupsComponentState';
 import { SIGN_IN_BACKGROUND_MOCK_COMPANIES } from '@/sign-in-background-mock/constants/SignInBackgroundMockCompanies';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { isNull } from '@sniptt/guards';
 import { WorkspaceActivationStatus } from '~/generated/graphql';
 
@@ -21,12 +24,18 @@ export const useFindManyParams = (
     objectNameSingular,
   });
 
-  const { tableFiltersState, tableSortsState, tableViewFilterGroupsState } =
+  const tableViewFilterGroups = useRecoilComponentValueV2(
-    useRecordTableStates(recordTableId);
+    tableViewFilterGroupsComponentState,
-
+    recordTableId,
-  const tableViewFilterGroups = useRecoilValue(tableViewFilterGroupsState);
+  );
-  const tableFilters = useRecoilValue(tableFiltersState);
+  const tableFilters = useRecoilComponentValueV2(
-  const tableSorts = useRecoilValue(tableSortsState);
+    tableFiltersComponentState,
+    recordTableId,
+  );
+  const tableSorts = useRecoilComponentValueV2(
+    tableSortsComponentState,
+    recordTableId,
+  );
 
   const filter = computeViewRecordGqlOperationFilter(
     tableFilters,

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

@@ -1,11 +1,10 @@
-import { useRecoilValue } from 'recoil';
-
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { getObjectMetadataIdentifierFields } from '@/object-metadata/utils/getObjectMetadataIdentifierFields';
 import { generateDepthOneRecordGqlFields } from '@/object-record/graphql/utils/generateDepthOneRecordGqlFields';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { isDefined } from '~/utils/isDefined';
 
 export const useRecordTableRecordGqlFields = ({
@@ -13,12 +12,12 @@ export const useRecordTableRecordGqlFields = ({
 }: {
   objectMetadataItem: ObjectMetadataItem;
 }) => {
-  const { visibleTableColumnsSelector } = useRecordTableStates();
-
   const { imageIdentifierFieldMetadataItem, labelIdentifierFieldMetadataItem } =
     getObjectMetadataIdentifierFields({ objectMetadataItem });
 
-  const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector());
+  const visibleTableColumns = useRecoilComponentValueV2(
+    visibleTableColumnsComponentSelector,
+  );
 
   const identifierQueryFields: Record<string, boolean> = {};
 

packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordData.ts

@@ -2,7 +2,6 @@ import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { isDefined } from '~/utils/isDefined';
@@ -15,6 +14,7 @@ import { useRecordBoardStates } from '@/object-record/record-board/hooks/interna
 import { useFindManyParams } from '@/object-record/record-index/hooks/useLoadRecordIndexTable';
 import { EXPORT_TABLE_DATA_DEFAULT_PAGE_SIZE } from '@/object-record/record-index/options/constants/ExportTableDataDefaultPageSize';
 import { useRecordIndexOptionsForBoard } from '@/object-record/record-index/options/hooks/useRecordIndexOptionsForBoard';
+import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { ViewType } from '@/views/types/ViewType';
 
@@ -61,8 +61,6 @@ export const useRecordData = ({
   });
   const [previousRecordCount, setPreviousRecordCount] = useState(0);
 
-  const { visibleTableColumnsSelector } = useRecordTableStates(recordIndexId);
-
   const { hiddenBoardFields } = useRecordIndexOptionsForBoard({
     objectNameSingular: objectMetadataItem.nameSingular,
     recordBoardId: recordIndexId,
@@ -74,7 +72,10 @@ export const useRecordData = ({
   const hiddenKanbanFieldColumn = hiddenBoardFields.find(
     (column) => column.metadata.fieldName === kanbanFieldMetadataName,
   );
-  const columns = useRecoilValue(visibleTableColumnsSelector());
+  const columns = useRecoilComponentValueV2(
+    visibleTableColumnsComponentSelector,
+    recordIndexId,
+  );
 
   const contextStoreTargetedRecordsRule = useRecoilComponentValueV2(
     contextStoreTargetedRecordsRuleComponentState,

packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordIndexOptionsForTable.ts

@@ -1,17 +1,21 @@
-import { useCallback } from 'react';
 import { OnDragEndResponder } from '@hello-pangea/dnd';
-import { useRecoilValue } from 'recoil';
+import { useCallback } from 'react';
 
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { useTableColumns } from '@/object-record/record-table/hooks/useTableColumns';
+import { hiddenTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector';
+import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { moveArrayItem } from '~/utils/array/moveArrayItem';
 
 export const useRecordIndexOptionsForTable = (recordTableId: string) => {
-  const { hiddenTableColumnsSelector, visibleTableColumnsSelector } =
+  const hiddenTableColumns = useRecoilComponentValueV2(
-    useRecordTableStates(recordTableId);
+    hiddenTableColumnsComponentSelector,
-
+    recordTableId,
-  const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector());
+  );
-  const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector());
+  const visibleTableColumns = useRecoilComponentValueV2(
+    visibleTableColumnsComponentSelector,
+    recordTableId,
+  );
 
   const { handleColumnVisibilityChange, handleColumnReorder } = useTableColumns(
     { recordTableId: recordTableId },

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

@@ -1,14 +1,16 @@
 import styled from '@emotion/styled';
 import { isNonEmptyString, isNull } from '@sniptt/guards';
 
+import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
 import { RecordTableContextProvider } from '@/object-record/record-table/components/RecordTableContextProvider';
 import { RecordTableEmptyState } from '@/object-record/record-table/empty-state/components/RecordTableEmptyState';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { RecordTableBody } from '@/object-record/record-table/record-table-body/components/RecordTableBody';
 import { RecordTableBodyEffect } from '@/object-record/record-table/record-table-body/components/RecordTableBodyEffect';
 import { RecordTableHeader } from '@/object-record/record-table/record-table-header/components/RecordTableHeader';
-import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
+import { isRecordTableInitialLoadingComponentState } from '@/object-record/record-table/states/isRecordTableInitialLoadingComponentState';
-import { useRecoilValue } from 'recoil';
+import { recordTablePendingRecordIdComponentState } from '@/object-record/record-table/states/recordTablePendingRecordIdComponentState';
+import { tableRowIdsComponentState } from '@/object-record/record-table/states/tableRowIdsComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 
 const StyledTable = styled.table`
   border-radius: ${({ theme }) => theme.border.radius.sm};
@@ -30,21 +32,20 @@ export const RecordTable = ({
   objectNameSingular,
   onColumnsChange,
 }: RecordTableProps) => {
-  const { scopeId } = useRecordTableStates(recordTableId);
+  const isRecordTableInitialLoading = useRecoilComponentValueV2(
-
+    isRecordTableInitialLoadingComponentState,
-  const {
+    recordTableId,
-    isRecordTableInitialLoadingState,
-    tableRowIdsState,
-    pendingRecordIdState,
-  } = useRecordTableStates(recordTableId);
-
-  const isRecordTableInitialLoading = useRecoilValue(
-    isRecordTableInitialLoadingState,
   );
 
-  const tableRowIds = useRecoilValue(tableRowIdsState);
+  const tableRowIds = useRecoilComponentValueV2(
+    tableRowIdsComponentState,
+    recordTableId,
+  );
 
-  const pendingRecordId = useRecoilValue(pendingRecordIdState);
+  const pendingRecordId = useRecoilComponentValueV2(
+    recordTablePendingRecordIdComponentState,
+    recordTableId,
+  );
 
   const recordTableIsEmpty =
     !isRecordTableInitialLoading &&
@@ -56,8 +57,8 @@ export const RecordTable = ({
   }
 
   return (
-    <RecordTableScope
+    <RecordTableComponentInstance
-      recordTableScopeId={scopeId}
+      recordTableId={recordTableId}
       onColumnsChange={onColumnsChange}
     >
       <RecordTableContextProvider
@@ -77,6 +78,6 @@ export const RecordTable = ({
           </StyledTable>
         )}
       </RecordTableContextProvider>
-    </RecordTableScope>
+    </RecordTableComponentInstance>
   );
 };

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

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+
+import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
+import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
+
+import { RecordTableComponentInstanceEffect } from '@/object-record/record-table/components/RecordTableComponentInstanceEffect';
+import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
+
+type RecordTableComponentInstanceProps = {
+  children: ReactNode;
+  recordTableId: string;
+  onColumnsChange: (columns: ColumnDefinition<FieldMetadata>[]) => void;
+};
+
+export const RecordTableComponentInstance = ({
+  children,
+  recordTableId,
+  onColumnsChange,
+}: RecordTableComponentInstanceProps) => {
+  return (
+    <RecordTableComponentInstanceContext.Provider
+      value={{
+        instanceId: recordTableId,
+        onColumnsChange,
+      }}
+    >
+      <RecordTableComponentInstanceEffect onColumnsChange={onColumnsChange} />
+      {children}
+    </RecordTableComponentInstanceContext.Provider>
+  );
+};

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

@@ -4,14 +4,14 @@ import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
 import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
 
-type RecordTableScopeInitEffectProps = {
+type RecordTableComponentInstanceEffectProps = {
   onColumnsChange: (columns: ColumnDefinition<FieldMetadata>[]) => void;
   onEntityCountChange?: (count: number) => void | Promise<void>;
 };
 
-export const RecordTableScopeInitEffect = ({
+export const RecordTableComponentInstanceEffect = ({
   onColumnsChange,
-}: RecordTableScopeInitEffectProps) => {
+}: RecordTableComponentInstanceEffectProps) => {
   const { setOnColumnsChange } = useRecordTable();
 
   useEffect(() => {

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

@@ -1,10 +1,8 @@
 import { ReactNode } from 'react';
-import { useRecoilValue } from 'recoil';
 
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
 import { useHandleContainerMouseEnter } from '@/object-record/record-table/hooks/internal/useHandleContainerMouseEnter';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { useRecordTableMoveFocus } from '@/object-record/record-table/hooks/useRecordTableMoveFocus';
 import { useCloseRecordTableCellV2 } from '@/object-record/record-table/record-table-cell/hooks/useCloseRecordTableCellV2';
 import { useMoveSoftFocusToCellOnHoverV2 } from '@/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCellOnHoverV2';
@@ -14,8 +12,10 @@ import {
 } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
 import { useTriggerActionMenuDropdown } from '@/object-record/record-table/record-table-cell/hooks/useTriggerActionMenuDropdown';
 import { useUpsertRecord } from '@/object-record/record-table/record-table-cell/hooks/useUpsertRecord';
+import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
 import { MoveFocusDirection } from '@/object-record/record-table/types/MoveFocusDirection';
 import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 
 export const RecordTableContextProvider = ({
   viewBarId,
@@ -28,14 +28,13 @@ export const RecordTableContextProvider = ({
   objectNameSingular: string;
   children: ReactNode;
 }) => {
-  const { visibleTableColumnsSelector } = useRecordTableStates(recordTableId);
-
   const { objectMetadataItem } = useObjectMetadataItem({
     objectNameSingular,
   });
 
   const { upsertRecord } = useUpsertRecord({
     objectNameSingular,
+    recordTableId,
   });
 
   const handleUpsertRecord = ({
@@ -47,7 +46,7 @@ export const RecordTableContextProvider = ({
     recordId: string;
     fieldName: string;
   }) => {
-    upsertRecord(persistField, recordId, fieldName, recordTableId);
+    upsertRecord(persistField, recordId, fieldName);
   };
 
   const { openTableCell } = useOpenRecordTableCellV2(recordTableId);
@@ -90,7 +89,10 @@ export const RecordTableContextProvider = ({
     recordTableId,
   });
 
-  const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector());
+  const visibleTableColumns = useRecoilComponentValueV2(
+    visibleTableColumnsComponentSelector,
+    recordTableId,
+  );
 
   return (
     <RecordTableContext.Provider

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

@@ -1,13 +1,10 @@
-import { useRecoilValue } from 'recoil';
-
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { RecordTableBodyFetchMoreLoader } from '@/object-record/record-table/record-table-body/components/RecordTableBodyFetchMoreLoader';
 import { RecordTableRow } from '@/object-record/record-table/record-table-row/components/RecordTableRow';
+import { tableRowIdsComponentState } from '@/object-record/record-table/states/tableRowIdsComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 
 export const RecordTableRows = () => {
-  const { tableRowIdsState } = useRecordTableStates();
+  const tableRowIds = useRecoilComponentValueV2(tableRowIdsComponentState);
-
-  const tableRowIds = useRecoilValue(tableRowIdsState);
 
   return (
     <>

packages/twenty-front/src/modules/object-record/record-table/components/__stories__/perf/RecordTableCell.perf.stories.tsx

@@ -12,10 +12,10 @@ import {
   useSetRecordValue,
 } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
 import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
 import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
 import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
-import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
 import { ChipGeneratorsDecorator } from '~/testing/decorators/ChipGeneratorsDecorator';
 import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
 import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory';
@@ -78,8 +78,8 @@ const meta: Meta = {
               recordTableId: 'recordTableId',
             }}
           >
-            <RecordTableScope
+            <RecordTableComponentInstance
-              recordTableScopeId="asd"
+              recordTableId="asd"
               onColumnsChange={() => {}}
             >
               <RecordTableRowContext.Provider
@@ -132,7 +132,7 @@ const meta: Meta = {
                   </FieldContext.Provider>
                 </RecordTableCellContext.Provider>
               </RecordTableRowContext.Provider>
-            </RecordTableScope>
+            </RecordTableComponentInstance>
           </RecordTableContext.Provider>
         </RecordFieldValueSelectorContextProvider>
       );

packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyState.tsx

@@ -4,22 +4,23 @@ import { RecordTableEmptyStateNoRecordAtAll } from '@/object-record/record-table
 import { RecordTableEmptyStateNoRecordFoundForFilter } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateNoRecordFoundForFilter';
 import { RecordTableEmptyStateRemote } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateRemote';
 import { RecordTableEmptyStateSoftDelete } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateSoftDelete';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+import { isSoftDeleteFilterActiveComponentState } from '@/object-record/record-table/states/isSoftDeleteFilterActiveComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useContext } from 'react';
-import { useRecoilValue } from 'recoil';
 
 export const RecordTableEmptyState = () => {
   const { objectNameSingular, recordTableId, objectMetadataItem } =
     useContext(RecordTableContext);
 
-  const { isSoftDeleteActiveState } = useRecordTableStates(recordTableId);
-
   const { totalCount } = useFindManyRecords({ objectNameSingular, limit: 1 });
   const noRecordAtAll = totalCount === 0;
 
   const isRemote = objectMetadataItem.isRemote;
 
-  const isSoftDeleteActive = useRecoilValue(isSoftDeleteActiveState);
+  const isSoftDeleteActive = useRecoilComponentValueV2(
+    isSoftDeleteFilterActiveComponentState,
+    recordTableId,
+  );
 
   if (isRemote) {
     return <RecordTableEmptyStateRemote />;

packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateSoftDelete.tsx

@@ -4,10 +4,10 @@ import { useObjectLabel } from '@/object-metadata/hooks/useObjectLabel';
 import { useHandleToggleTrashColumnFilter } from '@/object-record/record-index/hooks/useHandleToggleTrashColumnFilter';
 import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
 import { RecordTableEmptyStateDisplay } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateDisplay';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+import { tableFiltersComponentState } from '@/object-record/record-table/states/tableFiltersComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useDeleteCombinedViewFilters } from '@/views/hooks/useDeleteCombinedViewFilters';
 import { useContext } from 'react';
-import { useRecoilValue } from 'recoil';
 
 export const RecordTableEmptyStateSoftDelete = () => {
   const { objectMetadataItem, objectNameSingular, recordTableId } =
@@ -15,9 +15,11 @@ export const RecordTableEmptyStateSoftDelete = () => {
 
   const { deleteCombinedViewFilter } =
     useDeleteCombinedViewFilters(recordTableId);
-  const { tableFiltersState } = useRecordTableStates(recordTableId);
 
-  const tableFilters = useRecoilValue(tableFiltersState);
+  const tableFilters = useRecoilComponentValueV2(
+    tableFiltersComponentState,
+    recordTableId,
+  );
 
   const { toggleSoftDeleteFilterState } = useHandleToggleTrashColumnFilter({
     objectNameSingular,

packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateNoRecordAtAll.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
+import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
 import { RecordTableEmptyStateNoRecordAtAll } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateNoRecordAtAll';
-import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
 import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
 import { ComponentDecorator } from 'twenty-ui';
 import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
@@ -19,12 +19,12 @@ const meta: Meta = {
     RecordTableDecorator,
     (Story) => (
       <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
-        <RecordTableScope
+        <RecordTableComponentInstance
-          recordTableScopeId="persons"
+          recordTableId="persons"
           onColumnsChange={() => {}}
         >
           <Story />
-        </RecordTableScope>
+        </RecordTableComponentInstance>
       </SnackBarProviderScope>
     ),
   ],

packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateNoRecordFoundForFilter.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
+import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
 import { RecordTableEmptyStateNoRecordFoundForFilter } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateNoRecordFoundForFilter';
-import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
 import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
 import { ComponentDecorator } from 'twenty-ui';
 import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
@@ -20,12 +20,12 @@ const meta: Meta = {
     RecordTableDecorator,
     (Story) => (
       <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
-        <RecordTableScope
+        <RecordTableComponentInstance
-          recordTableScopeId="persons"
+          recordTableId="persons"
           onColumnsChange={() => {}}
         >
           <Story />
-        </RecordTableScope>
+        </RecordTableComponentInstance>
       </SnackBarProviderScope>
     ),
   ],

packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateRemote.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
+import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
 import { RecordTableEmptyStateRemote } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateRemote';
-import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
 import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
 import { ComponentDecorator } from 'twenty-ui';
 import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
@@ -19,12 +19,12 @@ const meta: Meta = {
     RecordTableDecorator,
     (Story) => (
       <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
-        <RecordTableScope
+        <RecordTableComponentInstance
-          recordTableScopeId="persons"
+          recordTableId="persons"
           onColumnsChange={() => {}}
         >
           <Story />
-        </RecordTableScope>
+        </RecordTableComponentInstance>
       </SnackBarProviderScope>
     ),
   ],

packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateSoftDelete.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
+import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
 import { RecordTableEmptyStateSoftDelete } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateSoftDelete';
-import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
 import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
 import { ComponentDecorator } from 'twenty-ui';
 import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
@@ -19,12 +19,12 @@ const meta: Meta = {
     RecordTableDecorator,
     (Story) => (
       <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
-        <RecordTableScope
+        <RecordTableComponentInstance
-          recordTableScopeId="persons"
+          recordTableId="persons"
           onColumnsChange={() => {}}
         >
           <Story />
-        </RecordTableScope>
+        </RecordTableComponentInstance>
       </SnackBarProviderScope>
     ),
   ],

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

@@ -1,13 +1,20 @@
 import { useRecoilCallback } from 'recoil';
 
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+import { currentTableCellInEditModePositionComponentState } from '@/object-record/record-table/states/currentTableCellInEditModePositionComponentState';
+import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 
 export const useCloseCurrentTableCellInEditMode = (recordTableId?: string) => {
-  const {
+  const currentTableCellInEditModePositionState =
-    currentTableCellInEditModePositionState,
+    useRecoilComponentCallbackStateV2(
-    isTableCellInEditModeFamilyState,
+      currentTableCellInEditModePositionComponentState,
-  } = useRecordTableStates(recordTableId);
+      recordTableId,
+    );
+  const isTableCellInEditModeFamilyState = useRecoilComponentCallbackStateV2(
+    isTableCellInEditModeComponentFamilyState,
+    recordTableId,
+  );
 
   return useRecoilCallback(
     ({ set, snapshot }) => {

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

@@ -1,14 +1,24 @@
 import { useRecoilCallback } from 'recoil';
 
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+import { isSoftFocusActiveComponentState } from '@/object-record/record-table/states/isSoftFocusActiveComponentState';
+import { isSoftFocusOnTableCellComponentFamilyState } from '@/object-record/record-table/states/isSoftFocusOnTableCellComponentFamilyState';
+import { softFocusPositionComponentState } from '@/object-record/record-table/states/softFocusPositionComponentState';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 
 export const useDisableSoftFocus = (recordTableId?: string) => {
-  const {
+  const softFocusPositionState = useRecoilComponentCallbackStateV2(
-    softFocusPositionState,
+    softFocusPositionComponentState,
-    isSoftFocusActiveState,
+    recordTableId,
-    isSoftFocusOnTableCellFamilyState,
+  );
-  } = useRecordTableStates(recordTableId);
+  const isSoftFocusActiveState = useRecoilComponentCallbackStateV2(
+    isSoftFocusActiveComponentState,
+    recordTableId,
+  );
+  const isSoftFocusOnTableCellFamilyState = useRecoilComponentCallbackStateV2(
+    isSoftFocusOnTableCellComponentFamilyState,
+    recordTableId,
+  );
 
   return useRecoilCallback(
     ({ set, snapshot }) => {

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

@@ -1,13 +1,20 @@
 import { useRecoilCallback } from 'recoil';
 
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+import { currentTableCellInEditModePositionComponentState } from '@/object-record/record-table/states/currentTableCellInEditModePositionComponentState';
+import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 
 export const useGetIsSomeCellInEditModeState = (recordTableId?: string) => {
-  const {
+  const currentTableCellInEditModePositionState =
-    currentTableCellInEditModePositionState,
+    useRecoilComponentCallbackStateV2(
-    isTableCellInEditModeFamilyState,
+      currentTableCellInEditModePositionComponentState,
-  } = useRecordTableStates(recordTableId);
+      recordTableId,
+    );
+  const isTableCellInEditModeFamilyState = useRecoilComponentCallbackStateV2(
+    isTableCellInEditModeComponentFamilyState,
+    recordTableId,
+  );
 
   return useRecoilCallback(
     ({ snapshot }) =>

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

@@ -6,10 +6,8 @@ import { isSoftFocusOnTableCellComponentFamilyState } from '@/object-record/reco
 import { isSoftFocusUsingMouseState } from '@/object-record/record-table/states/isSoftFocusUsingMouseState';
 import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
 import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
-import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
-import { extractComponentFamilyState } from '@/ui/utilities/state/component-state/utils/extractComponentFamilyState';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
-import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
 
 export type HandleContainerMouseEnterArgs = {
   cellPosition: TableCellPosition;
@@ -20,24 +18,28 @@ export const useHandleContainerMouseEnter = ({
 }: {
   recordTableId: string;
 }) => {
-  const tableScopeId = getScopeIdFromComponentId(recordTableId);
-
   const { moveSoftFocusToCell } =
     useMoveSoftFocusToCellOnHoverV2(recordTableId);
 
+  const currentTableCellInEditModePositionState =
+    useRecoilComponentCallbackStateV2(
+      currentTableCellInEditModePositionComponentState,
+      recordTableId,
+    );
+
+  const isSoftFocusOnTableCellFamilyState = useRecoilComponentCallbackStateV2(
+    isSoftFocusOnTableCellComponentFamilyState,
+    recordTableId,
+  );
+
+  const isTableCellInEditModeFamilyState = useRecoilComponentCallbackStateV2(
+    isTableCellInEditModeComponentFamilyState,
+    recordTableId,
+  );
+
   const handleContainerMouseEnter = useRecoilCallback(
     ({ snapshot, set }) =>
       ({ cellPosition }: HandleContainerMouseEnterArgs) => {
-        const currentTableCellInEditModePositionState = extractComponentState(
-          currentTableCellInEditModePositionComponentState,
-          tableScopeId,
-        );
-
-        const isSoftFocusOnTableCellFamilyState = extractComponentFamilyState(
-          isSoftFocusOnTableCellComponentFamilyState,
-          tableScopeId,
-        );
-
         const isSoftFocusOnTableCell = getSnapshotValue(
           snapshot,
           isSoftFocusOnTableCellFamilyState(cellPosition),
@@ -48,11 +50,6 @@ export const useHandleContainerMouseEnter = ({
           currentTableCellInEditModePositionState,
         );
 
-        const isTableCellInEditModeFamilyState = extractComponentFamilyState(
-          isTableCellInEditModeComponentFamilyState,
-          tableScopeId,
-        );
-
         const isSomeCellInEditMode = getSnapshotValue(
           snapshot,
           isTableCellInEditModeFamilyState(currentTableCellInEditModePosition),
@@ -63,7 +60,12 @@ export const useHandleContainerMouseEnter = ({
           set(isSoftFocusUsingMouseState, true);
         }
       },
-    [tableScopeId, moveSoftFocusToCell],
+    [
+      isSoftFocusOnTableCellFamilyState,
+      currentTableCellInEditModePositionState,
+      isTableCellInEditModeFamilyState,
+      moveSoftFocusToCell,
+    ],
   );
 
   return {

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

@@ -1,15 +1,19 @@
 import { useRecoilCallback } from 'recoil';
 
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 
 import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection';
+import { isSoftFocusActiveComponentState } from '@/object-record/record-table/states/isSoftFocusActiveComponentState';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { useDisableSoftFocus } from './useDisableSoftFocus';
 
 export const useLeaveTableFocus = (recordTableId?: string) => {
   const disableSoftFocus = useDisableSoftFocus(recordTableId);
 
-  const { isSoftFocusActiveState } = useRecordTableStates(recordTableId);
+  const isSoftFocusActiveState = useRecoilComponentCallbackStateV2(
+    isSoftFocusActiveComponentState,
+    recordTableId,
+  );
 
   const resetTableRowSelection = useResetTableRowSelection(recordTableId);
 

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

@@ -1,15 +1,22 @@
 import { useRecoilCallback } from 'recoil';
 
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 
+import { currentTableCellInEditModePositionComponentState } from '@/object-record/record-table/states/currentTableCellInEditModePositionComponentState';
+import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { TableCellPosition } from '../../types/TableCellPosition';
 
 export const useMoveEditModeToTableCellPosition = (recordTableId?: string) => {
-  const {
+  const isTableCellInEditModeFamilyState = useRecoilComponentCallbackStateV2(
-    isTableCellInEditModeFamilyState,
+    isTableCellInEditModeComponentFamilyState,
-    currentTableCellInEditModePositionState,
+    recordTableId,
-  } = useRecordTableStates(recordTableId);
+  );
+  const currentTableCellInEditModePositionState =
+    useRecoilComponentCallbackStateV2(
+      currentTableCellInEditModePositionComponentState,
+      recordTableId,
+    );
 
   return useRecoilCallback(
     ({ set, snapshot }) => {

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

@@ -1,156 +0,0 @@
-import { hasUserSelectedAllRowsComponentState } from '@/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState';
-import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
-import { RecordTableScopeInternalContext } from '@/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext';
-import { availableTableColumnsComponentState } from '@/object-record/record-table/states/availableTableColumnsComponentState';
-import { currentTableCellInEditModePositionComponentState } from '@/object-record/record-table/states/currentTableCellInEditModePositionComponentState';
-import { isRecordTableInitialLoadingComponentState } from '@/object-record/record-table/states/isRecordTableInitialLoadingComponentState';
-import { isSoftDeleteFilterActiveComponentState } from '@/object-record/record-table/states/isSoftDeleteFilterActiveComponentState';
-import { isSoftFocusActiveComponentState } from '@/object-record/record-table/states/isSoftFocusActiveComponentState';
-import { isSoftFocusOnTableCellComponentFamilyState } from '@/object-record/record-table/states/isSoftFocusOnTableCellComponentFamilyState';
-import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
-import { numberOfTableRowsComponentState } from '@/object-record/record-table/states/numberOfTableRowsComponentState';
-import { onColumnsChangeComponentState } from '@/object-record/record-table/states/onColumnsChangeComponentState';
-import { onEntityCountChangeComponentState } from '@/object-record/record-table/states/onEntityCountChangeComponentState';
-import { onToggleColumnFilterComponentState } from '@/object-record/record-table/states/onToggleColumnFilterComponentState';
-import { onToggleColumnSortComponentState } from '@/object-record/record-table/states/onToggleColumnSortComponentState';
-import { recordTablePendingRecordIdComponentState } from '@/object-record/record-table/states/recordTablePendingRecordIdComponentState';
-import { resizeFieldOffsetComponentState } from '@/object-record/record-table/states/resizeFieldOffsetComponentState';
-import { allRowsSelectedStatusComponentSelector } from '@/object-record/record-table/states/selectors/allRowsSelectedStatusComponentSelector';
-import { hiddenTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector';
-import { numberOfTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/numberOfTableColumnsComponentSelector';
-import { selectedRowIdsComponentSelector } from '@/object-record/record-table/states/selectors/selectedRowIdsComponentSelector';
-import { unselectedRowIdsComponentSelector } from '@/object-record/record-table/states/selectors/unselectedRowIdsComponentSelector';
-import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
-import { softFocusPositionComponentState } from '@/object-record/record-table/states/softFocusPositionComponentState';
-import { tableColumnsComponentState } from '@/object-record/record-table/states/tableColumnsComponentState';
-import { tableFiltersComponentState } from '@/object-record/record-table/states/tableFiltersComponentState';
-import { tableLastRowVisibleComponentState } from '@/object-record/record-table/states/tableLastRowVisibleComponentState';
-import { tableRowIdsComponentState } from '@/object-record/record-table/states/tableRowIdsComponentState';
-import { tableSortsComponentState } from '@/object-record/record-table/states/tableSortsComponentState';
-import { tableViewFilterGroupsComponentState } from '@/object-record/record-table/states/tableViewFilterGroupsComponentState';
-import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
-import { getScopeIdOrUndefinedFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId';
-import { extractComponentFamilyState } from '@/ui/utilities/state/component-state/utils/extractComponentFamilyState';
-import { extractComponentReadOnlySelector } from '@/ui/utilities/state/component-state/utils/extractComponentReadOnlySelector';
-import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
-
-export const useRecordTableStates = (recordTableId?: string) => {
-  const scopeId = useAvailableScopeIdOrThrow(
-    RecordTableScopeInternalContext,
-    getScopeIdOrUndefinedFromComponentId(recordTableId),
-  );
-
-  return {
-    scopeId,
-    availableTableColumnsState: extractComponentState(
-      availableTableColumnsComponentState,
-      scopeId,
-    ),
-    tableViewFilterGroupsState: extractComponentState(
-      tableViewFilterGroupsComponentState,
-      scopeId,
-    ),
-    tableFiltersState: extractComponentState(
-      tableFiltersComponentState,
-      scopeId,
-    ),
-    tableSortsState: extractComponentState(tableSortsComponentState, scopeId),
-    tableColumnsState: extractComponentState(
-      tableColumnsComponentState,
-      scopeId,
-    ),
-    onToggleColumnFilterState: extractComponentState(
-      onToggleColumnFilterComponentState,
-      scopeId,
-    ),
-    onToggleColumnSortState: extractComponentState(
-      onToggleColumnSortComponentState,
-      scopeId,
-    ),
-    onColumnsChangeState: extractComponentState(
-      onColumnsChangeComponentState,
-      scopeId,
-    ),
-    onEntityCountChangeState: extractComponentState(
-      onEntityCountChangeComponentState,
-      scopeId,
-    ),
-    tableLastRowVisibleState: extractComponentState(
-      tableLastRowVisibleComponentState,
-      scopeId,
-    ),
-    softFocusPositionState: extractComponentState(
-      softFocusPositionComponentState,
-      scopeId,
-    ),
-    numberOfTableRowsState: extractComponentState(
-      numberOfTableRowsComponentState,
-      scopeId,
-    ),
-    currentTableCellInEditModePositionState: extractComponentState(
-      currentTableCellInEditModePositionComponentState,
-      scopeId,
-    ),
-    isTableCellInEditModeFamilyState: extractComponentFamilyState(
-      isTableCellInEditModeComponentFamilyState,
-      scopeId,
-    ),
-    isSoftDeleteActiveState: extractComponentState(
-      isSoftDeleteFilterActiveComponentState,
-      scopeId,
-    ),
-    isSoftFocusActiveState: extractComponentState(
-      isSoftFocusActiveComponentState,
-      scopeId,
-    ),
-    tableRowIdsState: extractComponentState(tableRowIdsComponentState, scopeId),
-    isRecordTableInitialLoadingState: extractComponentState(
-      isRecordTableInitialLoadingComponentState,
-      scopeId,
-    ),
-    resizeFieldOffsetState: extractComponentState(
-      resizeFieldOffsetComponentState,
-      scopeId,
-    ),
-    isSoftFocusOnTableCellFamilyState: extractComponentFamilyState(
-      isSoftFocusOnTableCellComponentFamilyState,
-      scopeId,
-    ),
-    isRowSelectedFamilyState: extractComponentFamilyState(
-      isRowSelectedComponentFamilyState,
-      scopeId,
-    ),
-    hasUserSelectedAllRowsState: extractComponentState(
-      hasUserSelectedAllRowsComponentState,
-      scopeId,
-    ),
-    allRowsSelectedStatusSelector: extractComponentReadOnlySelector(
-      allRowsSelectedStatusComponentSelector,
-      scopeId,
-    ),
-    hiddenTableColumnsSelector: extractComponentReadOnlySelector(
-      hiddenTableColumnsComponentSelector,
-      scopeId,
-    ),
-    numberOfTableColumnsSelector: extractComponentReadOnlySelector(
-      numberOfTableColumnsComponentSelector,
-      scopeId,
-    ),
-    selectedRowIdsSelector: extractComponentReadOnlySelector(
-      selectedRowIdsComponentSelector,
-      scopeId,
-    ),
-    unselectedRowIdsSelector: extractComponentReadOnlySelector(
-      unselectedRowIdsComponentSelector,
-      scopeId,
-    ),
-    visibleTableColumnsSelector: extractComponentReadOnlySelector(
-      visibleTableColumnsComponentSelector,
-      scopeId,
-    ),
-    pendingRecordIdState: extractComponentState(
-      recordTablePendingRecordIdComponentState,
-      scopeId,
-    ),
-  };
-};

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

@@ -1,16 +1,26 @@
 import { useRecoilCallback } from 'recoil';
 
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+import { hasUserSelectedAllRowsComponentState } from '@/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState';
+import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
+import { tableRowIdsComponentState } from '@/object-record/record-table/states/tableRowIdsComponentState';
 import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
 
 export const useResetTableRowSelection = (recordTableId?: string) => {
-  const {
+  const tableRowIdsState = useRecoilComponentCallbackStateV2(
-    tableRowIdsState,
+    tableRowIdsComponentState,
-    isRowSelectedFamilyState,
+    recordTableId,
-    hasUserSelectedAllRowsState,
+  );
-  } = useRecordTableStates(recordTableId);
+  const isRowSelectedFamilyState = useRecoilComponentCallbackStateV2(
+    isRowSelectedComponentFamilyState,
+    recordTableId,
+  );
+  const hasUserSelectedAllRowsState = useRecoilComponentCallbackStateV2(
+    hasUserSelectedAllRowsComponentState,
+    recordTableId,
+  );
 
   return useRecoilCallback(
     ({ snapshot, set }) =>

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

@@ -1,21 +1,31 @@
 import { useRecoilCallback } from 'recoil';
 
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
+import { allRowsSelectedStatusComponentSelector } from '@/object-record/record-table/states/selectors/allRowsSelectedStatusComponentSelector';
+import { tableRowIdsComponentState } from '@/object-record/record-table/states/tableRowIdsComponentState';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 
 export const useSelectAllRows = (recordTableId?: string) => {
-  const {
+  const allRowsSelectedStatusSelector = useRecoilComponentCallbackStateV2(
-    allRowsSelectedStatusSelector,
+    allRowsSelectedStatusComponentSelector,
-    tableRowIdsState,
+    recordTableId,
-    isRowSelectedFamilyState,
+  );
-  } = useRecordTableStates(recordTableId);
+  const tableRowIdsState = useRecoilComponentCallbackStateV2(
+    tableRowIdsComponentState,
+    recordTableId,
+  );
+  const isRowSelectedFamilyState = useRecoilComponentCallbackStateV2(
+    isRowSelectedComponentFamilyState,
+    recordTableId,
+  );
 
   const selectAllRows = useRecoilCallback(
     ({ set, snapshot }) =>
       () => {
         const allRowsSelectedStatus = getSnapshotValue(
           snapshot,
-          allRowsSelectedStatusSelector(),
+          allRowsSelectedStatusSelector,
         );
 
         const tableRowIds = getSnapshotValue(snapshot, tableRowIdsState);

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

@@ -1,9 +1,13 @@
 import { useRecoilCallback } from 'recoil';
 
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+import { hasUserSelectedAllRowsComponentState } from '@/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 
 export const useSetHasUserSelectedAllRows = (recordTableId?: string) => {
-  const { hasUserSelectedAllRowsState } = useRecordTableStates(recordTableId);
+  const hasUserSelectedAllRowsState = useRecoilComponentCallbackStateV2(
+    hasUserSelectedAllRowsComponentState,
+    recordTableId,
+  );
 
   return useRecoilCallback(
     ({ set }) =>

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

@@ -1,9 +1,13 @@
 import { useRecoilCallback } from 'recoil';
 
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+import { hasUserSelectedAllRowsComponentState } from '@/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState';
+import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
+import { numberOfTableRowsComponentState } from '@/object-record/record-table/states/numberOfTableRowsComponentState';
+import { tableRowIdsComponentState } from '@/object-record/record-table/states/tableRowIdsComponentState';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
 type useSetRecordTableDataProps = {
@@ -15,12 +19,22 @@ export const useSetRecordTableData = ({
   recordTableId,
   onEntityCountChange,
 }: useSetRecordTableDataProps) => {
-  const {
+  const tableRowIdsState = useRecoilComponentCallbackStateV2(
-    tableRowIdsState,
+    tableRowIdsComponentState,
-    numberOfTableRowsState,
+    recordTableId,
-    isRowSelectedFamilyState,
+  );
-    hasUserSelectedAllRowsState,
+  const numberOfTableRowsState = useRecoilComponentCallbackStateV2(
-  } = useRecordTableStates(recordTableId);
+    numberOfTableRowsComponentState,
+    recordTableId,
+  );
+  const isRowSelectedFamilyState = useRecoilComponentCallbackStateV2(
+    isRowSelectedComponentFamilyState,
+    recordTableId,
+  );
+  const hasUserSelectedAllRowsState = useRecoilComponentCallbackStateV2(
+    hasUserSelectedAllRowsComponentState,
+    recordTableId,
+  );
 
   return useRecoilCallback(
     ({ set, snapshot }) =>

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

@@ -1,9 +1,13 @@
 import { useRecoilCallback } from 'recoil';
 
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 
 export const useSetRowSelectedState = (recordTableId?: string) => {
-  const { isRowSelectedFamilyState } = useRecordTableStates(recordTableId);
+  const isRowSelectedFamilyState = useRecoilComponentCallbackStateV2(
+    isRowSelectedComponentFamilyState,
+    recordTableId,
+  );
 
   return useRecoilCallback(
     ({ set }) =>

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

@@ -1,16 +1,26 @@
 import { useRecoilCallback } from 'recoil';
 
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 
+import { isSoftFocusActiveComponentState } from '@/object-record/record-table/states/isSoftFocusActiveComponentState';
+import { isSoftFocusOnTableCellComponentFamilyState } from '@/object-record/record-table/states/isSoftFocusOnTableCellComponentFamilyState';
+import { softFocusPositionComponentState } from '@/object-record/record-table/states/softFocusPositionComponentState';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { TableCellPosition } from '../../types/TableCellPosition';
 
 export const useSetSoftFocusPosition = (recordTableId?: string) => {
-  const {
+  const softFocusPositionState = useRecoilComponentCallbackStateV2(
-    softFocusPositionState,
+    softFocusPositionComponentState,
-    isSoftFocusActiveState,
+    recordTableId,
-    isSoftFocusOnTableCellFamilyState,
+  );
-  } = useRecordTableStates(recordTableId);
+  const isSoftFocusActiveState = useRecoilComponentCallbackStateV2(
+    isSoftFocusActiveComponentState,
+    recordTableId,
+  );
+  const isSoftFocusOnTableCellFamilyState = useRecoilComponentCallbackStateV2(
+    isSoftFocusOnTableCellComponentFamilyState,
+    recordTableId,
+  );
 
   return useRecoilCallback(
     ({ set, snapshot }) => {

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

@@ -3,7 +3,6 @@ import { Key } from 'ts-key-enum';
 
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
 import { useGetIsSomeCellInEditModeState } from '@/object-record/record-table/hooks/internal/useGetIsSomeCellInEditMode';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { useSetHasUserSelectedAllRows } from '@/object-record/record-table/hooks/internal/useSetAllRowSelectedState';
 import { useRecordTableMoveFocus } from '@/object-record/record-table/hooks/useRecordTableMoveFocus';
 import { isSoftFocusUsingMouseState } from '@/object-record/record-table/states/isSoftFocusUsingMouseState';
@@ -16,6 +15,20 @@ import { useUpsertRecordFromState } from '../../hooks/useUpsertRecordFromState';
 import { ColumnDefinition } from '../types/ColumnDefinition';
 import { TableHotkeyScope } from '../types/TableHotkeyScope';
 
+import { availableTableColumnsComponentState } from '@/object-record/record-table/states/availableTableColumnsComponentState';
+import { isRecordTableInitialLoadingComponentState } from '@/object-record/record-table/states/isRecordTableInitialLoadingComponentState';
+import { onColumnsChangeComponentState } from '@/object-record/record-table/states/onColumnsChangeComponentState';
+import { onEntityCountChangeComponentState } from '@/object-record/record-table/states/onEntityCountChangeComponentState';
+import { onToggleColumnFilterComponentState } from '@/object-record/record-table/states/onToggleColumnFilterComponentState';
+import { onToggleColumnSortComponentState } from '@/object-record/record-table/states/onToggleColumnSortComponentState';
+import { recordTablePendingRecordIdComponentState } from '@/object-record/record-table/states/recordTablePendingRecordIdComponentState';
+import { tableColumnsComponentState } from '@/object-record/record-table/states/tableColumnsComponentState';
+import { tableFiltersComponentState } from '@/object-record/record-table/states/tableFiltersComponentState';
+import { tableLastRowVisibleComponentState } from '@/object-record/record-table/states/tableLastRowVisibleComponentState';
+import { tableSortsComponentState } from '@/object-record/record-table/states/tableSortsComponentState';
+import { tableViewFilterGroupsComponentState } from '@/object-record/record-table/states/tableViewFilterGroupsComponentState';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { useDisableSoftFocus } from './internal/useDisableSoftFocus';
 import { useLeaveTableFocus } from './internal/useLeaveTableFocus';
 import { useResetTableRowSelection } from './internal/useResetTableRowSelection';
@@ -31,24 +44,10 @@ type useRecordTableProps = {
 export const useRecordTable = (props?: useRecordTableProps) => {
   const recordTableId = props?.recordTableId;
 
-  const {
+  const availableTableColumnsState = useRecoilComponentCallbackStateV2(
-    scopeId,
+    availableTableColumnsComponentState,
-    availableTableColumnsState,
+    recordTableId,
-    tableViewFilterGroupsState,
+  );
-    tableFiltersState,
-    tableSortsState,
-    tableColumnsState,
-    onEntityCountChangeState,
-    onColumnsChangeState,
-    isRecordTableInitialLoadingState,
-    tableLastRowVisibleState,
-    selectedRowIdsSelector,
-    unselectedRowIdsSelector,
-    onToggleColumnFilterState,
-    onToggleColumnSortState,
-    pendingRecordIdState,
-    hasUserSelectedAllRowsState,
-  } = useRecordTableStates(recordTableId);
 
   const setAvailableTableColumns = useRecoilCallback(
     ({ snapshot, set }) =>
@@ -66,29 +65,58 @@ export const useRecordTable = (props?: useRecordTableProps) => {
     [availableTableColumnsState],
   );
 
-  const setOnEntityCountChange = useSetRecoilState(onEntityCountChangeState);
+  const setOnEntityCountChange = useSetRecoilComponentStateV2(
-
+    onEntityCountChangeComponentState,
-  const setTableViewFilterGroups = useSetRecoilState(
+    recordTableId,
-    tableViewFilterGroupsState,
   );
 
-  const setTableFilters = useSetRecoilState(tableFiltersState);
+  const setTableViewFilterGroups = useSetRecoilComponentStateV2(
-
+    tableViewFilterGroupsComponentState,
-  const setTableSorts = useSetRecoilState(tableSortsState);
+    recordTableId,
-
-  const setTableColumns = useSetRecoilState(tableColumnsState);
-
-  const setOnColumnsChange = useSetRecoilState(onColumnsChangeState);
-
-  const setOnToggleColumnFilter = useSetRecoilState(onToggleColumnFilterState);
-  const setOnToggleColumnSort = useSetRecoilState(onToggleColumnSortState);
-
-  const setIsRecordTableInitialLoading = useSetRecoilState(
-    isRecordTableInitialLoadingState,
   );
 
-  const setRecordTableLastRowVisible = useSetRecoilState(
+  const setTableFilters = useSetRecoilComponentStateV2(
-    tableLastRowVisibleState,
+    tableFiltersComponentState,
+    recordTableId,
+  );
+
+  const setTableSorts = useSetRecoilComponentStateV2(
+    tableSortsComponentState,
+    recordTableId,
+  );
+
+  const setTableColumns = useSetRecoilComponentStateV2(
+    tableColumnsComponentState,
+    recordTableId,
+  );
+
+  const setOnColumnsChange = useSetRecoilComponentStateV2(
+    onColumnsChangeComponentState,
+    recordTableId,
+  );
+
+  const setOnToggleColumnFilter = useSetRecoilComponentStateV2(
+    onToggleColumnFilterComponentState,
+    recordTableId,
+  );
+  const setOnToggleColumnSort = useSetRecoilComponentStateV2(
+    onToggleColumnSortComponentState,
+    recordTableId,
+  );
+
+  const setIsRecordTableInitialLoading = useSetRecoilComponentStateV2(
+    isRecordTableInitialLoadingComponentState,
+    recordTableId,
+  );
+
+  const setRecordTableLastRowVisible = useSetRecoilComponentStateV2(
+    tableLastRowVisibleComponentState,
+    recordTableId,
+  );
+
+  const onColumnsChangeState = useRecoilComponentCallbackStateV2(
+    onColumnsChangeComponentState,
+    recordTableId,
   );
 
   const onColumnsChange = useRecoilCallback(
@@ -104,6 +132,11 @@ export const useRecordTable = (props?: useRecordTableProps) => {
     [onColumnsChangeState],
   );
 
+  const onEntityCountChangeState = useRecoilComponentCallbackStateV2(
+    onEntityCountChangeComponentState,
+    recordTableId,
+  );
+
   const onEntityCountChange = useRecoilCallback(
     ({ snapshot }) =>
       (count?: number) => {
@@ -202,10 +235,12 @@ export const useRecordTable = (props?: useRecordTableProps) => {
   const isSomeCellInEditModeState =
     useGetIsSomeCellInEditModeState(recordTableId);
 
-  const setPendingRecordId = useSetRecoilState(pendingRecordIdState);
+  const setPendingRecordId = useSetRecoilComponentStateV2(
+    recordTablePendingRecordIdComponentState,
+    recordTableId,
+  );
 
   return {
-    scopeId,
     onColumnsChange,
     setAvailableTableColumns,
     setTableViewFilterGroups,
@@ -229,12 +264,9 @@ export const useRecordTable = (props?: useRecordTableProps) => {
     setRecordTableLastRowVisible,
     setSoftFocusPosition,
     isSomeCellInEditModeState,
-    selectedRowIdsSelector,
-    unselectedRowIdsSelector,
     setHasUserSelectedAllRows,
     setOnToggleColumnFilter,
     setOnToggleColumnSort,
     setPendingRecordId,
-    hasUserSelectedAllRowsState,
   };
 };

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

@@ -1,22 +1,22 @@
 import { useRecoilCallback } from 'recoil';
 
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { MoveFocusDirection } from '@/object-record/record-table/types/MoveFocusDirection';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 
+import { numberOfTableRowsComponentState } from '@/object-record/record-table/states/numberOfTableRowsComponentState';
+import { numberOfTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/numberOfTableColumnsComponentSelector';
+import { softFocusPositionComponentState } from '@/object-record/record-table/states/softFocusPositionComponentState';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { useSetSoftFocusPosition } from './internal/useSetSoftFocusPosition';
 
 export const useRecordTableMoveFocus = (recordTableId?: string) => {
-  const {
-    scopeId,
-    softFocusPositionState,
-    numberOfTableRowsState,
-    numberOfTableColumnsSelector,
-    selectedRowIdsSelector,
-  } = useRecordTableStates(recordTableId);
-
   const setSoftFocusPosition = useSetSoftFocusPosition(recordTableId);
 
+  const softFocusPositionState = useRecoilComponentCallbackStateV2(
+    softFocusPositionComponentState,
+    recordTableId,
+  );
+
   const moveUp = useRecoilCallback(
     ({ snapshot }) =>
       () => {
@@ -39,6 +39,11 @@ export const useRecordTableMoveFocus = (recordTableId?: string) => {
     [softFocusPositionState, setSoftFocusPosition],
   );
 
+  const numberOfTableRowsState = useRecoilComponentCallbackStateV2(
+    numberOfTableRowsComponentState,
+    recordTableId,
+  );
+
   const moveDown = useRecoilCallback(
     ({ snapshot }) =>
       () => {
@@ -66,6 +71,11 @@ export const useRecordTableMoveFocus = (recordTableId?: string) => {
     [numberOfTableRowsState, setSoftFocusPosition, softFocusPositionState],
   );
 
+  const numberOfTableColumnsSelector = useRecoilComponentCallbackStateV2(
+    numberOfTableColumnsComponentSelector,
+    recordTableId,
+  );
+
   const moveRight = useRecoilCallback(
     ({ snapshot }) =>
       () => {
@@ -76,7 +86,7 @@ export const useRecordTableMoveFocus = (recordTableId?: string) => {
 
         const numberOfTableColumns = getSnapshotValue(
           snapshot,
-          numberOfTableColumnsSelector(),
+          numberOfTableColumnsSelector,
         );
 
         const numberOfTableRows = getSnapshotValue(
@@ -132,7 +142,7 @@ export const useRecordTableMoveFocus = (recordTableId?: string) => {
 
         const numberOfTableColumns = getSnapshotValue(
           snapshot,
-          numberOfTableColumnsSelector(),
+          numberOfTableColumnsSelector,
         );
 
         const currentColumnNumber = softFocusPosition.column;
@@ -187,13 +197,11 @@ export const useRecordTableMoveFocus = (recordTableId?: string) => {
   };
 
   return {
-    scopeId,
     moveDown,
     moveLeft,
     moveRight,
     moveUp,
     setSoftFocusPosition,
-    selectedRowIdsSelector,
     moveFocus,
   };
 };

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

@@ -1,11 +1,13 @@
 import { useCallback } from 'react';
-import { useRecoilValue } from 'recoil';
 
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
 import { useMoveViewColumns } from '@/views/hooks/useMoveViewColumns';
 
+import { availableTableColumnsComponentState } from '@/object-record/record-table/states/availableTableColumnsComponentState';
+import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
+import { tableColumnsComponentState } from '@/object-record/record-table/states/tableColumnsComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { ColumnDefinition } from '../types/ColumnDefinition';
 
 type useRecordTableProps = {
@@ -17,16 +19,19 @@ export const useTableColumns = (props?: useRecordTableProps) => {
     recordTableId: props?.recordTableId,
   });
 
-  const {
+  const availableTableColumns = useRecoilComponentValueV2(
-    availableTableColumnsState,
+    availableTableColumnsComponentState,
-    tableColumnsState,
+    props?.recordTableId,
-    visibleTableColumnsSelector,
+  );
-  } = useRecordTableStates(props?.recordTableId);
 
-  const availableTableColumns = useRecoilValue(availableTableColumnsState);
+  const tableColumns = useRecoilComponentValueV2(
-
+    tableColumnsComponentState,
-  const tableColumns = useRecoilValue(tableColumnsState);
+    props?.recordTableId,
-  const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector());
+  );
+  const visibleTableColumns = useRecoilComponentValueV2(
+    visibleTableColumnsComponentSelector,
+    props?.recordTableId,
+  );
 
   const { handleColumnMove } = useMoveViewColumns();
 

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

@@ -1,20 +1,17 @@
-import { useRecoilValue } from 'recoil';
-
 import { RecordTableRows } from '@/object-record/record-table/components/RecordTableRows';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { RecordTableBodyDragDropContext } from '@/object-record/record-table/record-table-body/components/RecordTableBodyDragDropContext';
 import { RecordTableBodyDroppable } from '@/object-record/record-table/record-table-body/components/RecordTableBodyDroppable';
 import { RecordTableBodyLoading } from '@/object-record/record-table/record-table-body/components/RecordTableBodyLoading';
 import { RecordTablePendingRow } from '@/object-record/record-table/record-table-row/components/RecordTablePendingRow';
+import { isRecordTableInitialLoadingComponentState } from '@/object-record/record-table/states/isRecordTableInitialLoadingComponentState';
+import { tableRowIdsComponentState } from '@/object-record/record-table/states/tableRowIdsComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 
 export const RecordTableBody = () => {
-  const { tableRowIdsState, isRecordTableInitialLoadingState } =
+  const tableRowIds = useRecoilComponentValueV2(tableRowIdsComponentState);
-    useRecordTableStates();
 
-  const tableRowIds = useRecoilValue(tableRowIdsState);
+  const isRecordTableInitialLoading = useRecoilComponentValueV2(
-
+    isRecordTableInitialLoadingComponentState,
-  const isRecordTableInitialLoading = useRecoilValue(
-    isRecordTableInitialLoadingState,
   );
 
   if (isRecordTableInitialLoading && tableRowIds.length === 0) {

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

@@ -1,12 +1,13 @@
-import { ReactNode, useContext } from 'react';
 import { DragDropContext, DropResult } from '@hello-pangea/dnd';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { ReactNode, useContext } from 'react';
+import { useSetRecoilState } from 'recoil';
 
 import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { useComputeNewRowPosition } from '@/object-record/record-table/hooks/useComputeNewRowPosition';
 import { isRemoveSortingModalOpenState } from '@/object-record/record-table/states/isRemoveSortingModalOpenState';
+import { tableRowIdsComponentState } from '@/object-record/record-table/states/tableRowIdsComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
 import { isDefined } from '~/utils/isDefined';
 
@@ -21,9 +22,7 @@ export const RecordTableBodyDragDropContext = ({
     objectNameSingular,
   });
 
-  const { tableRowIdsState } = useRecordTableStates();
+  const tableRowIds = useRecoilComponentValueV2(tableRowIdsComponentState);
-
-  const tableRowIds = useRecoilValue(tableRowIdsState);
 
   const { currentViewWithCombinedFiltersAndSorts } =
     useGetCurrentView(recordTableId);

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

@@ -6,13 +6,14 @@ import { lastShowPageRecordIdState } from '@/object-record/record-field/states/l
 import { useLoadRecordIndexTable } from '@/object-record/record-index/hooks/useLoadRecordIndexTable';
 import { ROW_HEIGHT } from '@/object-record/record-table/constants/RowHeight';
 import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { hasRecordTableFetchedAllRecordsComponentStateV2 } from '@/object-record/record-table/states/hasRecordTableFetchedAllRecordsComponentStateV2';
 import { isRecordTableScrolledLeftComponentState } from '@/object-record/record-table/states/isRecordTableScrolledLeftComponentState';
+import { tableLastRowVisibleComponentState } from '@/object-record/record-table/states/tableLastRowVisibleComponentState';
 import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState';
 import { useScrollLeftValue } from '@/ui/utilities/scroll/hooks/useScrollLeftValue';
 import { useScrollTopValue } from '@/ui/utilities/scroll/hooks/useScrollTopValue';
-import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { isNonEmptyString } from '@sniptt/guards';
 import { useScrollToPosition } from '~/hooks/useScrollToPosition';
 
@@ -35,14 +36,16 @@ export const RecordTableBodyEffect = () => {
     isFetchingMoreRecordsFamilyState(queryStateIdentifier),
   );
 
-  const { tableLastRowVisibleState } = useRecordTableStates();
+  const tableLastRowVisible = useRecoilComponentValueV2(
-
+    tableLastRowVisibleComponentState,
-  const tableLastRowVisible = useRecoilValue(tableLastRowVisibleState);
+  );
 
   const scrollTop = useScrollTopValue('recordTableWithWrappers');
 
   const setHasRecordTableFetchedAllRecordsComponents =
-    useSetRecoilComponentState(hasRecordTableFetchedAllRecordsComponentStateV2);
+    useSetRecoilComponentStateV2(
+      hasRecordTableFetchedAllRecordsComponentStateV2,
+    );
 
   // TODO: move this outside because it might cause way too many re-renders for other hooks
   useEffect(() => {
@@ -59,7 +62,7 @@ export const RecordTableBodyEffect = () => {
 
   const scrollLeft = useScrollLeftValue('recordTableWithWrappers');
 
-  const setIsRecordTableScrolledLeft = useSetRecoilComponentState(
+  const setIsRecordTableScrolledLeft = useSetRecoilComponentStateV2(
     isRecordTableScrolledLeftComponentState,
   );
 

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

@@ -7,7 +7,7 @@ import { GRAY_SCALE } from 'twenty-ui';
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
 import { hasRecordTableFetchedAllRecordsComponentStateV2 } from '@/object-record/record-table/states/hasRecordTableFetchedAllRecordsComponentStateV2';
 import { RecordTableWithWrappersScrollWrapperContext } from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts';
-import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 
 const StyledText = styled.div`
   align-items: center;
@@ -33,7 +33,7 @@ export const RecordTableBodyFetchMoreLoader = () => {
     RecordTableWithWrappersScrollWrapperContext,
   );
 
-  const hasRecordTableFetchedAllRecordsComponents = useRecoilComponentValue(
+  const hasRecordTableFetchedAllRecordsComponents = useRecoilComponentValueV2(
     hasRecordTableFetchedAllRecordsComponentStateV2,
   );
 

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

@@ -1,14 +1,14 @@
-import { useRecoilValue } from 'recoil';
-
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { RecordTableCellCheckbox } from '@/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox';
 import { RecordTableCellGrip } from '@/object-record/record-table/record-table-cell/components/RecordTableCellGrip';
 import { RecordTableCellLoading } from '@/object-record/record-table/record-table-cell/components/RecordTableCellLoading';
 import { RecordTableTr } from '@/object-record/record-table/record-table-row/components/RecordTableTr';
+import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 
 export const RecordTableBodyLoading = () => {
-  const { visibleTableColumnsSelector } = useRecordTableStates();
+  const visibleTableColumns = useRecoilComponentValueV2(
-  const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector());
+    visibleTableColumnsComponentSelector,
+  );
 
   return (
     <tbody>

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

@@ -1,18 +1,14 @@
 import { useContext, useMemo } from 'react';
-import { useRecoilValue } from 'recoil';
 
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
 import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
 import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
 import { RecordTableCellFieldContextWrapper } from '@/object-record/record-table/record-table-cell/components/RecordTableCellFieldContextWrapper';
-import { RecordTableScopeInternalContext } from '@/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext';
 import { isSoftFocusOnTableCellComponentFamilyState } from '@/object-record/record-table/states/isSoftFocusOnTableCellComponentFamilyState';
 import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
 import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
 import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
-import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
+import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2';
-import { getScopeIdOrUndefinedFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId';
-import { extractComponentFamilyState } from '@/ui/utilities/state/component-state/utils/extractComponentFamilyState';
 
 export const RecordTableCellWrapper = ({
   children,
@@ -23,11 +19,6 @@ export const RecordTableCellWrapper = ({
   columnIndex: number;
   children: React.ReactNode;
 }) => {
-  const tableScopeId = useAvailableScopeIdOrThrow(
-    RecordTableScopeInternalContext,
-    getScopeIdOrUndefinedFromComponentId(),
-  );
-
   const { rowIndex } = useContext(RecordTableRowContext);
 
   const currentTableCellPosition: TableCellPosition = useMemo(
@@ -38,22 +29,14 @@ export const RecordTableCellWrapper = ({
     [columnIndex, rowIndex],
   );
 
-  const isTableCellInEditModeFamilyState = extractComponentFamilyState(
+  const isInEditMode = useRecoilComponentFamilyValueV2(
     isTableCellInEditModeComponentFamilyState,
-    tableScopeId,
+    currentTableCellPosition,
   );
 
-  const isSoftFocusOnTableCellFamilyState = extractComponentFamilyState(
+  const hasSoftFocus = useRecoilComponentFamilyValueV2(
     isSoftFocusOnTableCellComponentFamilyState,
-    tableScopeId,
+    currentTableCellPosition,
-  );
-
-  const isInEditMode = useRecoilValue(
-    isTableCellInEditModeFamilyState(currentTableCellPosition),
-  );
-
-  const hasSoftFocus = useRecoilValue(
-    isSoftFocusOnTableCellFamilyState(currentTableCellPosition),
   );
 
   return (

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useCloseRecordTableCell.test.tsx

@@ -1,19 +1,22 @@
 import { act, renderHook } from '@testing-library/react';
-import { RecoilRoot, useRecoilValue } from 'recoil';
+import { RecoilRoot } from 'recoil';
 
 import { textfieldDefinition } from '@/object-record/record-field/__mocks__/fieldDefinitions';
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
+import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
 import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
 import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import {
   recordTableCell,
   recordTableRow,
 } from '@/object-record/record-table/record-table-cell/hooks/__mocks__/cell';
 import { useCloseRecordTableCell } from '@/object-record/record-table/record-table-cell/hooks/useCloseRecordTableCell';
-import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
+import { currentTableCellInEditModePositionComponentState } from '@/object-record/record-table/states/currentTableCellInEditModePositionComponentState';
+import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
 import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
 import { useDragSelect } from '@/ui/utilities/drag-select/hooks/useDragSelect';
+import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 
 const setHotkeyScope = jest.fn();
 
@@ -22,12 +25,12 @@ jest.mock('@/ui/utilities/hotkey/hooks/useSetHotkeyScope', () => ({
 }));
 
 const onColumnsChange = jest.fn();
-const scopeId = 'scopeId';
+const recordTableId = 'scopeId';
 
 const Wrapper = ({ children }: { children: React.ReactNode }) => (
   <RecoilRoot>
-    <RecordTableScope
+    <RecordTableComponentInstance
-      recordTableScopeId={scopeId}
+      recordTableId={recordTableId}
       onColumnsChange={onColumnsChange}
     >
       <FieldContext.Provider
@@ -46,7 +49,7 @@ const Wrapper = ({ children }: { children: React.ReactNode }) => (
           </RecordTableCellContext.Provider>
         </RecordTableRowContext.Provider>
       </FieldContext.Provider>
-    </RecordTableScope>
+    </RecordTableComponentInstance>
   </RecoilRoot>
 );
 
@@ -54,15 +57,12 @@ describe('useCloseRecordTableCell', () => {
   it('should work as expected', async () => {
     const { result } = renderHook(
       () => {
-        const {
+        const currentTableCellInEditModePosition = useRecoilComponentValueV2(
-          currentTableCellInEditModePositionState,
+          currentTableCellInEditModePositionComponentState,
-          isTableCellInEditModeFamilyState,
-        } = useRecordTableStates();
-        const currentTableCellInEditModePosition = useRecoilValue(
-          currentTableCellInEditModePositionState,
         );
-        const isTableCellInEditMode = useRecoilValue(
+        const isTableCellInEditMode = useRecoilComponentFamilyValueV2(
-          isTableCellInEditModeFamilyState(currentTableCellInEditModePosition),
+          isTableCellInEditModeComponentFamilyState,
+          currentTableCellInEditModePosition,
         );
         return {
           ...useCloseRecordTableCell(),

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useCurrentTableCellEditMode.test.tsx

@@ -1,22 +1,22 @@
 import { act, renderHook, waitFor } from '@testing-library/react';
 import { RecoilRoot } from 'recoil';
 
-import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
+import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
 
 import { useCurrentTableCellEditMode } from '../useCurrentTableCellEditMode';
 
 const onColumnsChange = jest.fn();
 
-const scopeId = 'scopeId';
+const recordTableId = 'scopeId';
 
 const Wrapper = ({ children }: { children: React.ReactNode }) => (
   <RecoilRoot>
-    <RecordTableScope
+    <RecordTableComponentInstance
-      recordTableScopeId={scopeId}
+      recordTableId={recordTableId}
       onColumnsChange={onColumnsChange}
     >
       {children}
-    </RecordTableScope>
+    </RecordTableComponentInstance>
   </RecoilRoot>
 );
 

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useIsSoftFocusOnCurrentTableCell.test.tsx

@@ -1,6 +1,7 @@
 import { renderHook } from '@testing-library/react';
 import { RecoilRoot } from 'recoil';
 
+import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
 import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
 import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
 import {
@@ -8,17 +9,19 @@ import {
   recordTableRow,
 } from '@/object-record/record-table/record-table-cell/hooks/__mocks__/cell';
 import { useIsSoftFocusOnCurrentTableCell } from '@/object-record/record-table/record-table-cell/hooks/useIsSoftFocusOnCurrentTableCell';
-import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
 
 const Wrapper = ({ children }: { children: React.ReactNode }) => (
   <RecoilRoot>
-    <RecordTableScope recordTableScopeId="scopeId" onColumnsChange={jest.fn()}>
+    <RecordTableComponentInstance
+      recordTableId="scopeId"
+      onColumnsChange={jest.fn()}
+    >
       <RecordTableRowContext.Provider value={recordTableRow}>
         <RecordTableCellContext.Provider value={recordTableCell}>
           {children}
         </RecordTableCellContext.Provider>
       </RecordTableRowContext.Provider>
-    </RecordTableScope>
+    </RecordTableComponentInstance>
   </RecoilRoot>
 );
 

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useMoveSoftFocusToCurrentCellOnHover.test.tsx

@@ -1,6 +1,7 @@
 import { act, renderHook } from '@testing-library/react';
 import { CallbackInterface, RecoilRoot } from 'recoil';
 
+import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
 import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
 import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
 import {
@@ -8,24 +9,26 @@ import {
   recordTableRow,
 } from '@/object-record/record-table/record-table-cell/hooks/__mocks__/cell';
 import { useMoveSoftFocusToCurrentCellOnHover } from '@/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCurrentCellOnHover';
-import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
 import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
 import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
 
 const mockSoftFocusPositionState = {
-  key: 'softFocusPositionComponentState__{"scopeId":"scopeId"}',
+  key: 'softFocusPositionComponentState__{"instanceId":"scopeId"}',
 };
 const mockSoftFocusActiveState = {
-  key: 'isSoftFocusActiveComponentState__{"scopeId":"scopeId"}',
+  key: 'isSoftFocusActiveComponentState__{"instanceId":"scopeId"}',
 };
-const mockIsSoftFocusOnTableCellFamilyState = {
+const mockIsSoftFocusOnTableCellFamilyStateCurrentPosition = {
-  key: 'isSoftFocusOnTableCellFamilyComponentState__{"familyKey":{"column":1,"row":0},"scopeId":"scopeId"}',
+  key: 'isSoftFocusOnTableCellComponentFamilyState__{"familyKey":{"column":1,"row":0},"instanceId":"scopeId"}',
+};
+const mockIsSoftFocusOnTableCellFamilyStateNewPosition = {
+  key: 'isSoftFocusOnTableCellComponentFamilyState__{"familyKey":{"column":3,"row":2},"instanceId":"scopeId"}',
 };
 const mockCurrentTableCellInEditModePositionState = {
-  key: 'currentTableCellInEditModePositionComponentState__{"scopeId":"scopeId"}',
+  key: 'currentTableCellInEditModePositionComponentState__{"instanceId":"scopeId"}',
 };
 const mockIsTableCellInEditModeFamilyState = {
-  key: 'isTableCellInEditModeFamilyComponentState__{"familyKey":{"column":1,"row":0},"scopeId":"scopeId"}',
+  key: 'isTableCellInEditModeComponentFamilyState__{"familyKey":{"column":1,"row":0},"instanceId":"scopeId"}',
 };
 const mockCurrentHotKeyScopeState = {
   key: 'currentHotkeyScopeState',
@@ -61,21 +64,6 @@ jest.mock('recoil', () => ({
     ) => (newPosition: TableCellPosition) => void,
   ) => callback(mockCallbackInterface),
 }));
-jest.mock(
-  '@/object-record/record-table/hooks/internal/useRecordTableStates',
-  () => ({
-    useRecordTableStates: () => ({
-      softFocusPositionState: mockSoftFocusPositionState,
-      isSoftFocusActiveState: mockSoftFocusActiveState,
-      isSoftFocusOnTableCellFamilyState: () =>
-        mockIsSoftFocusOnTableCellFamilyState,
-      currentTableCellInEditModePositionState:
-        mockCurrentTableCellInEditModePositionState,
-      isTableCellInEditModeFamilyState: () =>
-        mockIsTableCellInEditModeFamilyState,
-    }),
-  }),
-);
 jest.mock('@/object-record/record-table/hooks/useRecordTable', () => ({
   useRecordTable: () => ({
     setSoftFocusPosition,
@@ -88,13 +76,16 @@ jest.mock('@/ui/utilities/hotkey/hooks/useSetHotkeyScope', () => ({
 
 const Wrapper = ({ children }: { children: React.ReactNode }) => (
   <RecoilRoot>
-    <RecordTableScope recordTableScopeId="scopeId" onColumnsChange={jest.fn()}>
+    <RecordTableComponentInstance
+      recordTableId="scopeId"
+      onColumnsChange={jest.fn()}
+    >
       <RecordTableRowContext.Provider value={recordTableRow}>
         <RecordTableCellContext.Provider value={recordTableCell}>
           {children}
         </RecordTableCellContext.Provider>
       </RecordTableRowContext.Provider>
-    </RecordTableScope>
+    </RecordTableComponentInstance>
   </RecoilRoot>
 );
 
@@ -114,26 +105,36 @@ describe('useMoveSoftFocusToCurrentCellOnHover', () => {
       result.current.moveSoftFocusToCurrentCellOnHover();
     });
 
-    expect(mockCallbackInterface.set).toHaveBeenCalledWith(
+    expect(mockCallbackInterface.set).toHaveBeenNthCalledWith(
+      1,
       mockSoftFocusActiveState,
       true,
     );
-    expect(mockCallbackInterface.set).toHaveBeenCalledWith(
+
-      mockIsSoftFocusOnTableCellFamilyState,
+    expect(mockCallbackInterface.set).toHaveBeenNthCalledWith(
+      2,
+      mockIsSoftFocusOnTableCellFamilyStateCurrentPosition,
       false,
     );
-    expect(mockCallbackInterface.set).toHaveBeenCalledWith(
+
+    expect(mockCallbackInterface.set).toHaveBeenNthCalledWith(
+      3,
       mockSoftFocusPositionState,
       { column: 3, row: 2 },
     );
-    expect(mockCallbackInterface.set).toHaveBeenCalledWith(
+
-      mockIsSoftFocusOnTableCellFamilyState,
+    expect(mockCallbackInterface.set).toHaveBeenNthCalledWith(
+      4,
+      mockIsSoftFocusOnTableCellFamilyStateNewPosition,
       true,
     );
-    expect(mockCallbackInterface.set).toHaveBeenCalledWith(
+
+    expect(mockCallbackInterface.set).toHaveBeenNthCalledWith(
+      5,
       mockSoftFocusActiveState,
       true,
     );
+
     expect(setHotkeyScope).toHaveBeenCalledWith(
       TableHotkeyScope.TableSoftFocus,
     );

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useSelectedTableCellEditMode.test.tsx

@@ -48,14 +48,14 @@ describe('useSelectedTableCellEditMode', () => {
 
     expect(mockCallbackInterface.set).toHaveBeenCalledWith(
       {
-        key: 'isTableCellInEditModeComponentFamilyState__{"familyKey":{"column":0,"row":0},"scopeId":"yourScopeId"}',
+        key: 'isTableCellInEditModeComponentFamilyState__{"familyKey":{"column":0,"row":0},"instanceId":"yourScopeId"}',
       },
       false,
     );
 
     expect(mockCallbackInterface.set).toHaveBeenCalledWith(
       {
-        key: 'isTableCellInEditModeComponentFamilyState__{"familyKey":{"column":5,"row":1},"scopeId":"yourScopeId"}',
+        key: 'isTableCellInEditModeComponentFamilyState__{"familyKey":{"column":5,"row":1},"instanceId":"yourScopeId"}',
       },
       true,
     );

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useUpsertRecord.test.tsx

@@ -39,15 +39,6 @@ const pendingRecordIdState = createState<string | null>({
   key: 'pendingRecordIdState',
   defaultValue: null,
 });
-jest.mock(
-  '@/object-record/record-table/hooks/internal/useRecordTableStates',
-  () => ({
-    __esModule: true,
-    useRecordTableStates: jest.fn(() => ({
-      pendingRecordIdState: pendingRecordIdState,
-    })),
-  }),
-);
 
 const createOneRecordMock = jest.fn();
 const updateOneRecordMock = jest.fn();
@@ -98,7 +89,11 @@ describe('useUpsertRecord', () => {
 
   it('calls update record if there is no pending record', async () => {
     const { result } = renderHook(
-      () => useUpsertRecord({ objectNameSingular: 'person' }),
+      () =>
+        useUpsertRecord({
+          objectNameSingular: 'person',
+          recordTableId: 'recordTableId',
+        }),
       {
         wrapper: ({ children }) =>
           Wrapper({
@@ -114,7 +109,6 @@ describe('useUpsertRecord', () => {
         updateOneRecordMock,
         'recordId',
         'name',
-        'recordTableId',
       );
     });
 
@@ -124,7 +118,11 @@ describe('useUpsertRecord', () => {
 
   it('calls update record if pending record is empty', async () => {
     const { result } = renderHook(
-      () => useUpsertRecord({ objectNameSingular: 'person' }),
+      () =>
+        useUpsertRecord({
+          objectNameSingular: 'person',
+          recordTableId: 'recordTableId',
+        }),
       {
         wrapper: ({ children }) =>
           Wrapper({
@@ -140,7 +138,6 @@ describe('useUpsertRecord', () => {
         updateOneRecordMock,
         'recordId',
         'name',
-        'recordTableId',
       );
     });
 

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

@@ -1,24 +1,26 @@
-import { useResetRecoilState } from 'recoil';
-
 import { SOFT_FOCUS_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-table/constants/SoftFocusClickOutsideListenerId';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { useDragSelect } from '@/ui/utilities/drag-select/hooks/useDragSelect';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
 
+import { recordTablePendingRecordIdComponentState } from '@/object-record/record-table/states/recordTablePendingRecordIdComponentState';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
+import { useResetRecoilState } from 'recoil';
 import { useCloseCurrentTableCellInEditMode } from '../../hooks/internal/useCloseCurrentTableCellInEditMode';
 import { TableHotkeyScope } from '../../types/TableHotkeyScope';
 
 export const useCloseRecordTableCell = () => {
   const setHotkeyScope = useSetHotkeyScope();
   const { setDragSelectionStartEnabled } = useDragSelect();
-  const { pendingRecordIdState } = useRecordTableStates();
 
   const { toggleClickOutsideListener } = useClickOutsideListener(
     SOFT_FOCUS_CLICK_OUTSIDE_LISTENER_ID,
   );
 
   const closeCurrentTableCellInEditMode = useCloseCurrentTableCellInEditMode();
+  const pendingRecordIdState = useRecoilComponentCallbackStateV2(
+    recordTablePendingRecordIdComponentState,
+  );
   const resetRecordTablePendingRecordId =
     useResetRecoilState(pendingRecordIdState);
 

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

@@ -1,26 +1,30 @@
 import { useResetRecoilState } from 'recoil';
 
 import { SOFT_FOCUS_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-table/constants/SoftFocusClickOutsideListenerId';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { useDragSelect } from '@/ui/utilities/drag-select/hooks/useDragSelect';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
 
+import { recordTablePendingRecordIdComponentState } from '@/object-record/record-table/states/recordTablePendingRecordIdComponentState';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { useCloseCurrentTableCellInEditMode } from '../../hooks/internal/useCloseCurrentTableCellInEditMode';
 import { TableHotkeyScope } from '../../types/TableHotkeyScope';
 
-export const useCloseRecordTableCellV2 = (recordTableScopeId: string) => {
+export const useCloseRecordTableCellV2 = (recordTableId: string) => {
   const setHotkeyScope = useSetHotkeyScope();
   const { setDragSelectionStartEnabled } = useDragSelect();
-  const { pendingRecordIdState } = useRecordTableStates(recordTableScopeId);
 
   const { toggleClickOutsideListener } = useClickOutsideListener(
     SOFT_FOCUS_CLICK_OUTSIDE_LISTENER_ID,
   );
 
   const closeCurrentTableCellInEditMode =
-    useCloseCurrentTableCellInEditMode(recordTableScopeId);
+    useCloseCurrentTableCellInEditMode(recordTableId);
 
+  const pendingRecordIdState = useRecoilComponentCallbackStateV2(
+    recordTablePendingRecordIdComponentState,
+    recordTableId,
+  );
   const resetRecordTablePendingRecordId =
     useResetRecoilState(pendingRecordIdState);
 

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

@@ -1,10 +1,9 @@
 import { useCallback } from 'react';
-import { useRecoilValue } from 'recoil';
-
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 
 import { useMoveEditModeToTableCellPosition } from '../../hooks/internal/useMoveEditModeToCellPosition';
 
+import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
+import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2';
 import { useCurrentTableCellPosition } from './useCurrentCellPosition';
 
 export const useCurrentTableCellEditMode = () => {
@@ -12,10 +11,9 @@ export const useCurrentTableCellEditMode = () => {
 
   const currentTableCellPosition = useCurrentTableCellPosition();
 
-  const { isTableCellInEditModeFamilyState } = useRecordTableStates();
+  const isCurrentTableCellInEditMode = useRecoilComponentFamilyValueV2(
-
+    isTableCellInEditModeComponentFamilyState,
-  const isCurrentTableCellInEditMode = useRecoilValue(
+    currentTableCellPosition,
-    isTableCellInEditModeFamilyState(currentTableCellPosition),
   );
 
   const setCurrentTableCellInEditMode = useCallback(() => {

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

@@ -1,16 +1,13 @@
-import { useRecoilValue } from 'recoil';
+import { isSoftFocusOnTableCellComponentFamilyState } from '@/object-record/record-table/states/isSoftFocusOnTableCellComponentFamilyState';
-
+import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
-
 import { useCurrentTableCellPosition } from './useCurrentCellPosition';
 
 export const useIsSoftFocusOnCurrentTableCell = () => {
   const currentTableCellPosition = useCurrentTableCellPosition();
 
-  const { isSoftFocusOnTableCellFamilyState } = useRecordTableStates();
+  const isSoftFocusOnTableCell = useRecoilComponentFamilyValueV2(
-
+    isSoftFocusOnTableCellComponentFamilyState,
-  const isSoftFocusOnTableCell = useRecoilValue(
+    currentTableCellPosition,
-    isSoftFocusOnTableCellFamilyState(currentTableCellPosition),
   );
 
   return isSoftFocusOnTableCell;

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

@@ -1,20 +1,27 @@
 import { useRecoilCallback } from 'recoil';
 
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { useSetSoftFocus } from '@/object-record/record-table/record-table-cell/hooks/useSetSoftFocus';
 import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
 import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 
+import { currentTableCellInEditModePositionComponentState } from '@/object-record/record-table/states/currentTableCellInEditModePositionComponentState';
+import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { TableHotkeyScope } from '../../types/TableHotkeyScope';
 
 export const useMoveSoftFocusToCellOnHoverV2 = (recordTableId: string) => {
   const setSoftFocus = useSetSoftFocus(recordTableId);
 
-  const {
+  const currentTableCellInEditModePositionState =
-    currentTableCellInEditModePositionState,
+    useRecoilComponentCallbackStateV2(
-    isTableCellInEditModeFamilyState,
+      currentTableCellInEditModePositionComponentState,
-  } = useRecordTableStates(recordTableId);
+      recordTableId,
+    );
+  const isTableCellInEditModeFamilyState = useRecoilComponentCallbackStateV2(
+    isTableCellInEditModeComponentFamilyState,
+    recordTableId,
+  );
 
   const moveSoftFocusToCell = useRecoilCallback(
     ({ snapshot }) =>

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

@@ -1,20 +1,25 @@
 import { useRecoilCallback } from 'recoil';
 
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 
 import { TableHotkeyScope } from '../../types/TableHotkeyScope';
 
+import { currentTableCellInEditModePositionComponentState } from '@/object-record/record-table/states/currentTableCellInEditModePositionComponentState';
+import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { useSetSoftFocusOnCurrentTableCell } from './useSetSoftFocusOnCurrentTableCell';
 
 export const useMoveSoftFocusToCurrentCellOnHover = () => {
   const setSoftFocusOnCurrentTableCell = useSetSoftFocusOnCurrentTableCell();
 
-  const {
+  const currentTableCellInEditModePositionState =
-    currentTableCellInEditModePositionState,
+    useRecoilComponentCallbackStateV2(
-    isTableCellInEditModeFamilyState,
+      currentTableCellInEditModePositionComponentState,
-  } = useRecordTableStates();
+    );
+  const isTableCellInEditModeFamilyState = useRecoilComponentCallbackStateV2(
+    isTableCellInEditModeComponentFamilyState,
+  );
 
   return useRecoilCallback(
     ({ snapshot }) =>

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

@@ -1,16 +1,20 @@
 import { useRecoilCallback } from 'recoil';
 
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { useSetSoftFocusPosition } from '@/object-record/record-table/hooks/internal/useSetSoftFocusPosition';
 import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 
+import { isSoftFocusActiveComponentState } from '@/object-record/record-table/states/isSoftFocusActiveComponentState';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { TableHotkeyScope } from '../../types/TableHotkeyScope';
 
 export const useSetSoftFocus = (recordTableId?: string) => {
   const setSoftFocusPosition = useSetSoftFocusPosition(recordTableId);
 
-  const { isSoftFocusActiveState } = useRecordTableStates(recordTableId);
+  const isSoftFocusActiveState = useRecoilComponentCallbackStateV2(
+    isSoftFocusActiveComponentState,
+    recordTableId,
+  );
 
   const setHotkeyScope = useSetHotkeyScope();
 

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

@@ -5,10 +5,9 @@ import { recordIndexActionMenuDropdownPositionComponentState } from '@/action-me
 import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
 import { isBottomBarOpenedComponentState } from '@/ui/layout/bottom-bar/states/isBottomBarOpenedComponentState';
 import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
-import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
-import { extractComponentFamilyState } from '@/ui/utilities/state/component-state/utils/extractComponentFamilyState';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
 
 export const useTriggerActionMenuDropdown = ({
@@ -20,13 +19,16 @@ export const useTriggerActionMenuDropdown = ({
     ActionMenuComponentInstanceContext,
   );
 
+  const isRowSelectedFamilyState = useRecoilComponentCallbackStateV2(
+    isRowSelectedComponentFamilyState,
+    recordTableId,
+  );
+
   const triggerActionMenuDropdown = useRecoilCallback(
     ({ set, snapshot }) =>
       (event: React.MouseEvent, recordId: string) => {
         event.preventDefault();
 
-        const tableScopeId = getScopeIdFromComponentId(recordTableId);
-
         set(
           extractComponentState(
             recordIndexActionMenuDropdownPositionComponentState,
@@ -38,11 +40,6 @@ export const useTriggerActionMenuDropdown = ({
           },
         );
 
-        const isRowSelectedFamilyState = extractComponentFamilyState(
-          isRowSelectedComponentFamilyState,
-          tableScopeId,
-        );
-
         const isRowSelected = getSnapshotValue(
           snapshot,
           isRowSelectedFamilyState(recordId),
@@ -66,7 +63,7 @@ export const useTriggerActionMenuDropdown = ({
         set(isActionBarOpenState, false);
         set(isActionMenuDropdownOpenState, true);
       },
-    [actionMenuInstanceId, recordTableId],
+    [actionMenuInstanceId, isRowSelectedFamilyState],
   );
 
   return { triggerActionMenuDropdown };

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

@@ -7,27 +7,29 @@ import { recordFieldInputDraftValueComponentSelector } from '@/object-record/rec
 import { recordTablePendingRecordIdComponentState } from '@/object-record/record-table/states/recordTablePendingRecordIdComponentState';
 import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { extractComponentSelector } from '@/ui/utilities/state/component-state/utils/extractComponentSelector';
-import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
 import { isDefined } from '~/utils/isDefined';
 
 export const useUpsertRecord = ({
   objectNameSingular,
+  recordTableId,
 }: {
   objectNameSingular: string;
+  recordTableId: string;
 }) => {
   const { createOneRecord } = useCreateOneRecord({
     objectNameSingular,
   });
 
+  const recordTablePendingRecordIdState = useRecoilComponentCallbackStateV2(
+    recordTablePendingRecordIdComponentState,
+    recordTableId,
+  );
+
   const upsertRecord = useRecoilCallback(
     ({ snapshot }) =>
-      (
+      (persistField: () => void, recordId: string, fieldName: string) => {
-        persistField: () => void,
-        recordId: string,
-        fieldName: string,
-        recordTableId: string,
-      ) => {
         const objectMetadataItems = snapshot
           .getLoadable(objectMetadataItemsState)
           .getValue();
@@ -43,13 +45,6 @@ export const useUpsertRecord = ({
         const labelIdentifierFieldMetadataItem =
           getLabelIdentifierFieldMetadataItem(foundObjectMetadataItem);
 
-        const tableScopeId = getScopeIdFromComponentId(recordTableId);
-
-        const recordTablePendingRecordIdState = extractComponentState(
-          recordTablePendingRecordIdComponentState,
-          tableScopeId,
-        );
-
         const recordTablePendingRecordId = getSnapshotValue(
           snapshot,
           recordTablePendingRecordIdState,
@@ -75,7 +70,7 @@ export const useUpsertRecord = ({
           persistField();
         }
       },
-    [createOneRecord, objectNameSingular],
+    [createOneRecord, objectNameSingular, recordTablePendingRecordIdState],
   );
 
   return { upsertRecord };

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

@@ -4,8 +4,8 @@ import { MOBILE_VIEWPORT, useIcons } from 'twenty-ui';
 
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
 import { isRecordTableScrolledLeftComponentState } from '@/object-record/record-table/states/isRecordTableScrolledLeftComponentState';
-import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { ColumnDefinition } from '../../types/ColumnDefinition';
 
 type RecordTableColumnHeadProps = {
@@ -55,7 +55,7 @@ export const RecordTableColumnHead = ({
   const { getIcon } = useIcons();
   const Icon = getIcon(column.iconName);
 
-  const isRecordTableScrolledLeft = useRecoilComponentValue(
+  const isRecordTableScrolledLeft = useRecoilComponentValueV2(
     isRecordTableScrolledLeftComponentState,
   );
 

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

@@ -1,4 +1,3 @@
-import { useRecoilValue } from 'recoil';
 import {
   IconArrowLeft,
   IconArrowRight,
@@ -8,12 +7,15 @@ import {
 } from 'twenty-ui';
 
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
+import { onToggleColumnFilterComponentState } from '@/object-record/record-table/states/onToggleColumnFilterComponentState';
+import { onToggleColumnSortComponentState } from '@/object-record/record-table/states/onToggleColumnSortComponentState';
+import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useTableColumns } from '../../hooks/useTableColumns';
 import { ColumnDefinition } from '../../types/ColumnDefinition';
 
@@ -24,13 +26,9 @@ export type RecordTableColumnHeadDropdownMenuProps = {
 export const RecordTableColumnHeadDropdownMenu = ({
   column,
 }: RecordTableColumnHeadDropdownMenuProps) => {
-  const {
+  const visibleTableColumns = useRecoilComponentValueV2(
-    visibleTableColumnsSelector,
+    visibleTableColumnsComponentSelector,
-    onToggleColumnFilterState,
+  );
-    onToggleColumnSortState,
-  } = useRecordTableStates();
-
-  const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector());
 
   const secondVisibleColumn = visibleTableColumns[1];
   const canMove = column.isLabelIdentifier !== true;
@@ -67,8 +65,12 @@ export const RecordTableColumnHeadDropdownMenu = ({
     handleColumnVisibilityChange(column);
   };
 
-  const onToggleColumnFilter = useRecoilValue(onToggleColumnFilterState);
+  const onToggleColumnFilter = useRecoilComponentValueV2(
-  const onToggleColumnSort = useRecoilValue(onToggleColumnSortState);
+    onToggleColumnFilterComponentState,
+  );
+  const onToggleColumnSort = useRecoilComponentValueV2(
+    onToggleColumnSortComponentState,
+  );
 
   const handleSortClick = () => {
     closeDropdown();

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

@@ -1,12 +1,12 @@
 import styled from '@emotion/styled';
-import { useRecoilValue } from 'recoil';
 import { MOBILE_VIEWPORT } from 'twenty-ui';
 
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { RecordTableHeaderCell } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderCell';
 import { RecordTableHeaderCheckboxColumn } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn';
 import { RecordTableHeaderDragDropColumn } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderDragDropColumn';
 import { RecordTableHeaderLastColumn } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderLastColumn';
+import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 
 const StyledTableHead = styled.thead`
   cursor: pointer;
@@ -75,9 +75,9 @@ export const RecordTableHeader = ({
 }: {
   objectMetadataNameSingular: string;
 }) => {
-  const { visibleTableColumnsSelector } = useRecordTableStates();
+  const visibleTableColumns = useRecoilComponentValueV2(
-
+    visibleTableColumnsComponentSelector,
-  const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector());
+  );
 
   return (
     <StyledTableHead id="record-table-header" data-select-disable>

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

@@ -1,21 +1,24 @@
 import styled from '@emotion/styled';
 import { useCallback, useMemo, useState } from 'react';
-import { useRecoilCallback, useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilCallback } from 'recoil';
 import { IconPlus, LightIconButton } from 'twenty-ui';
 
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { isObjectMetadataReadOnly } from '@/object-metadata/utils/isObjectMetadataReadOnly';
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { useCreateNewTableRecord } from '@/object-record/record-table/hooks/useCreateNewTableRecords';
 import { useTableColumns } from '@/object-record/record-table/hooks/useTableColumns';
 import { RecordTableColumnHeadWithDropdown } from '@/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown';
 import { isRecordTableScrolledLeftComponentState } from '@/object-record/record-table/states/isRecordTableScrolledLeftComponentState';
+import { resizeFieldOffsetComponentState } from '@/object-record/record-table/states/resizeFieldOffsetComponentState';
+import { tableColumnsComponentState } from '@/object-record/record-table/states/tableColumnsComponentState';
 import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
 import { useTrackPointer } from '@/ui/utilities/pointer-event/hooks/useTrackPointer';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
-import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
+import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { mapArrayToObject } from '~/utils/array/mapArrayToObject';
 
 const COLUMN_MIN_WIDTH = 104;
@@ -96,17 +99,19 @@ export const RecordTableHeaderCell = ({
   column: ColumnDefinition<FieldMetadata>;
   objectMetadataNameSingular: string;
 }) => {
-  const { resizeFieldOffsetState, tableColumnsState } = useRecordTableStates();
-
   const { objectMetadataItem } = useObjectMetadataItem({
     objectNameSingular: objectMetadataNameSingular,
   });
 
-  const [resizeFieldOffset, setResizeFieldOffset] = useRecoilState(
+  const resizeFieldOffsetState = useRecoilComponentCallbackStateV2(
-    resizeFieldOffsetState,
+    resizeFieldOffsetComponentState,
   );
 
-  const tableColumns = useRecoilValue(tableColumnsState);
+  const [resizeFieldOffset, setResizeFieldOffset] = useRecoilComponentStateV2(
+    resizeFieldOffsetComponentState,
+  );
+
+  const tableColumns = useRecoilComponentValueV2(tableColumnsComponentState);
   const tableColumnsByKey = useMemo(
     () =>
       mapArrayToObject(tableColumns, ({ fieldMetadataId }) => fieldMetadataId),
@@ -181,7 +186,7 @@ export const RecordTableHeaderCell = ({
     onMouseUp: handleResizeHandlerEnd,
   });
 
-  const isRecordTableScrolledLeft = useRecoilComponentValue(
+  const isRecordTableScrolledLeft = useRecoilComponentValueV2(
     isRecordTableScrolledLeftComponentState,
   );
 

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

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
-import { useRecoilValue } from 'recoil';
 
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
+import { allRowsSelectedStatusComponentSelector } from '@/object-record/record-table/states/selectors/allRowsSelectedStatusComponentSelector';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { Checkbox } from 'twenty-ui';
 
 const StyledContainer = styled.div`
@@ -23,9 +23,9 @@ const StyledColumnHeaderCell = styled.th`
 `;
 
 export const RecordTableHeaderCheckboxColumn = () => {
-  const { allRowsSelectedStatusSelector } = useRecordTableStates();
+  const allRowsSelectedStatus = useRecoilComponentValueV2(
-
+    allRowsSelectedStatusComponentSelector,
-  const allRowsSelectedStatus = useRecoilValue(allRowsSelectedStatusSelector());
+  );
   const { selectAllRows, resetTableRowSelection, setHasUserSelectedAllRows } =
     useRecordTable();
 

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

@@ -1,14 +1,14 @@
 import { Theme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useContext } from 'react';
-import { useRecoilValue } from 'recoil';
 import { IconPlus, ThemeContext } from 'twenty-ui';
 
 import { HIDDEN_TABLE_COLUMN_DROPDOWN_ID } from '@/object-record/record-table/constants/HiddenTableColumnDropdownId';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { RecordTableHeaderPlusButtonContent } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent';
+import { hiddenTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { useScrollWrapperScopedRef } from '@/ui/utilities/scroll/hooks/useScrollWrapperScopedRef';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 
 const StyledPlusIconHeaderCell = styled.th<{
   theme: Theme;
@@ -58,9 +58,9 @@ export const RecordTableHeaderLastColumn = () => {
     (scrollWrapper.ref.current?.clientWidth ?? 0) <
     (scrollWrapper.ref.current?.scrollWidth ?? 0);
 
-  const { hiddenTableColumnsSelector } = useRecordTableStates();
+  const hiddenTableColumns = useRecoilComponentValueV2(
-
+    hiddenTableColumnsComponentSelector,
-  const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector());
+  );
 
   return (
     <StyledPlusIconHeaderCell

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

@@ -1,27 +1,28 @@
 import { useCallback, useContext } from 'react';
 import { useLocation } from 'react-router-dom';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { useSetRecoilState } from 'recoil';
 import { IconSettings, UndecoratedLink, useIcons } from 'twenty-ui';
 
 import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug';
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
 import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { useTableColumns } from '@/object-record/record-table/hooks/useTableColumns';
+import { hiddenTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector';
 import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 
 export const RecordTableHeaderPlusButtonContent = () => {
   const { objectMetadataItem } = useContext(RecordTableContext);
   const { closeDropdown } = useDropdown();
 
-  const { hiddenTableColumnsSelector } = useRecordTableStates();
+  const hiddenTableColumns = useRecoilComponentValueV2(
-
+    hiddenTableColumnsComponentSelector,
-  const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector());
+  );
 
   const { getIcon } = useIcons();
   const { handleColumnVisibilityChange } = useTableColumns();

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

@@ -1,15 +1,16 @@
 import { useContext } from 'react';
-import { useRecoilValue } from 'recoil';
 
-import { RecordTableTd } from '@/object-record/record-table/record-table-cell/components/RecordTableTd';
 import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+import { RecordTableTd } from '@/object-record/record-table/record-table-cell/components/RecordTableTd';
+import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 
 export const RecordTableCellsEmpty = () => {
   const { isSelected } = useContext(RecordTableRowContext);
-  const { visibleTableColumnsSelector } = useRecordTableStates();
 
-  const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector());
+  const visibleTableColumns = useRecoilComponentValueV2(
+    visibleTableColumnsComponentSelector,
+  );
 
   return visibleTableColumns.map((column) => (
     <RecordTableTd isSelected={isSelected} key={column.fieldMetadataId} />

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

@@ -1,17 +1,18 @@
 import { useContext } from 'react';
-import { useRecoilValue } from 'recoil';
 
 import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { RecordTableCell } from '@/object-record/record-table/record-table-cell/components/RecordTableCell';
 import { RecordTableCellWrapper } from '@/object-record/record-table/record-table-cell/components/RecordTableCellWrapper';
 import { RecordTableTd } from '@/object-record/record-table/record-table-cell/components/RecordTableTd';
+import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 
 export const RecordTableCellsVisible = () => {
   const { isDragging, isSelected } = useContext(RecordTableRowContext);
-  const { visibleTableColumnsSelector } = useRecordTableStates();
 
-  const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector());
+  const visibleTableColumns = useRecoilComponentValueV2(
+    visibleTableColumnsComponentSelector,
+  );
 
   const tableColumnsAfterFirst = visibleTableColumns.slice(1);
 

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

@@ -1,11 +1,11 @@
-import { useRecoilValue } from 'recoil';
-
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { RecordTableRow } from '@/object-record/record-table/record-table-row/components/RecordTableRow';
+import { recordTablePendingRecordIdComponentState } from '@/object-record/record-table/states/recordTablePendingRecordIdComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 
 export const RecordTablePendingRow = () => {
-  const { pendingRecordIdState } = useRecordTableStates();
+  const pendingRecordId = useRecoilComponentValueV2(
-  const pendingRecordId = useRecoilValue(pendingRecordIdState);
+    recordTablePendingRecordIdComponentState,
+  );
 
   if (!pendingRecordId) return <></>;
 

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

@@ -2,15 +2,15 @@ import { useTheme } from '@emotion/react';
 import { Draggable } from '@hello-pangea/dnd';
 import { ReactNode, useContext, useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
-import { useRecoilValue } from 'recoil';
 
 import { getBasePathToShowPage } from '@/object-metadata/utils/getBasePathToShowPage';
 import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
 import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
 import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { RecordTableTr } from '@/object-record/record-table/record-table-row/components/RecordTableTr';
+import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
 import { RecordTableWithWrappersScrollWrapperContext } from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts';
+import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2';
 
 export const RecordTableRowWrapper = ({
   recordId,
@@ -28,8 +28,10 @@ export const RecordTableRowWrapper = ({
 
   const theme = useTheme();
 
-  const { isRowSelectedFamilyState } = useRecordTableStates();
+  const currentRowSelected = useRecoilComponentFamilyValueV2(
-  const currentRowSelected = useRecoilValue(isRowSelectedFamilyState(recordId));
+    isRowSelectedComponentFamilyState,
+    recordId,
+  );
 
   const scrollWrapperRef = useContext(
     RecordTableWithWrappersScrollWrapperContext,

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

@@ -2,13 +2,16 @@ import { useContext } from 'react';
 import { useRecoilCallback } from 'recoil';
 
 import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
-import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 
 export const useSetCurrentRowSelected = () => {
   const { recordId } = useContext(RecordTableRowContext);
 
-  const { isRowSelectedFamilyState } = useRecordTableStates();
+  const isRowSelectedFamilyState = useRecoilComponentCallbackStateV2(
+    isRowSelectedComponentFamilyState,
+  );
 
   const setCurrentRowSelected = useRecoilCallback(
     ({ set, snapshot }) =>

packages/twenty-front/src/modules/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState.ts

@@ -1,7 +1,9 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
 
 export const hasUserSelectedAllRowsComponentState =
-  createComponentState<boolean>({
+  createComponentStateV2<boolean>({
     key: 'hasUserSelectedAllRowsFamilyState',
     defaultValue: false,
+    componentInstanceContext: RecordTableComponentInstanceContext,
   });

packages/twenty-front/src/modules/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState.ts

@@ -1,9 +1,11 @@
-import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState';
+import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
+import { createComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentFamilyStateV2';
 
-export const isRowSelectedComponentFamilyState = createComponentFamilyState<
+export const isRowSelectedComponentFamilyState = createComponentFamilyStateV2<
   boolean,
   string
 >({
   key: 'isRowSelectedComponentFamilyState',
   defaultValue: false,
+  componentInstanceContext: RecordTableComponentInstanceContext,
 });

packages/twenty-front/src/modules/object-record/record-table/scopes/RecordTableScope.tsx

@@ -1,31 +0,0 @@
-import { ReactNode } from 'react';
-
-import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
-import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
-
-import { RecordTableScopeInternalContext } from './scope-internal-context/RecordTableScopeInternalContext';
-import { RecordTableScopeInitEffect } from './RecordTableScopeInitEffect';
-
-type RecordTableScopeProps = {
-  children: ReactNode;
-  recordTableScopeId: string;
-  onColumnsChange: (columns: ColumnDefinition<FieldMetadata>[]) => void;
-};
-
-export const RecordTableScope = ({
-  children,
-  recordTableScopeId,
-  onColumnsChange,
-}: RecordTableScopeProps) => {
-  return (
-    <RecordTableScopeInternalContext.Provider
-      value={{
-        scopeId: recordTableScopeId,
-        onColumnsChange,
-      }}
-    >
-      <RecordTableScopeInitEffect onColumnsChange={onColumnsChange} />
-      {children}
-    </RecordTableScopeInternalContext.Provider>
-  );
-};

packages/twenty-front/src/modules/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext.ts

@@ -1,13 +0,0 @@
-import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
-import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext';
-import { RecoilComponentStateKey } from '@/ui/utilities/state/component-state/types/RecoilComponentStateKey';
-
-import { ColumnDefinition } from '../../types/ColumnDefinition';
-
-// TODO: separate scope contexts from event contexts
-type RecordTableScopeInternalContextProps = RecoilComponentStateKey & {
-  onColumnsChange: (columns: ColumnDefinition<FieldMetadata>[]) => void;
-};
-
-export const RecordTableScopeInternalContext =
-  createScopeInternalContext<RecordTableScopeInternalContextProps>();

packages/twenty-front/src/modules/object-record/record-table/states/availableTableColumnsComponentState.ts

@@ -1,11 +1,13 @@
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
 
+import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
 import { ColumnDefinition } from '../types/ColumnDefinition';
 
-export const availableTableColumnsComponentState = createComponentState<
+export const availableTableColumnsComponentState = createComponentStateV2<
   ColumnDefinition<FieldMetadata>[]
 >({
   key: 'availableTableColumnsComponentState',
   defaultValue: [],
+  componentInstanceContext: RecordTableComponentInstanceContext,
 });

packages/twenty-front/src/modules/object-record/record-table/states/context/RecordTableComponentInstanceContext.ts

@@ -0,0 +1,13 @@
+import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
+
+import { ComponentStateKeyV2 } from '@/ui/utilities/state/component-state/types/ComponentStateKeyV2';
+import { createComponentInstanceContext } from '@/ui/utilities/state/component-state/utils/createComponentInstanceContext';
+import { ColumnDefinition } from '../../types/ColumnDefinition';
+
+// TODO: separate scope contexts from event contexts
+type RecordTableComponentInstanceContextProps = ComponentStateKeyV2 & {
+  onColumnsChange: (columns: ColumnDefinition<FieldMetadata>[]) => void;
+};
+
+export const RecordTableComponentInstanceContext =
+  createComponentInstanceContext<RecordTableComponentInstanceContextProps>();

packages/twenty-front/src/modules/object-record/record-table/states/currentTableCellInEditModePositionComponentState.ts

@@ -1,12 +1,13 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
-
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
 import { TableCellPosition } from '../types/TableCellPosition';
 
 export const currentTableCellInEditModePositionComponentState =
-  createComponentState<TableCellPosition>({
+  createComponentStateV2<TableCellPosition>({
     key: 'currentTableCellInEditModePositionComponentState',
     defaultValue: {
       row: 0,
       column: 1,
     },
+    componentInstanceContext: RecordTableComponentInstanceContext,
   });

packages/twenty-front/src/modules/object-record/record-table/states/hasRecordTableFetchedAllRecordsComponentStateV2.ts

@@ -1,9 +1,9 @@
-import { RecordTableScopeInternalContext } from '@/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext';
+import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
-import { createComponentStateV2_alpha } from '@/ui/utilities/state/component-state/utils/createComponentStateV2Alpha';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
 
 export const hasRecordTableFetchedAllRecordsComponentStateV2 =
-  createComponentStateV2_alpha<boolean>({
+  createComponentStateV2<boolean>({
     key: 'hasRecordTableFetchedAllRecordsComponentStateV2',
-    componentContext: RecordTableScopeInternalContext,
+    componentInstanceContext: RecordTableComponentInstanceContext,
     defaultValue: false,
   });

packages/twenty-front/src/modules/object-record/record-table/states/isRecordTableInitialLoadingComponentState.ts

@@ -1,7 +1,9 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
 
 export const isRecordTableInitialLoadingComponentState =
-  createComponentState<boolean>({
+  createComponentStateV2<boolean>({
     key: 'isRecordTableInitialLoadingComponentState',
     defaultValue: true,
+    componentInstanceContext: RecordTableComponentInstanceContext,
   });

packages/twenty-front/src/modules/object-record/record-table/states/isRecordTableScrolledLeftComponentState.ts

@@ -1,9 +1,9 @@
-import { RecordTableScopeInternalContext } from '@/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext';
+import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
-import { createComponentStateV2_alpha } from '@/ui/utilities/state/component-state/utils/createComponentStateV2Alpha';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
 
 export const isRecordTableScrolledLeftComponentState =
-  createComponentStateV2_alpha<boolean>({
+  createComponentStateV2<boolean>({
     key: 'isRecordTableScrolledLeftComponentState',
-    componentContext: RecordTableScopeInternalContext,
+    componentInstanceContext: RecordTableComponentInstanceContext,
     defaultValue: true,
   });

packages/twenty-front/src/modules/object-record/record-table/states/isSoftDeleteFilterActiveComponentState.ts

@@ -1,7 +1,9 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
 
 export const isSoftDeleteFilterActiveComponentState =
-  createComponentState<boolean>({
+  createComponentStateV2<boolean>({
     key: 'isSoftDeleteFilterActiveComponentState',
     defaultValue: false,
+    componentInstanceContext: RecordTableComponentInstanceContext,
   });

packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusActiveComponentState.ts

@@ -1,6 +1,8 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
 
-export const isSoftFocusActiveComponentState = createComponentState<boolean>({
+export const isSoftFocusActiveComponentState = createComponentStateV2<boolean>({
   key: 'isSoftFocusActiveComponentState',
   defaultValue: false,
+  componentInstanceContext: RecordTableComponentInstanceContext,
 });

packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusOnTableCellComponentFamilyState.ts

@@ -1,9 +1,10 @@
-import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState';
+import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
-
+import { createComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentFamilyStateV2';
 import { TableCellPosition } from '../types/TableCellPosition';
 
 export const isSoftFocusOnTableCellComponentFamilyState =
-  createComponentFamilyState<boolean, TableCellPosition>({
+  createComponentFamilyStateV2<boolean, TableCellPosition>({
     key: 'isSoftFocusOnTableCellComponentFamilyState',
     defaultValue: false,
+    componentInstanceContext: RecordTableComponentInstanceContext,
   });

packages/twenty-front/src/modules/object-record/record-table/states/isTableCellInEditModeComponentFamilyState.ts

@@ -1,9 +1,10 @@
-import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState';
+import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
-
+import { createComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentFamilyStateV2';
 import { TableCellPosition } from '../types/TableCellPosition';
 
 export const isTableCellInEditModeComponentFamilyState =
-  createComponentFamilyState<boolean, TableCellPosition>({
+  createComponentFamilyStateV2<boolean, TableCellPosition>({
     key: 'isTableCellInEditModeComponentFamilyState',
     defaultValue: false,
+    componentInstanceContext: RecordTableComponentInstanceContext,
   });

packages/twenty-front/src/modules/object-record/record-table/states/numberOfTableRowsComponentState.ts

@@ -1,6 +1,8 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
 
-export const numberOfTableRowsComponentState = createComponentState<number>({
+export const numberOfTableRowsComponentState = createComponentStateV2<number>({
   key: 'numberOfTableRowsComponentState',
   defaultValue: 0,
+  componentInstanceContext: RecordTableComponentInstanceContext,
 });

packages/twenty-front/src/modules/object-record/record-table/states/onColumnsChangeComponentState.ts

@@ -1,10 +1,12 @@
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
+import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
 import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
 
-export const onColumnsChangeComponentState = createComponentState<
+export const onColumnsChangeComponentState = createComponentStateV2<
   ((columns: ColumnDefinition<FieldMetadata>[]) => void) | undefined
 >({
   key: 'onColumnsChangeComponentState',
   defaultValue: undefined,
+  componentInstanceContext: RecordTableComponentInstanceContext,
 });

packages/twenty-front/src/modules/object-record/record-table/states/onEntityCountChangeComponentState.ts

@@ -1,8 +1,10 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
 
-export const onEntityCountChangeComponentState = createComponentState<
+export const onEntityCountChangeComponentState = createComponentStateV2<
   ((entityCount?: number) => void) | undefined
 >({
   key: 'onEntityCountChangeComponentState',
   defaultValue: undefined,
+  componentInstanceContext: RecordTableComponentInstanceContext,
 });

packages/twenty-front/src/modules/object-record/record-table/states/onToggleColumnFilterComponentState.ts

@@ -1,8 +1,10 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
 
-export const onToggleColumnFilterComponentState = createComponentState<
+export const onToggleColumnFilterComponentState = createComponentStateV2<
   ((fieldMetadataId: string) => void) | undefined
 >({
   key: 'onToggleColumnFilterComponentState',
   defaultValue: undefined,
+  componentInstanceContext: RecordTableComponentInstanceContext,
 });

packages/twenty-front/src/modules/object-record/record-table/states/onToggleColumnSortComponentState.ts

@@ -1,8 +1,10 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
 
-export const onToggleColumnSortComponentState = createComponentState<
+export const onToggleColumnSortComponentState = createComponentStateV2<
   ((fieldMetadataId: string) => void) | undefined
 >({
   key: 'onToggleColumnSortComponentState',
   defaultValue: undefined,
+  componentInstanceContext: RecordTableComponentInstanceContext,
 });

packages/twenty-front/src/modules/object-record/record-table/states/recordTablePendingRecordIdComponentState.ts

@@ -1,8 +1,10 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
 
-export const recordTablePendingRecordIdComponentState = createComponentState<
+export const recordTablePendingRecordIdComponentState = createComponentStateV2<
   string | null
 >({
   key: 'recordTablePendingRecordIdState',
   defaultValue: null,
+  componentInstanceContext: RecordTableComponentInstanceContext,
 });

packages/twenty-front/src/modules/object-record/record-table/states/resizeFieldOffsetComponentState.ts

@@ -1,6 +1,8 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
 
-export const resizeFieldOffsetComponentState = createComponentState<number>({
+export const resizeFieldOffsetComponentState = createComponentStateV2<number>({
   key: 'resizeFieldOffsetComponentState',
   defaultValue: 0,
+  componentInstanceContext: RecordTableComponentInstanceContext,
 });

packages/twenty-front/src/modules/object-record/record-table/states/selectors/allRowsSelectedStatusComponentSelector.ts

@@ -1,19 +1,23 @@
 import { selectedRowIdsComponentSelector } from '@/object-record/record-table/states/selectors/selectedRowIdsComponentSelector';
 import { tableRowIdsComponentState } from '@/object-record/record-table/states/tableRowIdsComponentState';
-import { createComponentReadOnlySelector } from '@/ui/utilities/state/component-state/utils/createComponentReadOnlySelector';
 
+import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
+import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2';
 import { AllRowsSelectedStatus } from '../../types/AllRowSelectedStatus';
 
 export const allRowsSelectedStatusComponentSelector =
-  createComponentReadOnlySelector<AllRowsSelectedStatus>({
+  createComponentSelectorV2<AllRowsSelectedStatus>({
     key: 'allRowsSelectedStatusComponentSelector',
+    componentInstanceContext: RecordTableComponentInstanceContext,
     get:
-      ({ scopeId }) =>
+      ({ instanceId }) =>
       ({ get }) => {
-        const tableRowIds = get(tableRowIdsComponentState({ scopeId }));
+        const tableRowIds = get(
+          tableRowIdsComponentState.atomFamily({ instanceId }),
+        );
 
         const selectedRowIds = get(
-          selectedRowIdsComponentSelector({ scopeId }),
+          selectedRowIdsComponentSelector.selectorFamily({ instanceId }),
         );
 
         const numberOfSelectedRows = selectedRowIds.length;

packages/twenty-front/src/modules/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector.ts

@@ -1,38 +1,41 @@
 import { availableTableColumnsComponentState } from '@/object-record/record-table/states/availableTableColumnsComponentState';
+import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
 import { tableColumnsComponentState } from '@/object-record/record-table/states/tableColumnsComponentState';
-import { createComponentReadOnlySelector } from '@/ui/utilities/state/component-state/utils/createComponentReadOnlySelector';
+import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2';
 import { mapArrayToObject } from '~/utils/array/mapArrayToObject';
 
-export const hiddenTableColumnsComponentSelector =
+export const hiddenTableColumnsComponentSelector = createComponentSelectorV2({
-  createComponentReadOnlySelector({
+  key: 'hiddenTableColumnsComponentSelector',
-    key: 'hiddenTableColumnsComponentSelector',
+  componentInstanceContext: RecordTableComponentInstanceContext,
-    get:
+  get:
-      ({ scopeId }) =>
+    ({ instanceId }) =>
-      ({ get }) => {
+    ({ get }) => {
-        const tableColumns = get(tableColumnsComponentState({ scopeId }));
+      const tableColumns = get(
-        const availableColumns = get(
+        tableColumnsComponentState.atomFamily({ instanceId }),
-          availableTableColumnsComponentState({ scopeId }),
+      );
-        );
+      const availableColumns = get(
-        const tableColumnsByKey = mapArrayToObject(
+        availableTableColumnsComponentState.atomFamily({ instanceId }),
-          tableColumns,
+      );
-          ({ fieldMetadataId }) => fieldMetadataId,
+      const tableColumnsByKey = mapArrayToObject(
-        );
+        tableColumns,
+        ({ fieldMetadataId }) => fieldMetadataId,
+      );
 
-        const hiddenColumns = availableColumns
+      const hiddenColumns = availableColumns
-          .filter(
+        .filter(
-            ({ fieldMetadataId }) =>
+          ({ fieldMetadataId }) =>
-              !tableColumnsByKey[fieldMetadataId]?.isVisible,
+            !tableColumnsByKey[fieldMetadataId]?.isVisible,
-          )
+        )
-          .map((availableColumn) => {
+        .map((availableColumn) => {
-            const { fieldMetadataId } = availableColumn;
+          const { fieldMetadataId } = availableColumn;
-            const existingTableColumn = tableColumnsByKey[fieldMetadataId];
+          const existingTableColumn = tableColumnsByKey[fieldMetadataId];
 
-            return {
+          return {
-              ...(existingTableColumn || availableColumn),
+            ...(existingTableColumn || availableColumn),
-              isVisible: false,
+            isVisible: false,
-            };
+          };
-          });
+        });
 
-        return hiddenColumns;
+      return hiddenColumns;
-      },
+    },
-  });
+});

packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfTableColumnsComponentSelector.ts

@@ -1,11 +1,12 @@
+import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
 import { tableColumnsComponentState } from '@/object-record/record-table/states/tableColumnsComponentState';
-import { createComponentReadOnlySelector } from '@/ui/utilities/state/component-state/utils/createComponentReadOnlySelector';
+import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2';
 
-export const numberOfTableColumnsComponentSelector =
+export const numberOfTableColumnsComponentSelector = createComponentSelectorV2({
-  createComponentReadOnlySelector({
+  key: 'numberOfTableColumnsComponentSelector',
-    key: 'numberOfTableColumnsComponentSelector',
+  componentInstanceContext: RecordTableComponentInstanceContext,
-    get:
+  get:
-      ({ scopeId }) =>
+    ({ instanceId }) =>
-      ({ get }) =>
+    ({ get }) =>
-        get(tableColumnsComponentState({ scopeId })).length,
+      get(tableColumnsComponentState.atomFamily({ instanceId })).length,
-  });
+});

packages/twenty-front/src/modules/object-record/record-table/states/selectors/selectedRowIdsComponentSelector.ts

@@ -1,21 +1,23 @@
 import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
+import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
 import { tableRowIdsComponentState } from '@/object-record/record-table/states/tableRowIdsComponentState';
-import { createComponentReadOnlySelector } from '@/ui/utilities/state/component-state/utils/createComponentReadOnlySelector';
+import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2';
 
-export const selectedRowIdsComponentSelector = createComponentReadOnlySelector<
+export const selectedRowIdsComponentSelector = createComponentSelectorV2<
   string[]
 >({
   key: 'selectedRowIdsComponentSelector',
+  componentInstanceContext: RecordTableComponentInstanceContext,
   get:
-    ({ scopeId }) =>
+    ({ instanceId }) =>
     ({ get }) => {
-      const rowIds = get(tableRowIdsComponentState({ scopeId }));
+      const rowIds = get(tableRowIdsComponentState.atomFamily({ instanceId }));
 
       return rowIds.filter(
         (rowId) =>
           get(
-            isRowSelectedComponentFamilyState({
+            isRowSelectedComponentFamilyState.atomFamily({
-              scopeId,
+              instanceId,
               familyKey: rowId,
             }),
           ) === true,

packages/twenty-front/src/modules/object-record/record-table/states/selectors/unselectedRowIdsComponentSelector.ts

@@ -1,23 +1,26 @@
 import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
+import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
 import { tableRowIdsComponentState } from '@/object-record/record-table/states/tableRowIdsComponentState';
-import { createComponentReadOnlySelector } from '@/ui/utilities/state/component-state/utils/createComponentReadOnlySelector';
+import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2';
 
-export const unselectedRowIdsComponentSelector =
+export const unselectedRowIdsComponentSelector = createComponentSelectorV2<
-  createComponentReadOnlySelector<string[]>({
+  string[]
-    key: 'unselectedRowIdsComponentSelector',
+>({
-    get:
+  key: 'unselectedRowIdsComponentSelector',
-      ({ scopeId }) =>
+  componentInstanceContext: RecordTableComponentInstanceContext,
-      ({ get }) => {
+  get:
-        const rowIds = get(tableRowIdsComponentState({ scopeId }));
+    ({ instanceId }) =>
+    ({ get }) => {
+      const rowIds = get(tableRowIdsComponentState.atomFamily({ instanceId }));
 
-        return rowIds.filter(
+      return rowIds.filter(
-          (rowId) =>
+        (rowId) =>
-            get(
+          get(
-              isRowSelectedComponentFamilyState({
+            isRowSelectedComponentFamilyState.atomFamily({
-                scopeId,
+              instanceId,
-                familyKey: rowId,
+              familyKey: rowId,
-              }),
+            }),
-            ) === false,
+          ) === false,
-        );
+      );
-      },
+    },
-  });
+});

packages/twenty-front/src/modules/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector.ts

@@ -1,15 +1,19 @@
+import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
 import { tableColumnsComponentState } from '@/object-record/record-table/states/tableColumnsComponentState';
-import { createComponentReadOnlySelector } from '@/ui/utilities/state/component-state/utils/createComponentReadOnlySelector';
+import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2';
 
-export const visibleTableColumnsComponentSelector =
+export const visibleTableColumnsComponentSelector = createComponentSelectorV2({
-  createComponentReadOnlySelector({
+  key: 'visibleTableColumnsComponentSelector',
-    key: 'visibleTableColumnsComponentSelector',
+  componentInstanceContext: RecordTableComponentInstanceContext,
-    get:
+  get:
-      ({ scopeId }) =>
+    ({ instanceId }) =>
-      ({ get }) => {
+    ({ get }) => {
-        const columns = get(tableColumnsComponentState({ scopeId }));
+      const columns = get(
-        return columns
+        tableColumnsComponentState.atomFamily({ instanceId }),
-          .filter((column) => column.isVisible)
+      );
-          .sort((columnA, columnB) => columnA.position - columnB.position);
+
-      },
+      return columns
-  });
+        .filter((column) => column.isVisible)
+        .sort((columnA, columnB) => columnA.position - columnB.position);
+    },
+});