React-state does not update in subscribe

[flappix]

I have a valtio store (global state) and a local state created with useState. When the global state updates I want to call a function and access the current value of the local state in this function. But I only get the initial value of the local state. It does not update.

import { useState, useEffect } from 'react';
import { proxy, subscribe } from 'valtio'

const global_state = proxy ({foo: 0});

function App() {
	
	const [local_state, setLocalState] = useState (0);
	
	useEffect ( () => {
		subscribe (global_state, () => {
			console.log (local_state); // prints `0` instead of `1`
		});
	}, []);
	
	const click = () => {
		setLocalState (1);
		global_state.foo++; // triggers subscribe
		
	};
	
  return (
	<>
		<button onClick={click}>Press</button>
		<div>{ local_state }</div>
	</>);
}

export default App;

Is it somehow possible to mix up both state management tools?

[dai-shi]

That's how React works. Fix:

  useEffect(() => {
    const unsubscribe = subscribe(global_state, () => {
      console.log(local_state);
    });
    return unsubscribe;
  }, [local_state]);

[flappix]

@dai-shi
Thanks for your answer.
It does work, but only the second time I press the button. The first time I press it the local state updates in render but the console.log is not executed.

This makes sense because subscribe is only called when the local state changes and not when the component is mounted. Is there a way around this?

Unfortunately it does not work if I continuously update the local state.

import { useState, useEffect } from 'react';
import { proxy, subscribe } from 'valtio'

const global_state = proxy ({foo: 0});

function App() {
	
	const [local_state, setLocalState] = useState (0);
	
	useEffect(() => {
		const unsubscribe = subscribe(global_state, () => {
			console.log(local_state);
		});
		return unsubscribe;
	}, [local_state]);
	
	const click = () => {
		setLocalState (local_state + 1);
		global_state.foo++; // triggers subscribe
		
	};
	
	
  return (
	<>
		<button onClick={click}>Press</button>
		<div>{ local_state }</div>
	</>);
}

export default App;

The console.log line is not executed at all.

[dai-shi]

Does this handle the edge case?

  useEffect(() => {
    const callback = () => {
      console.log(local_state);
    };
    const unsubscribe = subscribe(callback);
    callback();
    return unsubscribe;
  }, [local_state]);

[flappix]

Not really, callback is not executed by subscribe but only by useEffect.

It's actually the same as

useEffect(() => {
    console.log(local_state);
}, [local_state]);

It's not an edge case, it's just the normal case.

[dai-shi]

By the edge case, I meant from the subscription perspective. Yeah, it's the normal case.

I think it's tricky, when do you want to trigger the callback? Maybe only hacks with useRef would do. Hope you find a solution based on what we discussed.

[flappix]

Thanks for your help.
I want to trigger the callback every time the global state changes. In my minified example this always happens along with updating the local state but in my real application this is not the case, they change independently.

Do you think this is a bug or is Valtio just not designed for using in combination with useState ?

My current solution is replacing the local state with another Valtio store.

[dai-shi]

It's not a bug nor a wrong design. I'd say it's just a mismatch between React state and global state.

Maybe this blog post would help: https://overreacted.io/making-setinterval-declarative-with-react-hooks/

[flappix]

The following seems to work in this simple case

useEffect(() => {
    console.log(local_state);
  }, [global_state.foo]);

But this does not

useEffect(() => {
    console.log(local_state);
  }, [global_state]);

So it does not work with nested structures, which is one point why Valtio is so attractive.