A suspension that knows where it is

React useId() doesn't return a stable ID when used inside <Suspense>. This is a huge problem that slows down the development of libraries for concurrent mode in React. Read related issue.

Another problem is the synchronization state of the client and server when streaming html. This package also helps to analyze suspense chunks.

Getting started

The package is distributed using npm, the node package manager.

npm i --save @lomray/consistent-suspense

How to use

import { ConsistentSuspenseProvider, Suspense, useId } from '@lomray/consistent-suspense';

/**
 * 1. Wrap your root component in ConsistentSuspenseProvider
 * 2. Use <Suspense> component from lib
 */
const App: FC = () => {
    const [state] = useState();

    return (
        <ConsistentSuspenseProvider>
          <Suspense fallback={<div>Loading...</div>}>
            <SomeComponent />
          </Suspense>

          { 
              /** in case when we have more then 1 async component inside suspense, 
                we have to use 'NS' wrapper **/ 
          }
          <Suspense fallback={<div>Loading...</div>}>
            <Suspense.NS> { /** this wrapper only for async component **/ }
                <SomeComponent />
            </Suspense.NS>

            <Suspense.NS>
                <SomeComponent />
            </Suspense.NS>
          </Suspense>
        </ConsistentSuspenseProvider>
    )
}

/**
 * 3. Now any components inside ConsistentSuspenseProvider can generate consistent id's
 */
const SomeComponent: FC = () => {
    // this id will be the same between client and server
    const id = useId();
    
    return (
        <div>I'm have the same id on server and client: {id}</div>
    )
}

Analyze suspense html chunks (streaming)

import StreamSuspense from '@lomray/consistent-suspense/server';

app.use('*', (req, res, next) => {
    const suspenseStream = StreamSuspense.create((suspenseId) => {
      // do something
      const anyState = anyStateManager
        .getStateForSuspense(suspenseId)
        .toJSON();

      return `<script>var managerState = ${anyState};</script>`;
    });

  /**
   * then extend write express (or another lib) method
   * analyze html and add 
   */
    const write = res.write.bind(res);
    res.write = (data, ...args): boolean => {
      // be careful, data can be uint8 or string, you need handle it (use Buffer)
      const additionalHtml = suspenseStream.analyze(data);

      return write(data + additionalHtml, ...args) as boolean;
    }
});

Investigate demo app to more understand how it works.

Bugs and feature requests

Bug or a feature request, please open a new issue.

License

Made with 💚