real-time prop changes from loaders

[mfulton26]

Today in a react-router framework app I can return data from server loaders and client loaders (as well as actions) but from what I can tell I cannot "push" data as it changes. Instead of resorting to hooks in React components for event sources, web sockets, etc. I'd much rather work with an async iterable (e.g. an async generator function) or a readable stream and have react-router automatically grab the latest yielded value as my loaderData. This way I can keep track of single or multiple sources of data independent of React components (clear separation of concerns like there is with non-real-time data today) and React components can automatically re-render as the latest props are passed in.

The below example returns the time with 1 second intervals to demonstrate:

export async function* clientLoader() {
  while (true) {
    delay(1_000);
    yield { time: Date.now() };
  }
}

export function Demo({ loaderData: { time } }) {
  return <div>{new Date(time).toLocaleString()}</div>;
}

This pattern can be used with an EventSource (server-sent-events), a web socket, watching for database changes, etc.