Estoy creando una aplicación de tareas pendientes usando ganchos React. La forma en que estoy haciendo esto es creando un contexto para una sola tarea pendiente y un contexto para todas las tareas pendientes. El NewTodoContext sería padre de los nuevos componentes de reacción de tareas pendientes y asumirá responsabilidades como tener un estado interno, proporcionar devolución de llamada para actualizar ese estado, restablecer ese estado y actualizar AllTodosContext una vez que el usuario confirme la formación de tareas pendientes.

El NewTodoProvider se vería como

 function NewTodoProvider({ children }){ const [todo, setTodo] = React.useState(DEFAULT_EMPTY_TODO_STATE); const [ addTodo ] = React.useContext(AllTodosContext); const updateTodo = React.useCallback((todoFragment) => { // setTodo({...todo, ...todoFragment}) }, [todo]); const confirmTodo = React.useCallback(() => { addTodo(todo) }, [todo]); return ( <NewTodoContext.Provider value={{ todo, updateTodo, confirmTodo }}> { children } </NewTodoContext.Provider> ) }

AllTodosProvider se vería como

 function AllTodosProvider({ children }){ const [todos, setTodos] = React.useState(); const addTodo = React.useCallback((todo) => { setTodos([...todos, todo]); },[todos]); return ( <AllTodosContext.Provider value={{ todos, addTodo }}> { children } </AllTodosContext.Provider> ) }

y el árbol React sería como

 <AllTodosProvider> <DifferentComponents /> <NewTodoButton /> <DifferentComponents /> </AllTodosProvider> // NewTodoButton would open up into <NewTodoProvider> <SomeFormComponent /> </NewTodoProvider>

Ahora llegando al problema al que me enfrento. Como puede ver, confirmTodo está envuelto en useCallback con todo como dependencia para que tenga el estado más reciente de NewTodoProvider, pero ese no parece ser el caso. Cuando se llama a confirmTodo, parece recuperar el estado predeterminado, lo que sugiere que su implementación se mantuvo sin cambios a pesar de los cambios de estado. ¿Que me estoy perdiendo aqui?