Use react-query or swr instead of useEffect and useState for async data fetching

[AdamFipke]

Description

see https://react.dev/learn/you-might-not-need-an-effect#fetching-data

Technically we can just make our own hook that does stuff like deduplication and stuff for us, but it's probably better to use the package that's specifically built for this purpose.

react-query is the more popular choice, though our project already has the swr package (which I think will allow us to make regular fetch calls with it).

Basically, you have to go through the whole system and find all queries that set states and instead use swr or react-query. This will help reduce a lot of code and solve bugs and probably help a bunch of other things

[AdamFipke]

I tried using swr for this in #425 and it seemed to work pretty good! You can disable a lot of the built-in refetching things to basically just turn it into a shorthand version of having a loading, error, and data states with a useEffect hook for fetching