Nutmeg Pumpkin Macchiato

    @timm/use-promise
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.0 • Public • Published

    usePromise - A React hook for async data loading with support for Server-Side Rendering

    Usage

    function WhatToWear() {
        const {loading, error, data} = usePromise(() => weatherApi.getCurrentWeatherAsync());
    
        if (loading) {
            return <div>Loading…</div>
        }
    
        if (error) {
            return <div>An error occured…</div>
        }
        
        return <div>Recommended outfit: {weather.temp > 19 ? '👚' : '🧥'}</div>;    
    }

    SSR

    The technique used by this library is to render your React tree until there is no more data to be loaded (up to 10 times). Every time it encountes a new Promise scheduled with usePromise it will wait until that promise is completed (either resolved or rejected) and then do the next render.

    To include it in SSR the usage is pretty similar to popular state libraries.

    First wrap your renderToString so that you get the rendered string as well as the data for all completed Promises:

    [rendered, promiseData] = await renderUntilPromisesAreResolved(() => renderToString(<App />));
    

    Then make sure the promiseData is embedded in the return HTML like this:

    <script>
      window.__USE_PROMISE_PRELOADED_STATE__ = ${JSON.stringify(promiseData).replace(
        /</g,
        '\\u003c'
      )}
    </script>
    

    As the promiseData is serialized as JSON, it'll be limited to primitive values.

    Questions?

    Feel free to open an issue with any question or suggestion!

    Keywords

    none

    Install

    npm i @timm/use-promise

    DownloadsWeekly Downloads

    1

    Version

    0.3.0

    License

    MIT

    Unpacked Size

    12.1 kB

    Total Files

    7

    Last publish

    Collaborators

    • timm