Navigating between routes containing Leva panels with a same-name field uses stale data

[about-hector]

Hello @dbismut ,

I'm encountering a problem that I'm pretty sure is easy to fix but my lack of experience is impeding me to.
I tried to read the code, go-to-definition for types etc but I just can't figure it out.

I have a /components route in my website,
every components/[slug] route might or might not include a Leva panel to play around with the component.

When I navigate between different routes, say I move from /components/1 to components/2, if the panels on both the pages include a field with the same name (say 'width') what happens is that I'll have the width of components/1 inside of /components/2's panel, and instead of being in the correct order the same name field is always at the top.

I am sorry for my dumbness but I really can't figure it out,
can you hint me in the right direction regarding why this is happening?

I'd be happy to contribute to the docs if needed,
please let me know if I can be of use for pmndrs :)

[dbismut]

Could you please provide a sandbox? I'll try to fix it for you when I have time.

[about-hector]

Could you please provide a sandbox? I'll try to fix it for you when I have time.

Sure, thank you!

Here's the sandbox: https://codesandbox.io/p/sandbox/bold-estrela-4cl2r7

It's next 14 with only Leva as a dependency.
The / route has 2 for client side navigation, so you can go to both /component-1and component-2

In these routes I use useControl, I define a field named 'width' in both, but one also has the height defined as the first field to showcase the bug.

So, the "symptoms" are:

• when navigating from component-1 to component-2, the width property of component-2 is not 20 as we would expect, it is instead 200 which is the one we had in component-1
• the order of the fields in the leva panel is wrong, width is now first.
• can't access width even if i used the following construct as per docs

const [{width}] = useControls(()=>{
    width: {
        value: 20, 
        onChange......
    }
})

if you refresh, you'll see the rectangle resetting to the correct width.

but then if you client side navigate to component-1, width is again gonna be wrong because leva didn't update it.

So basically it's something about client side navigation, but for all I know it might be me ignoring a specific property I ought to use :) the sandbox should have everything you need to understand the behaviour, every navigation link is client-side so just have fun with it and check the rectangle's width

Thank you so much for your help

[dbismut]

Hey, moving this to a discussion since it's not a bug.

I'm getting an error when navigating to each of the routes.

However I understand the issue.

A few things to note:

• Leva is global to your app, and that's intentional. So if you define the same attribute (in your case width) in two different places, Leva will only create one input, and will set its initial value to the value define in the useControls hook being called first.
• This is the default behavior because it allows components (and therefore instances of the same component) to share input values.

Luckily for you, Leva also allows you to create several stores and dynamically assign a store to a panel. This sandbox from the demo package in the Leva repo is a good example (although a bit complex, but most of the complexity doesn't come from working with Leva):

https://codesandbox.io/s/github/pmndrs/leva/tree/main/demo/src/sandboxes/leva-ui?file=/src/App.jsx

Essentially you would create a different store in each of the routes and assign the right store dynamically to the Leva store whenever the route changes.

// in your routes
const store = useCreateStore(); // store is stable across renders
useControls({ width: 20 }, { store });

// globally (in layout, or _app, not familiar yet with Next app routing)
<Leva store={selectedStore} /> // you need to import Leva from the package to be able to set options to the panel

Then obviously you have to find the right mechanism to pass the selected route from each route to the global store, but that's a pattern that is a common problem I guess.

Does that make sense?

[about-hector]

Goddamn, my bad I just used the default next.js codesandbox and might have messed up something

anyway, yeah your explanation is crystal clear and I thank you a lot for it :)

if you were to need some help and support improving the docs I'd love to help
I'm not the most competent dev, but gotta get there somehow and since I'm gonna be using leva a lot why not gain full understanding of it + contribute

cheers David and thank you a lot, let me know if I can be of use :)

[dbismut]

That's really kind. We have a one branch ongoing which would be great to pursue but I have almost no time to dedicate to OSS at the moment. Making docs for the current version of Leva could help, but they might be outdated as soon as the one branch is merged (If this ever happens).