How to use Select properly?

[vvrnck]

Greetings all!

So, a little bit of contextualization first. I'm totally new to three.js and decide to give it a try to learn, but the examples and documentations are kinda old and unless you know what are you doing there are not much else to do, which lead me to find react-three-fiber, drei and so on (thank you guys, btw!).

I'm Currently trying to use leva to configure a three object that is saved on zustand store.
I'm using the select input to work like a preset (meshStandardMaterial, meshPhongMaterial, etc) that will render specifics controllers to each type of material.

const options = {                 
    [STANDARD_MATERIAL]: MESH_STANDARD_MATERIAL,
    [PHONG_MATERIAL]: MESH_PHONG_MATERIAL,
    [NORMAL_MATERIAL]: MESH_NORMAL_MATERIAL 
}

const materialPresets = useControls({
        materialPreset: {
            value: options[material.type], // material is a threejs material passed as props
            options: options,
            onChange: (value) => {
                let newCreationObject = Object.assign({}, three.creationObject);
                newCreationObject.material = value;
                updateStore("three", { creationObject: newCreationObject });
            }
        }
    });

It is working fine until I unmount the component and mount it again. (The material props is always a three standard material)
Lets say that I changed to a meshNormalMaterial, my three object is updated and it works fine, so i close leva ui, but when I open it again the object have the correct material (standardMaterial) but looks like the value on leva ui is not being setted or is cached (in this example it would show meshNormalMaterial).

• Also, - I don't know if it is the expected behavior - but one thing that I notice is that everytime my component is mounted, onChange is called with the last value that was setted

Sandbox: https://codesandbox.io/s/sleepy-cloud-3zk8rx?file=/src/MaterialController.js

Am I missing something in how to use it? Hope you guys can help me and thanks again for those amazing libs!

[dbismut]

@vvrnck would you be able to set up a sandbox? Yes, if you look at all arguments from onChange there's more than just value: path, and context are also in there.

[vvrnck]

@dbismut Sure! I added it on the main issue

[dbismut]

Hi @vvrnck sorry for the late answer. I havent dug into this thoroughly but I'm pretty sure this happens between the zustand store you're using and Leva's internal one are out of sync. Leva's values in the schema won't react to external change, you have to manually set them with set as in:

const [{ something }, set] = useControls(() => ({ something: 'string' }))