URL Parameters Not Reactive

💬 App Building
1

  • Goal: I want to set certain URL parameters (either by search or hash) and then have another component use those values to do something.

  • Steps: add a click event handler to something and then have it set a URL parameter (this is a custom event handler). Now add a text box somewhere to reflect that URL parameter through {{ url.hashParams/seachParams.keyName }}.

  • Details: While it does change the parameters in the URL, these changes are not reflected in the app itself, or rather the variables.

3

Thanks for the feedback - I agree we should at least have access to the updated hash param :thinking: I'll reach out to our team about this

1 Like
4

Just hit the same problem. +1 please @Tess

5

Hi @jo_n_go,

Thanks for the +1! Unfortunately, this was reviewed and isn't currently being prioritized internally, so I recommend exploring a workaround.

It is by design that the url only updates on the initial load, or on page switch in a multipage app.

6

Hi @Tess, thanks for your response.

That's a shame. I genuinely believe hashtags can unlock some very useful patterns—particularly for things like page reloads and handling primary keys, to name just a few.

Of course, it depends on the size and scope of your app, but I’m fairly certain that at some point in any project, you’ll want to rely on this technique. Discovering that hashtags aren’t responsive/reactive at that moment can be both unexpected and difficult to troubleshoot.

Frankly, it feels like a missed opportunity.

7

I hear you! I like using hashtags too and am used to that from working with single page apps. It sounds like there were some issues with builders unintentionally creating dependency cycles involving urlparams, so this product decision should mitigate that. Our hope is that things like variables, global app state, local storage, etc can help with workarounds. I'll still share your recent comment with the team in case they reconsider this down the road

8

I am particularly curious if applying this pattern would potentially lead to a suboptimal performance. Is there a chance that by relying on this technique, one could indeed introduce a "dependency cycle" you mentioned, leading to performance issues? I've had this experience, but haven't been able to pinpoint exactly why this happened. If there are any risks involved in this regard, then I feel like I should be informed in some way, shape or form.

In my case, it's not that I'm relying heavility on this, but I am importing these values (i.e. from the URL) to allow for certain URL's to be more persistent and allow for sharing these across users.

Hope you can confirm this for me.
Thanks.

9

Hi @emozio,

Apologies for the delay here! The team made this product decision specifically to prevent infinite loops where a component value updates a url param, and then the change in that url param updates the component, etc