It makes sense that you cannot use await inside of an synchronous function. Consider the following snippet
fetch('.../userdata.json')
.then(async res => {
const data = await res.json();
setData(state => state.data = data)
// setData requires a sync callback in order to work
});
I have to define data so that I'm not using await in the callback, which feels a little redundant. Is there shorthand that would allow me to await in the callback?
Either use async/await or use callbacks. I don't know what "shorthand" you're looking for, but you can use await overall if the enclosing function is async. For example:
const someFunc = async () => {
const res = await fetch('.../userdata.json');
const data = await res.json();
setData(state => state.data = data);
};
someFunc();
Alternatively, if you're not in an async function, you can't use await. So this operation would involve callbacks passed to .then() on Promises:
fetch('.../userdata.json')
.then(res => res.json())
.then(data => {
setData(state => state.data = data);
});