title: How to reset data in UseEffect React Hooks before each rendering?
body: <p>Here's the situation.
  I use <code>useEffect</code> to filter some data and it's working well.
  Here are the code and <a href="https://codesandbox.io/s/brave-oskar-p2fy3" rel="nofollow noreferrer">codesandbox</a>.</p>
  
  <pre><code>const data = [
    {name: 'aml', age: 10},
    {name: 'abcb', age: 12},
    {name: 'asr', age: 20},
    {name: 'plo', age: 30},
    {name: 'bvcq', age: 15},
    {name: 'bfro', age: 21},
    {name: 'zxwh', age: 19}
  ]
  
  function App() {
    const [keyword, setKeyword] = React.useState('')
    const [result, setResult] = React.useState(data)
    const [isAged, setIsAged] = React.useState(false) 
    const [isNameLength3, setIsNameLength3] = React.useState(false)
    React.useEffect(() =&gt; {
      const doSearch = () =&gt; {
        // setResult(data)
        if (isAged) {
          setResult(result.filter(item =&gt; item.age &gt;= 20))
        }
        if (isNameLength3) {
          setResult(result.filter(item =&gt; item.name.length === 3))
        } 
        if (keyword) {
          setResult(result.filter(item =&gt; item.name.toLowerCase().includes(keyword.toLowerCase())))
        } 
      }
      doSearch() 
    }, [isAged, keyword, isNameLength3, result])
    return (
      &lt;div className="App"&gt;
        &lt;input
          value={keyword}
          type='text'
          onChange={(e) =&gt; setKeyword(e.currentTarget.value)}
          placeholder='search...' /&gt;
        &lt;br/&gt;
        &lt;label&gt;
          &lt;input
            onChange={() =&gt; setIsAged(!isAged)}
            type='checkbox'
            checked={isAged} /&gt;
          &lt;span&gt;Age &gt;= 20&lt;/span&gt;
        &lt;/label&gt;
        &lt;label&gt;
          &lt;input
            onChange={() =&gt; setIsNameLength3(!isNameLength3)}
            type='checkbox'
            checked={isNameLength3} /&gt;
          &lt;span&gt;NameLength3&lt;/span&gt;
        &lt;/label&gt;
        &lt;div className="result"&gt;
          {
            result &amp;&amp; result.length &gt; 0 &amp;&amp; 
              result.map((item, index) =&gt;
                &lt;p key={'result' + index}&gt;{item.name} -&gt; {item.age}&lt;/p&gt;
              )
          } 
        &lt;/div&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  
  <p>The <code>result</code> is changed every time when I change the search keyword or the checkboxes. but there's no way to go back.</p>
  
  <p>for instance, I picked the two checkboxes, the result will be:</p>
  
  <pre><code>asr -&gt; 20
  
  plo -&gt; 30
  </code></pre>
  
  <p>Now I type <code>a</code>, the result becomes </p>
  
  <pre><code>asr -&gt; 20
  </code></pre>
  
  <p>The problem is, when I delete <code>a</code>, I want a result of</p>
  
  <pre><code>asr -&gt; 20
  
  plo -&gt; 30
  </code></pre>
  
  <p>I know the <code>result</code> is being cut, but how can I achieve this?</p>
  
  <p>I think it should search if any filters (checkboxes and keyword) have been changed with the very original data.</p>
  
  <p>So I tried this in the very beginning of the <code>useEffect</code> hooks.</p>
  
  <pre><code>setResult(data)
  </code></pre>
  
  <p>But unfortunately, it not work as I expected.</p>
  
  <p>Appreciate for any helps!</p>