title: Why setting the state through setTimeout doesn't render the correct props of a child component?
body: <p>I have right here a component that should simply render a list of items. Also, the component includes an input that filters the list of items. If there is no items, or if the items are being loaded it should display a message.</p>
  <pre><code>import { useState } from &quot;react&quot;;
  
  export const List = ({ loading, options }) =&gt; {
    const _options = options ?? [];
    const [renderedOptions, setRenderedOptions] = useState(_options);
    const [inputValue, setInputValue] = useState(&quot;&quot;);
  
    function handleChange(event) {
      setInputValue(event.target.value);
      const filteredOptions = _options.filter((option) =&gt;
        option.toLowerCase().includes(event.target.value.toLowerCase())
      );
      setRenderedOptions(filteredOptions);
    }
  
    return (
      &lt;div&gt;
        &lt;input type=&quot;text&quot; value={inputValue} onChange={handleChange} /&gt;
        &lt;ul&gt;
          {renderedOptions.length &gt; 0 ? (
            renderedOptions.map((option) =&gt; &lt;li key={option}&gt;{option}&lt;/li&gt;)
          ) : loading ? (
            &lt;li&gt;Loading...&lt;/li&gt;
          ) : (
            &lt;li&gt;Nothing to show&lt;/li&gt;
          )}
        &lt;/ul&gt;
      &lt;/div&gt;
    );
  };
  
  </code></pre>
  <p>In App.js, I did a <code>setTimeout</code>, to mock a fetch call. However, there is a problem. Although I'm setting the asyncOptions state to be the new list of items, in my <code>&lt;List /&gt;</code> component the options do not seem to display properly.</p>
  <pre><code>import { List } from &quot;./List&quot;;
  import { useState, useEffect } from &quot;react&quot;;
  
  const ITEMS = [&quot;list_1&quot;, &quot;list_2&quot;, &quot;list_3&quot;, &quot;list_4&quot;, &quot;list_5&quot;];
  
  export default function App() {
    const [asyncOptions, setAsyncOptions] = useState([]);
    const [isLoading, setIsLoading] = useState(false);
  
    useEffect(() =&gt; {
      setIsLoading(true);
      const timeoutId = setTimeout(() =&gt; {
        setIsLoading(false);
        setAsyncOptions(ITEMS);
      }, 2000);
  
      return () =&gt; clearTimeout(timeoutId);
    }, []);
    return &lt;List options={asyncOptions} loading={isLoading} /&gt;;
  }
  </code></pre>
  <p>What is this happening and what is/are the solution(s)?</p>
  <p>Sandbox code here: <a href="https://codesandbox.io/s/async-list-j97u32" rel="nofollow noreferrer">https://codesandbox.io/s/async-list-j97u32</a></p>