Как сделать что бы два стейта рендерелись одновременно?

Question

[Shu90]

Делаю todolist с хуком useState и у компонента у меня есть два состояния, одно для всех задач а второе для активных так как у меня есть переключение с активного на не активное. В шапку я передаю количество активных заданий но проблема в том, что второе состояние (активные задачи) рендерится на шаг позже и их количество всегда отстает на шаг от актуального. Как решить эту проблему?

function App() {
    const [tasks, setTask] = useState([])
    const [activeTasks, setActiveTasks] = useState([])

    function addTask (e) {
        let taskNew= {text: e,
            id: Math.random(),
            complete: false
        }
        setTask([...tasks, taskNew])
        setActiveTasks(tasks)
    }

Answer 1

[Александр]

const newTasks = [...tasks, taskNew];
setTask(newTasks);
setActiveTasks(newTasks)

но в примере явно косяк.

Comments

[Shu90]

Да, так работает, спасибо! А почему косяк? Что именно не корректно? и почему мой вариант отставал?

[Shu90]

Мне туда еще проверку нужно было добавить и получилось так

const newTasks = [...tasks, taskNew]
        setTask(newTasks)
        setActiveTasks([...newTasks.filter((el)=> el.complete === false)])

Все равно тут косяк какой то? В логике?

[Александр]

Shu90, Теперь лучше, и можно не копировать массив, сразу setActiveTasks(arr.filter(...))

[Shu90]

Александр, Cпасибо!

[Shu90]

Александр, Александр, а подскажите пожалуйста еще последний вопрос, если я вынес обновление второго состояния в useEffect это правильное решение?

useEffect(() => {
        setActiveTasks(tasks.filter((el)=> el.complete === false))
    },[tasks])

[Александр]

Shu90, много проще высчитывать кол-во без состояния и эффектов сразу, на самом деле.