Show updated data in Sibling Component in React using subscribe.

[deadcoder0904]

I'm trying to use subscribe to show the updated data in valtio but confused where to use it & how to use it.

I tried searching on Sourcegraph to see code samples but couldn't find any about using subscribe in React.

My application looks like this:

On the right side, I type stuff & on the left side, it should update using subscribe.

This is relatively simple but I'm unable to find a way to do it.

I did put the subscribe under getDocsById which gets called when I click on the list on the left.

const getDocsById = (id: string) => {
    if (docs) {
      const el = docs.find((item) => item?.id === id)
      subscribe(state.doc.text, () =>
        console.log('state.doc.text has changed to', state.doc.text)
      )

      if (el) {
        state.setDoc({
          id,
          text: el.text,
        })
      }
    }
  }

However, it doesn't log anything to the console. I'm confused about where should I put subscribe & how should I update it in the list?

Full reproduction on this commit → https://github.com/deadcoder0904/docs-autosync/tree/cba10738b549d85aba9392f9a8e6d37db6af4725

[dai-shi]

Does this wiki page help?
https://github.com/pmndrs/valtio/wiki/How-to-avoid-rerenders-manually#subscribe-and-set-local-state-conditionally

[dai-shi]

can you take a look?

Hmmm, I'm not sure where to look.

This looks fine:
https://github.com/deadcoder0904/docs-autosync/blob/cba10738b549d85aba9392f9a8e6d37db6af4725/store/index.ts

i understood that from the counter example how to do it but i dont get how i should subscribe to the right item on the list when the textarea changes.

I'm not sure what you mean by subscribe when the textarea changes.
In react, subscribe should usually be done in useEffect.

im confused bcz idk if i should keep a copy of docs which is the list in the store too to find the current item selected or not? not sure if this is related to valtio though.

I guess you would want to provide a minimal example to explain your use case.

i couldn't get eslint-plugin-valtio to work so i dropped it :(

that's unfortunate. If you can, please open an issue there.

oops sorry, i'm using snap & it's working just fine. state works too but i guess it calls a function i have on every keystroke.

yeah, i understand the confusion.

[deadcoder0904]

i didn't even need subscribe i guess.

i just used snap.doc.text on the other component for it to be reactive. i'm wondering what's the point of subscribe then if i can use snap.doc.text?

[dai-shi]

Right, for react users, proxy and useSnapshot cover most use cases.
subscribe and snapshot are internal functions for rare use cases.

[deadcoder0904]

ah, thanks @dai-shi, amazing work on valtio. it simply is the best. can you tell me since you probably use it in production: do you use state.setDoc or mutate directly on state.doc.id & state.doc.text?

and is yjs-valtio similar on surface to syncedstore in terms of features? i probably want to use it in production & yjs-valtio probably released at the right time :)

[dai-shi]

I prefer this: https://github.com/pmndrs/valtio/wiki/How-to-organize-actions#action-functions-defined-in-module

Originally, I wanted to have a valtio/yjs binding in syncedstore (a different name at that time). But as we discussed, I found the concept is a little different, and I thought the API I wanted wasn't possible. So, valtio-yjs was born. See: YousefED/SyncedStore#5