title: React/Redux - when switching between routes content rendering is with delay
body: <p>I'm a beginner with reactjs/redux and I have a bug that I cant fix.</p>
  
  <p>There is a bug between 2 routes that are rendering different data from the database.</p>
  
  <p><strong>/dashboard</strong> route is rendering component that is fetching user.products</p>
  
  <p><strong>/products</strong>  route is rendering component that is fetching all.products</p>
  
  <p>So basically on the dashboard route you should see only those products that you have uploaded and on the products route you can see all the uploaded products from all the users.</p>
  
  <p>The problem is whenever you switch between those two routes the content is rendering with a delay. When you are routing from <code>/products</code> to <code>/dashboard</code> for a fraction you will see on your dashboard all of products and then it will re-render correctly</p>
  
  <p><a href="https://i.stack.imgur.com/fQRgu.gif" rel="nofollow noreferrer">Example</a></p>
  
  <p><strong>Dashboard component renders ProductsList:</strong></p>
  
  <pre><code>class ProductsList extends Component {
    componentDidMount() {
      this.props.fetchProduct();
    }
  render() {
      return &lt;div&gt;{this.renderProducts()}&lt;/div&gt;;
    }
  }
  
  function mapStateToProps({ products }) {
    return { products };
  }
  
  export default connect(
    mapStateToProps,
    { fetchProduct },
  )(ProductsList);
  </code></pre>
  
  <p><strong>Products component renders AllProductsList:</strong></p>
  
  <pre><code>class AllProductsList extends Component {
    componentDidMount() {
      this.props.fetchAllProduct();
    }
    render() {
      return (
        &lt;div&gt;{this.renderProducts()}&lt;/div&gt;
      );
    }
  }
  
  function mapStateToProps({ allproducts }) {
    return { allproducts };
  }
  
  export default connect(
    mapStateToProps,
    { fetchAllProducts },
  )(AllProductsList);
  </code></pre>
  
  <p>When loading <code>/dashboard</code> page the <code>props.products</code> appears as empty array and after the fetch is done it fills this array.</p>
  
  <p>When I route from <code>/dashboard</code> to <code>/products</code> page the <code>props.allproducts</code> at first is filled with data that was fetched for <code>products</code> and after the <code>fetchAllProducts()</code> is done it changes</p>
  
  <p><a href="https://i.stack.imgur.com/SAGiO.png" rel="nofollow noreferrer">Console log</a></p>