JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<b>JQuery Autocomplete Perf Problem</b> <br/>
<p>
Focus the autocomplete below and enter the letter "a", wait for an autocomplete
popup to be shown. Move the mouse pointer over options, UI is quite responsive.
</p>
<p>
Erase the letter and enter it again. <i>Repeat this couple of times</i>. You can see 
that UI slows down. Now try to move the mouse over the options again, performance
is very poor, the background of options is changed after a long delay.
</p>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

<p>
The problem seems to be that shown options are not discarded properly when the popup closes, they cumulate.
If you add a breakpoint to line 1596 in jquery-3.2.1.js and watch the size of a "results" array, you can see
how they cumulate by each time the popup is shown. You can also use a profiler to see that sorting takes most of the time.
</p>

CSS

p {
  max-width: 600px;
}

JavaScript

$( function() {
    var availableTags = [];
    for(var i=0; i<500; i++) {
    	availableTags.push('a '+i);
    }
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });