React useThreads incorrect usage of useSyncExternalStoreWithSelector triggers infinite re-renders

[colindjk]

Describe the bug

The useThreads component passes a new selector to useSyncExternalStoreWithSelector on each render. This function is used here packages/liveblocks-react/src/comments/CommentsRoom.tsx line 488.

This makes it so that every time useThreads is called, the referenced threads binding will be a new object.

To Reproduce

const { threads } = useThreads()
const [visibleThreads, setVisibleThreads] = useState([])

// this particular case could be avoided with useMemo but not all cases can be solved that way. 
useEffect(() => {
  setVisibleThreads(threads.filter(thread => thread.metadata.visible))
}, [threads])

The re-render triggered by the setVisibleThreads will trigger an infinite re-render since threads will always have a new reference.

Workaround
Use deep equals for any state depending on threads.

Fix

To fix this the following needs to be updated to use memoized functions:

    return useSyncExternalStoreWithSelector(
      store.subscribe,

      // Change the below to be memoized / useCallback functions. 
      () => store.getThreads(),
      () => store.getThreads(),
      (state) => {

Environment (please complete the following information):

• liveblocks-react
  • Introduced in 1.9.3 by this PR - Add support for rendering comment in multiple room #1385

[GuillaumeSalles]

Solved in [1.10.0-beta2](https://github.com/liveblocks/liveblocks/releases/tag/v1.10.0-beta2).

If it does not solve your issue, don't hesitate to leave a comment and I'll reopen it. Thank you!