How to avoid triggering tracking when I reshape snapshots in custom hook?

[jindong-zhannng]

Hi there, I am building a custom hook that needs to reshape snapshots from global state. For example:

const state = proxy({
  fieldA: {
    data: 'abc',
    createdAt: 'sometime',
    owner: 'someone'
  }
})

function useFieldData(name) {
  const snap = useSnapshot(state)
  const field = snap[name]
  return { 
    data: field.data, 
    metadata: {
      createdAt: field.createdAt,
      owner: field.owner
    } 
  }
}

As above, both of data, createdAt and owner are touched in useFieldData, that will make components rerender every time any attribute has changed.

It isn't expected for me. Because in most cases not every attribute will be used for rendering. I hope components can only react to attributes that they really used.

How can I achieve this goal? Is there a way I can disable access tracking temporarily in my hook and enable it again when returns?

[dai-shi]

Because in most cases not every attribute will be used for rendering.

It's better to use useSnapshot where you actually use values, for more render optimization.

Is there a way I can disable access tracking temporarily in my hook and enable it again when returns?

Unfortunately not. It's always on or always off. See:

valtio/docs/how-tos/how-to-avoid-rerenders-manually.mdx

Line 5 in 58f17ba

# How to avoid rerenders manually

[jindong-zhannng]

It's better to use useSnapshot where you actually use values, for more render optimization.

Because valtio is the implementation detail in my hook, I don't like to expose it to consumers.

Unfortunately not. It's always on or always off.

I think there should be one solution is I can get raw snapshot from snapshot(state) api for constructing my returns, then wrap them with proxy and maintain subscriptions by myself just like what useSnapshot did. But I'm not sure how complex it will be.

[dai-shi]

Yeah, you are on the right track.

[dai-shi]

Because in most cases not every attribute will be used for rendering.

If you want to hide the implementation detail, another solution is to make the hook more explicit.

function useFieldData(name, name) {
  const snap = useSnapshot(state)
  const field = snap[name]
  return field
}