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

1import { ConsistentSuspenseProvider, Suspense, useId } from '@lomray/consistent-suspense';
2
3/**
4 * 1. Wrap your root component in ConsistentSuspenseProvider
5 * 2. Use <Suspense> component from lib
6 */
7const App: FC = () => {
8    const [state] = useState();
9
10    return (
11        <ConsistentSuspenseProvider>
12          <Suspense fallback={<div>Loading...</div>}>
13            <SomeComponent />
14          </Suspense>
15
16          { 
17              /** in case when we have more then 1 async component inside suspense, 
18                we have to use 'NS' wrapper **/ 
19          }
20          <Suspense fallback={<div>Loading...</div>}>
21            <Suspense.NS> { /** this wrapper only for async component **/ }
22                <SomeComponent />
23            </Suspense.NS>
24
25            <Suspense.NS>
26                <SomeComponent />
27            </Suspense.NS>
28          </Suspense>
29        </ConsistentSuspenseProvider>
30    )
31}
32
33/**
34 * 3. Now any components inside ConsistentSuspenseProvider can generate consistent id's
35 */
36const SomeComponent: FC = () => {
37    // this id will be the same between client and server
38    const id = useId();
39    
40    return (
41        <div>I'm have the same id on server and client: {id}</div>
42    )
43}

Analyze suspense html chunks (streaming)

1import StreamSuspense from '@lomray/consistent-suspense/server';
2
3app.use('*', (req, res, next) => {
4    const suspenseStream = StreamSuspense.create((suspenseId) => {
5      // do something
6      const anyState = anyStateManager
7        .getStateForSuspense(suspenseId)
8        .toJSON();
9
10      return `<script>var managerState = ${anyState};</script>`;
11    });
12
13  /**
14   * then extend write express (or another lib) method
15   * analyze html and add 
16   */
17    const write = res.write.bind(res);
18    res.write = (data, ...args): boolean => {
19      // be careful, data can be uint8 or string, you need handle it (use Buffer)
20      const additionalHtml = suspenseStream.analyze(data);
21
22      return write(data + additionalHtml, ...args) as boolean;
23    }
24});

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 💚

Published under MIT License.