Actions and reactivity
Going through the Todo app tutorial and reading this,
There seems to be some implied knowledge or context here?
What does reactivity mean in this context and how is it related to using a hook or not?
Is this a reference to some basic React concept or do I need to read through the
react-query docs to understand why I wouldn't use a hook here or what "reactivity" means in this context?
I haven't been using React for a couple of years so my know-how isn't fully up to date.5 Replies
hey Johan thanks for the question and feedback! You're right it might be a good idea to explain what "reactivity" means in our docs, writing it down :).
It's more of a general concept here, not React specific - the thing is that when you e.g. run some action (which will e.g. add a new task to todo list), then you will often want to update some queries which depend on Task entity (e.g. getTasks query which displays all the tasks in a todo list).
Reactivity means it is handled automatically for you - as soon as your action adds a new task, all queries that depend on Task will get automatically updated. And if you want to have that automatic reactivity, then you need to use hook for your queries.
For actions you don't have to use a hook because they don't need to get updated, they are the ones that trigger queries to get updated.
Hope this was somewhat helpful - lmk and I'm happy to provide more details or try to explain better 🙂
I see. Yes I read how Wasp has automatically “tied” together the actions and queries that manipulate the same entities to automatically invalidate data.
So the text is really just saying “you don’t need hooks for actions as they don’t have to react to data changing, they cause the data to change”.
The “we are calling the action directly this time (without a hook)” part reads to me as if there are other times when you would use hooks with actions and you’d need reactivity, which raised some questions in my mind. 🙂
Thanks for clarifying!
Yep exactly! There actually is one situation where you still might want to use
useAction hook, and that's if you're dealing with optimistic UI update (e.g. for the sake of smooth UX you don't want to wait for the server confirmation before updating the UI - that's typical when everything is on the same screen - e.g. you add a new task to todo list and want to immediately display it on the screen). Here's the API describing that situation: https://wasp-lang.dev/docs/language/features#the-useaction-hookCool, I haven’t got that far yet so wasn’t aware of it 🙂
looking forward to you trying it out and getting your feedback 🙂