title: SetState with react hook and redux after async call to axios API
body: <p>I'm fetching products from a server with axios and  rendering data in <strong>CatalogProducts</strong> component like this : </p>
  
  <pre><code>const CatalogProducts = props =&gt; {
    const classes = useStyles();
  
    const [data, setData] = useState([]);
  
    const fetchProducts = async () =&gt; {
      await props.getProducts();
    };
  
    useEffect(async () =&gt; {
      fetchProducts();
      setData(props.products);
    }, []);
  
    const { products } = props.products;
  
    const items = products.map((product, index) =&gt; {
      return (
        &lt;Grid item xs={12} sm={6} md={3} key={index}&gt;
          &lt;CatalogProduct product={product} /&gt;
        &lt;/Grid&gt;
      );
    });
  
    if (products.length === 0) {
      return &lt;p&gt;Loading ...&lt;/p&gt;;
    } else {
      return (
        &lt;Container maxWidth="xl" className={classes.root}&gt;
          &lt;Grid
            container
            direction="row"
            justify="center"
            alignItems="center"
            spacing={3}
          &gt;
            {items}
          &lt;/Grid&gt;
        &lt;/Container&gt;
      );
    }
  };
  
  const mapStateToProps = state =&gt; {
    return {
      products: state.products
    };
  };
  
  const mapDispatchToProps = dispatch =&gt; ({
    getProducts: () =&gt; dispatch(actions.getProductsAction())
  });
  
  export default connect(mapStateToProps, mapDispatchToProps)(CatalogProducts);
  </code></pre>
  
  <p>I can acces the products data with <strong>props.products</strong> but when I want to access them using <strong>data</strong> variable, I don't know if it's a good idea to work with setData()? </p>