From 2744eaf760eaf459235fddf860a2d23ccf28a052 Mon Sep 17 00:00:00 2001
From: Daniel <80175477+dan437@users.noreply.github.com>
Date: Mon, 18 Jul 2022 16:30:36 +0200
Subject: [PATCH] Update the "results" state if "initialResultsState" array
 length is different (#15270)

---
 .../searchable-item-list/searchable-item-list.js      | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/ui/pages/swaps/searchable-item-list/searchable-item-list.js b/ui/pages/swaps/searchable-item-list/searchable-item-list.js
index 318c2094e..d4cdaaf11 100644
--- a/ui/pages/swaps/searchable-item-list/searchable-item-list.js
+++ b/ui/pages/swaps/searchable-item-list/searchable-item-list.js
@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import ItemList from './item-list';
 import ListItemSearch from './list-item-search';
@@ -22,7 +22,14 @@ export default function SearchableItemList({
 }) {
   const itemListRef = useRef();
 
-  const [results, setResults] = useState(defaultToAll ? itemsToSearch : []);
+  const initialResultsState = useMemo(() => {
+    return defaultToAll ? itemsToSearch : [];
+  }, [defaultToAll, itemsToSearch]);
+  const [results, setResults] = useState(initialResultsState);
+  useEffect(() => {
+    setResults(initialResultsState);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialResultsState.length]);
   const [searchQuery, setSearchQuery] = useState('');
 
   return (