zaid.marzguioui/myeasycms-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor account-selector to use useMemo instead of useEffect

Browse Source 
Replaced useEffect with useMemo for computing the account value. This simplifies the state management and ensures that the value is memoized based on the selectedAccount prop.
This commit is contained in:
gbuomprisco
2024-08-30 17:05:57 +02:00
parent 5fada83913
commit 0c415be8ee
1 changed files with 3 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/features/accounts/src/components/account-selector.tsx
View File

@@ -1,6 +1,6 @@
'use client'; 'use client';
import { useEffect, useState } from 'react'; import { useMemo, useState } from 'react';
import { CaretSortIcon, PersonIcon } from '@radix-ui/react-icons'; import { CaretSortIcon, PersonIcon } from '@radix-ui/react-icons';
import { CheckCircle, Plus } from 'lucide-react'; import { CheckCircle, Plus } from 'lucide-react';
@@ -59,16 +59,11 @@ export function AccountSelector({
}: React.PropsWithChildren<AccountSelectorProps>) { }: React.PropsWithChildren<AccountSelectorProps>) {
const [open, setOpen] = useState<boolean>(false); const [open, setOpen] = useState<boolean>(false);
const [isCreatingAccount, setIsCreatingAccount] = useState<boolean>(false); const [isCreatingAccount, setIsCreatingAccount] = useState<boolean>(false);
const [value, setValue] = useState<string>(
selectedAccount ?? PERSONAL_ACCOUNT_SLUG,
);
const { t } = useTranslation('teams'); const { t } = useTranslation('teams');
const personalData = usePersonalAccountData(userId); const personalData = usePersonalAccountData(userId);
useEffect(() => { const value = useMemo(() => {
setValue(selectedAccount ?? PERSONAL_ACCOUNT_SLUG); return selectedAccount ?? PERSONAL_ACCOUNT_SLUG;
}, [selectedAccount]); }, [selectedAccount]);
const Icon = (props: { item: string }) => { const Icon = (props: { item: string }) => {
@@ -201,7 +196,6 @@ export function AccountSelector({
key={account.value} key={account.value}
value={account.value ?? ''} value={account.value ?? ''}
onSelect={(currentValue) => { onSelect={(currentValue) => {
setValue(currentValue === value ? '' : currentValue);
setOpen(false); setOpen(false);
if (onAccountChange) { if (onAccountChange) {