Shonty Comments - Answer Overflow

Shonty

Posts Comments

SSolidJS

•Created by Shonty on 1/28/2024 in #support

How to trigger createEffect when navigating to the same URL ?

Thanks for your help 🙂

9 replies

SSolidJS

•Created by Shonty on 1/28/2024 in #support

How to trigger createEffect when navigating to the same URL ?

It's a great idea but it doesn't seem to work I found this solution where I navigate with navigate(default_url, { state: reset_signal() }); and listen on location.state in addition to location.search, but it might have some weird edge case that I didn't think of. For instance, when I hit the browser back button, the createEffect run twice if I previously reset the buttons, but in this particular example, it still work as expected on the user interface

  createEffect(on([() => location.search, () => location.state], () => {
    const search_params = new URLSearchParams(location.search).get(props.button_name);
    set_button_value(search_params ? search_params : '');
  }))

  createEffect(on([() => location.search, () => location.state], () => {
    const search_params = new URLSearchParams(location.search).get(props.button_name);
    set_button_value(search_params ? search_params : '');
  }))

9 replies

SSolidJS

•Created by Shonty on 1/28/2024 in #support

How to trigger createEffect when navigating to the same URL ?

@FelipeEmos To add some context to my question, I have a lot of buttons that act as filters used in the url. When I click on values of buttons, I store those values in a signal object, and when i click on the "Validate" button, it change the url params accordingly. I decided to listen to location.search in a createEffect so it plays nice with the browser back button and reduce overall code complexity. My problem here is when i click on the value of a button, and don't click on "Validate" button but I click on "Reset" button instead to put the default value, I navigate to the url with no query params. But if the url is already the one with no query params, it doesn t trigger the createEffect, and don t reset the value of the buttons I previously clicked. I ask this question because there is an option similar with signal with const [something, set_something] = createSignal<string>('', { equals: false }); where you can trigger reactivity even if you set the same value Here is a simplified code of my button component

const Button: Component<{button_name: string}> = (props) => {
  const location = useLocation();
  const [button_value, set_button_value] = createSignal('');

  createEffect(on(() => location.search, () => {
    const search_params = new URLSearchParams(location.search).get(props.button_name);
    set_button_value(search_params ? search_params : '');
  }))

  return (
    <>
      {/* Some code here */}
    </>
  );
}

const Button: Component<{button_name: string}> = (props) => {
  const location = useLocation();
  const [button_value, set_button_value] = createSignal('');

  createEffect(on(() => location.search, () => {
    const search_params = new URLSearchParams(location.search).get(props.button_name);
    set_button_value(search_params ? search_params : '');
  }))

  return (
    <>
      {/* Some code here */}
    </>
  );
}

A solution to my problem could be to change the url with a dummy path that is not the default url, and navigate back to the default url to trigger the createEffect, but it doesn't sound clean

9 replies

SSolidJS

•Created by Shonty on 1/17/2023 in #support

Trigger createEffect when createSignal has been changed for the same value

Thanks ! This is exactly what I was looking for 🙂

3 replies

Gaming

Programming