Mutation of object type

[SteliosKornelakis]

While it is clear from the documentation that we should not mess with the reference of the proxy parent itself
-If you reassign the proxy to an entirely new object, it will stop working.", it is not clear to me whether we should reassign any child of object type itself (by reference).

For example:

//My Store is:
const store = proxy(store:{id:1, data:{name:'Stelios'}})

//The parent component is something like this:
const DemoPage = () => {

    const store = GetStore();

    const click = () => {
        // store.data.name = 'Makis'; // This works
        store.data = { name: 'Makis' } // This does not work
    }

    return (
        <Container>
            <TestControl input={store} />
            <Button variant="outlined" onClick={click}>Outlined</Button>
        </Container>
    );
}

const TestControl = ({ store}: { store: ITestInput }) => {
    
    const unsubscribe = subscribe(store, () =>
        console.log('state has changed to', store) //This works
    )

    const { name } = useSnapshot(store.data) //This is not reactive !

    return (<>
        <TextField  value={name}  />
    </>)
}

So the question is when we have some big objects with many properties, is it required to change all properties down to the primitive types one by one instead of reassigning the reference of the object itself?

[dai-shi]

when we have some big objects with many properties, is it required to change all properties down to the primitive types one by one instead of reassigning the reference of the object itself?

No, not always. It's only when you are subscribing to child objects (= "scoped subscriptions").
So, it depends on how you would use useSnapshot.

[dai-shi]

It's still big. I think you can make it much smaller.
But, it looks like you are passing a part of derived, which causes the problem, right?
Why do you need derived in this use case? If you need it, you probably want to pass it all the way down.
Wish to have a smaller repro to make some modifications.

[SteliosKornelakis]

I'm afraid if I reduce it further we will not be able to reproduce.
I tried splitting it up a bit, though. (https://codesandbox.io/embed/quizzical-pike-vg7pef?fontsize=14&hidenavigation=1&theme=dark)

I am using the derived in order to pass only the required data to the components.
I am passing it all the way down.

The thing is that changing any non-primitive object of the store, for example:

store.userStore.obj1.name
derive({ ... get(store).userStore.obj1

Changing either userStore or obj1, the derived passed through props proxy is not updating.

[SteliosKornelakis]

I believe this would be easier to play :)
https://codesandbox.io/s/eager-cdn-odlsn3?file=/src/App.tsx

[dai-shi]

If you want to pass sub stores, derive isn't a good util for your case.
I would avoid using derive in this case, because it's confusing (like the behavior you observe.)
Otherwise, the fix would be something like this: https://codesandbox.io/s/pedantic-tree-epprfu

[SteliosKornelakis]

Thank you for your time on this, I really appreciate it.
Nevertheless, I kindly find it a bit hackish for my taste :p.

I understand that this is the expected behavior as derive is not intended for such usage.
Well unless there is an alternative util like derive, I'm thinking of just proceeding with read-only non-primitives and just using a helper function for setting all properties of the objects - when required.