Async/Promises with Valtio

[DevGeorge]

Hello,
This is going to be my first big react native application and i was wondering how we would do promises/async functions with the state. I've tried it with useState(state.pickedCard), I've tried creating an async function that waits until a card is set into the state.pickedCard. I couldn't get anything to work as I intended. Is there a way I can achieve this result?
Is this something that would require a derived state?
Thanks
console.log("before new card " + snap.pickedCard); -> Expected Base (default state is base) state.pickedCard = state.deck.pop(); console.log("After new card " + snap.pickedCard); -> Expected random card from state deck -> actual base/default state

[dai-shi]

The primary usage is to put resolved values in proxy states.
I'm not sure if I understand your issue from the pseudo code.
Would you be able to create a minimal example in codesandbox to explain your confusion?

[DevGeorge]

import React from "react";

let state = proxy({
  deck: ["7H", "8D", "9D", "10D"],
  pickedCard: "default"
});

export default function App() {
  let snap = useSnapshot(state);
  const testFunc = () => {
    console.log("before picking card " + snap.pickedCard);// expected result "before picking card default"
    state.pickedCard = state.deck.pop();
    console.log("after picking a card " + snap.pickedCard); //wanted result "after picking a card 10D"
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>the card: {snap.pickedCard}</h2>
      <button
        title="Test"
        onClick={() => {
          testFunc();
        }}
      />
    </div>
  );
}

How would i wait for the state to update before it moves on to the next console.log().

https://codesandbox.io/s/valtio-help-pv0fl?file=/src/App.js here is the codesandbox

[dai-shi]

testFunc is not a render function and you don't need to use snap.

  const testFunc = () => {
    console.log("before picking card " + state.pickedCard);
    state.pickedCard = state.deck.pop();
    console.log("after picking a card " + state.pickedCard);
  };

A snapshot is an immutable object and never changed.
This is close to the useState mental model.

  const [state, setState] = useState('foo');
  const testFunc = () => {
    console.log("before calling setState " + state); // ---> 'foo'
    setState('bar');
    console.log("after calling setState " + state); // ---> still 'foo'
  };