fix: rework state update method

[broarr]

This PR introduces a generator to handle state transitions. With the simple useEffect hook and async function, whenever the state updated in the async function it would rerender the component causing a new async function to start before the previous one finished. This created a lot of pending async calls that all acted on the state at the same time. Instead of using a simple async function we use a generator function that yields every time the state changes to prevent the rerender problems we saw initially.

[broarr]

I'm gonna keep working on this and put it up for review when it's further along