Lists App

An app to manage tasks within multiple lists, with realtime + offline synchronization, and collaborative editing.

Target Performance Metrics

TodoView total render time: < 500ms
Editor total render time: < 500ms
Room switch time: < 500ms

Known Issues

`useSyncedStore`

useSyncedStore just adds a listener on any valid proxied object. This means that property access either inside useSyncedStore or outside work similarly (e.g. useSyncedStore(store.todos[0]) vs useSyncedStore(store).todos[0])
- Editor.tsx is an exception here
If a value is conditionally accessed, and during a render it is not accessed, it stops being updated for future renders.
Accessing an array (e.g. state.todos) can result in either a shallow or deep listener depending on what properties were accessed
- In state.todos.length, it is a shallow listener
- In state.todos.map(t => t.focus), it is a deep listener, but only on the todo.focus property

Notes:

It appears to work like a hook, in that it remembers where a property accessor was used and triggers a rerender on that (via YJS event listeners)
For better performance, I may want to use YJS event listeners if I only need say, additions/deletions in a list (not nested updates).
To prevent the whole component rerendering for a small change in item,refactor components such that each component is only listening to the dependencies it needs.
Memoize child components to prevent them re-rendering when the parent re-renders.
Properties with frequent updates - use useDeferredValue/useTransition (but only if values are memoizable - see below)
Simple properties e.g. boolean, number can be used as memoization dependencies.
- Can they be deferred?
If you pass a proxied value to a child, useSyncedStore is necessary to set the event listener on the child. For example, the following will not update to changes in todo.focus:
```
const MyComponent = ({ todo }: { todo: Todo }) => {
  return todo.focus ? "focus" : "not focus";
};
```
Instead, do:
```
const MyComponent = ({ todo: _todo }: { todo: Todo }) => {
  const todo = useSyncedStore(_todo);
  return todo.focus ? "focus" : "not focus";
};
```
- For complex properties e.g. todo.content, merely accessing the value will not trigger a re-render - it needs to be manually subscribed to with observeDeep.
- In <StrictMode>, this will cause a double-render (once on the component mount, again within useSyncedStore as it calls forceUpdate internally when attaching the observer). It will not affect production.

Tooltip

Tooltip causes React.memo to fail presumably because it uses React.cloneElement on its children.

Performance

Benchmark (for 10,000 objects)

Array.forEach (syncedStore proxy) - 100ms
getYjsValue().toArray().forEach (raw Yjs) - 50ms
Object.entries(YMap).forEach - 200ms
[...getYjsValue(YMap).entries()].forEach - 50ms

Others:

Array.find (within SyncedStore proxied objects) - around 20ms for 1000 objects

React Profiler

When using <Profiler> in a mapped array, you must also give it a key otherwise children will re-render whenever their parent does.
The Profiler does not include time spent in callbacks (e.g. in ListView)

extrange / realtime-todo-list