Use of 'this' in proxied objects within functions written with fat arrow syntax

[knexer]

I found unexpected (and, as far as I could find, undocumented) differences in the behavior of this within a valtio proxy depending on whether a class function is written with fat arrow => syntax or without. I'm new to js, so this behavior might be obvious to those with more experience with the language.

Repro: I have a class BoardModel which I access through a proxy like so:

  const isValtioProxy = (obj) => typeof getVersion(obj) === "number";

  const model = proxy(newBoardModel(props.width, props.height, props.mines));
  console.log(
    "squaremodel is proxy? " +
      isValtioProxy(model.squareAt({ x: 0, y: 0 })) // true or false depending on squareAt is written
  );
  console.log(
    "squaremodel is proxy, v2? " + isValtioProxy(model.squares[0][0]) // always true
  );

  squareAt = ({ x, y }) => {
    console.log("this is proxy? " +isValtioProxy(this)); // prints "this is proxy? false"
    return this.squares[y][x];
  };

  squareAt ({ x, y }) {
    console.log("this is proxy? " + isValtioProxy(this)); // prints "this is proxy? false"
    return this.squares[y][x];
  };

I was using the => syntax to ensure this was correctly bound if I passed the function as a callback - less relevant for this function, more so for one like handleSquareChanged. Are there best practices for creating classes for state models that avoids these gotchas?

[dai-shi]

this is handled as much as possible to work like with normal JS objects. However, this in JS is very tricky so not recommended unless users are very familiar with it.

The screenshot in readme.md:

If one uses https://github.com/pmndrs/eslint-plugin-valtio, it disallows using this.

[knexer]

Thanks for the info! I found https://stackoverflow.com/questions/68506296/why-proxy-cant-catch-the-set-in-the-arrow-function after some further research, which illuminates this particular situation, and wow, 'this is tricky' is right.

If this is discouraged, is there a better recipe for associating actions with specific instances of proxied state objects? I saw https://github.com/pmndrs/valtio/wiki/How-to-organize-actions, but it only describes options that either:
a) reference some externally-defined state in a module scope, or
b) use this in some capacity.

Either way, all of them are designed around singleton state objects, whereas I want to be able to create multiple independent instances of the same kind of state and split pieces of each instance between a hierarchy of components, like so:

const {current: model} = useRef(proxy(new BoardModel(props.width, props.height)));
return (<Square
  key={y * props.width + x}
  model={model.squareAt(loc)}
/>);

The closest alternative I can come up with that completely avoids this would be some kind of manual pseudo-method like:

export const squareAt = (model, loc) => { return model.squares[y][x]; }

but that isn't compatible with class features like private fields and polymorphism, and adds extra boilerplate and/or namespace pollution importing and exporting each of those functions.

On the other hand, it is far easier to tell what's happening there, without this being confusing, so unless there's some way to have my cake and eat it too, I'll carry on with some mixture of pseudo-methods where I can and using this where I must to access class-specific features.

[dai-shi]

The use of this is discouraged for beginners. The library tries best to support this usage and some specific use cases like yours might fit.

But, let's explore how we can solve your use case without this for now.
Your manual pseudo-method seems good actually.
Another idea could be to create a factory function.

const createModel = (initialValue) {
  let ratio = 1; // private value
  const state = {
    value: initialValue,
    setRatio: (r) => { ratio = r; },
    getComputedValue: () => state.value * ratio,
  };
  return state;
};