diff --git a/frontend/src/framework/components/ParameterListFilter/parameterListFilter.tsx b/frontend/src/framework/components/ParameterListFilter/parameterListFilter.tsx index 8acce053e..bacb53661 100644 --- a/frontend/src/framework/components/ParameterListFilter/parameterListFilter.tsx +++ b/frontend/src/framework/components/ParameterListFilter/parameterListFilter.tsx @@ -28,18 +28,16 @@ export const ParameterListFilter: React.FC = (props: P const [selectedNodes, setSelectedNodes] = React.useState([]); const [numberOfMatchingParameters, setNumberOfMatchingParameters] = React.useState(0); const [parameters, setParameters] = React.useState(null); - const [treeDataNodeList, setTreeDataNodeList] = React.useState([]); + const [previousTreeDataNodeList, setPreviousTreeDataNodeList] = React.useState([]); const smartNodeSelectorDelimiter = ":"; - function computeTreeDataNodeListAndUpdateStates(): TreeDataNode[] { - if (parameters !== null && isEqual(props.parameters, parameters)) return treeDataNodeList; - - const newTreeDataNodeList = createTreeDataNodeListFromParameters([...props.parameters], checkIcon, segmentIcon); + let newTreeDataNodeList: TreeDataNode[] | null = null; + if (parameters === null || !isEqual(props.parameters, parameters)) { + newTreeDataNodeList = createTreeDataNodeListFromParameters(props.parameters, checkIcon, segmentIcon); setParameters(props.parameters); - setTreeDataNodeList(newTreeDataNodeList); - return newTreeDataNodeList; + setPreviousTreeDataNodeList(newTreeDataNodeList); } - const computedTreeDataNodeList = computeTreeDataNodeListAndUpdateStates(); + const treeDataNodeList = newTreeDataNodeList ? newTreeDataNodeList : previousTreeDataNodeList; // Utilizing useEffect to prevent re-render of parent component during rendering of this component React.useEffect( @@ -76,7 +74,7 @@ export const ParameterListFilter: React.FC = (props: P