atomWithProxy + multiple useSetAtom does not work

[simon-lund]

Setup

1. I need to use a proxy to read properties of my state inside the loader function of my route. For this, I'm using valtio and atomWithProxy.
2. I have an onboarding process with multiple pages where I am adding data to the state on each page before reading it. on the last page.

Problem
As seen in the example, I am using useSetAtom(p => ...) on multiple pages, but that does not work as expected because the previous state (p) is empty.

I toyed around with this:

• It works with atom()
• It works when I read the state first on every page using (useAtomValue or useAtom)

=> So I guess there is some desync internally where useSetAtom does not read the state of the proxy.

Code

// store.ts
import {proxy} from "valtio";
import {atomWithProxy} from "jotai-valtio";

interface AppState {
    user?: string
    count?: number
}

const appState = proxy<AppState>({})
export const appAtom = atomWithProxy(appState, {sync: true})

//page1.tsx
import {createFileRoute, Link} from '@tanstack/react-router'
import {useSetAtom} from "jotai";
import {appAtom} from "@store";

export const Route = createFileRoute('/page1')({
    component: Page1
})


function Page1() {
    const setApp = useSetAtom(appAtom)

    return (
        <div>
            <h1>Set User</h1>
            <input
                type="text"
                placeholder="Enter your name"
                onChange={(e) => setApp({user: e.target.value})}
            />
            <Link to="/page2">Go to Page 2</Link>
        </div>
    )
}

// page2.tsx
import {createFileRoute, Link} from '@tanstack/react-router'
import {useSetAtom} from "jotai/index";
import {appAtom} from "@store";

export const Route = createFileRoute('/page2')({
  component: Page2
})

function Page2() {
  const setApp = useSetAtom(appAtom)

  return (
      <div>
        <h1>Set Count</h1>
        <input
            type="number"
            placeholder="Enter a number"
            onChange={(e) => setApp(p => ({...p, count: parseInt(e.target.value)}))}
        />
        <Link to="/page3">Go to Page 3</Link>
      </div>
  )
}

//page3.tsx
import { createFileRoute } from '@tanstack/react-router'
import {useAtomValue} from "jotai";
import {appAtom} from "@store";

export const Route = createFileRoute('/page3')({
  component: Page3
})

function Page3() {
    const app = useAtomValue(appAtom)
    console.log("App:", app)

    return (
        <div>
            <h1>Page 3</h1>
            {/* This will be undefined */}
            <p>User: {app.user}</p> 
            <p>Count: {app.count}</p>
        </div>
    )
}

[dmaskasky]

I think you need to spread p args
onChange={(e) => setApp((p) => ({...p, user: e.target.value}))}

[simon-lund]

I am doing that for the second page. It should be irrelevant for the first page 🤔 At least the same setup worked with a jotai atom.

[dmaskasky]

because when you setApp and are not spreading p, then you are replacing appState with your new object.

This is working:
https://codesandbox.io/p/sandbox/optimistic-sinoussi-vx8pq4

I should also mention that you can also mutate the state directly with atomWithProxy + useAtomValue. It works similar to some signal update patterns and it won't rerender the component when state changes.

/*
  does not rerender when app.user or app.count change,
  because those values are not being read
*/
function Page1() {
  const app = useAtomValue(appAtom);

  return (
    <div>
      <h1>Set User</h1>
      <input
        type="text"
        placeholder="Enter your name"
        onChange={(e) => {
          app.user = e.target.value;
        }}
      />
    </div>
  );
}

https://codesandbox.io/p/sandbox/flamboyant-curran-329sx8

[simon-lund]

Thank you for the info about the useAtomValue hook. Good to know.

But I still don't understand what you mean woth the spreading operator. Why do I need this for the first page? Because I have nothing stored there so I should be able to replace it safely.

Only on second page info is lost, but there I am using the spreading operator.

[dmaskasky]

I see, for your specific use-case you don't ever set the name after setting the count.

I wasn't able to reproduce the behavior you describe with jotai-valtio alone. Would you mind putting a codesandbox example together that demonstrates this issue?