From 16bccc19e88eaf8d6081d51b02d206ba89bed109 Mon Sep 17 00:00:00 2001
From: Ajay A Adsule <103304466+AjayAdsule@users.noreply.github.com>
Date: Mon, 16 Jun 2025 18:43:53 +0530
Subject: [PATCH] =?UTF-8?q?fix:=20move=20icon=20state=20update=20to=20useE?=
 =?UTF-8?q?ffect=20in=20ObjectOptionsDropdownMenu=E2=80=A6=20(#12611)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed a React state update issue in the
ObjectOptionsDropdownMenuViewName component where the icon state was
being updated during render, causing a React warning.

### What was the issue?
- The code was updating the view's icon state
(`setViewPickerSelectedIcon`) on component mount
- This triggered React's warning: "Cannot update a component while
rendering a different component"

### How was it fixed?
- Moved the state update into a `useEffect` hook
- The icon state now updates properly after component render
- Added proper dependencies to the `useEffect` hook (`currentView.icon`
and `setViewPickerSelectedIcon`)



https://github.com/user-attachments/assets/b3b6b3ba-16cd-4d9a-83db-eea96dc51bd6


fix #11852
---
 .../components/ObjectOptionsDropdownMenuViewName.tsx   | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuViewName.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuViewName.tsx
index b8581a7bd..64c3717d2 100644
--- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuViewName.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuViewName.tsx
@@ -16,7 +16,7 @@ import { viewPickerIsPersistingComponentState } from '@/views/view-picker/states
 import { viewPickerSelectedIconComponentState } from '@/views/view-picker/states/viewPickerSelectedIconComponentState';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { OverflowingTextWithTooltip, useIcons } from 'twenty-ui/display';
 import { useDebouncedCallback } from 'use-debounce';
 
@@ -62,8 +62,6 @@ export const ObjectOptionsDropdownMenuViewName = ({
   const [viewPickerSelectedIcon, setViewPickerSelectedIcon] =
     useRecoilComponentStateV2(viewPickerSelectedIconComponentState);
 
-  setViewPickerSelectedIcon(currentView.icon);
-
   const viewPickerIsPersisting = useRecoilComponentValueV2(
     viewPickerIsPersistingComponentState,
   );
@@ -94,9 +92,15 @@ export const ObjectOptionsDropdownMenuViewName = ({
     setViewPickerSelectedIcon(iconKey);
     setAndPersistViewIcon(iconKey, currentView);
   };
+
   const handleViewNameChange = useDebouncedCallback((value: string) => {
     setAndPersistViewName(value, currentView);
   }, 500);
+
+  useEffect(() => {
+    setViewPickerSelectedIcon(currentView.icon);
+  }, [currentView.icon, setViewPickerSelectedIcon]);
+
   const theme = useTheme();
   const { getIcon } = useIcons();
   const MainIcon = getIcon(currentView?.icon);