admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: move icon state update to useEffect in ObjectOptionsDropdownMenu… (#12611)

Browse Source 
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
This commit is contained in:
Ajay A Adsule
2025-06-16 18:43:53 +05:30
committed by GitHub
parent e3addb2234
commit 16bccc19e8
1 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuViewName.tsx
View File

@ -16,7 +16,7 @@ import { viewPickerIsPersistingComponentState } from '@/views/view-picker/states
import { viewPickerSelectedIconComponentState } from '@/views/view-picker/states/viewPickerSelectedIconComponentState'; import { viewPickerSelectedIconComponentState } from '@/views/view-picker/states/viewPickerSelectedIconComponentState';
import { useTheme } from '@emotion/react'; import { useTheme } from '@emotion/react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { useState } from 'react'; import { useEffect, useState } from 'react';
import { OverflowingTextWithTooltip, useIcons } from 'twenty-ui/display'; import { OverflowingTextWithTooltip, useIcons } from 'twenty-ui/display';
import { useDebouncedCallback } from 'use-debounce'; import { useDebouncedCallback } from 'use-debounce';
@ -62,8 +62,6 @@ export const ObjectOptionsDropdownMenuViewName = ({
const [viewPickerSelectedIcon, setViewPickerSelectedIcon] = const [viewPickerSelectedIcon, setViewPickerSelectedIcon] =
useRecoilComponentStateV2(viewPickerSelectedIconComponentState); useRecoilComponentStateV2(viewPickerSelectedIconComponentState);
setViewPickerSelectedIcon(currentView.icon);
const viewPickerIsPersisting = useRecoilComponentValueV2( const viewPickerIsPersisting = useRecoilComponentValueV2(
viewPickerIsPersistingComponentState, viewPickerIsPersistingComponentState,
); );
@ -94,9 +92,15 @@ export const ObjectOptionsDropdownMenuViewName = ({
setViewPickerSelectedIcon(iconKey); setViewPickerSelectedIcon(iconKey);
setAndPersistViewIcon(iconKey, currentView); setAndPersistViewIcon(iconKey, currentView);
}; };
const handleViewNameChange = useDebouncedCallback((value: string) => { const handleViewNameChange = useDebouncedCallback((value: string) => {
setAndPersistViewName(value, currentView); setAndPersistViewName(value, currentView);
}, 500); }, 500);
useEffect(() => {
setViewPickerSelectedIcon(currentView.icon);
}, [currentView.icon, setViewPickerSelectedIcon]);
const theme = useTheme(); const theme = useTheme();
const { getIcon } = useIcons(); const { getIcon } = useIcons();
const MainIcon = getIcon(currentView?.icon); const MainIcon = getIcon(currentView?.icon);