add new todo

[Alex Cory]

Surely there's a better way to add a todo to the list only using hooks. How would you implement this?

[Gert Hengeveld]

Hey, sorry it took a while to get to this, I've been busy releasing Chromatic 2.0. You've highlighted a weak spot in the way React Async works. It's a bit tricky to append new data to existing data. It's possible however.

First of I would combine the promiseFn and deferFn into a single instance of useAsync. That allows you to completely eliminate the need to keep the two in sync via useEffect. The only caveat is that you'll have to return the full updated list of todos from the deferFn, rather than just the newly inserted todo. That's achieved by passing the list of todos into run and concatenating the newly added todo onto it in your deferFn.

Here's an updated sandbox: https://codesandbox.io/s/react-async-todo-list-app-910zl?file=/src/index.js

Hope this helps!