Как обновлять state с первого раза в useEffect?

Question

[TheSnegok]

Здрасьте! И так у меня есть select со списком разных сортировок и див с элементами которые нужно отсортировать(это как раз setMatched который не обновляется), всё вызывается, всё работает кроме setMatched он отрабатывает только со второй смены:

<select onChange={(e) => setSelectValue(+e.target.value)} value={selectValue}>
                            <option value="1">От дешёвых к дорогим</option>
                            <option value="2">От дорогих к дешёвых</option>
                            <option value="3">Популярные</option>
                            <option value="4">По рейтингу</option>
                        </select>

И вот сама смена state in useEffect:

useEffect(() => {
        if (selectValue === 1) {
            console.log('first');
            setMatched(findInput.matchFound.sort((first, second) => first.price[0] - second.price[0]));
        } else if (selectValue === 2) {
            console.log('second');
            setMatched(findInput.matchFound.sort((first, second) => second.price[0] - first.price[0]));
        }
    }, [findInput.matchFound, selectValue])

тут идёт сортировка массива после выбора значения из select, главная загвоздка что state обновляет только после второго раза, а консоль отрабатывает, я уже и в функцию выносил и switch case использовал но потом прочитал что setState асинхронное, наверное нужно использовать async await, но я вообще не понимаю как это реализовать, подскажите пожалуйста как обойти это, спасибо.

Comments

[Alexandroppolus]

прочитал что setState асинхронное

Интересно, откуда впервые возникла эта ересь?..

[Alexandroppolus]

А по сабжу: надо бы для matched вместо useState использовать useMemo

Answer 1

[HealSpirit]

Т.к sort НЕ возвращает новую ссылку на массив а сортирует текущий реакт не тригерит ререндер. Ререндер из-за чего то другого происходит. Попробуй

setMatched(findInput.matchFound.sort((first, second) => first.price[0] - second.price[0]));

заменить на

setMatched([...findInput.matchFound.sort((first, second) => first.price[0] - second.price[0])]);

Comments

[TheSnegok]

Не правильно написал, мне нужно обновлять массив setMatched

[HealSpirit]

TheSnegok, Мне бы неработоспособную версию увидеть, хотябы на минималках. Т.к sort НЕ возвращает новую ссылку на массив а сортирует текущий реакт не тригерит ререндер. Ререндер из-за чего то другого происходит. Попробуй

setMatched(findInput.matchFound.sort((first, second) => first.price[0] - second.price[0]));

заменить на

setMatched([...findInput.matchFound.sort((first, second) => first.price[0] - second.price[0])]);

[HealSpirit]

TheSnegok, findInput.matchFound я так понимаю массив. То же бы хотел увидеть. useEffect может не сработать если ссылка не поменяется

[TheSnegok]

HealSpirit, так весь useEffect срабатывает, консоль срабатывает с первого раза, а вот setMatched не хочет с первого, только после второго раза когда уже консоль лог например снова first а оно токо выводит массив с первого раза

[HealSpirit]

TheSnegok, на codesandbox.io можешь воспроизвести?

[TheSnegok]

HealSpirit, О спасибо работает, походу реально не ререндило