Removed useFilterDropdown hook (#9537)

Removed useFilterDropdown hook and its many calls which were only
exporting states.

The test has been removed because it was used to do the equivalent of
testing Recoil states, so it wasn't useful anymore.

packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterViewFilterFieldSelect.tsx

@@ -2,11 +2,13 @@ import { useAdvancedFilterDropdown } from '@/object-record/advanced-filter/hooks
 import { useCurrentViewFilter } from '@/object-record/advanced-filter/hooks/useCurrentViewFilter';
 import { ObjectFilterDropdownFilterSelect } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect';
 import { ObjectFilterDropdownFilterSelectCompositeFieldSubMenu } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectCompositeFieldSubMenu';
-import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
+import { advancedFilterViewFilterGroupIdComponentState } from '@/object-record/object-filter-dropdown/states/advancedFilterViewFilterGroupIdComponentState';
+import { advancedFilterViewFilterIdComponentState } from '@/object-record/object-filter-dropdown/states/advancedFilterViewFilterIdComponentState';
 import { objectFilterDropdownIsSelectingCompositeFieldComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownIsSelectingCompositeFieldComponentState';
 import { SelectControl } from '@/ui/input/components/SelectControl';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { ADVANCED_FILTER_DROPDOWN_ID } from '@/views/constants/AdvancedFilterDropdownId';
 import styled from '@emotion/styled';
 
@@ -27,8 +29,13 @@ export const AdvancedFilterViewFilterFieldSelect = ({
 
   const selectedFieldLabel = filter?.definition.label ?? '';
 
-  const { setAdvancedFilterViewFilterGroupId, setAdvancedFilterViewFilterId } =
+  const setAdvancedFilterViewFilterId = useSetRecoilComponentStateV2(
-    useFilterDropdown();
+    advancedFilterViewFilterIdComponentState,
+  );
+
+  const setAdvancedFilterViewFilterGroupId = useSetRecoilComponentStateV2(
+    advancedFilterViewFilterGroupIdComponentState,
+  );
 
   const [objectFilterDropdownIsSelectingCompositeField] =
     useRecoilComponentStateV2(

packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterViewFilterValueInput.tsx

@@ -1,9 +1,12 @@
 import { useCurrentViewFilter } from '@/object-record/advanced-filter/hooks/useCurrentViewFilter';
 import { ObjectFilterDropdownFilterInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterInput';
-import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
+import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState';
+import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState';
+import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
 import { SelectControl } from '@/ui/input/components/SelectControl';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { ADVANCED_FILTER_DROPDOWN_ID } from '@/views/constants/AdvancedFilterDropdownId';
 
 type AdvancedFilterViewFilterValueInputProps = {
@@ -19,11 +22,17 @@ export const AdvancedFilterViewFilterValueInput = ({
 
   const isDisabled = !filter?.fieldMetadataId || !filter.operand;
 
-  const {
+  const setFilterDefinitionUsedInDropdown = useSetRecoilComponentStateV2(
-    setFilterDefinitionUsedInDropdown,
+    filterDefinitionUsedInDropdownComponentState,
-    setSelectedOperandInDropdown,
+  );
-    setSelectedFilter,
+
-  } = useFilterDropdown();
+  const setSelectedOperandInDropdown = useSetRecoilComponentStateV2(
+    selectedOperandInDropdownComponentState,
+  );
+
+  const setSelectedFilter = useSetRecoilComponentStateV2(
+    selectedFilterComponentState,
+  );
 
   if (isDisabled) {
     return (

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

@@ -1,11 +1,10 @@
-import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
-
 import { ObjectFilterDropdownFilterSelectCompositeFieldSubMenu } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectCompositeFieldSubMenu';
 import { ObjectFilterOperandSelectAndInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterOperandSelectAndInput';
+import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState';
 import { objectFilterDropdownFilterIsSelectedComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownFilterIsSelectedComponentState';
 import { objectFilterDropdownIsSelectingCompositeFieldComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownIsSelectingCompositeFieldComponentState';
 import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
-import { useRecoilValue } from 'recoil';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { MultipleFiltersDropdownFilterOnFilterChangedEffect } from './MultipleFiltersDropdownFilterOnFilterChangedEffect';
 import { ObjectFilterDropdownFilterSelect } from './ObjectFilterDropdownFilterSelect';
 
@@ -16,9 +15,10 @@ type MultipleFiltersDropdownContentProps = {
 export const MultipleFiltersDropdownContent = ({
   filterDropdownId,
 }: MultipleFiltersDropdownContentProps) => {
-  const { filterDefinitionUsedInDropdownState } = useFilterDropdown({
+  const filterDefinitionUsedInDropdown = useRecoilComponentValueV2(
+    filterDefinitionUsedInDropdownComponentState,
     filterDropdownId,
-  });
+  );
 
   const [objectFilterDropdownIsSelectingCompositeField] =
     useRecoilComponentStateV2(
@@ -31,10 +31,6 @@ export const MultipleFiltersDropdownContent = ({
     filterDropdownId,
   );
 
-  const filterDefinitionUsedInDropdown = useRecoilValue(
-    filterDefinitionUsedInDropdownState,
-  );
-
   const shouldShowCompositeSelectionSubMenu =
     objectFilterDropdownIsSelectingCompositeField;
 

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

@@ -1,16 +1,18 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useEffect, useState } from 'react';
-import { useRecoilValue } from 'recoil';
 import { v4 } from 'uuid';
 
 import { useApplyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useApplyRecordFilter';
-import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
+import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState';
+import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState';
+import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
 import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
 import { BooleanDisplay } from '@/ui/field/display/components/BooleanDisplay';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { IconCheck } from 'twenty-ui';
 import { isDefined } from '~/utils/isDefined';
 
@@ -37,24 +39,22 @@ export const ObjectFilterDropdownBooleanSelect = () => {
   const theme = useTheme();
   const options = [true, false];
 
-  const {
+  const filterDefinitionUsedInDropdown = useRecoilComponentValueV2(
-    filterDefinitionUsedInDropdownState,
+    filterDefinitionUsedInDropdownComponentState,
-    selectedOperandInDropdownState,
+  );
-    selectedFilterState,
+
-  } = useFilterDropdown();
+  const selectedOperandInDropdown = useRecoilComponentValueV2(
+    selectedOperandInDropdownComponentState,
+  );
+
+  const selectedFilter = useRecoilComponentValueV2(
+    selectedFilterComponentState,
+  );
 
   const { applyRecordFilter } = useApplyRecordFilter();
 
   const { closeDropdown } = useDropdown();
 
-  const filterDefinitionUsedInDropdown = useRecoilValue(
-    filterDefinitionUsedInDropdownState,
-  );
-  const selectedOperandInDropdown = useRecoilValue(
-    selectedOperandInDropdownState,
-  );
-  const selectedFilter = useRecoilValue(selectedFilterState);
-
   const [selectedValue, setSelectedValue] = useState<boolean | undefined>(
     selectedFilter?.value === 'true',
   );

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

@@ -1,11 +1,12 @@
-import { useRecoilValue } from 'recoil';
 import { v4 } from 'uuid';
 
 import { useApplyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useApplyRecordFilter';
-import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
+import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState';
-import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
+import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState';
+import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
 import { getRelativeDateDisplayValue } from '@/object-record/object-filter-dropdown/utils/getRelativeDateDisplayValue';
 import { InternalDatePicker } from '@/ui/input/components/internal/date/components/InternalDatePicker';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
 import { computeVariableDateViewFilterValue } from '@/views/view-filter-value/utils/computeVariableDateViewFilterValue';
 import {
@@ -18,26 +19,20 @@ import { isDefined } from 'twenty-ui';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 
 export const ObjectFilterDropdownDateInput = () => {
-  const {
+  const filterDefinitionUsedInDropdown = useRecoilComponentValueV2(
-    filterDefinitionUsedInDropdownState,
+    filterDefinitionUsedInDropdownComponentState,
-    selectedOperandInDropdownState,
+  );
-    selectedFilterState,
+
-  } = useFilterDropdown();
+  const selectedOperandInDropdown = useRecoilComponentValueV2(
+    selectedOperandInDropdownComponentState,
+  );
+
+  const selectedFilter = useRecoilComponentValueV2(
+    selectedFilterComponentState,
+  );
 
   const { applyRecordFilter } = useApplyRecordFilter();
 
-  const filterDefinitionUsedInDropdown = useRecoilValue(
-    filterDefinitionUsedInDropdownState,
-  );
-  const selectedOperandInDropdown = useRecoilValue(
-    selectedOperandInDropdownState,
-  );
-
-  const selectedFilter = useRecoilValue(selectedFilterState) as
-    | (Filter & { definition: { type: 'DATE' | 'DATE_TIME' } })
-    | null
-    | undefined;
-
   const initialFilterValue = selectedFilter
     ? resolveDateViewFilterValue(selectedFilter)
     : null;

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

@@ -1,5 +1,3 @@
-import { useRecoilValue } from 'recoil';
-
 import { ObjectFilterDropdownDateInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateInput';
 import { ObjectFilterDropdownNumberInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownNumberInput';
 import { ObjectFilterDropdownOptionSelect } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownOptionSelect';
@@ -8,7 +6,6 @@ import { ObjectFilterDropdownRecordSelect } from '@/object-record/object-filter-
 import { ObjectFilterDropdownSearchInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownSearchInput';
 import { ObjectFilterDropdownSourceSelect } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownSourceSelect';
 import { ObjectFilterDropdownTextSearchInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownTextSearchInput';
-import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { isActorSourceCompositeFilter } from '@/object-record/object-filter-dropdown/utils/isActorSourceCompositeFilter';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
@@ -18,6 +15,9 @@ import { ObjectFilterDropdownBooleanSelect } from '@/object-record/object-filter
 import { DATE_FILTER_TYPES } from '@/object-record/object-filter-dropdown/constants/DateFilterTypes';
 import { NUMBER_FILTER_TYPES } from '@/object-record/object-filter-dropdown/constants/NumberFilterTypes';
 import { TEXT_FILTER_TYPES } from '@/object-record/object-filter-dropdown/constants/TextFilterTypes';
+import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState';
+import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 
 type ObjectFilterDropdownFilterInputProps = {
   filterDropdownId?: string;
@@ -26,17 +26,13 @@ type ObjectFilterDropdownFilterInputProps = {
 export const ObjectFilterDropdownFilterInput = ({
   filterDropdownId,
 }: ObjectFilterDropdownFilterInputProps) => {
-  const {
+  const filterDefinitionUsedInDropdown = useRecoilComponentValueV2(
-    filterDefinitionUsedInDropdownState,
+    filterDefinitionUsedInDropdownComponentState,
-    selectedOperandInDropdownState,
+    filterDropdownId,
-  } = useFilterDropdown({ filterDropdownId });
-
-  const filterDefinitionUsedInDropdown = useRecoilValue(
-    filterDefinitionUsedInDropdownState,
   );
-
+  const selectedOperandInDropdown = useRecoilComponentValueV2(
-  const selectedOperandInDropdown = useRecoilValue(
+    selectedOperandInDropdownComponentState,
-    selectedOperandInDropdownState,
+    filterDropdownId,
   );
 
   const isConfigurable =

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

@@ -6,8 +6,8 @@ import { useAdvancedFilterDropdown } from '@/object-record/advanced-filter/hooks
 import { AdvancedFilterButton } from '@/object-record/object-filter-dropdown/components/AdvancedFilterButton';
 import { ObjectFilterDropdownFilterSelectMenuItem } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItem';
 import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId';
-import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { useSelectFilterDefinitionUsedInDropdown } from '@/object-record/object-filter-dropdown/hooks/useSelectFilterDefinitionUsedInDropdown';
+import { objectFilterDropdownSearchInputComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputComponentState';
 import { FiltersHotkeyScope } from '@/object-record/object-filter-dropdown/types/FiltersHotkeyScope';
 import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { hiddenTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector';
@@ -17,13 +17,14 @@ import { SelectableItem } from '@/ui/layout/selectable-list/components/Selectabl
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
 import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
-import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-ui';
 import { FeatureFlagKey } from '~/generated/graphql';
 
+import { advancedFilterViewFilterIdComponentState } from '@/object-record/object-filter-dropdown/states/advancedFilterViewFilterIdComponentState';
 export const StyledInput = styled.input`
   background: transparent;
   border: none;
@@ -59,24 +60,22 @@ export const ObjectFilterDropdownFilterSelect = ({
 }: ObjectFilterDropdownFilterSelectProps) => {
   const { recordIndexId } = useRecordIndexContextOrThrow();
 
-  const {
+  const setObjectFilterDropdownSearchInput = useSetRecoilComponentStateV2(
-    setObjectFilterDropdownSearchInput,
+    objectFilterDropdownSearchInputComponentState,
-    objectFilterDropdownSearchInputState,
+  );
-    advancedFilterViewFilterIdState,
-  } = useFilterDropdown();
 
-  const advancedFilterViewFilterId = useRecoilValue(
+  const advancedFilterViewFilterId = useRecoilComponentValueV2(
-    advancedFilterViewFilterIdState,
+    advancedFilterViewFilterIdComponentState,
+  );
+
+  const objectFilterDropdownSearchInput = useRecoilComponentValueV2(
+    objectFilterDropdownSearchInputComponentState,
   );
 
   const { closeAdvancedFilterDropdown } = useAdvancedFilterDropdown(
     advancedFilterViewFilterId,
   );
 
-  const objectFilterDropdownSearchInput = useRecoilValue(
-    objectFilterDropdownSearchInputState,
-  );
-
   const availableFilterDefinitions = useRecoilComponentValueV2(
     availableFilterDefinitionsComponentState,
   );

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

@@ -1,10 +1,14 @@
 import { useAdvancedFilterDropdown } from '@/object-record/advanced-filter/hooks/useAdvancedFilterDropdown';
 import { useApplyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useApplyRecordFilter';
-import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
+import { advancedFilterViewFilterGroupIdComponentState } from '@/object-record/object-filter-dropdown/states/advancedFilterViewFilterGroupIdComponentState';
+import { advancedFilterViewFilterIdComponentState } from '@/object-record/object-filter-dropdown/states/advancedFilterViewFilterIdComponentState';
+import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState';
 import { objectFilterDropdownFilterIsSelectedComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownFilterIsSelectedComponentState';
 import { objectFilterDropdownFirstLevelFilterDefinitionComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownFirstLevelFilterDefinitionComponentState';
 import { objectFilterDropdownIsSelectingCompositeFieldComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownIsSelectingCompositeFieldComponentState';
+import { objectFilterDropdownSearchInputComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputComponentState';
 import { objectFilterDropdownSubMenuFieldTypeComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSubMenuFieldTypeComponentState';
+import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
 import { FilterDefinition } from '@/object-record/object-filter-dropdown/types/FilterDefinition';
 import { getCompositeSubFieldLabel } from '@/object-record/object-filter-dropdown/utils/getCompositeSubFieldLabel';
 import { getFilterableFieldTypeLabel } from '@/object-record/object-filter-dropdown/utils/getFilterableFieldTypeLabel';
@@ -14,8 +18,9 @@ import { SETTINGS_COMPOSITE_FIELD_TYPE_CONFIGS } from '@/settings/data-model/con
 import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { useState } from 'react';
-import { useRecoilValue } from 'recoil';
 import {
   IconApps,
   IconChevronLeft,
@@ -52,23 +57,28 @@ export const ObjectFilterDropdownFilterSelectCompositeFieldSubMenu = () => {
     objectFilterDropdownSubMenuFieldTypeComponentState,
   );
 
-  const {
+  const setFilterDefinitionUsedInDropdown = useSetRecoilComponentStateV2(
-    setFilterDefinitionUsedInDropdown,
+    filterDefinitionUsedInDropdownComponentState,
-    setSelectedOperandInDropdown,
+  );
-    setObjectFilterDropdownSearchInput,
+
-    advancedFilterViewFilterIdState,
+  const setSelectedOperandInDropdown = useSetRecoilComponentStateV2(
-    advancedFilterViewFilterGroupIdState,
+    selectedOperandInDropdownComponentState,
-  } = useFilterDropdown();
+  );
+
+  const setObjectFilterDropdownSearchInput = useSetRecoilComponentStateV2(
+    objectFilterDropdownSearchInputComponentState,
+  );
+
+  const advancedFilterViewFilterId = useRecoilComponentValueV2(
+    advancedFilterViewFilterIdComponentState,
+  );
+
+  const advancedFilterViewFilterGroupId = useRecoilComponentValueV2(
+    advancedFilterViewFilterGroupIdComponentState,
+  );
 
   const { applyRecordFilter } = useApplyRecordFilter();
 
-  const advancedFilterViewFilterId = useRecoilValue(
-    advancedFilterViewFilterIdState,
-  );
-  const advancedFilterViewFilterGroupId = useRecoilValue(
-    advancedFilterViewFilterGroupIdState,
-  );
-
   const { closeAdvancedFilterDropdown } = useAdvancedFilterDropdown(
     advancedFilterViewFilterId,
   );

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

@@ -1,11 +1,12 @@
 import { useAdvancedFilterDropdown } from '@/object-record/advanced-filter/hooks/useAdvancedFilterDropdown';
 import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId';
-import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { useSelectFilterDefinitionUsedInDropdown } from '@/object-record/object-filter-dropdown/hooks/useSelectFilterDefinitionUsedInDropdown';
+import { advancedFilterViewFilterIdComponentState } from '@/object-record/object-filter-dropdown/states/advancedFilterViewFilterIdComponentState';
 import { objectFilterDropdownFilterIsSelectedComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownFilterIsSelectedComponentState';
 import { objectFilterDropdownFirstLevelFilterDefinitionComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownFirstLevelFilterDefinitionComponentState';
 import { objectFilterDropdownIsSelectingCompositeFieldComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownIsSelectingCompositeFieldComponentState';
 import { objectFilterDropdownSubMenuFieldTypeComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSubMenuFieldTypeComponentState';
+import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
 import { CompositeFilterableFieldType } from '@/object-record/object-filter-dropdown/types/CompositeFilterableFieldType';
 
 import { FilterDefinition } from '@/object-record/object-filter-dropdown/types/FilterDefinition';
@@ -15,6 +16,8 @@ import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { useRecoilValue } from 'recoil';
 import { MenuItemSelect, useIcons } from 'twenty-ui';
 
@@ -56,15 +59,16 @@ export const ObjectFilterDropdownFilterSelectMenuItem = ({
 
   const isACompositeField = isCompositeField(filterDefinition.type);
 
-  const { setSelectedOperandInDropdown, advancedFilterViewFilterIdState } =
+  const setSelectedOperandInDropdown = useSetRecoilComponentStateV2(
-    useFilterDropdown();
+    selectedOperandInDropdownComponentState,
+  );
+
+  const advancedFilterViewFilterId = useRecoilComponentValueV2(
+    advancedFilterViewFilterIdComponentState,
+  );
 
   const setHotkeyScope = useSetHotkeyScope();
 
-  const advancedFilterViewFilterId = useRecoilValue(
-    advancedFilterViewFilterIdState,
-  );
-
   const { closeAdvancedFilterDropdown } = useAdvancedFilterDropdown(
     advancedFilterViewFilterId,
   );

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

@@ -1,31 +1,30 @@
 import { ChangeEvent, useCallback, useState } from 'react';
-import { useRecoilValue } from 'recoil';
 import { v4 } from 'uuid';
 
 import { useApplyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useApplyRecordFilter';
-import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
+import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState';
+import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState';
+import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
 import { DropdownMenuInput } from '@/ui/layout/dropdown/components/DropdownMenuInput';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 
 export const ObjectFilterDropdownNumberInput = () => {
-  const {
+  const selectedOperandInDropdown = useRecoilComponentValueV2(
-    selectedOperandInDropdownState,
+    selectedOperandInDropdownComponentState,
-    filterDefinitionUsedInDropdownState,
+  );
-    selectedFilterState,
+
-  } = useFilterDropdown();
+  const filterDefinitionUsedInDropdown = useRecoilComponentValueV2(
+    filterDefinitionUsedInDropdownComponentState,
+  );
+
+  const selectedFilter = useRecoilComponentValueV2(
+    selectedFilterComponentState,
+  );
 
   const { applyRecordFilter } = useApplyRecordFilter();
 
   const [hasFocused, setHasFocused] = useState(false);
 
-  const filterDefinitionUsedInDropdown = useRecoilValue(
-    filterDefinitionUsedInDropdownState,
-  );
-  const selectedOperandInDropdown = useRecoilValue(
-    selectedOperandInDropdownState,
-  );
-
-  const selectedFilter = useRecoilValue(selectedFilterState);
-
   const [inputValue, setInputValue] = useState(
     () => selectedFilter?.value || '',
   );

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

@@ -1,12 +1,12 @@
-import { useRecoilValue } from 'recoil';
 import { IconChevronDown } from 'twenty-ui';
 
-import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
 
 import { ObjectFilterDropdownOperandSelect } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect';
+import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
 import { FiltersHotkeyScope } from '@/object-record/object-filter-dropdown/types/FiltersHotkeyScope';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { getOperandLabel } from '../utils/getOperandLabel';
@@ -20,10 +20,8 @@ export const ObjectFilterDropdownOperandDropdown = ({
 }: {
   filterDropdownId?: string;
 }) => {
-  const { selectedOperandInDropdownState } = useFilterDropdown();
+  const selectedOperandInDropdown = useRecoilComponentValueV2(
-
+    selectedOperandInDropdownComponentState,
-  const selectedOperandInDropdown = useRecoilValue(
-    selectedOperandInDropdownState,
   );
 
   const theme = useTheme();

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

@@ -1,11 +1,14 @@
-import { useRecoilValue } from 'recoil';
 import { v4 } from 'uuid';
 
 import { useApplyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useApplyRecordFilter';
-import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
+import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState';
+import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState';
+import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
 import { getInitialFilterValue } from '@/object-record/object-filter-dropdown/utils/getInitialFilterValue';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
 import styled from '@emotion/styled';
 import { MenuItem } from 'twenty-ui';
@@ -19,22 +22,22 @@ const StyledDropdownMenuItemsContainer = styled(DropdownMenuItemsContainer)`
 `;
 
 export const ObjectFilterDropdownOperandSelect = () => {
-  const {
+  const filterDefinitionUsedInDropdown = useRecoilComponentValueV2(
-    filterDefinitionUsedInDropdownState,
+    filterDefinitionUsedInDropdownComponentState,
-    setSelectedOperandInDropdown,
+  );
-    selectedFilterState,
+
-  } = useFilterDropdown();
+  const setSelectedOperandInDropdown = useSetRecoilComponentStateV2(
+    selectedOperandInDropdownComponentState,
+  );
+
+  const selectedFilter = useRecoilComponentValueV2(
+    selectedFilterComponentState,
+  );
 
   const { applyRecordFilter } = useApplyRecordFilter();
 
   const { closeDropdown } = useDropdown();
 
-  const filterDefinitionUsedInDropdown = useRecoilValue(
-    filterDefinitionUsedInDropdownState,
-  );
-
-  const selectedFilter = useRecoilValue(selectedFilterState);
-
   const operandsForFilterType = isDefined(filterDefinitionUsedInDropdown)
     ? getOperandsForFilterDefinition(filterDefinitionUsedInDropdown)
     : [];

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

@@ -4,7 +4,6 @@ import { Key } from 'ts-key-enum';
 import { v4 } from 'uuid';
 
 import { FieldMetadataItemOption } from '@/object-metadata/types/FieldMetadataItem';
-import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { useOptionsForSelect } from '@/object-record/object-filter-dropdown/hooks/useOptionsForSelect';
 import { MULTI_OBJECT_RECORD_SELECT_SELECTABLE_LIST_ID } from '@/object-record/relation-picker/constants/MultiObjectRecordSelectSelectableListId';
 import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
@@ -15,7 +14,13 @@ import { useSelectableListStates } from '@/ui/layout/selectable-list/hooks/inter
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 
 import { useApplyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useApplyRecordFilter';
+import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState';
+import { objectFilterDropdownSearchInputComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputComponentState';
+import { objectFilterDropdownSelectedOptionValuesComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedOptionValuesComponentState';
+import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState';
+import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { MenuItem, MenuItemMultiSelect } from 'twenty-ui';
 import { isDefined } from '~/utils/isDefined';
 
@@ -27,13 +32,25 @@ type SelectOptionForFilter = FieldMetadataItemOption & {
 };
 
 export const ObjectFilterDropdownOptionSelect = () => {
-  const {
+  const filterDefinitionUsedInDropdown = useRecoilComponentValueV2(
-    filterDefinitionUsedInDropdownState,
+    filterDefinitionUsedInDropdownComponentState,
-    objectFilterDropdownSearchInputState,
+  );
-    selectedOperandInDropdownState,
+
-    objectFilterDropdownSelectedOptionValuesState,
+  const objectFilterDropdownSelectedOptionValues = useRecoilComponentValueV2(
-    selectedFilterState,
+    objectFilterDropdownSelectedOptionValuesComponentState,
-  } = useFilterDropdown();
+  );
+
+  const selectedFilter = useRecoilComponentValueV2(
+    selectedFilterComponentState,
+  );
+
+  const objectFilterDropdownSearchInput = useRecoilComponentValueV2(
+    objectFilterDropdownSearchInputComponentState,
+  );
+
+  const selectedOperandInDropdown = useRecoilComponentValueV2(
+    selectedOperandInDropdownComponentState,
+  );
 
   const { applyRecordFilter } = useApplyRecordFilter();
 
@@ -48,20 +65,6 @@ export const ObjectFilterDropdownOptionSelect = () => {
   );
 
   const selectedItemId = useRecoilValue(selectedItemIdState);
-  const filterDefinitionUsedInDropdown = useRecoilValue(
-    filterDefinitionUsedInDropdownState,
-  );
-  const selectedOperandInDropdown = useRecoilValue(
-    selectedOperandInDropdownState,
-  );
-  const objectFilterDropdownSearchInput = useRecoilValue(
-    objectFilterDropdownSearchInputState,
-  );
-  const objectFilterDropdownSelectedOptionValues = useRecoilValue(
-    objectFilterDropdownSelectedOptionValuesState,
-  );
-
-  const selectedFilter = useRecoilValue(selectedFilterState);
 
   const fieldMetaDataId = filterDefinitionUsedInDropdown?.fieldMetadataId ?? '';
 

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

@@ -1,13 +1,15 @@
-import { useRecoilValue } from 'recoil';
 import { v4 } from 'uuid';
 
 import { useApplyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useApplyRecordFilter';
-import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
+import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState';
+import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
 import { RATING_VALUES } from '@/object-record/record-field/meta-types/constants/RatingValues';
 import { FieldRatingValue } from '@/object-record/record-field/types/FieldMetadata';
 import { RatingInput } from '@/ui/field/input/components/RatingInput';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 
+import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState';
 const convertFieldRatingValueToNumber = (
   rating: Exclude<FieldRatingValue, null>,
 ): string => {
@@ -31,20 +33,17 @@ export const convertRatingToRatingValue = (rating: number) => {
 };
 
 export const ObjectFilterDropdownRatingInput = () => {
-  const {
+  const selectedOperandInDropdown = useRecoilComponentValueV2(
-    selectedOperandInDropdownState,
+    selectedOperandInDropdownComponentState,
-    filterDefinitionUsedInDropdownState,
-    selectedFilterState,
-  } = useFilterDropdown();
-
-  const filterDefinitionUsedInDropdown = useRecoilValue(
-    filterDefinitionUsedInDropdownState,
-  );
-  const selectedOperandInDropdown = useRecoilValue(
-    selectedOperandInDropdownState,
   );
 
-  const selectedFilter = useRecoilValue(selectedFilterState);
+  const filterDefinitionUsedInDropdown = useRecoilComponentValueV2(
+    filterDefinitionUsedInDropdownComponentState,
+  );
+
+  const selectedFilter = useRecoilComponentValueV2(
+    selectedFilterComponentState,
+  );
 
   const { applyRecordFilter } = useApplyRecordFilter();
 

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

@@ -1,17 +1,21 @@
 import { useState } from 'react';
-import { useRecoilValue } from 'recoil';
 import { v4 } from 'uuid';
 
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { ObjectFilterDropdownRecordPinnedItems } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordPinnedItems';
 import { CURRENT_WORKSPACE_MEMBER_SELECTABLE_ITEM_ID } from '@/object-record/object-filter-dropdown/constants/CurrentWorkspaceMemberSelectableItemId';
 import { useApplyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useApplyRecordFilter';
-import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
+import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState';
+import { objectFilterDropdownSearchInputComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputComponentState';
+import { objectFilterDropdownSelectedRecordIdsComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedRecordIdsComponentState';
+import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState';
+import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
 import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
 import { MultipleSelectDropdown } from '@/object-record/select/components/MultipleSelectDropdown';
 import { useRecordsForSelect } from '@/object-record/select/hooks/useRecordsForSelect';
 import { SelectableItem } from '@/object-record/select/types/SelectableItem';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
 import { RelationFilterValue } from '@/views/view-filter-value/types/RelationFilterValue';
 import { relationFilterValueSchema } from '@/views/view-filter-value/validation-schemas/relationFilterValueSchema';
@@ -32,35 +36,33 @@ type ObjectFilterDropdownRecordSelectProps = {
 export const ObjectFilterDropdownRecordSelect = ({
   viewComponentId,
 }: ObjectFilterDropdownRecordSelectProps) => {
-  const {
+  const filterDefinitionUsedInDropdown = useRecoilComponentValueV2(
-    filterDefinitionUsedInDropdownState,
+    filterDefinitionUsedInDropdownComponentState,
-    objectFilterDropdownSearchInputState,
+  );
-    selectedOperandInDropdownState,
+
-    selectedFilterState,
+  const selectedOperandInDropdown = useRecoilComponentValueV2(
-    objectFilterDropdownSelectedRecordIdsState,
+    selectedOperandInDropdownComponentState,
-  } = useFilterDropdown();
+  );
+
+  const selectedFilter = useRecoilComponentValueV2(
+    selectedFilterComponentState,
+  );
+
+  const objectFilterDropdownSearchInput = useRecoilComponentValueV2(
+    objectFilterDropdownSearchInputComponentState,
+  );
+
+  const objectFilterDropdownSelectedRecordIds = useRecoilComponentValueV2(
+    objectFilterDropdownSelectedRecordIdsComponentState,
+  );
 
   const { applyRecordFilter } = useApplyRecordFilter(viewComponentId);
 
   const { currentViewWithCombinedFiltersAndSorts } =
     useGetCurrentView(viewComponentId);
 
-  const filterDefinitionUsedInDropdown = useRecoilValue(
-    filterDefinitionUsedInDropdownState,
-  );
-  const objectFilterDropdownSearchInput = useRecoilValue(
-    objectFilterDropdownSearchInputState,
-  );
-  const selectedOperandInDropdown = useRecoilValue(
-    selectedOperandInDropdownState,
-  );
-  const objectFilterDropdownSelectedRecordIds = useRecoilValue(
-    objectFilterDropdownSelectedRecordIdsState,
-  );
   const [fieldId] = useState(v4());
 
-  const selectedFilter = useRecoilValue(selectedFilterState);
-
   const { isCurrentWorkspaceMemberSelected } = relationFilterValueSchema
     .catch({
       isCurrentWorkspaceMemberSelected: false,

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

@@ -1,28 +1,31 @@
 import { ChangeEvent, useCallback, useState } from 'react';
-import { useRecoilValue } from 'recoil';
 
-import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
+import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState';
+import { objectFilterDropdownSearchInputComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputComponentState';
+import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
 import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 
 export const ObjectFilterDropdownSearchInput = () => {
-  const {
+  const filterDefinitionUsedInDropdown = useRecoilComponentValueV2(
-    filterDefinitionUsedInDropdownState,
+    filterDefinitionUsedInDropdownComponentState,
-    selectedOperandInDropdownState,
+  );
-    objectFilterDropdownSearchInputState,
-    setObjectFilterDropdownSearchInput,
-  } = useFilterDropdown();
-  const [hasFocused, setHasFocused] = useState(false);
 
-  const filterDefinitionUsedInDropdown = useRecoilValue(
+  const selectedOperandInDropdown = useRecoilComponentValueV2(
-    filterDefinitionUsedInDropdownState,
+    selectedOperandInDropdownComponentState,
   );
-  const selectedOperandInDropdown = useRecoilValue(
+
-    selectedOperandInDropdownState,
+  const objectFilterDropdownSearchInput = useRecoilComponentValueV2(
+    objectFilterDropdownSearchInputComponentState,
   );
-  const objectFilterDropdownSearchInput = useRecoilValue(
+
-    objectFilterDropdownSearchInputState,
+  const setObjectFilterDropdownSearchInput = useSetRecoilComponentStateV2(
+    objectFilterDropdownSearchInputComponentState,
   );
 
+  const [hasFocused, setHasFocused] = useState(false);
+
   const handleInputRef = useCallback(
     (node: HTMLInputElement | null) => {
       if (Boolean(node) && !hasFocused) {

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

@@ -1,14 +1,19 @@
 import { useState } from 'react';
-import { useRecoilValue } from 'recoil';
 import { v4 } from 'uuid';
 
 import { useApplyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useApplyRecordFilter';
 import { useEmptyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useEmptyRecordFilter';
-import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
+import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState';
+import { objectFilterDropdownSearchInputComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputComponentState';
+import { objectFilterDropdownSelectedRecordIdsComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedRecordIdsComponentState';
+import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState';
+import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
 import { getActorSourceMultiSelectOptions } from '@/object-record/object-filter-dropdown/utils/getActorSourceMultiSelectOptions';
 import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
 import { MultipleSelectDropdown } from '@/object-record/select/components/MultipleSelectDropdown';
 import { SelectableItem } from '@/object-record/select/types/SelectableItem';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { useDeleteCombinedViewFilters } from '@/views/hooks/useDeleteCombinedViewFilters';
 import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
@@ -24,14 +29,29 @@ type ObjectFilterDropdownSourceSelectProps = {
 export const ObjectFilterDropdownSourceSelect = ({
   viewComponentId,
 }: ObjectFilterDropdownSourceSelectProps) => {
-  const {
+  const objectFilterDropdownSearchInput = useRecoilComponentValueV2(
-    filterDefinitionUsedInDropdownState,
+    objectFilterDropdownSearchInputComponentState,
-    objectFilterDropdownSearchInputState,
+  );
-    selectedOperandInDropdownState,
+
-    selectedFilterState,
+  const setObjectFilterDropdownSelectedRecordIds = useSetRecoilComponentStateV2(
-    setObjectFilterDropdownSelectedRecordIds,
+    objectFilterDropdownSelectedRecordIdsComponentState,
-    objectFilterDropdownSelectedRecordIdsState,
+  );
-  } = useFilterDropdown();
+
+  const objectFilterDropdownSelectedRecordIds = useRecoilComponentValueV2(
+    objectFilterDropdownSelectedRecordIdsComponentState,
+  );
+
+  const selectedFilter = useRecoilComponentValueV2(
+    selectedFilterComponentState,
+  );
+
+  const selectedOperandInDropdown = useRecoilComponentValueV2(
+    selectedOperandInDropdownComponentState,
+  );
+
+  const filterDefinitionUsedInDropdown = useRecoilComponentValueV2(
+    filterDefinitionUsedInDropdownComponentState,
+  );
 
   const { applyRecordFilter } = useApplyRecordFilter(viewComponentId);
 
@@ -41,22 +61,8 @@ export const ObjectFilterDropdownSourceSelect = ({
   const { currentViewWithCombinedFiltersAndSorts } =
     useGetCurrentView(viewComponentId);
 
-  const filterDefinitionUsedInDropdown = useRecoilValue(
-    filterDefinitionUsedInDropdownState,
-  );
-  const objectFilterDropdownSearchInput = useRecoilValue(
-    objectFilterDropdownSearchInputState,
-  );
-  const selectedOperandInDropdown = useRecoilValue(
-    selectedOperandInDropdownState,
-  );
-  const objectFilterDropdownSelectedRecordIds = useRecoilValue(
-    objectFilterDropdownSelectedRecordIdsState,
-  );
   const [fieldId] = useState(v4());
 
-  const selectedFilter = useRecoilValue(selectedFilterState);
-
   const sourceTypes = getActorSourceMultiSelectOptions(
     objectFilterDropdownSelectedRecordIds,
   );

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

@@ -1,33 +1,38 @@
 import { ChangeEvent, useCallback, useState } from 'react';
-import { useRecoilValue } from 'recoil';
 import { v4 } from 'uuid';
 
 import { useApplyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useApplyRecordFilter';
-import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
+import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState';
+import { objectFilterDropdownSearchInputComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputComponentState';
+import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState';
+import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
 import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 
 export const ObjectFilterDropdownTextSearchInput = () => {
-  const {
-    filterDefinitionUsedInDropdownState,
-    selectedOperandInDropdownState,
-    objectFilterDropdownSearchInputState,
-    setObjectFilterDropdownSearchInput,
-    selectedFilterState,
-  } = useFilterDropdown();
-
   const [filterId] = useState(v4());
   const [hasFocused, setHasFocused] = useState(false);
 
-  const filterDefinitionUsedInDropdown = useRecoilValue(
+  const filterDefinitionUsedInDropdown = useRecoilComponentValueV2(
-    filterDefinitionUsedInDropdownState,
+    filterDefinitionUsedInDropdownComponentState,
   );
-  const selectedOperandInDropdown = useRecoilValue(
+
-    selectedOperandInDropdownState,
+  const selectedOperandInDropdown = useRecoilComponentValueV2(
+    selectedOperandInDropdownComponentState,
   );
-  const objectFilterDropdownSearchInput = useRecoilValue(
+
-    objectFilterDropdownSearchInputState,
+  const objectFilterDropdownSearchInput = useRecoilComponentValueV2(
+    objectFilterDropdownSearchInputComponentState,
+  );
+
+  const selectedFilter = useRecoilComponentValueV2(
+    selectedFilterComponentState,
+  );
+
+  const setObjectFilterDropdownSearchInput = useSetRecoilComponentStateV2(
+    objectFilterDropdownSearchInputComponentState,
   );
-  const selectedFilter = useRecoilValue(selectedFilterState);
 
   const { applyRecordFilter } = useApplyRecordFilter();
 

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

@@ -1,17 +1,19 @@
 import { useTheme } from '@emotion/react';
 import React from 'react';
-import { useRecoilValue } from 'recoil';
 import { IconChevronDown } from 'twenty-ui';
 
 import { ObjectFilterDropdownRecordRemoveFilterMenuItem } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordRemoveFilterMenuItem';
-import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
 
+import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState';
+import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState';
+import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState';
 import { getOperandsForFilterDefinition } from '../utils/getOperandsForFilterType';
 import { GenericEntityFilterChip } from './GenericEntityFilterChip';
@@ -25,16 +27,21 @@ export const SingleEntityObjectFilterDropdownButton = ({
 }: {
   hotkeyScope: HotkeyScope;
 }) => {
-  const {
+  const selectedFilter = useRecoilComponentValueV2(
-    selectedFilterState,
+    selectedFilterComponentState,
-    setFilterDefinitionUsedInDropdown,
+  );
-    setSelectedOperandInDropdown,
+
-  } = useFilterDropdown();
+  const setFilterDefinitionUsedInDropdown = useSetRecoilComponentStateV2(
+    filterDefinitionUsedInDropdownComponentState,
+  );
+
+  const setSelectedOperandInDropdown = useSetRecoilComponentStateV2(
+    selectedOperandInDropdownComponentState,
+  );
 
   const availableFilterDefinitions = useRecoilComponentValueV2(
     availableFilterDefinitionsComponentState,
   );
-  const selectedFilter = useRecoilValue(selectedFilterState);
 
   const availableFilterDefinition = availableFilterDefinitions[0];
 

packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/__tests__/useFilterDropdown.test.tsx

@@ -1,346 +0,0 @@
-import { expect } from '@storybook/test';
-import { act, renderHook, waitFor } from '@testing-library/react';
-import { RecoilRoot, useRecoilState } from 'recoil';
-
-import { useApplyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useApplyRecordFilter';
-import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
-import { useFilterDropdownStates } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdownStates';
-import { useResetFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useResetFilterDropdown';
-import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
-import { FilterDefinition } from '@/object-record/object-filter-dropdown/types/FilterDefinition';
-import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
-import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState';
-import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
-import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
-import { MockedProvider } from '@apollo/client/testing';
-import { JestObjectMetadataItemSetter } from '~/testing/jest/JestObjectMetadataItemSetter';
-
-const filterDropdownId = 'filterDropdownId';
-const renderHookConfig = {
-  wrapper: ({ children }: any) => (
-    <RecoilRoot>
-      <MockedProvider mocks={[]} addTypename={false}>
-        <JestObjectMetadataItemSetter>
-          <ViewComponentInstanceContext.Provider value={{ instanceId: 'test' }}>
-            {children}
-          </ViewComponentInstanceContext.Provider>
-        </JestObjectMetadataItemSetter>
-      </MockedProvider>
-    </RecoilRoot>
-  ),
-};
-
-const filterDefinitions: FilterDefinition[] = [
-  {
-    fieldMetadataId: 'id',
-    label: 'definition label',
-    iconName: 'icon',
-    type: 'TEXT',
-  },
-];
-
-const mockFilter: Filter = {
-  id: 'id',
-  definition: filterDefinitions[0],
-  displayValue: '',
-  fieldMetadataId: '',
-  operand: ViewFilterOperand.Is,
-  value: '',
-};
-
-describe('useFilterDropdown', () => {
-  it('should set availableFilterDefinitions', async () => {
-    const { result } = renderHook(() => {
-      useFilterDropdown({ filterDropdownId });
-
-      const [availableFilterDefinitions, setAvailableFilterDefinitions] =
-        useRecoilComponentStateV2(
-          availableFilterDefinitionsComponentState,
-          filterDropdownId,
-        );
-
-      return { availableFilterDefinitions, setAvailableFilterDefinitions };
-    }, renderHookConfig);
-
-    expect(result.current.availableFilterDefinitions).toEqual([]);
-
-    act(() => {
-      result.current.setAvailableFilterDefinitions(filterDefinitions);
-    });
-
-    await waitFor(() => {
-      expect(result.current.availableFilterDefinitions).toEqual(
-        filterDefinitions,
-      );
-    });
-  });
-
-  it('should set onFilterSelect', async () => {
-    const { result } = renderHook(() => {
-      useFilterDropdown({ filterDropdownId });
-      const { onFilterSelectState } = useFilterDropdownStates(filterDropdownId);
-
-      const [onFilterSelect, setOnFilterSelect] =
-        useRecoilState(onFilterSelectState);
-      return { onFilterSelect, setOnFilterSelect };
-    }, renderHookConfig);
-
-    expect(result.current.onFilterSelect).toBeUndefined();
-
-    act(() => {
-      result.current.setOnFilterSelect(
-        (_currVal?: Filter | null) => (_filter: Filter | null) => {},
-      );
-    });
-    await waitFor(() => {
-      expect(typeof result.current.onFilterSelect).toBe('function');
-    });
-  });
-
-  it('should set selectedOperandInDropdown', async () => {
-    const { result } = renderHook(() => {
-      useFilterDropdown({ filterDropdownId });
-      const { selectedOperandInDropdownState } =
-        useFilterDropdownStates(filterDropdownId);
-
-      const [selectedOperandInDropdown, setSelectedOperandInDropdown] =
-        useRecoilState(selectedOperandInDropdownState);
-      return { selectedOperandInDropdown, setSelectedOperandInDropdown };
-    }, renderHookConfig);
-
-    const mockOperand = ViewFilterOperand.Contains;
-
-    expect(result.current.selectedOperandInDropdown).toBeNull();
-
-    act(() => {
-      result.current.setSelectedOperandInDropdown(mockOperand);
-    });
-
-    expect(result.current.selectedOperandInDropdown).toBe(mockOperand);
-  });
-
-  it('should set selectedFilter', async () => {
-    const { result } = renderHook(() => {
-      useFilterDropdown({ filterDropdownId });
-      const { selectedFilterState } = useFilterDropdownStates(filterDropdownId);
-
-      const [selectedFilter, setSelectedFilter] =
-        useRecoilState(selectedFilterState);
-      return { selectedFilter, setSelectedFilter };
-    }, renderHookConfig);
-
-    expect(result.current.selectedFilter).toBeUndefined();
-
-    act(() => {
-      result.current.setSelectedFilter(mockFilter);
-    });
-
-    await waitFor(() => {
-      expect(result.current.selectedFilter).toBe(mockFilter);
-    });
-  });
-
-  it('should set filterDefinitionUsedInDropdown', async () => {
-    const { result } = renderHook(() => {
-      useFilterDropdown({ filterDropdownId });
-      const { filterDefinitionUsedInDropdownState } =
-        useFilterDropdownStates(filterDropdownId);
-
-      const [
-        filterDefinitionUsedInDropdown,
-        setFilterDefinitionUsedInDropdown,
-      ] = useRecoilState(filterDefinitionUsedInDropdownState);
-      return {
-        filterDefinitionUsedInDropdown,
-        setFilterDefinitionUsedInDropdown,
-      };
-    }, renderHookConfig);
-
-    expect(result.current.filterDefinitionUsedInDropdown).toBeNull();
-
-    act(() => {
-      result.current.setFilterDefinitionUsedInDropdown(filterDefinitions[0]);
-    });
-
-    await waitFor(() => {
-      expect(result.current.filterDefinitionUsedInDropdown).toBe(
-        filterDefinitions[0],
-      );
-    });
-  });
-
-  it('should set objectFilterDropdownSearchInput', async () => {
-    const mockResult = 'value';
-    const { result } = renderHook(() => {
-      useFilterDropdown({ filterDropdownId });
-      const { objectFilterDropdownSearchInputState } =
-        useFilterDropdownStates(filterDropdownId);
-
-      const [
-        objectFilterDropdownSearchInput,
-        setObjectFilterDropdownSearchInput,
-      ] = useRecoilState(objectFilterDropdownSearchInputState);
-      return {
-        objectFilterDropdownSearchInput,
-        setObjectFilterDropdownSearchInput,
-      };
-    }, renderHookConfig);
-
-    expect(result.current.objectFilterDropdownSearchInput).toBe('');
-
-    act(() => {
-      result.current.setObjectFilterDropdownSearchInput(mockResult);
-    });
-
-    await waitFor(() => {
-      expect(result.current.objectFilterDropdownSearchInput).toBe(mockResult);
-    });
-  });
-
-  it('should set objectFilterDropdownSelectedRecordId', async () => {
-    const mockResult = ['value'];
-    const { result } = renderHook(() => {
-      useFilterDropdown({ filterDropdownId });
-      const { objectFilterDropdownSelectedRecordIdsState } =
-        useFilterDropdownStates(filterDropdownId);
-
-      const [
-        objectFilterDropdownSelectedRecordIds,
-        setObjectFilterDropdownSelectedRecordIds,
-      ] = useRecoilState(objectFilterDropdownSelectedRecordIdsState);
-      return {
-        objectFilterDropdownSelectedRecordIds,
-        setObjectFilterDropdownSelectedRecordIds,
-      };
-    }, renderHookConfig);
-
-    expect(
-      JSON.stringify(result.current.objectFilterDropdownSelectedRecordIds),
-    ).toBe(JSON.stringify([]));
-
-    act(() => {
-      result.current.setObjectFilterDropdownSelectedRecordIds(mockResult);
-    });
-
-    await waitFor(() => {
-      expect(result.current.objectFilterDropdownSelectedRecordIds).toBe(
-        mockResult,
-      );
-    });
-  });
-
-  it('should set objectFilterDropdownSelectedRecordIds', async () => {
-    const mockResult = ['id-0', 'id-1', 'id-2'];
-    const { result } = renderHook(() => {
-      useFilterDropdown({ filterDropdownId });
-      const { objectFilterDropdownSelectedRecordIdsState } =
-        useFilterDropdownStates(filterDropdownId);
-
-      const [
-        objectFilterDropdownSelectedRecordIds,
-        setObjectFilterDropdownSelectedRecordIds,
-      ] = useRecoilState(objectFilterDropdownSelectedRecordIdsState);
-      return {
-        objectFilterDropdownSelectedRecordIds,
-        setObjectFilterDropdownSelectedRecordIds,
-      };
-    }, renderHookConfig);
-
-    expect(result.current.objectFilterDropdownSelectedRecordIds).toHaveLength(
-      0,
-    );
-
-    act(() => {
-      result.current.setObjectFilterDropdownSelectedRecordIds(mockResult);
-    });
-
-    await waitFor(() => {
-      expect(
-        result.current.objectFilterDropdownSelectedRecordIds,
-      ).toStrictEqual(mockResult);
-    });
-  });
-
-  it('should reset filter', async () => {
-    const { result } = renderHook(() => {
-      const { resetFilterDropdown } = useResetFilterDropdown(filterDropdownId);
-
-      const { applyRecordFilter } = useApplyRecordFilter(filterDropdownId);
-
-      const { selectedFilterState } = useFilterDropdownStates(filterDropdownId);
-
-      const [selectedFilter, setSelectedFilter] =
-        useRecoilState(selectedFilterState);
-
-      return {
-        selectedFilter,
-        setSelectedFilter,
-        applyRecordFilter,
-        resetFilterDropdown,
-      };
-    }, renderHookConfig);
-
-    act(() => {
-      result.current.applyRecordFilter(mockFilter);
-    });
-
-    await waitFor(() => {
-      expect(result.current.selectedFilter).toStrictEqual(mockFilter);
-    });
-
-    act(() => {
-      result.current.resetFilterDropdown();
-    });
-
-    await waitFor(() => {
-      expect(result.current.selectedFilter).toBeUndefined();
-    });
-  });
-
-  it('should call onFilterSelect when a filter option is set', async () => {
-    const { result } = renderHook(() => {
-      const { applyRecordFilter } = useApplyRecordFilter(filterDropdownId);
-
-      const { onFilterSelectState } = useFilterDropdownStates(filterDropdownId);
-
-      const [onFilterSelect, setOnFilterSelect] =
-        useRecoilState(onFilterSelectState);
-      return { onFilterSelect, setOnFilterSelect, applyRecordFilter };
-    }, renderHookConfig);
-    const onFilterSelectMock = jest.fn();
-
-    expect(result.current.onFilterSelect).toBeUndefined();
-
-    act(() => {
-      result.current.setOnFilterSelect(onFilterSelectMock);
-      result.current.applyRecordFilter(mockFilter);
-    });
-
-    await waitFor(() => {
-      expect(onFilterSelectMock).toBeDefined();
-      expect(onFilterSelectMock).toHaveBeenCalled();
-    });
-  });
-
-  it('should handle componentInstanceId undefined on initial values', () => {
-    global.console.error = jest.fn();
-
-    const renderFunction = () => {
-      renderHook(() => useFilterDropdown(), renderHookConfig);
-    };
-
-    expect(renderFunction).toThrow(Error);
-    expect(renderFunction).toThrow(
-      'Instance id is not provided and cannot be found in context.',
-    );
-  });
-
-  it('should componentInstanceId have been defined on initial values', () => {
-    const { result } = renderHook(
-      () => useFilterDropdown({ filterDropdownId }),
-      renderHookConfig,
-    );
-
-    expect(result.current.componentInstanceId).toBeDefined();
-  });
-});

packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useFilterDropdown.ts

@@ -1,76 +0,0 @@
-import { useSetRecoilState } from 'recoil';
-
-import { useFilterDropdownStates } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdownStates';
-
-import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
-import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
-
-type UseFilterDropdownProps = {
-  filterDropdownId?: string;
-};
-
-export const useFilterDropdown = (props?: UseFilterDropdownProps) => {
-  const componentInstanceId = useAvailableComponentInstanceIdOrThrow(
-    ObjectFilterDropdownComponentInstanceContext,
-    props?.filterDropdownId,
-  );
-
-  const {
-    filterDefinitionUsedInDropdownState,
-    objectFilterDropdownSearchInputState,
-    objectFilterDropdownSelectedRecordIdsState,
-    objectFilterDropdownSelectedOptionValuesState,
-    selectedFilterState,
-    selectedOperandInDropdownState,
-    onFilterSelectState,
-    advancedFilterViewFilterGroupIdState,
-    advancedFilterViewFilterIdState,
-  } = useFilterDropdownStates(componentInstanceId);
-
-  const setSelectedFilter = useSetRecoilState(selectedFilterState);
-  const setSelectedOperandInDropdown = useSetRecoilState(
-    selectedOperandInDropdownState,
-  );
-  const setFilterDefinitionUsedInDropdown = useSetRecoilState(
-    filterDefinitionUsedInDropdownState,
-  );
-  const setObjectFilterDropdownSearchInput = useSetRecoilState(
-    objectFilterDropdownSearchInputState,
-  );
-  const setObjectFilterDropdownSelectedRecordIds = useSetRecoilState(
-    objectFilterDropdownSelectedRecordIdsState,
-  );
-  const setObjectFilterDropdownSelectedOptionValues = useSetRecoilState(
-    objectFilterDropdownSelectedOptionValuesState,
-  );
-
-  const setOnFilterSelect = useSetRecoilState(onFilterSelectState);
-  const setAdvancedFilterViewFilterGroupId = useSetRecoilState(
-    advancedFilterViewFilterGroupIdState,
-  );
-  const setAdvancedFilterViewFilterId = useSetRecoilState(
-    advancedFilterViewFilterIdState,
-  );
-
-  return {
-    componentInstanceId,
-    setSelectedFilter,
-    setSelectedOperandInDropdown,
-    setFilterDefinitionUsedInDropdown,
-    setObjectFilterDropdownSearchInput,
-    setObjectFilterDropdownSelectedRecordIds,
-    setObjectFilterDropdownSelectedOptionValues,
-    setOnFilterSelect,
-    setAdvancedFilterViewFilterGroupId,
-    setAdvancedFilterViewFilterId,
-    filterDefinitionUsedInDropdownState,
-    objectFilterDropdownSearchInputState,
-    objectFilterDropdownSelectedRecordIdsState,
-    objectFilterDropdownSelectedOptionValuesState,
-    selectedFilterState,
-    selectedOperandInDropdownState,
-    onFilterSelectState,
-    advancedFilterViewFilterGroupIdState,
-    advancedFilterViewFilterIdState,
-  };
-};

packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useSelectFilterDefinitionUsedInDropdown.ts

@@ -1,11 +1,16 @@
 import { useApplyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useApplyRecordFilter';
-import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
+import { advancedFilterViewFilterGroupIdComponentState } from '@/object-record/object-filter-dropdown/states/advancedFilterViewFilterGroupIdComponentState';
+import { advancedFilterViewFilterIdComponentState } from '@/object-record/object-filter-dropdown/states/advancedFilterViewFilterIdComponentState';
+import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState';
+import { objectFilterDropdownSearchInputComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputComponentState';
+import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
 import { FilterDefinition } from '@/object-record/object-filter-dropdown/types/FilterDefinition';
 import { getInitialFilterValue } from '@/object-record/object-filter-dropdown/utils/getInitialFilterValue';
 import { getOperandsForFilterDefinition } from '@/object-record/object-filter-dropdown/utils/getOperandsForFilterType';
 import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
-import { useRecoilValue } from 'recoil';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { isDefined } from 'twenty-ui';
 import { v4 } from 'uuid';
 
@@ -14,19 +19,24 @@ type SelectFilterParams = {
 };
 
 export const useSelectFilterDefinitionUsedInDropdown = () => {
-  const {
+  const setFilterDefinitionUsedInDropdown = useSetRecoilComponentStateV2(
-    setFilterDefinitionUsedInDropdown,
+    filterDefinitionUsedInDropdownComponentState,
-    setSelectedOperandInDropdown,
-    setObjectFilterDropdownSearchInput,
-    advancedFilterViewFilterGroupIdState,
-    advancedFilterViewFilterIdState,
-  } = useFilterDropdown();
-
-  const advancedFilterViewFilterId = useRecoilValue(
-    advancedFilterViewFilterIdState,
   );
-  const advancedFilterViewFilterGroupId = useRecoilValue(
+
-    advancedFilterViewFilterGroupIdState,
+  const setSelectedOperandInDropdown = useSetRecoilComponentStateV2(
+    selectedOperandInDropdownComponentState,
+  );
+
+  const setObjectFilterDropdownSearchInput = useSetRecoilComponentStateV2(
+    objectFilterDropdownSearchInputComponentState,
+  );
+
+  const advancedFilterViewFilterGroupId = useRecoilComponentValueV2(
+    advancedFilterViewFilterGroupIdComponentState,
+  );
+
+  const advancedFilterViewFilterId = useRecoilComponentValueV2(
+    advancedFilterViewFilterIdComponentState,
   );
 
   const setHotkeyScope = useSetHotkeyScope();

packages/twenty-front/src/modules/views/components/EditableFilterDropdownButton.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useEffect } from 'react';
 
-import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
 import { FilterOperand } from '@/object-record/object-filter-dropdown/types/FilterOperand';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
@@ -11,6 +10,10 @@ import { EditableFilterChip } from '@/views/components/EditableFilterChip';
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
 
 import { ObjectFilterOperandSelectAndInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterOperandSelectAndInput';
+import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState';
+import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState';
+import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { useDeleteCombinedViewFilters } from '@/views/hooks/useDeleteCombinedViewFilters';
 import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState';
 import { isDefined } from '~/utils/isDefined';
@@ -26,13 +29,20 @@ export const EditableFilterDropdownButton = ({
   viewFilter,
   hotkeyScope,
 }: EditableFilterDropdownButtonProps) => {
-  const {
+  const setFilterDefinitionUsedInDropdown = useSetRecoilComponentStateV2(
-    setFilterDefinitionUsedInDropdown,
+    filterDefinitionUsedInDropdownComponentState,
-    setSelectedOperandInDropdown,
+    viewFilterDropdownId,
-    setSelectedFilter,
+  );
-  } = useFilterDropdown({
+
-    filterDropdownId: viewFilterDropdownId,
+  const setSelectedOperandInDropdown = useSetRecoilComponentStateV2(
-  });
+    selectedOperandInDropdownComponentState,
+    viewFilterDropdownId,
+  );
+
+  const setSelectedFilter = useSetRecoilComponentStateV2(
+    selectedFilterComponentState,
+    viewFilterDropdownId,
+  );
 
   // TODO: verify this instance id works
   const availableFilterDefinitions = useRecoilComponentValueV2(

packages/twenty-front/src/modules/views/components/ViewBarFilterEffect.tsx

@@ -1,12 +1,14 @@
 import { isNonEmptyString } from '@sniptt/guards';
 import { useEffect } from 'react';
-import { useRecoilValue } from 'recoil';
 
-import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 
+import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState';
+import { objectFilterDropdownSelectedOptionValuesComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedOptionValuesComponentState';
+import { objectFilterDropdownSelectedRecordIdsComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedRecordIdsComponentState';
+import { onFilterSelectComponentState } from '@/object-record/object-filter-dropdown/states/onFilterSelectComponentState';
 import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
 import { useUpsertCombinedViewFilters } from '@/views/hooks/useUpsertCombinedViewFilters';
 import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState';
@@ -28,17 +30,27 @@ export const ViewBarFilterEffect = ({
     availableFilterDefinitionsComponentState,
   );
 
-  const {
+  const setOnFilterSelect = useSetRecoilComponentStateV2(
-    setOnFilterSelect,
+    onFilterSelectComponentState,
-    filterDefinitionUsedInDropdownState,
+    filterDropdownId,
-    setObjectFilterDropdownSelectedRecordIds,
-    setObjectFilterDropdownSelectedOptionValues,
-  } = useFilterDropdown({ filterDropdownId });
-
-  const filterDefinitionUsedInDropdown = useRecoilValue(
-    filterDefinitionUsedInDropdownState,
   );
 
+  const filterDefinitionUsedInDropdown = useRecoilComponentValueV2(
+    filterDefinitionUsedInDropdownComponentState,
+    filterDropdownId,
+  );
+
+  const setObjectFilterDropdownSelectedRecordIds = useSetRecoilComponentStateV2(
+    objectFilterDropdownSelectedRecordIdsComponentState,
+    filterDropdownId,
+  );
+
+  const setObjectFilterDropdownSelectedOptionValues =
+    useSetRecoilComponentStateV2(
+      objectFilterDropdownSelectedOptionValuesComponentState,
+      filterDropdownId,
+    );
+
   // TODO: verify this instance id works
   const setAvailableFilterDefinitions = useSetRecoilComponentStateV2(
     availableFilterDefinitionsComponentState,