useControls doesn't update object fields values in UI

[user753]

export default function App() {
  const [n, setN] = useState(1);
  const obj = { foo: n };

  useControls(obj, [obj]);

  return (
    <div>
      <button
        onClick={() => {
          setN((n) => n + 1);
        }}
      >
        increase
      </button>
      <pre>{JSON.stringify(obj, null, "  ")}</pre>
    </div>
  );
}

When I click the button I expect that foo field value would be updated in leva UI.
Is there a reason for it?
And what is the best way to achieve this behavior?
https://codesandbox.io/s/serene-allen-6eww2o?file=/src/App.tsx

[dbismut]

Is there a specific reason why you'd be using Leva like this, with useState? The reason it doesn't work is because the deps array only modifies the settings, not the value of the inputs.

[user753]

obj is a state of my application so I just want to view its current state in the Leva UI.

The reason it doesn't work is because the deps array only modifies the settings, not the value of the inputs.

Is there a reason for not updating the values? Personally I don't see why would someone what to have a difference between values in object and values in the Leva UI.
Would it be reasonable if there is some setting like useControls({updateValues: true}, obj, [obj])?

[dbismut]

Leva is not a visualizer for state, it's a store itself. Values can be changed otherwise using the set api as in const [values, set] = useControls(() => ({...schema})).

Even if I don't recommend it, you could do something like:

export default function App() {
  const [n, setN] = useState(1);
  const obj = { foo: n };

  const [, set] = useControls(() => obj, [obj]);

  useEffect(() => {
    set({ foo: n })
  }, [n])

  return (
    <div>
      <button
        onClick={() => {
          setN((n) => n + 1);
        }}
      >
        increase
      </button>
      <pre>{JSON.stringify(obj, null, "  ")}</pre>
    </div>
  );
}

[dbismut]

@user753 but I'd obviously advise to do this:

https://codesandbox.io/s/quirky-cohen-ynn7gn?file=/src/App.tsx

import { useControls } from "leva";

export default function App() {
  const [controls, set] = useControls(() => ({ foo: 1 }));

  return (
    <div>
      <button
        onClick={() => {
          set({ foo: controls.foo + 1 });
        }}
      >
        increase
      </button>
      <pre>{JSON.stringify(controls, null, "  ")}</pre>
    </div>
  );
}

[user753]

Thanks. But I prefer the first approach. I don't want the Leva to be my store, I already have one. I want it to be a UI for my store.

Leva is not a visualizer for state, it's a store itself.

I think it would be useful if Leva could be used just as UI. Maybe something like

<Leva data={obj}/>