When to use snap and when to use state?

[beilo]

Hello, I still don't understand when to use snap and when to use state.
My shallow understanding is to use state at the time of assignment, directly changing the source data.
Use snap at other times.
Is my understanding correct?
thank.

function Counter() {
  const snap = useSnapshot(state);

  useEffect(()=>{
    // Here we use snap or state? ---1
    if(snap.count){

    }
  },
  // Here we use snap ? ---2
  [snap.count])

  const render = ()=>{

    // Here we use snap or state? ---3
    if(snap.count){
        xxx
    }

    return <div>
        render div
    </div>
  }

  return (
    <div>
      {snap.count}
      <button onClick={() => {
        ++state.count

        // Here we use snap or state? ---4
        if(snap.count === 0){
            xxx
        }
      }}>+1</button>
    </div>
  );
}

[dai-shi]

state is basically something you prefer to use wherever possible.
snap should be used where reactivity is required.
So, the mental model is try to use state first, and if it doesn't work (it doesn't re-render), snap would do.

The difficulty comes with useEffect dependency array (and useCallback, useMemo, memo)
For that, you should only use the primitive values extracted from snap.

// don't do this
useEffect(() => {
  ...
}, [snap])

// instead, do this
const primitiveValue = snap.primitiveValue
useEffect(() => {
  ...
}, [primitiveValue])

[dai-shi]

I think this is tricky. I mean, it's valid but people has to understand how it works.
In state.getFinder(), this points to state.
In snap.getFinder(), this points to snap.

[beilo]

Because I've been learning about class programming ideas lately, Finder is detached to aid in queries.
I'd like to try useProxy macro. It feels like it takes a lot off your mind.
but babel-plugin-macros.I keep failing on my projects.
And it doesn't seem to be maintained
https://stackoverflow.com/questions/71870633/error-when-trying-to-run-application-with-babel-plugin-relay-and-webpack-5

Unfortunately, babel-plugin-macros is not being maintained anymore (though still a dependency for ).babel-plugin-relay

[beilo]

Or do we have more detailed documentation on when to use state or snap?

[dai-shi]

To mitigate such issues for beginners, we develop eslint-plugin-valtio.

[beilo]

Thank you very much! Let me use it

[beilo]

// store/step-parser
export const stepParser = proxy(new StepParser());

// store/index
export const store = proxy({
  stepParser,
  progressControl,
});

When I use class, why does this have a proxy object and a class object?

[dai-shi]

I would like to ask what attitude 'valtio' maintains towards the 'get,set' method of 'object' or the 'get,set' method of 'class'?

we did our best to make it behave like just JS, but not everything is possible.
get,set of class are prototype, but get,set of object are not.

prototype is just untouched when proxy(), get,set of object are somehow handled.

Is it to be avoided as much as possible?

It's fully supported in a sense, but not sure if the behavior is what you expect.
For example, it's not reactive.

Or 'proxyWithComputed' instead?

For some cases, it would work.

This creates a problem, if I use it like this, and I pass a proxy object, I need to use the lodash.cloneDeep package

Instead of cloneDeep, doesn't snapshot work?

[beilo]

I'm sorry I couldn't reproduce it using the smallest case.
Here's how I use it:
https://stackblitz.com/edit/vitejs-vite-8zw2nb?file=src/App.tsx

I have realized the error I used ❌.

// There is a recycling problem here
help = new Help(this);

// You should only set this for a single data source,
// Although I think the parser should be the only value for global exports
store.parser.detailData = { a: 1, b: 2 };
parser.init();

[beilo]

If the browser environment does not support proxy, does valtio support proxy？

[dai-shi]

https://stackblitz.com/edit/vitejs-vite-8zw2nb?file=src%2FApp.tsx&terminal=dev

Not sure what I should look at.

If the browser environment does not support proxy, does valtio support proxy？

No.

[beilo]

Thank you very much