title: UseEffect only firing certain parts?
body: <p>I'm trying to make it so that every time my search field changes, the code in useEffect executes. However, only <code>console.log('hi')</code> is being executed and none of the other code is.</p>
  <p>I can't figure out why useEffect is selectively running the code. Why is this?</p>
  <pre><code>  useEffect(() =&gt; {
      console.log('hi')
      const filteredMonsters = monsters.filter(monster =&gt; {
        console.log('hi2')
        monster.name.toLowerCase().includes(searchField.toLowerCase());
      })
      setMonsters(filteredMonsters);
    }, [searchField])
  
  </code></pre>
  <p>Upon page load my console reads <code>'hi'</code> as expected. After typing in a value into the search box i see the following in console:</p>
  <p><code>hi</code></p>
  <p><code>hi2</code></p>
  <p>After typing futher values into the search box i only see: <code>hi</code> being added and not <code>hi2</code></p>