title: Using useEffect and useContext while fetching data
body: <p>I'm trying to learn how to use React's Context API as well as Hooks, and trying to work on a project where I'm using fetch().</p>
  
  <p>When using both, I get the request, but I can't get the data I set, except for <code>loading</code>.</p>
  
  <pre><code>import React,{useState, createContext} from 'react';
  
  export const ProductsContext = createContext();
  
  export const ProductsProvider = props =&gt; {
      const [categories, setCategories] = useState({ categories: {} });
      const [products, setProducts] = useState({ products: {} });
      const [loading, setLoading] = useState(true);
      useEffect(() =&gt; {
          (async () =&gt; {
              const [categoriesResult, productsResult] = await Promise.all([fetch('http://localhost:3000/api/categories'), fetch('http://localhost:3000/api/products')]);
              setCategories(categoriesResult);
              setProducts(productsResult);
              setLoading(false);
            })();
          }, []);
      return (
      &lt;ProductsContext.Provider value={ { products, categories, loading } }&gt;
          {props.children}
      &lt;/ProductsContext.Provider&gt;
      );
  }
  </code></pre>
  
  <p>Here I'm creating a context where I'd like to pass products (and categories) through the Provider.</p>
  
  <pre><code>import React, { useContext } from 'react';
  import { ProductsContext } from './ProductsContext';
  
  
  const Products = () =&gt; {
      const {products, categories, loading} = useContext(ProductsContext);
      return (
          &lt;div className="products"&gt;
              { console.log(products, categories, loading) }
          &lt;/div&gt;
      ); 
  };
  </code></pre>
  
  <p>Page</p>
  
  <pre><code>import React from 'react';
  import Header from './Header';
  import Banner from './Banner';
  import ProductsContainer from './Products/ProductsContainer';
  import {ProductsProvider} from './Products/ProductsContext';
  const Page = () =&gt; (
  
      &lt;&gt;
        &lt;Header/&gt;
        &lt;Banner/&gt;
        &lt;ProductsProvider&gt;
          &lt;ProductsContainer/&gt;
        &lt;/ProductsProvider&gt;
      &lt;/&gt;
  
  );
  
  export default Page;
  </code></pre>
  
  <p>This is the results I get via console.log:</p>
  
  <pre><code>{products: {…}} Response {type: "basic", url: "http://localhost:3000/api/categories", redirected: false, status: 200, ok: true, …} true
  Products.js:9 Response {type: "basic", url: "http://localhost:3000/api/products", redirected: false, status: 200, ok: true, …} Response {type: "basic", url: "http://localhost:3000/api/categories", redirected: false, status: 200, ok: true, …} true
  Products.js:9 Response {type: "basic", url: "http://localhost:3000/api/products", redirected: false, status: 200, ok: true, …} Response {type: "basic", url: "http://localhost:3000/api/categories", redirected: false, status: 200, ok: true, …} false
  Products.js:9 Response {type: "basic", url: "http://localhost:3000/api/products", redirected: false, status: 200, ok: true, …} Response {type: "basic", url: "http://localhost:3000/api/categories", redirected: false, status: 200, ok: true, …} false
  Products.js:9 Response {type: "basic", url: "http://localhost:3000/api/products", redirected: false, status: 200, ok: true, …} Response {type: "basic", url: "http://localhost:3000/api/categories", redirected: false, status: 200, ok: true, …} false
  Products.js:9 Response {type: "basic", url: "http://localhost:3000/api/products", redirected: false, status: 200, ok: true, …} Response {type: "basic", url: "http://localhost:3000/api/categories", redirected: false, status: 200, ok: true, …} false
  </code></pre>
  
  <p>As you can see, there is no data, but loading changes. </p>
  
  <p>What am I doing wrong? How can I pass products via Context API?</p>