Prior to this change, yjs listeners were being set up within the render body of components without any cleanup being done. This is prone to memory leaks because:
- The listeners are being set up every time the component renders (due to state or prop changes)
- There's no cleanup of the listeners that were set up prior when (1) occurs.
This PR wraps any call to y's observe() to ensure that listeners are appropriately set up and cleaned up when needed.
While this PR does not introduce any logic changes, my observation is that most of this state can - and probably should - live as app state that is shared between all of the relevant pages, as opposed to the current implementation that has each page setting up their own listeners. That recommendation is out of the scope of this PR as it's not fundamentally crucial to functionality, but would potentially simplify the implementation a bit. Can be explored in a follow-up
Prior to this change, yjs listeners were being set up within the render body of components without any cleanup being done. This is prone to memory leaks because:
1. The listeners are being set up _every time the component renders_ (due to state or prop changes)
2. There's no cleanup of the listeners that were set up prior when (1) occurs.
This PR wraps any call to y's `observe()` to ensure that listeners are appropriately set up and cleaned up when needed.
---
While this PR does not introduce any logic changes, my observation is that most of this state can - and probably should - live as app state that is shared between all of the relevant pages, as opposed to the current implementation that has each page setting up their own listeners. That recommendation is out of the scope of this PR as it's not fundamentally crucial to functionality, but would potentially simplify the implementation a bit. Can be explored in a follow-up