False positive when proxy object is nested inside a regular object

[nmay231]

When you use useSnapshot(nestedState.proxy) when nestedState is a regular object, you get a false positive of Mutating a proxy object itself. this might not be expected as it's not reactive. eslint(valtio/state-snapshot-rule).

Having just nestedState.proxy.settings = {}; is not enough for whatever reason. It has to be assigned to a second proxy object. nestedState.proxy.settings = state2.settings;

import { proxy, useSnapshot } from "valtio";
import { useEffect } from "react";

const nestedState = { proxy: proxy({ settings: null as null | Record<string, unknown> }) };
const state2 = proxy({ settings: null as null | Record<string, unknown> });

export function Component() {
    // Bad
    const snap = useSnapshot(nestedState.proxy);

    // Good
    // const proxy = nestedState.proxy;
    // const snap = useSnapshot(proxy);

    // This is where the linting error occurs
    nestedState.proxy.settings = state2.settings;

    // This is a more realistic example.
    // useEffect(() => {
    //     nestedState.proxy.settings = state2.settings;
    // }, []);

    return <div>{JSON.stringify(snap.settings)}</div>;
}

[dai-shi]

Yeah, sounds like a false positive. Not sure if it's solvable. @barelyhuman ?

[barelyhuman]

I'll check the code but from what i've worked with till now, I'm sure that the proxy identifier is not detectable in this case.

To be fair, it's not right or wrong but what's implemented right now and since it's obvious that it could be more than just a single identifier the same should be implemented.

Not a small change though so might take a bit long.
For now you can just alias and move forward with it

const proxy = nestedState

2nd problem is that because of how the initial implementation works, we don't know anymore if nestedState is the proxy or nestedState.proxy is the proxy so the linter can't really work with the 2nd level state change and will give an error.

The functionality will work as is, it's just that the linter plugin has no idea of the identifier.
and if you **use the alias to modify, the linter should not complain about it

[nmay231]

Gotcha.

FYI, it doesn't have to be a second proxy state as the assignment, any property of a regular object will do.

const nested = {object: null}

// This is where the linting error occurs
nestedState.proxy.settings = nested.object;