diff --git a/packages/insomnia/src/ui/components/editors/environment-key-value-editor/key-value-editor.tsx b/packages/insomnia/src/ui/components/editors/environment-key-value-editor/key-value-editor.tsx index 8fae6e57f33..3761adaf129 100644 --- a/packages/insomnia/src/ui/components/editors/environment-key-value-editor/key-value-editor.tsx +++ b/packages/insomnia/src/ui/components/editors/environment-key-value-editor/key-value-editor.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, useState } from 'react'; +import React, { useEffect, useMemo, useRef, useState } from 'react'; import { Button, type ButtonProps, DropIndicator, ListBox, ListBoxItem, Menu, MenuItem, MenuTrigger, Popover, Toolbar, useDragAndDrop } from 'react-aria-components'; import { generateId } from '../../../../common/misc'; @@ -39,7 +39,12 @@ const ItemButton = (props: ButtonProps & { tabIndex?: number }) => { }; export const EnvironmentKVEditor = ({ data, onChange }: EditorProps) => { - const kvPairs: EnvironmentKvPairData[] = data.length > 0 ? [...data] : [createNewPair()]; + const kvPairs: EnvironmentKvPairData[] = useMemo( + () => data.length > 0 ? [...data] : [createNewPair()], + // Ensure same array data will not generate different kvPairs to avoid flash issue + // eslint-disable-next-line react-hooks/exhaustive-deps + [JSON.stringify(data)] + ); const codeModalRef = useRef(null); const [kvPairError, setKvPairError] = useState<{ id: string; error: string }[]>([]); @@ -271,7 +276,6 @@ export const EnvironmentKVEditor = ({ data, onChange }: EditorProps) => { = ({ ); } - const pairsIds = activeRequest.parameters.map((param, index) => param.id || index).join(','); - return ( = ({ }) => { const [showDescription, setShowDescription] = React.useState(false); const { enabled: nunjucksEnabled } = useNunjucksEnabled(); - let pairsListItems = pairs.length > 0 ? pairs.map(pair => ({ ...pair, id: pair.id || generateId('pair') })) : [createEmptyPair()]; + let pairsListItems = useMemo( + () => pairs.length > 0 ? pairs.map(pair => ({ ...pair, id: pair.id || generateId('pair') })) : [createEmptyPair()], + // Ensure same array data will not generate different kvPairs to avoid flash issue + // eslint-disable-next-line react-hooks/exhaustive-deps + [JSON.stringify(pairs)] + ); const initialReadOnlyItems = readOnlyPairs?.map(pair => ({ ...pair, id: pair.id || generateId('pair') })) || []; const upsertPair = useCallback(function upsertPair(pairsListItems: Pair[], pair: Pair) { if (pairsListItems.find(item => item.id === pair.id)) { - pairsListItems = pairsListItems.map(item => (item.id === pair.id ? pair : item)); - onChange(pairsListItems); + onChange(pairsListItems.map(item => (item.id === pair.id ? pair : item))); } else { - const id = pair.id === 'pair-empty' ? generateId('pair') : pair.id; - pairsListItems = pairsListItems.concat({ ...pair, id }); - onChange(pairsListItems); + onChange([...pairsListItems, pair]); } }, [onChange]); @@ -305,7 +307,6 @@ export const KeyValueEditor: FC = ({