dai-shi / react-tracked

State usage tracking with Proxies. Optimize re-renders for useState/useReducer, React Redux, Zustand and others.

Home Page:https://react-tracked.js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

TypeError: ownKeys target is non-extensible but key is missing from trap result

abepuentes opened this issue · comments

Hey @dai-shi, thank you so much for all your work to open source. Amazing projects.

Been working on an app for react native since 4 years ago which I've been using to learn how to program. I've been using zustand as my state manager since the beginning. Just yesterday, I learn about this project and thought it was cool enough to modify the whole project to be able to try it out. Just the deleting of all the "const declaration for useStore" for one single state declaration has worth the effort.

Just one error come up so far, and it is the following.

// store.ts
import create from "zustand"

type Store = {
item: string[];
}

const useStore = create<Store>((set)=>({
item:[""],
});

--

// component.tsx
const state = useTrackedStore();

// this trigger a Render Error on console.js(78:27)
// ownKeys target is non-extensible but key is missing from trap result
console.log(state.item)

// this works
console.log(JSON.stringify(state.item))

//this also works, so no render issues.
<View><Text>{state.item)</Text></View>

Thanks again for your work and sorry, I'm not very advance to test further but I was able to narrow it down as what you see above, hope it makes sense.

Hi, can you create a minimal reproduction with https://codesandbox.io/s/react-new ?

In general, console.log and tracking proxies are not friends, and you probably want to use getUntracked for debugging.

Thanks for your answer.

Just to clarify this happened only in react native running on device, no issues on web or expo.

The workaround mention by you has works perfectly.

// type Item { string[] || {}[] }
// both of the following workaround works on react native
console.log(getUntrackedObject(state.item);
console.log(JSON.stringify(state.item, null, 2);

I did a minimal reproduction using expo although the error is not present on web or on expo, only in react native running on device https://codesandbox.io/p/sandbox/sweet-williams-jjm7k5

Here the screenshot, the error among all the types I have in the store its just happening to arrays.
IMG_2867904FB460-1

Maybe the internal implementation in RN on device is somehow different.
If getUntrackedObject works, it should be the right solution.

I've closed this issue because you are right that has more to do with how console is implemented on RN then a react-tracked issues but I will like to add that maybe just a comment about this in the Zustand guide to people using it on RN could be informative because probably this will continue in this state for a long time.
Thanks for your work on both zustand and this.

Please feel free to open a PR to improve website/docs.