javascript - React Native: cannot use function as default state hook? issue with array computation and slow UI

Question

I have a function that takes a few discounts and groups them by days, so the final result is an array of 7 representing each day with a few discounts or none in each index, for some reason this computation makes the UI don't feel very snappy, only fully completing when I press the UI and showing an uncompleted result UI before that...

I tried placing a function which gives me the resulting array to the default state of my state hook but I gwt the following error:

getVenueDiscounts is not a function

Before this I was using useEffect with empty array to get my array but as I said it didn't feel very snappy...

Here is my method, maybe the problem is I have not optimized my business logic, is it possible to do this calculations better , maybe with a lodash method?

My method for grouping discounts by week days:

const [ weekDiscounts, setWeekDiscounts ] = useState(getVenueDiscounts());

const getVenueDiscounts = () =>
    {
        if(discounts.length == 0)
        {
        var weekDiscountsCopy = [ [], [], [], [], [], [], [] ];
        
        //let weekDiscountsCopy = [...weekDiscounts];
        //let response = await venueStore.getVenueDiscounts({ id:1 });
        console.log(response.data);
        let allDiscounts = _.cloneDeep(venueStore.myDiscounts);
        //let allDiscounts = response.data.discounts;
        //Alert.alert(response.data.discounts.length+' discounts');
        //setDiscounts(discounts);
        console.log(response.data.discounts[0].days);
        for(var i=0; i<response.data.discounts.length;i++)
        {
            let discountDays = allDiscounts[i].days;
            for(var x=0; x<discountDays.length;x++)
            {
                if(discountDays[x].id == 1) 
                {
                    weekDiscountsCopy[0].push(allDiscounts[i]);
                }
                else if(discountDays[x].id == 2) 
                {
                    weekDiscountsCopy[1].push(allDiscounts[i]);
                }
                else if(discountDays[x].id == 3) 
                {
                    weekDiscountsCopy[2].push(allDiscounts[i]);
                }
                else if(discountDays[x].id == 4) 
                {
                    weekDiscountsCopy[3].push(allDiscounts[i]);
                }
                else if(discountDays[x].id == 5) 
                {
                    weekDiscountsCopy[4].push(allDiscounts[i]);
                }
                else if(discountDays[x].id == 6) 
                {
                    weekDiscountsCopy[5].push(allDiscounts[i]);
                }
                else if(discountDays[x].id == 7)
                {
                    weekDiscountsCopy[6].push(allDiscounts[i]);
                }
            }
            //setWeekDiscounts(weekDiscountsCopy);
            setDiscounts(allDiscounts);
            return weekDiscountsCopy;
        }
    }
    };

Thanks in advance!

Answer 1

This is an issue of how and when your code gets interpreted.

Because getVenueDiscounts is a lambda assigned to a const, it gets hoisted to the top of the scope, but remains undefined until that code is actually executed on the second pass -- and the state hook is being initialized with that call before the function has been defined. One solution would be to just move getVenueDiscounts above the hook.

A more detailed description can be found here:

These variable declarations only become initialized when they are evaluated during runtime. The time between these variables being declared and being evaluated is referred to as the temporal dead zone. If you try to access these variables within this dead zone, you will get the reference error above.