Avoid first onChange

[singuerinc]

Hi, is there a way to avoid the onChange on the first render?

Let's suppose I want to change the url based on the value of slug.

useControls({
  slug: {
    options: ["post-1", "post-2", "post-3"],
    onChange: (slug) => {
      alert(slug); // post-1 is shown on page load
      router.push(slug) // will navigate on page load, not useful
    },
  },
});

I'm getting an infinite loop here. I know I could check the current url but I was wondering if is there a better solution.

[dbismut]

There's several arguments that onChange provides. The second or third one has an initial props that does what you want.

[singuerinc]

Thanks!

Solved it in this way:

useControls({
  slug: {
    options: ["post-1", "post-2", "post-3"],
    onChange: (slug, propName, options) => {
      if (!options.initial) {
          router.push(slug)
      }
    },
  },
});