useAction delay

We are using useAction to continuously update a variable that takes information from storage API.

The below code fetches our messages variable from storage using a useAction hook.

const [fetchedmessages, fetch] = useAction(async () => {return await storage.get(listofId) || []}, async () => {return await storage.get(listofId) || []});	

We then use the below code block to:

  1. update the storage to empty array
  2. Log the subsequent storage value (from storage.get). This will also return the empty array
  3. Call our fetch function (from the useAction)
  4. Log the fetchedmessages variable that should have been updated. However, this returns the array we had PRIOR to setting the storage to a new value in step 1

Note: listofId is a variable we use

await storage.set(listofId, []);
console.log(await storage.get(listofId));
console.log(`called fetch`);
await fetch();
console.log(fetchedmessages);

We need fetchedmessages to update properly and on time in order to use it elsewhere in the code. Right now it is taking a while to update and other code is being run with the old fetchedmessages value.

Is there a reason why the useAction seems to be not updating the fetchedmessages variable with the fetch resolver function?
Any guidance would be much appreciated.

2 Likes

Hi @JustinZhang, sorry for the delayed response here.

It’s not intended to use the “setter” of useAction in this way here. The “setter” should only be used for event handlers in UI kit components like a <Button onClick={...} />.

Can you provide a more complete example of what you’re trying to do here? That might help us provide more specific advice.