useSSE 3.x.x-beta

[!CAUTION] 3.x.x is still in beta

[!NOTE] You are viewing a v3.x.x version of hook which is designed to be compatible with React 18. This version of hook is still in beta. If you are using React <18 check latest stable 2.x.x version of useSSE

useSSE is abbreviation for use server-side effect. It is a custom React hook to perform asynchronous effects both on client and serve side.

npm i use-sse

Usage

Use useSSE to fetch data in component:

import { useSSE } from "use-sse";

/**
 * Create a custom component with effect 
 **/
const TitleComponent = () => {
  const [data, error] = useSSE(() => {
    return fetch("https://myapi.example.com").then((res) => res.json());
  }, []);

  return <h1>{data.title}</h1>;
};

/**
 * To take full advantage of a Suspense boundaries wrap each component in UniversalDataProvider 
 * You can also use ServerDataProvider or BrowserDataProvider
 **/
export const Title = () => {
    return (
        <UniversalDataProvider>
            <TitleComponent />
        </UniversalDataProvider>
    )
}

Load component using Suspense API:

import * as React from 'react';
import Title from './Title';

export const App = () => (
    <div>
        <React.Suspense fallback={'Loading...'}>
            <Title/>
        </React.Suspense>
    </div>
);

All effects will be resolved on server side during rendering.

This is a part of server side render phase. See an example for the whole code.

const stream = renderToPipeableStream(
        <App />,
        {
            onShellReady() {
                res.statusCode = didError ? 500 : 200;
                res.setHeader('Content-type', 'text/html');
                stream.pipe(res);
            },
            onShellError() {
                res.statusCode = 500;
                res.send('<h1>An error occurred</h1>');
            },
            onError(err) {
                didError = true;
                console.error(err);
            },
        },
    );

On client side of application use BroswerDataContext:

hydrate(
  <App />,
  document.getElementById("app")
);

API

useSSE

const [data, error] = useSSE(effect, dependencies);

Params

Returns

Returns an array with two elements [data, error].

• data - resolved response from effect
• error - an error if effect rejected or if timeout happend.

Examples

See example directory for React with SSR and useSSE.

The same example is avaliable on CodeSandbox.