Refactor field and cell old component states (#13217)

This PR refactors fields draft value component state and old component
scoped states still left.

It does not refactor the persistField logic but it will allow it in a
next refactor.

We still have to refactor scoped state used as component states / family
states, not as old states.

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

@@ -2,14 +2,12 @@ import { isUndefined } from '@sniptt/guards';
 import { useRecoilCallback } from 'recoil';
 
 import { FIELD_NOT_OVERWRITTEN_AT_DRAFT } from '@/object-record/constants/FieldsNotOverwrittenAtDraft';
-import { recordFieldInputDraftValueComponentSelector } from '@/object-record/record-field/states/selectors/recordFieldInputDraftValueComponentSelector';
+import { recordFieldInputDraftValueComponentState } from '@/object-record/record-field/states/recordFieldInputDraftValueComponentState';
 import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition';
-import { FieldInputDraftValue } from '@/object-record/record-field/types/FieldInputDraftValue';
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
 import { computeDraftValueFromFieldValue } from '@/object-record/record-field/utils/computeDraftValueFromFieldValue';
 import { computeDraftValueFromString } from '@/object-record/record-field/utils/computeDraftValueFromString';
 import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
-import { extractComponentSelector } from '@/ui/utilities/state/component-state/utils/extractComponentSelector';
 
 export const useInitDraftValueV2 = <FieldValue>() => {
   return useRecoilCallback(
@@ -25,13 +23,6 @@ export const useInitDraftValueV2 = <FieldValue>() => {
         fieldDefinition: FieldDefinition<FieldMetadata>;
         fieldComponentInstanceId: string;
       }) => {
-        const getDraftValueSelector = extractComponentSelector<
-          FieldInputDraftValue<FieldValue> | undefined
-        >(
-          recordFieldInputDraftValueComponentSelector,
-          fieldComponentInstanceId,
-        );
-
         const recordFieldValue = snapshot
           .getLoadable(
             recordStoreFamilySelector<FieldValue>({
@@ -46,7 +37,9 @@ export const useInitDraftValueV2 = <FieldValue>() => {
           FIELD_NOT_OVERWRITTEN_AT_DRAFT.includes(fieldDefinition.type)
         ) {
           set(
-            getDraftValueSelector(),
+            recordFieldInputDraftValueComponentState.atomFamily({
+              instanceId: fieldComponentInstanceId,
+            }),
             computeDraftValueFromFieldValue<FieldValue>({
               fieldValue: recordFieldValue,
               fieldDefinition,
@@ -54,7 +47,9 @@ export const useInitDraftValueV2 = <FieldValue>() => {
           );
         } else {
           set(
-            getDraftValueSelector(),
+            recordFieldInputDraftValueComponentState.atomFamily({
+              instanceId: fieldComponentInstanceId,
+            }),
             computeDraftValueFromString<FieldValue>({
               value,
               fieldDefinition,

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

@@ -1,25 +1,12 @@
-import { useSetRecoilState } from 'recoil';
+import { recordFieldInputDraftValueComponentState } from '@/object-record/record-field/states/recordFieldInputDraftValueComponentState';
-
-import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
-import { recordFieldInputDraftValueComponentSelector } from '@/object-record/record-field/states/selectors/recordFieldInputDraftValueComponentSelector';
 import { FieldInputDraftValue } from '@/object-record/record-field/types/FieldInputDraftValue';
-import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
-import { extractComponentSelector } from '@/ui/utilities/state/component-state/utils/extractComponentSelector';
 
 export const useRecordFieldInput = <FieldValue>() => {
-  const recordFieldComponentInstanceId = useAvailableComponentInstanceIdOrThrow(
+  const setDraftValue = useSetRecoilComponentStateV2(
-    RecordFieldComponentInstanceContext,
+    recordFieldInputDraftValueComponentState,
   );
 
-  const getDraftValueSelector = extractComponentSelector<
-    FieldInputDraftValue<FieldValue> | undefined
-  >(
-    recordFieldInputDraftValueComponentSelector,
-    recordFieldComponentInstanceId,
-  );
-
-  const setDraftValue = useSetRecoilState(getDraftValueSelector());
-
   const isDraftValueEmpty = (
     value: FieldInputDraftValue<FieldValue> | undefined,
   ) => {
@@ -36,7 +23,6 @@ export const useRecordFieldInput = <FieldValue>() => {
 
   return {
     setDraftValue,
-    getDraftValueSelector,
     isDraftValueEmpty,
   };
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useAddressField.ts

@@ -1,11 +1,13 @@
 import { useContext } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState } from 'recoil';
 
 import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput';
 import { isFieldAddressValue } from '@/object-record/record-field/types/guards/isFieldAddressValue';
 import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 
+import { recordFieldInputDraftValueComponentState } from '@/object-record/record-field/states/recordFieldInputDraftValueComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { FieldContext } from '../../contexts/FieldContext';
 import { usePersistField } from '../../hooks/usePersistField';
 import { FieldAddressValue } from '../../types/FieldMetadata';
@@ -40,10 +42,11 @@ export const useAddressField = () => {
     persistField(newValue);
   };
 
-  const { setDraftValue, getDraftValueSelector } =
+  const { setDraftValue } = useRecordFieldInput<FieldAddressValue>();
-    useRecordFieldInput<FieldAddressValue>();
 
-  const draftValue = useRecoilValue(getDraftValueSelector());
+  const draftValue = useRecoilComponentValueV2(
+    recordFieldInputDraftValueComponentState,
+  );
 
   return {
     fieldDefinition,

packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useCurrencyField.ts

@@ -1,14 +1,16 @@
 import { useContext } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState } from 'recoil';
 
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { usePersistField } from '@/object-record/record-field/hooks/usePersistField';
 import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput';
+import { recordFieldInputDraftValueComponentState } from '@/object-record/record-field/states/recordFieldInputDraftValueComponentState';
 import { FieldCurrencyValue } from '@/object-record/record-field/types/FieldMetadata';
 import { assertFieldMetadata } from '@/object-record/record-field/types/guards/assertFieldMetadata';
 import { isFieldCurrency } from '@/object-record/record-field/types/guards/isFieldCurrency';
 import { isFieldCurrencyValue } from '@/object-record/record-field/types/guards/isFieldCurrencyValue';
 import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { convertCurrencyAmountToCurrencyMicros } from '~/utils/convertCurrencyToCurrencyMicros';
 
@@ -54,10 +56,11 @@ export const useCurrencyField = () => {
     persistField(newCurrencyValue);
   };
 
-  const { setDraftValue, getDraftValueSelector } =
+  const { setDraftValue } = useRecordFieldInput<FieldCurrencyValue>();
-    useRecordFieldInput<FieldCurrencyValue>();
 
-  const draftValue = useRecoilValue(getDraftValueSelector());
+  const draftValue = useRecoilComponentValueV2(
+    recordFieldInputDraftValueComponentState,
+  );
 
   const defaultValue = fieldDefinition.defaultValue;
 

packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useEmailsField.ts

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState } from 'recoil';
 
 import { usePersistField } from '@/object-record/record-field/hooks/usePersistField';
 import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput';
@@ -9,6 +9,8 @@ import { emailsSchema } from '@/object-record/record-field/types/guards/isFieldE
 import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 
+import { recordFieldInputDraftValueComponentState } from '@/object-record/record-field/states/recordFieldInputDraftValueComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { FieldContext } from '../../contexts/FieldContext';
 import { assertFieldMetadata } from '../../types/guards/assertFieldMetadata';
 
@@ -26,10 +28,11 @@ export const useEmailsField = () => {
     }),
   );
 
-  const { setDraftValue, getDraftValueSelector } =
+  const { setDraftValue } = useRecordFieldInput<FieldEmailsValue>();
-    useRecordFieldInput<FieldEmailsValue>();
 
-  const draftValue = useRecoilValue(getDraftValueSelector());
+  const draftValue = useRecoilComponentValueV2(
+    recordFieldInputDraftValueComponentState,
+  );
 
   const persistField = usePersistField();
 

packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useFullNameField.ts

@@ -1,14 +1,16 @@
 import { useContext } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState } from 'recoil';
 
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { usePersistField } from '@/object-record/record-field/hooks/usePersistField';
 import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput';
+import { recordFieldInputDraftValueComponentState } from '@/object-record/record-field/states/recordFieldInputDraftValueComponentState';
 import { FieldFullNameValue } from '@/object-record/record-field/types/FieldMetadata';
 import { assertFieldMetadata } from '@/object-record/record-field/types/guards/assertFieldMetadata';
 import { isFieldFullName } from '@/object-record/record-field/types/guards/isFieldFullName';
 import { isFieldFullNameValue } from '@/object-record/record-field/types/guards/isFieldFullNameValue';
 import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 
 export const useFullNameField = () => {
@@ -39,10 +41,11 @@ export const useFullNameField = () => {
     persistField(newValue);
   };
 
-  const { setDraftValue, getDraftValueSelector } =
+  const { setDraftValue } = useRecordFieldInput<FieldFullNameValue>();
-    useRecordFieldInput<FieldFullNameValue>();
 
-  const draftValue = useRecoilValue(getDraftValueSelector());
+  const draftValue = useRecoilComponentValueV2(
+    recordFieldInputDraftValueComponentState,
+  );
 
   return {
     fieldDefinition,

packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useJsonField.ts

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState } from 'recoil';
 
 import { usePersistField } from '@/object-record/record-field/hooks/usePersistField';
 import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput';
@@ -8,6 +8,8 @@ import { recordStoreFamilySelector } from '@/object-record/record-store/states/s
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 
 import { usePrecomputedJsonDraftValue } from '@/object-record/record-field/meta-types/hooks/usePrecomputedJsonDraftValue';
+import { recordFieldInputDraftValueComponentState } from '@/object-record/record-field/states/recordFieldInputDraftValueComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { FieldContext } from '../../contexts/FieldContext';
 import { assertFieldMetadata } from '../../types/guards/assertFieldMetadata';
 import { isFieldRawJson } from '../../types/guards/isFieldRawJson';
@@ -42,10 +44,11 @@ export const useJsonField = () => {
     }
   };
 
-  const { setDraftValue, getDraftValueSelector } =
+  const { setDraftValue } = useRecordFieldInput<FieldJsonValue>();
-    useRecordFieldInput<FieldJsonValue>();
 
-  const draftValue = useRecoilValue(getDraftValueSelector());
+  const draftValue = useRecoilComponentValueV2(
+    recordFieldInputDraftValueComponentState,
+  );
 
   const precomputedDraftValue = usePrecomputedJsonDraftValue({
     draftValue,

packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useLinksField.ts

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState } from 'recoil';
 
 import { usePersistField } from '@/object-record/record-field/hooks/usePersistField';
 import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput';
@@ -9,6 +9,8 @@ import { linksSchema } from '@/object-record/record-field/types/guards/isFieldLi
 import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 
+import { recordFieldInputDraftValueComponentState } from '@/object-record/record-field/states/recordFieldInputDraftValueComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { FieldContext } from '../../contexts/FieldContext';
 import { assertFieldMetadata } from '../../types/guards/assertFieldMetadata';
 
@@ -26,10 +28,11 @@ export const useLinksField = () => {
     }),
   );
 
-  const { setDraftValue, getDraftValueSelector } =
+  const { setDraftValue } = useRecordFieldInput<FieldLinksValue>();
-    useRecordFieldInput<FieldLinksValue>();
 
-  const draftValue = useRecoilValue(getDraftValueSelector());
+  const draftValue = useRecoilComponentValueV2(
+    recordFieldInputDraftValueComponentState,
+  );
 
   const persistField = usePersistField();
 

packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useMultiSelectField.ts

@@ -1,14 +1,16 @@
 import { useContext } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState } from 'recoil';
 
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { usePersistField } from '@/object-record/record-field/hooks/usePersistField';
 import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput';
+import { recordFieldInputDraftValueComponentState } from '@/object-record/record-field/states/recordFieldInputDraftValueComponentState';
 import { FieldMultiSelectValue } from '@/object-record/record-field/types/FieldMetadata';
 import { assertFieldMetadata } from '@/object-record/record-field/types/guards/assertFieldMetadata';
 import { isFieldMultiSelect } from '@/object-record/record-field/types/guards/isFieldMultiSelect';
 import { isFieldMultiSelectValue } from '@/object-record/record-field/types/guards/isFieldMultiSelectValue';
 import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 
 export const useMultiSelectField = () => {
@@ -34,9 +36,11 @@ export const useMultiSelectField = () => {
     : null;
   const persistField = usePersistField();
 
-  const { setDraftValue, getDraftValueSelector } =
+  const { setDraftValue } = useRecordFieldInput<FieldMultiSelectValue>();
-    useRecordFieldInput<FieldMultiSelectValue>();
+
-  const draftValue = useRecoilValue(getDraftValueSelector());
+  const draftValue = useRecoilComponentValueV2(
+    recordFieldInputDraftValueComponentState,
+  );
 
   return {
     recordId,

packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useNumberField.ts

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState } from 'recoil';
 
 import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput';
 import { FieldNumberValue } from '@/object-record/record-field/types/FieldMetadata';
@@ -11,6 +11,8 @@ import {
   castAsNumberOrNull,
 } from '~/utils/cast-as-number-or-null';
 
+import { recordFieldInputDraftValueComponentState } from '@/object-record/record-field/states/recordFieldInputDraftValueComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { isNull } from '@sniptt/guards';
 import { FieldContext } from '../../contexts/FieldContext';
 import { usePersistField } from '../../hooks/usePersistField';
@@ -54,10 +56,11 @@ export const useNumberField = () => {
     persistField(castedValue);
   };
 
-  const { setDraftValue, getDraftValueSelector } =
+  const { setDraftValue } = useRecordFieldInput<FieldNumberValue>();
-    useRecordFieldInput<FieldNumberValue>();
 
-  const draftValue = useRecoilValue(getDraftValueSelector());
+  const draftValue = useRecoilComponentValueV2(
+    recordFieldInputDraftValueComponentState,
+  );
 
   return {
     fieldDefinition,

packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/usePhonesField.ts

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState } from 'recoil';
 
 import { usePersistField } from '@/object-record/record-field/hooks/usePersistField';
 import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput';
@@ -9,6 +9,8 @@ import { phonesSchema } from '@/object-record/record-field/types/guards/isFieldP
 import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 
+import { recordFieldInputDraftValueComponentState } from '@/object-record/record-field/states/recordFieldInputDraftValueComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { FieldContext } from '../../contexts/FieldContext';
 import { assertFieldMetadata } from '../../types/guards/assertFieldMetadata';
 
@@ -26,10 +28,11 @@ export const usePhonesField = () => {
     }),
   );
 
-  const { setDraftValue, getDraftValueSelector } =
+  const { setDraftValue } = useRecordFieldInput<FieldPhonesValue>();
-    useRecordFieldInput<FieldPhonesValue>();
 
-  const draftValue = useRecoilValue(getDraftValueSelector());
+  const draftValue = useRecoilComponentValueV2(
+    recordFieldInputDraftValueComponentState,
+  );
 
   const persistField = usePersistField();
 

packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useRelationField.ts

@@ -1,16 +1,17 @@
 import { useContext } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState } from 'recoil';
 
 import { useGetButtonIcon } from '@/object-record/record-field/hooks/useGetButtonIcon';
-import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput';
 import { FieldRelationValue } from '@/object-record/record-field/types/FieldMetadata';
 import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
+import { recordFieldInputDraftValueComponentState } from '@/object-record/record-field/states/recordFieldInputDraftValueComponentState';
 import { assertFieldMetadata } from '@/object-record/record-field/types/guards/assertFieldMetadata';
 import { isFieldRelation } from '@/object-record/record-field/types/guards/isFieldRelation';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 
 export const useRelationField = <T extends ObjectRecord | ObjectRecord[]>() => {
   const { recordId, fieldDefinition, maxWidth } = useContext(FieldContext);
@@ -28,9 +29,9 @@ export const useRelationField = <T extends ObjectRecord | ObjectRecord[]>() => {
     recordStoreFamilySelector({ recordId, fieldName }),
   );
 
-  const { getDraftValueSelector } =
+  const draftValue = useRecoilComponentValueV2(
-    useRecordFieldInput<FieldRelationValue<T>>();
+    recordFieldInputDraftValueComponentState,
-  const draftValue = useRecoilValue(getDraftValueSelector());
+  );
 
   const initialSearchValue = draftValue;
 

packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useRichTextField.ts

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState } from 'recoil';
 
 import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput';
 import { FieldRichTextValue } from '@/object-record/record-field/types/FieldMetadata';
@@ -7,8 +7,10 @@ import { recordStoreFamilySelector } from '@/object-record/record-store/states/s
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 
 import { usePersistField } from '@/object-record/record-field/hooks/usePersistField';
+import { recordFieldInputDraftValueComponentState } from '@/object-record/record-field/states/recordFieldInputDraftValueComponentState';
 import { isFieldRichText } from '@/object-record/record-field/types/guards/isFieldRichText';
 import { isFieldRichTextValue } from '@/object-record/record-field/types/guards/isFieldRichTextValue';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import type { PartialBlock } from '@blocknote/core';
 import { isNonEmptyString } from '@sniptt/guards';
 import { FieldContext } from '../../contexts/FieldContext';
@@ -33,10 +35,11 @@ export const useRichTextField = () => {
   );
   const fieldRichTextValue = isFieldRichTextValue(fieldValue) ? fieldValue : '';
 
-  const { setDraftValue, getDraftValueSelector } =
+  const { setDraftValue } = useRecordFieldInput<FieldRichTextValue>();
-    useRecordFieldInput<FieldRichTextValue>();
 
-  const draftValue = useRecoilValue(getDraftValueSelector());
+  const draftValue = useRecoilComponentValueV2(
+    recordFieldInputDraftValueComponentState,
+  );
 
   const draftValueParsed: PartialBlock[] = isNonEmptyString(draftValue)
     ? JSON.parse(draftValue)

packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useRichTextV2Field.ts

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState } from 'recoil';
 
 import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput';
 import {
@@ -10,8 +10,10 @@ import { recordStoreFamilySelector } from '@/object-record/record-store/states/s
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 
 import { usePersistField } from '@/object-record/record-field/hooks/usePersistField';
+import { recordFieldInputDraftValueComponentState } from '@/object-record/record-field/states/recordFieldInputDraftValueComponentState';
 import { isFieldRichTextV2 } from '@/object-record/record-field/types/guards/isFieldRichTextV2';
 import { isFieldRichTextV2Value } from '@/object-record/record-field/types/guards/isFieldRichTextValueV2';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import type { PartialBlock } from '@blocknote/core';
 import { isNonEmptyString } from '@sniptt/guards';
 import { FieldContext } from '../../contexts/FieldContext';
@@ -38,10 +40,11 @@ export const useRichTextV2Field = () => {
     ? fieldValue
     : ({ blocknote: null, markdown: null } as FieldRichTextV2Value);
 
-  const { setDraftValue, getDraftValueSelector } =
+  const { setDraftValue } = useRecordFieldInput<FieldRichTextValue>();
-    useRecordFieldInput<FieldRichTextValue>();
 
-  const draftValue = useRecoilValue(getDraftValueSelector());
+  const draftValue = useRecoilComponentValueV2(
+    recordFieldInputDraftValueComponentState,
+  );
 
   const draftValueParsed: PartialBlock[] = isNonEmptyString(draftValue)
     ? JSON.parse(draftValue)

packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useSelectField.ts

@@ -1,11 +1,13 @@
 import { useContext } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState } from 'recoil';
 
 import { usePersistField } from '@/object-record/record-field/hooks/usePersistField';
 import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput';
 import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 
+import { recordFieldInputDraftValueComponentState } from '@/object-record/record-field/states/recordFieldInputDraftValueComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { FieldContext } from '../../contexts/FieldContext';
 import { FieldSelectValue } from '../../types/FieldMetadata';
 import { assertFieldMetadata } from '../../types/guards/assertFieldMetadata';
@@ -29,9 +31,11 @@ export const useSelectField = () => {
   const fieldSelectValue = isFieldSelectValue(fieldValue) ? fieldValue : null;
   const persistField = usePersistField();
 
-  const { setDraftValue, getDraftValueSelector } =
+  const { setDraftValue } = useRecordFieldInput<FieldSelectValue>();
-    useRecordFieldInput<FieldSelectValue>();
+
-  const draftValue = useRecoilValue(getDraftValueSelector());
+  const draftValue = useRecoilComponentValueV2(
+    recordFieldInputDraftValueComponentState,
+  );
 
   return {
     recordId,

packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useTextField.ts

@@ -1,13 +1,15 @@
 import { useContext } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState } from 'recoil';
 
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput';
+import { recordFieldInputDraftValueComponentState } from '@/object-record/record-field/states/recordFieldInputDraftValueComponentState';
 import { FieldTextValue } from '@/object-record/record-field/types/FieldMetadata';
 import { assertFieldMetadata } from '@/object-record/record-field/types/guards/assertFieldMetadata';
 import { isFieldText } from '@/object-record/record-field/types/guards/isFieldText';
 import { isFieldTextValue } from '@/object-record/record-field/types/guards/isFieldTextValue';
 import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 
 export const useTextField = () => {
@@ -25,10 +27,11 @@ export const useTextField = () => {
   );
   const fieldTextValue = isFieldTextValue(fieldValue) ? fieldValue : '';
 
-  const { setDraftValue, getDraftValueSelector } =
+  const { setDraftValue } = useRecordFieldInput<FieldTextValue>();
-    useRecordFieldInput<FieldTextValue>();
 
-  const draftValue = useRecoilValue(getDraftValueSelector());
+  const draftValue = useRecoilComponentValueV2(
+    recordFieldInputDraftValueComponentState,
+  );
 
   return {
     draftValue,

packages/twenty-front/src/modules/object-record/record-field/states/recordFieldInputDraftValueComponentState.ts

@@ -1,7 +1,9 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
 
 export const recordFieldInputDraftValueComponentState =
-  createComponentState<any>({
+  createComponentStateV2<any>({
     key: 'recordFieldInputDraftValueComponentState',
     defaultValue: undefined,
+    componentInstanceContext: RecordFieldComponentInstanceContext,
   });

packages/twenty-front/src/modules/object-record/record-field/states/selectors/recordFieldInputDraftValueComponentSelector.ts

@@ -1,16 +0,0 @@
-import { recordFieldInputDraftValueComponentState } from '@/object-record/record-field/states/recordFieldInputDraftValueComponentState';
-import { createComponentSelector } from '@/ui/utilities/state/component-state/utils/createComponentSelector';
-
-export const recordFieldInputDraftValueComponentSelector =
-  createComponentSelector<any>({
-    key: 'recordFieldInputDraftValueComponentSelector',
-    get:
-      <T>({ scopeId }: { scopeId: string }) =>
-      ({ get }) =>
-        get(recordFieldInputDraftValueComponentState({ scopeId })) as T,
-    set:
-      <T>({ scopeId }: { scopeId: string }) =>
-      ({ set }, newValue: T) => {
-        set(recordFieldInputDraftValueComponentState({ scopeId }), newValue);
-      },
-  });