2

I have the following component in React:

import React, { useState, useEffect } from 'react';
import api from '../../services/api';

const Store = () => {
  const [products, setProducts] = useState([]);
  let pagination = null;

  const getProducts = async (page = 1) => {
    const { data } = await api.get('products', { params: { page } });

    setProducts([...products, ...data.products]);
    pagination = data.pagination;

    if (pagination.current < pagination.max) {
      document.addEventListener('scroll', loadMore);
    }
  };

  const loadMore = () => {
    const { scrollTop, clientHeight, scrollHeight } = document.documentElement;

    if (scrollTop + clientHeight >= scrollHeight - 300) {
      getProducts(pagination.current + 1);
      document.removeEventListener('scroll', loadMore);
    }
  };

  useEffect(() => {
    getProducts();
  }, []);

  useEffect(() => {
    console.log(products);
  }, [products]);

  return (
    <div>
      {products.map(product => (
        <p>{product.name}</p>
      ))}
    </div>
  );
};

export default Store;

My console.log inside the useEffect hook do print the products array correctly, and the component is also rendering the products titles correctly.

But when I try to access the products variable inside the getProducts function it doesn't get the updated products value, it gets the value I have set in the useState hook.

For example, if I start the state with one product, calling products within the getProducts function will always bring this one product, and not the ones loaded from the API fetch, that were correctly logged in the console.

So, when I try to add more products to the end of the array it actually just add the products to an empty array.

Any idea why this is happening? Being able to access the products state inside the useState hook but not inside the getProducts function?

Gabriel Castro
  • 110
  • 1
  • 11
  • The `products` state won't be altered until the next render after `setProducts` is run. Within your `getProducts` function you need to use `data.products` to access the new values. Perhaps create a temp variable like `const tempProducts = [...products, ...data.products];` and then use `tempProducts` to update the state `setProducts(tempProducts);` and also use `tempProducts` anywhere you need to access the updated value within `getProducts`. – WGriffing Feb 28 '20 at 19:36
  • I actually tried to create the temp variable like you said, but I just get the same result: `...products` will bring me nothing, so I end up only with the fetched products. The solution I found was to set the state in the `getProducts` function like `setProducts(previousProducts => ([...previousProducts, ...data.products]))`. It did work, but I still don't understand why the `products` variable is empty, even after the `console.log(products)` has showed me that the state was updated. – Gabriel Castro Feb 28 '20 at 19:52
  • I am 100% sure I am calling the `products` after the state finishes updating, as all the products are already being showed in the browser when the `loadMore` calls the `getProducts` again. – Gabriel Castro Feb 28 '20 at 19:55
  • 1
    I think I did not explain it well. Check out this answer https://stackoverflow.com/a/58877875/10447393 from [useState set method not reflecting change immediately](https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately). If that's not the same problem you are experiencing, then I apologize for misunderstanding. – WGriffing Feb 28 '20 at 20:09
  • Yeah, the answer actually did help a lot, thank you so much for linking it! :) – Gabriel Castro Feb 28 '20 at 20:15
  • You're very welcome! I only learned of this behavior earlier this week, so I'm happy to be able to pass the knowledge on to someone else. – WGriffing Feb 28 '20 at 20:18

1 Answers1

3

This is happening because the getProducts is using the value products had when getProducts was being declared, not the one products has when the getProducts function is called. This is always the case when you want to access the most recent state directly in non-inline functions. Mostly, you will need to pass the updated value through the function arguments.

But this is not an option in your case. The only option in your case is to use the previous value as the argument from a callback passed to setState (in your case, setProducts).

Hope this helps someone else in future :).

Gad Ishimwe
  • 51
  • 7