[Task] Update useSubscriptions hook to reduce re-rendering

[tthvo]

Right now, we define useSubscriptions:

export function useSubscriptions() {
  const subsRef = React.useRef([] as Subscription[]);
  const [subscriptions, setSubscriptions] = React.useState(subsRef.current);

  React.useEffect(() => () => subsRef.current.forEach((s: Subscription): void => s.unsubscribe()), []);

  const addSubscription = (sub: Subscription): void => {
    setSubscriptions((subs: Subscription[]): Subscription[] => {
      const result = subs.concat([sub]);
      subsRef.current = result;
      return result;
    });
  };

  return React.useCallback(addSubscription, [setSubscriptions]);
}

which holds a local state of subcriptions. However, we already have the React.ref to store such subs. And, components does not need to re-render if the list of subscriptions update as its sub's result will update the component anyway.

My thought now is that we just need to use React.ref:

export function useSubscriptions() {
  const subsRef = React.useRef([] as Subscription[]);

  React.useEffect(() => () => subsRef.current.forEach((s: Subscription): void => s.unsubscribe()), []);

  const addSubscription = (sub: Subscription): void => {
    subsRef.current = subsRef.current.concat([sub]);
  };

  return React.useCallback(addSubscription, [subsRef]);
}

[tthvo]

What do you think @andrewazores?

[andrewazores]

Looks like it makes sense. Could this be related to the performance issues Max observes in #526? The React 18 release notes talk about batched rendering changes for improved performance, but maybe the way we're tracking these subscriptions actually degrades performance with React's changes?

[tthvo]

Right! It seemed to improve the experience of the UI when I updated this useSub. But I can't tell if its the root issue as the recording tables still appear quite slow (i.e. top corner checkbox appears checked then unchecked on first load -> its intermediate states are shown).