How to prevent unnecessary re-renders when a snapshot is not used?

[pastelmind]

Suppose I have a store with two properties, and a component that conditionally depends on one of them

const store = proxy({ foo: 1, bar: 2 })

// This component displays the value of store.foo,
// unless props.isDisabled is true
function ShowFoo(props) {
  const snapshot = useSnapshot(store)

  if (props.isDisabled) {
    return <div>Show nothing</div>
  }

  return <div>foo: {snapshot.foo}</div>
}

When props.isDisabled is falsy, <ShowFoo> depends on store.foo only. It does not re-render when store.bar changes. However, when props.isDisabled is truthy, it re-renders when store.bar changes, too. In fact, <ShowFoo> now depends on the entirety of store.

Here is a reproduction: https://codesandbox.io/p/sandbox/valtio-unnecessary-rerenders-ylkq89

This is causing performance issues in my codebase. Is there a workaround for it?

[dai-shi]

You should create another component in this case for optimization:

function ShowFoo(props) {
  if (props.isDisabled) {
    return <div>Show nothing</div>
  }
  return <ShowFooInternal />
}

function ShowFooInternal() {
  const snapshot = useSnapshot(store)
  return <div>foo: {snapshot.foo}</div>
}

[pastelmind]

My app has some complex logic (e.g. conditional computations in hooks that read state from snapshots) that cannot be easily refactored into components. I'm afraid this appears to be an edge case Valtio is ill-equpped to handle.

(The example below illustrates my problem. It is still a simplification of the actual code.)

function useSomeComputation() {
  const snapshot1 = useSnapshot(store1)
  const snapshot2 = useSnapshot(store2)

  if (snapshot1.someCondition) {
    return someComputation(snapshot1, snapshot2)
  }

  // Oops, now this hook is subbed to ALL of snapshot2
  return null
}

No offense to your work, btw. Valtio is an amazing project.

[dai-shi]

If you are looking for a hacky solution, here it is:

valtio/src/react/utils/useProxy.ts

Lines 33 to 34 in 9593184

	// touch dummy prop so that it doesn't trigger re-renders when no props are touched.
	;(snapshot as any)[DUMMY_SYMBOL]