Construyo una aplicación de tareas simples con una reacción con una variedad de tareas pendientes:

 const todos = [description: "walk dog", done: false]

Yo uso los siguientes dos estados:

 const [alltodos, handleTodos] = useState(todos); const [opencount, countOpen] = useState(alltodos.length);

Esta es la función que cuenta los todos abiertos:

 const countTodos = () => { const donetodos = alltodos.filter((item) => { return !item.done; }); countOpen(donetodos.length); };

Cuando trato de agregar un nuevo todo, también quiero actualizar el estado de cuenta countTodos opencount

 const submitTodo = (event) => { event.preventDefault(); const data = { description: todo, done: false, }; handleTodos([...alltodos, data]); console.log(alltodos); countTodos(); };

Esto no funciona como se esperaba, cuando ejecuto console.log(alltodos) mostrará una matriz vacía. La función en sí funciona, pero parece tener un "retraso", supongo que en función de la naturaleza asíncrona del useState .

Traté de pasar la función countTodos como una devolución de llamada como esta, ya que he visto algo similar en los componentes basados en clases.

 handleTodos([...alltodos, data], () => { countTodos(); });

Obtuve el siguiente error:

 Warning: State updates from the useState() and useReducer() Hooks don't support the second callback argument. To execute a side effect after rendering, declare it in the component body with useEffect().

¿Como puedó resolver esté problema? ¿Cuál es la mejor forma de actualizar el estado en función de otro estado?