useProxy error: 'set' on proxy: trap returned falsish

[johnsonthedev]

I might found a bug with useProxy, but I am not sure: https://codesandbox.io/s/nameless-hill-xj6o6?file=/src/App.js:0-701

There is also an issue from 2016, but I don't know how accurate it is :-D
GoogleChrome/proxy-polyfill#20

Can anyone comment on it ?

Cheers!

---

If I run it with CRA I get the error: TypeError: 'set' on proxy: trap returned falsish for property '1'
on codesandbox it renders, but never sets the value.

const useNotWorking = (id) => {
  useProxy(store);

  if (!store[id]) store[id] = `huhu ${id}`;

  return store[id];
};

const useWorking = (id) => {
  const snap = useSnapshot(store);

  if (!snap[id]) store[id] = `huhu ${id}`;

  return snap[id];
};

[dai-shi]

Thanks for opening the discussion.
It works as expected currently, and this shows how it can be confusing.

---

First things first, useProxy() translates to useSnapshot() with replacing with snap in render function.

So,

const useNotWorking = (id) => {
  useProxy(store);

  if (!store[id]) store[id] = `huhu ${id}`;

  return store[id];
};

becomes

const useNotWorking = (id) => {
  const snap = useSnapshot(store);

  if (!snap[id]) snap[id] = `huhu ${id}`;

  return snap[id];
};

and this causes the error, because snap is an immutable object.
One problem here is that the error message is not very explicit. (Implementation-wise, fixing this would require quite a bit of effort.)

---

Now, the rationale behind this is render function should be pure and

store[id] = 'foo'

is mutating an object, which is impure.

Although, the lazy init is allowed. So,

if (!store[id]) store[id] = 'foo'

is actually okay in React.

So, it's more or less a limitation in valtio.

---

What's an idiomatic way to fix this. useWorking is technically fine if one understands the pure operation in react, but usually this wouldn't be something to recommend.

Mutation should be done in useEffect. So,

const useIdiomatic = (id) => {
  useProxy(store);
  useEffect(() => {
    if (!store[id]) store[id] = `huhu ${id}`;
  })
  return store[id];
};

this is something looking good and should work with useProxy.

But useIdiomatic has a pitfall. The first render returns undefined. To fix it,

const useIdiomaticBetter = (id) => {
  useProxy(store);
  const thing = store[id] || `huhu ${id}`;
  useEffect(() => {
    if (store[id] !== thing) store[id] = thing;
  })
  return thing;
};

is good. This is often a technique with custom hooks.

Oh dear, this is so complicated...

[DeepUpRosenthal]

What a lovely, insightful answer! Wish more people would answer this way :)