Challenges with useEffect, useState

I think the way my code is behaving at the present moment it seems that prepareList doesn't update in time and thus is undefined and then code gives an error saying filter is not a function, and it returns finalGroups as it should if there is no prepareList.length. I'm certain that the map inside prepareList itself works and there are values (array of objects) behind removedSubstitutesList which itself is useState array.

As you can see I've tried to prevent this behavior by adding completely irrelevant useEffect and makeWay and by doing setWait inside of it just to make it wait a bit longer to be able to get values to prepareList. Also dependencylists are part of trying to get it working somehow to see what is wrong.

My question is: is my reduce function itself wrong and thus it doesn't work or if it is indeed the problem of useState, multiple renderings etc. so that reducer function runs too early without a value or is there something else that I haven't noticed.

This code is a part of a bigger set and this part is supposed to gather, process and lift up prepared data to the main app component for it to use. Sendpressed here is a buttonclick and liftSubstitutes and liftSubstituteGroups are callbacks to send data to main app component.

Hopefully I've managed to be clear enough to follow through and if not I'll try my best to guide you through it. Any suggestions are welcomed, thanks in advance.

 useEffect(() => {
    const makeWay = () => {
      setWait('a');
    };
    makeWay();
  }, [sendPressed, finalGroups, removedSubstitutesList]);

  useEffect(() => {
    const liftFinalData = () => {
      const prepareList = removedSubstitutesList.map(item => item.email);
      const finalResults = !prepareList.length
        ? finalGroups
        : prepareList.reduce(
            (results, filter) => results.filter(filter),
            finalGroups[0].data
          );

      liftSubstitutes(Substitutes || 0);
      liftSubstituteGroups(finalResults || 0);
    };
    liftFinalData();
  }, [sendPressed, finalGroups, wait]);

Your assumption is correct, the issue is with filter() in reduce().

So Array.prototype.reduce() takes 2 arguments:

1. The first is the accumulator, in your case finalGroups[0].data which looks okay.
2. The second is the current value from the iteration - filter variable.

So in your case I guess the issue is that as the error message states that filter is not a function. Technically filter in this case one element from prepareList array.

For Array.prototype.filter() you need to pass a function which return true or false value, from the documentation:

> The filter() method creates a new array with all elements that pass the test implemented by the provided function.

Think about the following solution:

(results, prepareListElem) => results.filter(element => {
   var passTest = false;

   // the logic to implement for passTest

   return passTest;
})

Giving one working example how reduce() and filter() are working:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const array = [{name: 'John'}, {name: 'Jane'}];
const result = array.reduce((acc, cur) => {
   acc.push({
      ...cur,
      age: 12
   });

   return acc;
}, []);

console.log(result);

const filtered = result.filter(e => e.name.indexOf('a') !== -1);

console.log(filtered);

<!-- end snippet -->

In my example, we have elements in an array where all the object has name property. We are trying to extend with age. At the end we are filtering where the name property contains character a.

I hope this helps and clarifies where you have issues!