Array.Filter updates state for a second and then is back to the old state

Viewed 45

I'm using an Array.filter to filter prices in a useEffect with a lot of filter arguments that when it detects that the minFilter and maxFilter change it filters the original api call with those arguments. The problem that i have with my original approach is that when i add the filters and the useEffect triggers it filters the array but after one second the state comes back to the original state without the filter. It's really weird because in the front-end i can see how my list of products change for a second and then come back to the original state. And i tried using console logs in every useEffect of my context to see if after it changes the productList state it enters the any useEffect and changes anything but that didn't happen, so i don't know what is changing the productList after setting it after the filter.

Then i tried separating the minFilter and maxFilter from the useEffect with every filter to a separate one, and it filters the array correctly and shows but i can't figure out how to delete the filter and come back to the original array state, and that's why i think that the minFilter and maxFilter should be in the every filter useEffect, because when it dettects that minFilter and maxFilter are set to empty again it makes the original api call.

Here is my original approach with every filter in the same useEffect:

 const [productList, setProductList] = useState([]);
 const [brandFilter, setBrandFilter] = useState([]);
 const [urlState, setUrlState] = useState("/api/v1/products?");
 const [orderingFilter, setOrderingFilter] = useState("");
 const [featuredFilter, setFeaturedFilter] = useState("");
 const [minFilter, setMinFilter] = useState("");
 const [maxFilter, setMaxFilter] = useState("");

 useEffect(() => {
    console.log("Something changed");
    const url = qs.stringifyUrl({
      url: urlState,
      query: {
        name: search || undefined,
        company: brandFilter,
        featured: featuredFilter,
        sort: orderingFilter,
      },
    });
    setUrlState(url);
    getProductList(url);
    if (maxFilter != "" && maxFilter != "") {
      console.log(productList);
      var filteredList = productList.filter(
        (product) => product.price >= minFilter && product.price <= maxFilter
      );
      setProductList(filteredList);
    }
  }, [
    search,
    brandFilter,
    orderingFilter,
    featuredFilter,
    minFilter,
    maxFilter,
  ]);

Here is the separate useEffect approach:

 useEffect(() => {
    const url = qs.stringifyUrl({
      url: urlState,
      query: {
        name: search || undefined,
        company: brandFilter,
        featured: featuredFilter,
        sort: orderingFilter,
      },
    });
    setUrlState(url);
    getProductList(url);
  }, [search, brandFilter, orderingFilter, featuredFilter]);

  useEffect(() => {
    if (maxFilter != "" && maxFilter != "") {
      var filteredList = productList.filter(
        (product) => product.price >= minFilter && product.price <= maxFilter
      );
      setProductList(filteredList);
    }
    if (maxFilter == "" && maxFilter == "") {
      var filteredList = productList.filter(
        (product) => product.price >= minFilter && product.price <= maxFilter
      );
      setProductList(filteredList);
    }
  }, [minFilter, maxFilter]);
0 Answers
Related