why filtering state array with react hooks doesn't work but filtering original array does

Question

Based on an input from a user I am filtering over an array. It doesn't work if I use the teams from the state, but if I use the original array it does filter correctly. Can anyone explain why this is happening? I am a bit stumped.

There is a codesandbox here for reference.

const teams_data = [
  "tottenham",
  "arsenal",
  "man utd",
  "liverpool",
  "chelsea",
  "west ham"
];

function App() {
  const [teams, setTeams] = React.useState(teams_data);
  const [search, setSearch] = React.useState("");

  return (
    <div className="App">
      <input
        onChange={e => {
          // if I filter on teams below it doesn't work as it should
          // but if I use teams_data (original array) it works
          const filteredTeams = teams_data.filter(team => {
             return team.toLowerCase().includes(e.target.value.toLowerCase());
          });
          setTeams(filteredTeams);
          setSearch(e.target.value);
        }}
        type="text"
        value={search}
      />
      {teams.map(team => (
        <p>{team}</p>
      ))}
    </div>
  );
}

Answer 1

If you filter teams and then setTeams, you can only remove teams from the collection. When at the beginning your filter does not match anything, it already reduces your teams to an empty array. If you use teams_data on the other hand you always have all your teams available to the filter.

Answer 2

This is because you save the filtered result as the new state. This means you only filter out results, but never add them back in.

The implementation that you have on codesandbox is a correct implementation, whereas filtering on teams is not. However what you potentially could do is filter the full array only when the length of your search box value becomes smaller. That way, filtering would become more light weight, when using big datasets or when querying the server for the results.