title: Provider component's useEffect is running before mounted
body: <p>I have a Provider component which passes down some data through its props, which will later be used across the app.</p>
  <p>It looks something like this:</p>
  <pre class="lang-js prettyprint-override"><code>export const MyContext = createContext({});
  MyContext.displayName = 'My Context';
  
  
  export const MyProvider = ({ children }) =&gt; {
      const [items, setItems] = useState([]);
      const [loading, setLoading] = useState(false);
  
      const setData = async () =&gt; {
          setLoading(true);
          setItems(await getItemsApiCall());
          setLoading(false);
      };
  
      useEffect(() =&gt; {
          console.warn('component re-rendering')
          if (!items.length) {
              setData();
          }
      }, [items]);
  
      return (
          &lt;MyContext.Provider value={{items, loading}}&gt;
              {children}
          &lt;/MyContext.Provider&gt;
      );
  };
  </code></pre>
  <p>In theory this should work fine, however I am seeing a bunch of extra re-renders through the <code>console.warn</code> which seem unnecessary, also I am getting the warning relating to the state update on an unmounted component</p>
  <blockquote>
  <p>Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application...</p>
  </blockquote>
  <p>Although I have seen the <a href="https://stackoverflow.com/a/60907638/1676032">solution for this in other threads</a>, none of them work for me because I am not only setting <code>items</code>, but also <code>loading</code>, which I need to put in spinners and other such things on other parts of the app while fetching data.</p>
  <p>Anyway, is there a way to prevent these re-render before the mount and to surpress the warning under these circumstances?</p>
  <p>Edit: For the record, I am currently getting 2 re-renders before the warning relating to updating the state of an unmounted component, and then two other re-renders (those of which are to be expected). So basically, my console look something like this:</p>
  <blockquote>
  <p>component re-rendering</p>
  <p>component re-rendering</p>
  <p>Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application...</p>
  <p>component re-rendering</p>
  <p>component re-rendering</p>
  </blockquote>
  <p>Edit2: For what it is worth, I would also like to show how the <code>MyProvider</code> is being used. It is simply wrapping another component in a particular route. Something like this:</p>
  <pre class="lang-js prettyprint-override"><code>const App = () =&gt; (
      &lt;Router&gt;
          &lt;Switch&gt;
              &lt;Route
              path='/items'
              exact
              component={() =&gt; (
                  &lt;MyProvider&gt;
                      &lt;Items/&gt;
                  &lt;/MyProvider&gt;
              )}
              /&gt;
          &lt;/Switch&gt;
      &lt;/Router&gt;
  )
  </code></pre>
  <p>The behaviour I get above happens simply when visiting the <code>/items</code> route.</p>