Jotai 13 (#18178)

## Recoil to Jotai Migration — PR 13: Workflow, Page Layout, AI,
Activities, Settings, SSE & Remaining Modules

### Summary

This is the 13th PR in the [14-PR migration
series](packages/twenty-front/src/modules/ui/utilities/state/jotai/MIGRATION_PLAN.md)
to replace Recoil with Jotai as the state management library in
`twenty-front`. This PR migrates the remaining consumer code across all
modules — updating ~1,076 files with ~10k insertions/deletions.

### What changed

**New Jotai infrastructure (13 new files):**
- `createComponentSelectorV2` and `createComponentFamilySelectorV2` —
instance-scoped derived atoms, replacing Recoil's component selectors
- 6 new hooks: `useRecoilComponentSelectorValueV2`,
`useRecoilComponentFamilySelectorValueV2`,
`useRecoilComponentSelectorCallbackStateV2`,
`useRecoilComponentFamilySelectorCallbackStateV2`,
`useRecoilComponentStateCallbackStateV2`,
`useRecoilComponentFamilyStateCallbackStateV2`
- New types: `ComponentSelectorV2`, `ComponentFamilySelectorV2`,
`SelectorCallbacksV2`
- Extended `buildGetHelper` to support the new selector patterns

**State definition migrations:**
- `createState()` → `createStateV2()` (Jotai `atom()`)
- `createFamilyState()` → `createFamilyStateV2()` (Jotai `atom()` with
family cache)
- Recoil `selector`/`selectorFamily` → Jotai derived `atom()` via V2
utilities

**Hook migrations (~2,400 removed, ~1,545 added V2 equivalents):**
- `useRecoilValue` → `useRecoilValueV2`
- `useRecoilState` → `useRecoilStateV2`
- `useSetRecoilState` → `useSetRecoilStateV2`
- `useRecoilCallback` → `useCallback` + `jotaiStore.get/set`
- `useRecoilComponentValue` → `useRecoilComponentValueV2`
- `useSetRecoilComponentState` → `useSetRecoilComponentStateV2`
- `useRecoilComponentFamilyValue` → `useRecoilComponentFamilyValueV2` /
`useFamilySelectorValueV2`
- ~397 direct `import from 'recoil'` removed

**Deleted files (9 files):**
- `dateLocaleState.ts` — consolidated
- `currentAIChatThreadTitleStateV2.ts` — renamed to replace the original
- `isCommandMenuOpenedState.ts` — removed
- `filesFieldUploadState.ts` — replaced by V2
- `recordStoreFamilySelector.ts`, `recordStoreFieldValueSelector.ts`,
`recordStoreRecordsSelector.ts` — replaced by V2 equivalents
- `settingsAllRolesSelector.ts` — replaced by `useSettingsAllRoles` hook
- `settingsRoleIdsStateV2.ts` — consolidated

**Modules migrated:**
- Workflow (diagram, steps, variables, filters)
- Page Layout (widgets, fields, graph, tabs)
- AI (chat, agents, browsing context)
- Activities (rich text editor, targets, timeline)
- Action Menu (single/multiple record actions)
- Command Menu (navigation, history, pages, workflow)
- Context Store
- Record Board, Record Table, Record Calendar, Record Index
- Record Field, Record Filter, Record Sort, Record Group
- Record Drag, Record Picker, Record Store
- Views (view bar, view picker, filters, sorts)
- Settings (roles, permissions, SSO, security, data model, developers,
domains)
- SSE (event streams, subscriptions)
- Spreadsheet Import
- Auth, Favorites, Front Components, Information Banner

packages/twenty-front/src/modules/activities/calendar/components/CalendarEventsCard.tsx

@@ -1,7 +1,7 @@
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
 import { format, getYear } from 'date-fns';
-import { useRecoilValue } from 'recoil';
 
 import { CalendarMonthCard } from '@/activities/calendar/components/CalendarMonthCard';
 import { TIMELINE_CALENDAR_EVENTS_DEFAULT_PAGE_SIZE } from '@/activities/calendar/constants/Calendar';
@@ -26,7 +26,7 @@ import {
   Section,
 } from 'twenty-ui/layout';
 import { type TimelineCalendarEventsWithTotal } from '~/generated/graphql';
-import { dateLocaleState } from '~/localization/states/dateLocaleState';
+import { dateLocaleStateV2 } from '~/localization/states/dateLocaleStateV2';
 
 const StyledContainer = styled.div`
   box-sizing: border-box;
@@ -49,7 +49,7 @@ const StyledTitleContainer = styled.div`
 export const CalendarEventsCard = () => {
   const { t } = useLingui();
   const targetRecord = useTargetRecord();
-  const { localeCatalog } = useRecoilValue(dateLocaleState);
+  const { localeCatalog } = useRecoilValueV2(dateLocaleStateV2);
 
   const [query, queryName] =
     targetRecord.targetObjectNameSingular === CoreObjectNameSingular.Person

packages/twenty-front/src/modules/activities/components/ActivityRichTextEditor.tsx

@@ -1,10 +1,11 @@
 import { useCallback, useMemo } from 'react';
-import { useRecoilCallback, useRecoilState } from 'recoil';
+import { useAtom, useStore } from 'jotai';
 import { v4 } from 'uuid';
 
 import { useUploadAttachmentFile } from '@/activities/files/hooks/useUploadAttachmentFile';
 import { useUpsertActivity } from '@/activities/hooks/useUpsertActivity';
 import { canCreateActivityState } from '@/activities/states/canCreateActivityState';
+import { useRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilStateV2';
 import { getActivityTargetObjectFieldIdName } from '@/activities/utils/getActivityTargetObjectFieldIdName';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
@@ -56,7 +57,10 @@ export const ActivityRichTextEditor = ({
   activityId,
   activityObjectNameSingular,
 }: ActivityRichTextEditorProps) => {
-  const [activityInStore] = useRecoilState(recordStoreFamilyState(activityId));
+  const store = useStore();
+  const [activityInStore] = useAtom(
+    recordStoreFamilyState.atomFamily(activityId),
+  );
 
   const cache = useApolloCoreClient().cache;
   const activity = activityInStore as Task | Note | null;
@@ -122,7 +126,7 @@ export const ActivityRichTextEditor = ({
     }
   }, 300);
 
-  const [canCreateActivity, setCanCreateActivity] = useRecoilState(
+  const [canCreateActivity, setCanCreateActivity] = useRecoilStateV2(
     canCreateActivityState,
   );
 
@@ -145,47 +149,45 @@ export const ActivityRichTextEditor = ({
     [canCreateActivity, persistBodyDebounced, setCanCreateActivity],
   );
 
-  const handleBodyChange = useRecoilCallback(
-    ({ set, snapshot }) =>
-      async (newStringifiedBody: string) => {
-        const oldActivity = snapshot
-          .getLoadable(recordStoreFamilyState(activityId))
-          .getValue();
+  const handleBodyChange = useCallback(
+    async (newStringifiedBody: string) => {
+      const oldActivity = store.get(
+        recordStoreFamilyState.atomFamily(activityId),
+      );
 
-        set(recordStoreFamilyState(activityId), (oldActivity) => {
-          return {
-            ...oldActivity,
-            id: activityId,
-            bodyV2: {
+      store.set(
+        recordStoreFamilyState.atomFamily(activityId),
+        (prev: typeof oldActivity) => ({
+          ...prev,
+          id: activityId,
+          bodyV2: {
+            blocknote: newStringifiedBody,
+            markdown: null,
+          },
+          __typename: 'Activity',
+        }),
+      );
+
+      modifyRecordFromCache({
+        recordId: activityId,
+        fieldModifiers: {
+          bodyV2: () => {
+            return {
               blocknote: newStringifiedBody,
               markdown: null,
-            },
-            __typename: 'Activity',
-          };
-        });
-
-        modifyRecordFromCache({
-          recordId: activityId,
-          fieldModifiers: {
-            bodyV2: () => {
-              return {
-                blocknote: newStringifiedBody,
-                markdown: null,
-              };
-            },
+            };
           },
-          cache,
-          objectMetadataItem: objectMetadataItemActivity,
-        });
+        },
+        cache,
+        objectMetadataItem: objectMetadataItemActivity,
+      });
 
-        handlePersistBody(newStringifiedBody);
+      handlePersistBody(newStringifiedBody);
 
-        await syncAttachments(
-          newStringifiedBody,
-          oldActivity?.bodyV2.blocknote,
-        );
-      },
+      await syncAttachments(newStringifiedBody, oldActivity?.bodyV2.blocknote);
+    },
     [
+      store,
       activityId,
       cache,
       objectMetadataItemActivity,
@@ -299,59 +301,43 @@ export const ActivityRichTextEditor = ({
   //   but this leaves the door open for unpredicted behavior with click handlers conflicts,
   //   we recently had a bug which was deleting what the user typed and closed the right drawer if he used backspace key.
   // We could maybe use the types of components in the focus stack.
-  const handleBlockEditorFocus = useRecoilCallback(
-    ({ snapshot }) =>
-      () => {
-        // TODO: Here we want to detect anything that is open to avoid conflicts with the library click event
-        //   that is not prevented and propagate to other click handlers in the app.
-        //  Because that is how we do in the app, for example with stacked dropdowns, we always close what's open before
-        //  letting the click being captured by a button or input that can capture it.
-        const isRecordTitleCellOpen = snapshot
-          .getLoadable(
-            isTitleCellInEditModeComponentState.atomFamily({
-              instanceId: recordTitleCellId,
-            }),
-          )
-          .getValue();
+  const handleBlockEditorFocus = useCallback(() => {
+    const isRecordTitleCellOpen = store.get(
+      isTitleCellInEditModeComponentState.atomFamily({
+        instanceId: recordTitleCellId,
+      }),
+    );
 
-        if (isRecordTitleCellOpen) {
-          editor.domElement?.blur();
-          return;
-        }
+    if (isRecordTitleCellOpen) {
+      editor.domElement?.blur();
+      return;
+    }
 
-        pushFocusItemToFocusStack({
-          component: {
-            instanceId: activityId,
-            type: FocusComponentType.ACTIVITY_RICH_TEXT_EDITOR,
-          },
-          focusId: activityId,
-          globalHotkeysConfig: BLOCK_EDITOR_GLOBAL_HOTKEYS_CONFIG,
-        });
+    pushFocusItemToFocusStack({
+      component: {
+        instanceId: activityId,
+        type: FocusComponentType.ACTIVITY_RICH_TEXT_EDITOR,
       },
-    [recordTitleCellId, activityId, editor, pushFocusItemToFocusStack],
-  );
+      focusId: activityId,
+      globalHotkeysConfig: BLOCK_EDITOR_GLOBAL_HOTKEYS_CONFIG,
+    });
+  }, [recordTitleCellId, activityId, editor, pushFocusItemToFocusStack, store]);
 
-  const handlerBlockEditorBlur = useRecoilCallback(
-    ({ snapshot }) =>
-      () => {
-        const isRecordTitleCellOpen = snapshot
-          .getLoadable(
-            isTitleCellInEditModeComponentState.atomFamily({
-              instanceId: recordTitleCellId,
-            }),
-          )
-          .getValue();
+  const handlerBlockEditorBlur = useCallback(() => {
+    const isRecordTitleCellOpen = store.get(
+      isTitleCellInEditModeComponentState.atomFamily({
+        instanceId: recordTitleCellId,
+      }),
+    );
 
-        if (isRecordTitleCellOpen) {
-          return;
-        }
+    if (isRecordTitleCellOpen) {
+      return;
+    }
 
-        removeFocusItemFromFocusStackById({
-          focusId: activityId,
-        });
-      },
-    [activityId, recordTitleCellId, removeFocusItemFromFocusStackById],
-  );
+    removeFocusItemFromFocusStackById({
+      focusId: activityId,
+    });
+  }, [activityId, recordTitleCellId, removeFocusItemFromFocusStackById, store]);
 
   return (
     <>

packages/twenty-front/src/modules/activities/emails/components/EmailThreadHeader.tsx

@@ -1,8 +1,8 @@
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 import styled from '@emotion/styled';
 import { t } from '@lingui/core/macro';
-import { useRecoilValue } from 'recoil';
 
-import { dateLocaleState } from '~/localization/states/dateLocaleState';
+import { dateLocaleStateV2 } from '~/localization/states/dateLocaleStateV2';
 import { beautifyPastDateRelativeToNow } from '~/utils/date-utils';
 
 type EmailThreadHeaderProps = {
@@ -43,7 +43,7 @@ export const EmailThreadHeader = ({
   subject,
   lastMessageSentAt,
 }: EmailThreadHeaderProps) => {
-  const { localeCatalog } = useRecoilValue(dateLocaleState);
+  const { localeCatalog } = useRecoilValueV2(dateLocaleStateV2);
   const lastMessageSentAtFormatted = beautifyPastDateRelativeToNow(
     lastMessageSentAt,
     localeCatalog,

packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageSender.tsx

@@ -1,10 +1,10 @@
 import styled from '@emotion/styled';
-import { useRecoilValue } from 'recoil';
 
 import { ParticipantChip } from '@/activities/components/ParticipantChip';
 import { type EmailThreadMessageParticipant } from '@/activities/emails/types/EmailThreadMessageParticipant';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 import { AppTooltip, TooltipPosition } from 'twenty-ui/display';
-import { dateLocaleState } from '~/localization/states/dateLocaleState';
+import { dateLocaleStateV2 } from '~/localization/states/dateLocaleStateV2';
 import {
   beautifyPastDateRelativeToNow,
   formatToHumanReadableDate,
@@ -31,7 +31,7 @@ export const EmailThreadMessageSender = ({
   sender,
   sentAt,
 }: EmailThreadMessageSenderProps) => {
-  const { localeCatalog } = useRecoilValue(dateLocaleState);
+  const { localeCatalog } = useRecoilValueV2(dateLocaleStateV2);
   const tooltipId = `date-tooltip-${sentAt.replace(/[^a-zA-Z0-9]/g, '-')}`;
 
   return (

packages/twenty-front/src/modules/activities/emails/states/lastViewableEmailThreadIdState.ts

@@ -1,5 +1,5 @@
-import { createState } from '@/ui/utilities/state/utils/createState';
-export const emailThreadIdWhenEmailThreadWasClosedState = createState<
+import { createStateV2 } from '@/ui/utilities/state/jotai/utils/createStateV2';
+export const emailThreadIdWhenEmailThreadWasClosedState = createStateV2<
   string | null
 >({
   key: 'emailThreadIdWhenEmailThreadWasClosedState',

packages/twenty-front/src/modules/activities/hooks/__tests__/useActivityTargetObjectRecords.test.tsx

@@ -3,12 +3,13 @@ import { MockedProvider } from '@apollo/client/testing';
 import { act, renderHook } from '@testing-library/react';
 import { type ReactNode } from 'react';
 import { Provider as JotaiProvider } from 'jotai';
-import { RecoilRoot, useSetRecoilState } from 'recoil';
+import { RecoilRoot } from 'recoil';
 
 import { useActivityTargetObjectRecords } from '@/activities/hooks/useActivityTargetObjectRecords';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { useSetFamilyRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetFamilyRecoilStateV2';
 import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
 import { SnackBarComponentInstanceContext } from '@/ui/feedback/snack-bar-manager/contexts/SnackBarComponentInstanceContext';
 import { JestObjectMetadataItemSetter } from '~/testing/jest/JestObjectMetadataItemSetter';
@@ -139,8 +140,9 @@ describe('useActivityTargetObjectRecords', () => {
 
     const { result } = renderHook(
       () => {
-        const setRecordFromStore = useSetRecoilState(
-          recordStoreFamilyState(task.id),
+        const setRecordFromStore = useSetFamilyRecoilStateV2(
+          recordStoreFamilyState,
+          task.id,
         );
 
         const { activityTargetObjectRecords } = useActivityTargetObjectRecords(

packages/twenty-front/src/modules/activities/hooks/__tests__/useOpenCreateActivityDrawer.test.tsx

@@ -1,11 +1,11 @@
 import { type MockedResponse } from '@apollo/client/testing';
 import { act, renderHook } from '@testing-library/react';
-import { useRecoilValue } from 'recoil';
 
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
 import gql from 'graphql-tag';
 import { getJestMetadataAndApolloMocksWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksWrapper';
@@ -83,7 +83,7 @@ describe('useOpenCreateActivityDrawer', () => {
         const openActivityRightDrawer = useOpenCreateActivityDrawer({
           activityObjectNameSingular: CoreObjectNameSingular.Note,
         });
-        const viewableRecordId = useRecoilValue(viewableRecordIdState);
+        const viewableRecordId = useRecoilValueV2(viewableRecordIdState);
         return {
           openActivityRightDrawer,
           viewableRecordId,

packages/twenty-front/src/modules/activities/hooks/useActivities.ts

@@ -1,3 +1,6 @@
+import { useCallback } from 'react';
+import { useStore } from 'jotai';
+
 import { useActivityTargetsForTargetableObjects } from '@/activities/hooks/useActivityTargetsForTargetableObjects';
 import { type ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { type Note } from '@/activities/types/Note';
@@ -7,7 +10,6 @@ import { type TaskTarget } from '@/activities/types/TaskTarget';
 import { type CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { getRecordsFromRecordConnection } from '@/object-record/cache/utils/getRecordsFromRecordConnection';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
-import { useRecoilCallback } from 'recoil';
 import { type RecordGqlOperationOrderBy } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
 
@@ -24,15 +26,15 @@ export const useActivities = <T extends Task | Note>({
   skip?: boolean;
   limit: number;
 }) => {
-  const updateActivitiesInStore = useRecoilCallback(
-    ({ set }) =>
-      (activityTargets: (TaskTarget | NoteTarget)[]) => {
-        for (const activityTarget of activityTargets) {
-          const activity = activityTarget[objectNameSingular];
-          set(recordStoreFamilyState(activity.id), activity);
-        }
-      },
-    [objectNameSingular],
+  const store = useStore();
+  const updateActivitiesInStore = useCallback(
+    (activityTargets: (TaskTarget | NoteTarget)[]) => {
+      for (const activityTarget of activityTargets) {
+        const activity = activityTarget[objectNameSingular];
+        store.set(recordStoreFamilyState.atomFamily(activity.id), activity);
+      }
+    },
+    [store, objectNameSingular],
   );
 
   const {

packages/twenty-front/src/modules/activities/hooks/useActivityTargetObjectRecords.ts

@@ -1,5 +1,3 @@
-import { useRecoilValue } from 'recoil';
-
 import { type Note } from '@/activities/types/Note';
 import { type NoteTarget } from '@/activities/types/NoteTarget';
 import { type Task } from '@/activities/types/Task';
@@ -7,6 +5,7 @@ import { type TaskTarget } from '@/activities/types/TaskTarget';
 import { getActivityTargetObjectRecords } from '@/activities/utils/getActivityTargetObjectRecords';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { useFamilyRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useFamilyRecoilValueV2';
 import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 import { type Nullable } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
@@ -17,8 +16,9 @@ export const useActivityTargetObjectRecords = (
 ) => {
   const objectMetadataItems = useRecoilValueV2(objectMetadataItemsState);
 
-  const activity = useRecoilValue(
-    recordStoreFamilyState(activityRecordId ?? ''),
+  const activity = useFamilyRecoilValueV2(
+    recordStoreFamilyState,
+    activityRecordId ?? '',
   ) as Note | Task | null;
 
   if (!isDefined(activity) && !isDefined(activityTargets)) {

packages/twenty-front/src/modules/activities/hooks/useCreateActivityInDB.ts

@@ -1,3 +1,5 @@
+import { useCallback } from 'react';
+import { useStore } from 'jotai';
 import { isNonEmptyArray } from '@sniptt/guards';
 
 import { type ActivityForEditor } from '@/activities/types/ActivityForEditor';
@@ -15,7 +17,6 @@ import { createOneActivityOperationSignatureFactory } from '@/activities/graphql
 import { type NoteTarget } from '@/activities/types/NoteTarget';
 import { type TaskTarget } from '@/activities/types/TaskTarget';
 import { getJoinObjectNameSingular } from '@/activities/utils/getJoinObjectNameSingular';
-import { useRecoilCallback } from 'recoil';
 import { capitalize } from 'twenty-shared/utils';
 
 export const useCreateActivityInDB = ({
@@ -56,53 +57,52 @@ export const useCreateActivityInDB = ({
     });
 
   const cache = useApolloCoreClient().cache;
+  const store = useStore();
 
-  const createActivityInDB = useRecoilCallback(
-    ({ set }) =>
-      async (activityToCreate: ActivityForEditor) => {
-        const createdActivity = await createOneActivity?.({
-          ...activityToCreate,
-          updatedAt: new Date().toISOString(),
+  const createActivityInDB = useCallback(
+    async (activityToCreate: ActivityForEditor) => {
+      const createdActivity = await createOneActivity?.({
+        ...activityToCreate,
+        updatedAt: new Date().toISOString(),
+      });
+
+      const activityTargetsToCreate =
+        activityToCreate.noteTargets ?? activityToCreate.taskTargets ?? [];
+
+      if (isNonEmptyArray(activityTargetsToCreate)) {
+        await createManyActivityTargets({
+          recordsToCreate: activityTargetsToCreate,
         });
+      }
 
-        const activityTargetsToCreate =
-          activityToCreate.noteTargets ?? activityToCreate.taskTargets ?? [];
+      const activityTargetsConnection = getRecordConnectionFromRecords({
+        objectMetadataItems,
+        objectMetadataItem: objectMetadataItemActivityTarget,
+        records: activityTargetsToCreate.map((activityTarget) => ({
+          ...activityTarget,
+          __typename: capitalize(objectMetadataItemActivityTarget.nameSingular),
+        })),
+        withPageInfo: false,
+        computeReferences: true,
+        isRootLevel: false,
+      });
 
-        if (isNonEmptyArray(activityTargetsToCreate)) {
-          await createManyActivityTargets({
-            recordsToCreate: activityTargetsToCreate,
-          });
-        }
+      modifyRecordFromCache({
+        recordId: createdActivity.id,
+        cache,
+        fieldModifiers: {
+          activityTargets: () => activityTargetsConnection,
+        },
+        objectMetadataItem: objectMetadataItemActivity,
+      });
 
-        const activityTargetsConnection = getRecordConnectionFromRecords({
-          objectMetadataItems,
-          objectMetadataItem: objectMetadataItemActivityTarget,
-          records: activityTargetsToCreate.map((activityTarget) => ({
-            ...activityTarget,
-            __typename: capitalize(
-              objectMetadataItemActivityTarget.nameSingular,
-            ),
-          })),
-          withPageInfo: false,
-          computeReferences: true,
-          isRootLevel: false,
-        });
-
-        modifyRecordFromCache({
-          recordId: createdActivity.id,
-          cache,
-          fieldModifiers: {
-            activityTargets: () => activityTargetsConnection,
-          },
-          objectMetadataItem: objectMetadataItemActivity,
-        });
-
-        set(recordStoreFamilyState(createdActivity.id), {
-          ...createdActivity,
-          activityTargets: activityTargetsToCreate,
-        });
-      },
+      store.set(recordStoreFamilyState.atomFamily(createdActivity.id), {
+        ...createdActivity,
+        activityTargets: activityTargetsToCreate,
+      });
+    },
     [
+      store,
       cache,
       createManyActivityTargets,
       createOneActivity,

packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts

@@ -1,5 +1,3 @@
-import { useSetRecoilState } from 'recoil';
-
 import { activityTargetableEntityArrayState } from '@/activities/states/activityTargetableEntityArrayState';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
@@ -7,6 +5,7 @@ import { viewableRecordNameSingularState } from '@/object-record/record-right-dr
 import { type WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
 
 import { isUpsertingActivityInDBState } from '@/activities/states/isCreatingActivityInDBState';
+import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';
 import { type ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { type Note } from '@/activities/types/Note';
 import { type NoteTarget } from '@/activities/types/NoteTarget';
@@ -40,15 +39,15 @@ export const useOpenCreateActivityDrawer = ({
     shouldMatchRootQueryFilter: true,
   });
 
-  const setActivityTargetableEntityArray = useSetRecoilState(
+  const setActivityTargetableEntityArray = useSetRecoilStateV2(
     activityTargetableEntityArrayState,
   );
-  const setViewableRecordId = useSetRecoilState(viewableRecordIdState);
-  const setViewableRecordNameSingular = useSetRecoilState(
+  const setViewableRecordId = useSetRecoilStateV2(viewableRecordIdState);
+  const setViewableRecordNameSingular = useSetRecoilStateV2(
     viewableRecordNameSingularState,
   );
 
-  const setIsUpsertingActivityInDB = useSetRecoilState(
+  const setIsUpsertingActivityInDB = useSetRecoilStateV2(
     isUpsertingActivityInDBState,
   );
 

packages/twenty-front/src/modules/activities/hooks/useReplaceActivityBlockEditorContent.ts

@@ -1,31 +1,33 @@
+import { useCallback } from 'react';
+import { useStore } from 'jotai';
+
 import { type BLOCK_SCHEMA } from '@/blocknote-editor/blocks/Schema';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { isNonEmptyString } from '@sniptt/guards';
-import { useRecoilCallback } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
 export const useReplaceActivityBlockEditorContent = (
   editor: typeof BLOCK_SCHEMA.BlockNoteEditor,
 ) => {
-  const replaceBlockEditorContent = useRecoilCallback(
-    ({ snapshot }) =>
-      (activityId: string) => {
-        if (isDefined(editor)) {
-          const activityInStore = snapshot
-            .getLoadable(recordStoreFamilyState(activityId))
-            .getValue();
+  const store = useStore();
+  const replaceBlockEditorContent = useCallback(
+    (activityId: string) => {
+      if (isDefined(editor)) {
+        const activityInStore = store.get(
+          recordStoreFamilyState.atomFamily(activityId),
+        );
 
-          const content = isNonEmptyString(activityInStore?.bodyV2.blocknote)
-            ? JSON.parse(activityInStore?.bodyV2.blocknote)
-            : [{ type: 'paragraph', content: '' }];
+        const content = isNonEmptyString(activityInStore?.bodyV2.blocknote)
+          ? JSON.parse(activityInStore?.bodyV2.blocknote)
+          : [{ type: 'paragraph', content: '' }];
 
-          if (!isDeeplyEqual(editor.document, content)) {
-            editor.replaceBlocks(editor.document, content);
-          }
+        if (!isDeeplyEqual(editor.document, content)) {
+          editor.replaceBlocks(editor.document, content);
         }
-      },
-    [editor],
+      }
+    },
+    [store, editor],
   );
 
   return {

packages/twenty-front/src/modules/activities/hooks/useUpsertActivity.ts

@@ -1,5 +1,3 @@
-import { useRecoilState } from 'recoil';
-
 import { useCreateActivityInDB } from '@/activities/hooks/useCreateActivityInDB';
 import { useRefreshShowPageFindManyActivitiesQueries } from '@/activities/hooks/useRefreshShowPageFindManyActivitiesQueries';
 import { isActivityInCreateModeState } from '@/activities/states/isActivityInCreateModeState';
@@ -30,7 +28,7 @@ export const useUpsertActivity = ({
     activityObjectNameSingular,
   });
 
-  const [, setIsUpsertingActivityInDB] = useRecoilState(
+  const [, setIsUpsertingActivityInDB] = useRecoilStateV2(
     isUpsertingActivityInDBState,
   );
 

packages/twenty-front/src/modules/activities/inline-cell/hooks/useOpenActivityTargetCellEditMode.ts

@@ -9,7 +9,7 @@ import { multipleRecordPickerSearchFilterComponentState } from '@/object-record/
 import { multipleRecordPickerSearchableObjectMetadataItemsComponentState } from '@/object-record/record-picker/multiple-record-picker/states/multipleRecordPickerSearchableObjectMetadataItemsComponentState';
 import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
 import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
-import { useRecoilCallback } from 'recoil';
+import { useCallback } from 'react';
 
 type OpenActivityTargetCellEditModeProps = {
   recordPickerInstanceId: string;
@@ -24,81 +24,80 @@ export const useOpenActivityTargetCellEditMode = () => {
 
   const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
 
-  const openActivityTargetCellEditMode = useRecoilCallback(
-    ({ set }) =>
-      ({
-        recordPickerInstanceId,
-        activityTargetObjectRecords,
-      }: OpenActivityTargetCellEditModeProps) => {
-        const objectMetadataItems = jotaiStore
-          .get(objectMetadataItemsState.atom)
-          .filter(
-            (objectMetadataItem) =>
-              objectMetadataItem.isSearchable &&
-              objectMetadataItem.isActive &&
-              objectMetadataItem.nameSingular !== CoreObjectNameSingular.Task &&
-              objectMetadataItem.nameSingular !== CoreObjectNameSingular.Note &&
-              objectMetadataItem.nameSingular !==
-                CoreObjectNameSingular.WorkspaceMember,
-          );
+  const openActivityTargetCellEditMode = useCallback(
+    ({
+      recordPickerInstanceId,
+      activityTargetObjectRecords,
+    }: OpenActivityTargetCellEditModeProps) => {
+      const objectMetadataItems = jotaiStore
+        .get(objectMetadataItemsState.atom)
+        .filter(
+          (objectMetadataItem) =>
+            objectMetadataItem.isSearchable &&
+            objectMetadataItem.isActive &&
+            objectMetadataItem.nameSingular !== CoreObjectNameSingular.Task &&
+            objectMetadataItem.nameSingular !== CoreObjectNameSingular.Note &&
+            objectMetadataItem.nameSingular !==
+              CoreObjectNameSingular.WorkspaceMember,
+        );
 
-        set(
-          multipleRecordPickerPickableMorphItemsComponentState.atomFamily({
+      jotaiStore.set(
+        multipleRecordPickerPickableMorphItemsComponentState.atomFamily({
+          instanceId: recordPickerInstanceId,
+        }),
+        activityTargetObjectRecords.map((activityTargetObjectRecord) => ({
+          recordId: activityTargetObjectRecord.targetObject.id,
+          objectMetadataId:
+            activityTargetObjectRecord.targetObjectMetadataItem.id,
+          isSelected: true,
+          isMatchingSearchFilter: true,
+        })),
+      );
+
+      jotaiStore.set(
+        multipleRecordPickerSearchableObjectMetadataItemsComponentState.atomFamily(
+          {
             instanceId: recordPickerInstanceId,
-          }),
-          activityTargetObjectRecords.map((activityTargetObjectRecord) => ({
+          },
+        ),
+        objectMetadataItems,
+      );
+
+      jotaiStore.set(
+        multipleRecordPickerSearchFilterComponentState.atomFamily({
+          instanceId: recordPickerInstanceId,
+        }),
+        '',
+      );
+
+      openMultipleRecordPicker(recordPickerInstanceId);
+
+      multipleRecordPickerPerformSearch({
+        multipleRecordPickerInstanceId: recordPickerInstanceId,
+        forceSearchFilter: '',
+        forceSearchableObjectMetadataItems: objectMetadataItems,
+        forcePickableMorphItems: activityTargetObjectRecords.map(
+          (activityTargetObjectRecord) => ({
             recordId: activityTargetObjectRecord.targetObject.id,
             objectMetadataId:
               activityTargetObjectRecord.targetObjectMetadataItem.id,
             isSelected: true,
             isMatchingSearchFilter: true,
-          })),
-        );
-
-        set(
-          multipleRecordPickerSearchableObjectMetadataItemsComponentState.atomFamily(
-            {
-              instanceId: recordPickerInstanceId,
-            },
-          ),
-          objectMetadataItems,
-        );
-
-        set(
-          multipleRecordPickerSearchFilterComponentState.atomFamily({
-            instanceId: recordPickerInstanceId,
           }),
-          '',
-        );
+        ),
+      });
 
-        openMultipleRecordPicker(recordPickerInstanceId);
-
-        multipleRecordPickerPerformSearch({
-          multipleRecordPickerInstanceId: recordPickerInstanceId,
-          forceSearchFilter: '',
-          forceSearchableObjectMetadataItems: objectMetadataItems,
-          forcePickableMorphItems: activityTargetObjectRecords.map(
-            (activityTargetObjectRecord) => ({
-              recordId: activityTargetObjectRecord.targetObject.id,
-              objectMetadataId:
-                activityTargetObjectRecord.targetObjectMetadataItem.id,
-              isSelected: true,
-              isMatchingSearchFilter: true,
-            }),
-          ),
-        });
-
-        pushFocusItemToFocusStack({
-          focusId: recordPickerInstanceId,
-          component: {
-            type: FocusComponentType.DROPDOWN,
-            instanceId: recordPickerInstanceId,
-          },
-          globalHotkeysConfig: {
-            enableGlobalHotkeysConflictingWithKeyboard: false,
-          },
-        });
-      },
+      pushFocusItemToFocusStack({
+        focusId: recordPickerInstanceId,
+        component: {
+          type: FocusComponentType.DROPDOWN,
+          instanceId: recordPickerInstanceId,
+        },
+        globalHotkeysConfig: {
+          enableGlobalHotkeysConflictingWithKeyboard: false,
+        },
+      });
+    },
     [
       multipleRecordPickerPerformSearch,
       openMultipleRecordPicker,

packages/twenty-front/src/modules/activities/inline-cell/hooks/useUpdateActivityTargetFromCell.ts

@@ -10,12 +10,13 @@ import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
 import { searchRecordStoreFamilyState } from '@/object-record/record-picker/multiple-record-picker/states/searchRecordStoreComponentFamilyState';
 import { type RecordPickerPickableMorphItem } from '@/object-record/record-picker/types/RecordPickerPickableMorphItem';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { useSetFamilyRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetFamilyRecoilStateV2';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
-import { useRecoilCallback, useSetRecoilState } from 'recoil';
+import { useCallback } from 'react';
+import { useStore } from 'jotai';
 import { isDefined } from 'twenty-shared/utils';
 import { v4 } from 'uuid';
 import { FeatureFlagKey } from '~/generated-metadata/graphql';
-import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
 
 type UpdateActivityTargetFromCellProps = {
   recordPickerInstanceId: string;
@@ -64,148 +65,148 @@ export const useUpdateActivityTargetFromCell = ({
       ? isTaskTargetMigrated
       : isNoteTargetMigrated;
 
-  const setActivityFromStore = useSetRecoilState(
-    recordStoreFamilyState(activityId),
+  const store = useStore();
+  const setActivityFromStore = useSetFamilyRecoilStateV2(
+    recordStoreFamilyState,
+    activityId,
   );
 
-  const updateActivityTargetFromCell = useRecoilCallback(
-    ({ snapshot }) =>
-      async ({
-        morphItem,
-        activityTargetWithTargetRecords,
-      }: UpdateActivityTargetFromCellProps) => {
-        const targetObjectName =
-          activityObjectNameSingular === CoreObjectNameSingular.Task
-            ? 'task'
-            : 'note';
+  const updateActivityTargetFromCell = useCallback(
+    async ({
+      morphItem,
+      activityTargetWithTargetRecords,
+    }: UpdateActivityTargetFromCellProps) => {
+      const targetObjectName =
+        activityObjectNameSingular === CoreObjectNameSingular.Task
+          ? 'task'
+          : 'note';
 
-        const objectMetadataItems = jotaiStore.get(
-          objectMetadataItemsState.atom,
+      const objectMetadataItems = store.get(objectMetadataItemsState.atom);
+
+      const pickedObjectMetadataItem = objectMetadataItems.find(
+        (objectMetadataItem) =>
+          objectMetadataItem.id === morphItem.objectMetadataId,
+      );
+
+      if (!isDefined(pickedObjectMetadataItem)) {
+        throw new Error('Could not find object metadata item');
+      }
+
+      const targetFieldName = getActivityTargetFieldNameForObject({
+        activityObjectNameSingular,
+        targetObjectMetadataId: morphItem.objectMetadataId,
+        objectMetadataItems,
+        isMorphRelation,
+      });
+
+      if (!isDefined(targetFieldName)) {
+        throw new Error(
+          `Could not find field on activity target for object ${pickedObjectMetadataItem.nameSingular}`,
         );
+      }
 
-        const pickedObjectMetadataItem = objectMetadataItems.find(
-          (objectMetadataItem) =>
-            objectMetadataItem.id === morphItem.objectMetadataId,
-        );
+      let activityTargetsAfterUpdate: (TaskTarget | NoteTarget)[] = [];
 
-        if (!isDefined(pickedObjectMetadataItem)) {
-          throw new Error('Could not find object metadata item');
-        }
+      const existingActivityTarget = activityTargetWithTargetRecords.find(
+        (activityTarget) =>
+          activityTarget.targetObject.id === morphItem.recordId,
+      );
 
-        const targetFieldName = getActivityTargetFieldNameForObject({
-          activityObjectNameSingular,
-          targetObjectMetadataId: morphItem.objectMetadataId,
-          objectMetadataItems,
-          isMorphRelation,
-        });
+      if (isDefined(existingActivityTarget)) {
+        activityTargetsAfterUpdate = activityTargetWithTargetRecords
+          .map((activityTarget) => {
+            if (
+              activityTarget.targetObject.id === morphItem.recordId &&
+              !morphItem.isSelected
+            ) {
+              return undefined;
+            }
 
-        if (!isDefined(targetFieldName)) {
-          throw new Error(
-            `Could not find field on activity target for object ${pickedObjectMetadataItem.nameSingular}`,
+            return activityTarget.activityTarget;
+          })
+          .filter(isDefined);
+
+        if (!morphItem.isSelected) {
+          await deleteOneActivityTarget(
+            existingActivityTarget.activityTarget.id,
           );
         }
-
-        let activityTargetsAfterUpdate: (TaskTarget | NoteTarget)[] = [];
-
-        const existingActivityTarget = activityTargetWithTargetRecords.find(
-          (activityTarget) =>
-            activityTarget.targetObject.id === morphItem.recordId,
+      } else {
+        const searchRecord = store.get(
+          searchRecordStoreFamilyState.atomFamily(morphItem.recordId),
         );
 
-        if (isDefined(existingActivityTarget)) {
-          activityTargetsAfterUpdate = activityTargetWithTargetRecords
-            .map((activityTarget) => {
-              if (
-                activityTarget.targetObject.id === morphItem.recordId &&
-                !morphItem.isSelected
-              ) {
-                return undefined;
-              }
-
-              return activityTarget.activityTarget;
-            })
-            .filter(isDefined);
-
-          if (!morphItem.isSelected) {
-            await deleteOneActivityTarget(
-              existingActivityTarget.activityTarget.id,
-            );
-          }
-        } else {
-          const searchRecord = snapshot
-            .getLoadable(searchRecordStoreFamilyState(morphItem.recordId))
-            .getValue();
-
-          if (!isDefined(searchRecord) || !isDefined(searchRecord?.record)) {
-            return;
-          }
-
-          if (!morphItem.isSelected) {
-            return;
-          }
-
-          const targetRecord = searchRecord.record;
-
-          const activityTarget: NoteTarget | TaskTarget =
-            activityObjectNameSingular === CoreObjectNameSingular.Task
-              ? {
-                  id: v4(),
-                  createdAt: new Date().toISOString(),
-                  updatedAt: new Date().toISOString(),
-                  __typename: 'TaskTarget',
-                  taskId: activityId,
-                  task: {
-                    id: activityId,
-                    __typename: 'Task',
-                    createdAt: new Date().toISOString(),
-                    updatedAt: new Date().toISOString(),
-                  },
-                  [targetFieldName]: targetRecord,
-                }
-              : {
-                  id: v4(),
-                  createdAt: new Date().toISOString(),
-                  updatedAt: new Date().toISOString(),
-                  __typename: 'NoteTarget',
-                  noteId: activityId,
-                  note: {
-                    id: activityId,
-                    __typename: 'Note',
-                    createdAt: new Date().toISOString(),
-                    updatedAt: new Date().toISOString(),
-                  },
-                  [targetFieldName]: targetRecord,
-                };
-
-          activityTargetsAfterUpdate = [
-            ...activityTargetWithTargetRecords.map((activityTarget) => {
-              return activityTarget.activityTarget;
-            }),
-            activityTarget,
-          ];
-
-          const activityTargetInput: Partial<NoteTarget | TaskTarget> = {
-            ...activityTarget,
-            [targetObjectName]: undefined,
-            [targetFieldName]: undefined,
-            [`${targetFieldName}Id`]: morphItem.recordId,
-          };
-
-          await createOneActivityTarget(activityTargetInput);
+        if (!isDefined(searchRecord) || !isDefined(searchRecord?.record)) {
+          return;
         }
 
-        setActivityFromStore((currentActivity) => {
-          if (!isDefined(currentActivity)) {
-            return null;
-          }
+        if (!morphItem.isSelected) {
+          return;
+        }
 
-          return {
-            ...currentActivity,
-            [`${targetObjectName}Targets`]: activityTargetsAfterUpdate,
-          };
-        });
-      },
+        const targetRecord = searchRecord.record;
+
+        const activityTarget: NoteTarget | TaskTarget =
+          activityObjectNameSingular === CoreObjectNameSingular.Task
+            ? {
+                id: v4(),
+                createdAt: new Date().toISOString(),
+                updatedAt: new Date().toISOString(),
+                __typename: 'TaskTarget',
+                taskId: activityId,
+                task: {
+                  id: activityId,
+                  __typename: 'Task',
+                  createdAt: new Date().toISOString(),
+                  updatedAt: new Date().toISOString(),
+                },
+                [targetFieldName]: targetRecord,
+              }
+            : {
+                id: v4(),
+                createdAt: new Date().toISOString(),
+                updatedAt: new Date().toISOString(),
+                __typename: 'NoteTarget',
+                noteId: activityId,
+                note: {
+                  id: activityId,
+                  __typename: 'Note',
+                  createdAt: new Date().toISOString(),
+                  updatedAt: new Date().toISOString(),
+                },
+                [targetFieldName]: targetRecord,
+              };
+
+        activityTargetsAfterUpdate = [
+          ...activityTargetWithTargetRecords.map((activityTarget) => {
+            return activityTarget.activityTarget;
+          }),
+          activityTarget,
+        ];
+
+        const activityTargetInput: Partial<NoteTarget | TaskTarget> = {
+          ...activityTarget,
+          [targetObjectName]: undefined,
+          [targetFieldName]: undefined,
+          [`${targetFieldName}Id`]: morphItem.recordId,
+        };
+
+        await createOneActivityTarget(activityTargetInput);
+      }
+
+      setActivityFromStore((currentActivity) => {
+        if (!isDefined(currentActivity)) {
+          return null;
+        }
+
+        return {
+          ...currentActivity,
+          [`${targetObjectName}Targets`]: activityTargetsAfterUpdate,
+        };
+      });
+    },
     [
+      store,
       activityId,
       activityObjectNameSingular,
       createOneActivityTarget,

packages/twenty-front/src/modules/activities/states/activityBodyFamilyState.ts

@@ -1,6 +1,6 @@
-import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState';
+import { createFamilyStateV2 } from '@/ui/utilities/state/jotai/utils/createFamilyStateV2';
 
-export const activityBodyFamilyState = createFamilyState<
+export const activityBodyFamilyState = createFamilyStateV2<
   string,
   { activityId: string }
 >({

packages/twenty-front/src/modules/activities/states/activityTargetableEntityArrayState.ts

@@ -1,7 +1,7 @@
 import { type ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
-import { createState } from '@/ui/utilities/state/utils/createState';
+import { createStateV2 } from '@/ui/utilities/state/jotai/utils/createStateV2';
 
-export const activityTargetableEntityArrayState = createState<
+export const activityTargetableEntityArrayState = createStateV2<
   ActivityTargetableObject[]
 >({
   key: 'activities/targetable-entity-array',

packages/twenty-front/src/modules/activities/states/canCreateActivityState.ts

@@ -1,5 +1,5 @@
-import { createState } from '@/ui/utilities/state/utils/createState';
-export const canCreateActivityState = createState<boolean>({
+import { createStateV2 } from '@/ui/utilities/state/jotai/utils/createStateV2';
+export const canCreateActivityState = createStateV2<boolean>({
   key: 'canCreateActivityState',
   defaultValue: false,
 });

packages/twenty-front/src/modules/activities/states/isCreatingActivityInDBState.ts

@@ -1,5 +1,5 @@
-import { createState } from '@/ui/utilities/state/utils/createState';
-export const isUpsertingActivityInDBState = createState<boolean>({
+import { createStateV2 } from '@/ui/utilities/state/jotai/utils/createStateV2';
+export const isUpsertingActivityInDBState = createStateV2<boolean>({
   key: 'isUpsertingActivityInDBState',
   defaultValue: false,
 });

packages/twenty-front/src/modules/activities/timeline-activities/components/EventRow.tsx

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 import { useContext } from 'react';
-import { useRecoilValue } from 'recoil';
 
 import { TimelineActivityContext } from '@/activities/timeline-activities/contexts/TimelineActivityContext';
 
@@ -14,7 +13,8 @@ import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMembe
 import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { getObjectRecordIdentifier } from '@/object-metadata/utils/getObjectRecordIdentifier';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
-import { dateLocaleState } from '~/localization/states/dateLocaleState';
+import { useFamilyRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useFamilyRecoilValueV2';
+import { dateLocaleStateV2 } from '~/localization/states/dateLocaleStateV2';
 import { beautifyPastDateRelativeToNow } from '~/utils/date-utils';
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
 import { allowRequestsToTwentyIconsState } from '@/client-config/states/allowRequestsToTwentyIcons';
@@ -99,11 +99,14 @@ export const EventRow = ({
     allowRequestsToTwentyIconsState,
   );
 
-  const { localeCatalog } = useRecoilValue(dateLocaleState);
+  const { localeCatalog } = useRecoilValueV2(dateLocaleStateV2);
 
   const { recordId } = useContext(TimelineActivityContext);
 
-  const recordFromStore = useRecoilValue(recordStoreFamilyState(recordId));
+  const recordFromStore = useFamilyRecoilValueV2(
+    recordStoreFamilyState,
+    recordId,
+  );
 
   const beautifiedCreatedAt = beautifyPastDateRelativeToNow(
     event.createdAt,

packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventFieldDiffValueEffect.tsx

@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
-import { useSetRecoilState } from 'recoil';
 
 import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { useSetFamilyRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetFamilyRecoilStateV2';
 import { isDefined } from 'twenty-shared/utils';
 
 export const EventFieldDiffValueEffect = ({
@@ -17,8 +17,9 @@ export const EventFieldDiffValueEffect = ({
   mainObjectMetadataItem: ObjectMetadataItem;
   fieldMetadataItem: FieldMetadataItem;
 }) => {
-  const setEntity = useSetRecoilState(
-    recordStoreFamilyState(diffArtificialRecordStoreId),
+  const setEntity = useSetFamilyRecoilStateV2(
+    recordStoreFamilyState,
+    diffArtificialRecordStoreId,
   );
 
   useEffect(() => {