Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React example has a minor bug (that causes an error in StrictMode) #48

Open
dzfranklin opened this issue Feb 21, 2023 · 0 comments
Open

Comments

@dzfranklin
Copy link

The react example won't work in strict mode. It depends on useEffect and useMemo running the same number of times, which isn't guaranteed, and strict mode deliberately runs useEffect double to expose it. I don't think this matters much, but it might be worth it to change the example to

export const App = () => {
  const [state, setState] = useState(null);
  useEffect(() => {
    const yProvider = new YjsProvider() // Eg. HocuspocusProvider or WebrtcProvider
    const yMap = yProvider.document.getMap('data')
    setState({ yMap, yProvider });

    return () => {
      yProvider.destroy()
    }
  }, [])

  if (!state) return;
  const {yMap, yProvider} = state;

  return (
    <SyncYJson
      yMap={yMap} // YMap to be observed for remote changes by yMap.observeDeep
      setData={setData} // Action creator to be called as dispatch(setData(data))
      selectData={selectData} // Selector to be used as useSelector(selectData)
    />

    // Inside other components you can interact with the synced data as with any normal
    // Redux state by using dispatch and useSelector and it will be seamlessly kept in sync.
    <OtherComponent />
  )
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant