Question: an alternative to suggest for computed properties

[giacomorebonato]

Thanks for this library, I am using it in a side project and I enjoy learning it while playing around!

I like the concept of computed properties, but they can also get problematic when the computation is between different proxies (as mentioned in the doc).

watch seems interesting, but a pity that it re-runs also when untracked values change.

What would be the drawbacks of using a custom hook for calculated properties?

Example:

export function useBeats() {
  const { beat, transport } = useClientState() // this is Valtio global state
  const beats: Beat[] = []

  for (let index = 0; index < transport.totalBeats; index++) {
    const notes = beat.beatToNotes[index]
    const notesToPlay = notes ? [...notes] : []

    beats.push({
      index,
      notesToPlay,
      active: beatState.activeBeats.includes(index),
      selected: beat.focusedIndex === index,
      time: index * transport.beatDuration,
    })
  }

  return {
    beats
  }
}

Is it correct to assume that this hooks re-runs only when tracked dependencies change?
A positive thing would be also that the computation wouldn't re-run anymore if the component that uses the hook unmounts.

I'd be happy to contribute to the docs, if you think that it makes sense.

[dai-shi]

Custom hook is totally fine! We just don't call it computed properties. Maybe "derived values"?
Yeah, adding it to docs sounds great. Please send a draft PR.

A side note: Custom hook is the only way for derived values with React-Tracked.