createStore from fetched data ?
Hello!
I'm sorry for asking this because I'm sure this is stupid. But here I go:
I'm fetching kind of heavy data from my own API and using useRouteData() in my component, and would like to display it in a table with actions, like delete, update some values, etc.
So far so good, I'm getting the data, but it takes a few seconds, and my createStore call isn't waiting for the data to be available :
const routeData = useRouteData();
const [seriesRows, setSeriesRows] = createStore(routeData()?.map((data: Series) => ({
...data,
deleteSeries,
someMoreStuff
})) as SeriesRow[]);
What is the best, cleanest way to wait for routeData and then create the store?
Thank you for your time!
Wishing you a nice day.
5 Replies
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Thank you for answering!
I've been trying to do that, but I'm not sure how to update it the right way. I think I'm not supposed to use createEffect (I've read somewhere that it wasn't supposed to be used to update states and values). Maybe with createMemo ? But how ?
It's working like a charm with createEffect actually, but I'd like some better practice. Any advice ?
You should be careful of infinite loops when updating state in createEffect.
You're right. Right now I don't think I'll be having that problem, since the effect is depending on routeData, which isn't supposed to change, I guess ?
But I'll pay attention. I was just wondering if it was bad practice, since I'm pretty sure I read in the documentation that createEffect wasn't supposed to be used to update state, and that I should use createMemo instead. But maybe I understood that wrong 😳
That's true. If you need to derive your state, use a derivate function or, if the calculation is expensive, use a memo. That can also be a getter inside your store. If in doubt, try to pull your state rather than push, so it can be lazily evaluated.