Passing nested property on state object to be updated down component tree?

[jameschetwood]

Updating the state from a component works when you import and mutate the state object directly:

import { proxy, useSnapshot } from 'valtio'
const state = proxy({ count: 0, text: 'hello' })

const Btn = () => {
  const handleClick = () => {
    state.count++
  }
  return <button onClick={handleClick}>+</button>
}

export default function App() {
  const snap = useSnapshot(state);
  return (
    <div className="App">
      <h1>Count: {snap.count}</h1>
      <Btn />
    </div>
  );
}

However id like to pass down the property on the state object to be updated. This isn't working, is something similar possible?:

import { proxy, useSnapshot } from 'valtio'
const state = proxy({ count: 0, text: 'hello' })

const Btn = ({update}) => {
  // const handleClick = () => {
  //   state.count++
  // }
  const handleClick = () => {
    update++
  }
  return <button onClick={handleClick}>+</button>
}

export default function App() {
  const snap = useSnapshot(state);
  return (
    <div className="App">
      <h1>Count: {snap.count}</h1>
      <Btn update={state.count} />
    </div>
  );
}

https://codesandbox.io/s/quizzical-rubin-nkyrno?file=/src/App.js

[jameschetwood]

Interestingly if I pass an object then it does work:

import { proxy, useSnapshot } from "valtio";
const state = proxy({ 
  foo: {
    bar: { name: "My Nane 2", count: 0 } 
  }
});

const Btn = ({ update }) => {
  const handleClick = () => {
    update.count++
  };
  return <button onClick={handleClick}>+</button>;
};

export default function App() {
  const snap = useSnapshot(state);
  return (
    <div className="App">
      <h1>Count: {snap.foo.bar.count}</h1>
      <Btn update={state.foo.bar} />
    </div>
  );
}

https://codesandbox.io/s/bold-https-bz383d?file=/src/App.js:24-492

[dai-shi]

Yes, objects can be trackable with Proxies. But, not primitive values like numbers. It's how JS works.

[pastelmind]

@dai-shi I have a similar use case, where child components want to subscribe to and mutate nested state:

class Team {
  leader?: User = undefined
  users: User[] = []
  // ...
}

class User {
  name = ''
  wage = 0
  // ...
}

const state = proxy<Team[]>([ /* ... */ ])

const App = () => {
  const teams = useSnapshot(state)
  return (
    <div>
      {teams.map((team) => <TeamView team={team} />)}
    </div>
  )
}

const TeamView = React.memo((props: { team: Team }) => {
  const { team } = props
  return (
    <div>
      {team.users.map((user) => <UserView user={user} />)}
    </div>
  )
})

const UserView = React.memo((props: { user: User }) => {
  // Subscribes to a User instance and also updates it
  const { user } = props
  return (
    <div>
      Name:
      <input
        type="text"
        value={user.name}
        onChange={(e) => { user.name = e.target.value }}
        //                 ^^^^^^^^^
        // Oops, user is a snapshot so I can't update it
      />
    </div>
  )
})

If I pass a snapshot made with useSnapshot() in <App>, then downstream components cannot mutate it. If I pass the proxy itself, then downstream components are not notified of the changes. What can I do?

[dai-shi]

You could pass both proxy and snapshot, but I think passing the proxy and useSnapshot it in the downstream components would be better.

[pastelmind]

Passing both the proxy and snapshot to every component would be unwieldy:

const TeamView = React.memo((props: { team: Team, teamSnapshot: Snapshot<Team> }) => {
  const { team, teamSnapshot } = props

  // Suppose we want to filter the team.users array.
  // We must create two arrays--one for the proxies, and the other for the snapshots
  const activeUsers = team.users.filter(
    user => user.isActive
  )
  const activeUsersSnapshot = teamSnapshot.users.filter(
    user => user.isActive
  )

  return (
    <div>
      <div>Active users</div>
      {
        // We have to zip these arrays
        // Here, we use the index to do it
        activeUsers.map((user, i) =>
          <UserView user={user} userSnapshot={activeUsersSnapshot[i]} />
        )
      }
    </div>
  )
})

This would scale poorly in more complex stores.

Alternatively, I could normalize the store and make individual components themselves subscribe to the stores:

// Create the model
class Team {
  userIds: string[] = []
}

class User {
  id = makeUserId()
  name = ''
  wage = 0
}

// Create the stores
const teams = proxy<Team[]>([ /* ... */ ])
const users = proxy<User[]>([ /* ... */ ])

// Retrieves a User proxy
const getUser = (userId: string) => {
  // This could be more efficient if we normalized the state further.
  // See https://redux.js.org/usage/structuring-reducers/normalizing-state-shape
  return users.find(user => user.id === userId)
}

// Retrieves a User snapshot
const useUser = (userId: string) => {
  const users = useSnapshot(users)
  return users.find(user => user.id === userId)
}

const App = () => {
  const teams = useSnapshot(state)
  return (
    <div>
      {teams.map((team) => <TeamView team={team} />)}
    </div>
  )
}

const TeamView = React.memo((props: { team: Team }) => {
  const { team } = props
  return (
    <div>
      {team.userIds.map((user) => <UserView userId={userId} />)}
    </div>
  )
})

const UserView = React.memo((props: { userId: string }) => {
  const user = useUser(props.userId)
  //           ^^^^^^^^^^^^^^^^^^^^^
  // Retrieve snapshot for rendering

  return (
    <div>
      Name:
      <input
        type="text"
        value={user.name}
        //     ^^^^^^^^^
        // snapshot used here
        onChange={(e) => {
          const user = getUser(props.userId)
          //           ^^^^^^^^^^^^^^^^^^^^^
          // Retrieve proxy for updating
          user.name = e.target.value
        }}
      />
    </div>
  )
})