npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-promise-cache

v0.0.10

Published

react-promise-cache

Downloads

12

Readme

React promise cache

The Api

react-promise-cache let you cache promises and their data, it works the same way in the client and the server. It uses react-18 features and will target the future of react.

Simple Usage:

// Users list
import {useApi} from "react-promise-cache";

async function getUsersList() {
    let promise = await API.get<UserType[]>(`/users`);
    return promise.data
}

function UsersList() {
  const usersList = useApi(getUsersList)
  const data = React.use(usersList())
  // or const data = usersList.use(); (falls back to React.use if existent)
  
  // do something with data
}

And using parameters:

// User details
async function getUserDetailsList(id: number) {
    let promise = await API.get<UserType>(`/users/${id}`);
    return promise.data
}

function UserDetails({userId}: {userId: number}) {
  const userDetails = useApi(getUserDetailsList)
  
  const data = React.use(userDetails(userId))
  // or const data = userDetails.use(); (falls back to React.use if existent)
  
  // do something with data
}

This library uses react-18 features:

  • When the promise is pending, the component suspends and the nearest Suspense fallback will be shown.
  • When the promise is rejected, it is thrown to the nearest ErrorBoundary.

In the previous example, useApi will return the same reference for the same function reference. Ensure to memoize your function, but honestly, you won't need since you can use parameters to your function.

The API

Here is the different parts of the API that the library supports:

useApi

useApi is designed to give you an Api for your function, this Api has the following properties:

| Property | type | Description | |---------------------|----------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------| | (...args) | (...args: A extends unknwon[]): State<T, R, A> or Promise<T> | When it is invoked, it calls your original function and caches the result for further calls | | use(...args) | use(...args: A extends unknwon[]): T | Uses React.use or shims it to give you the resolved data. Will suspend on pending and throw on error. | | evict(...args) | evict(...args: A extends unknwon[]): Api | Removes the cache related to the given arguments | | subscribe(fn) | subscribe(rerender: (() => void)): (() => void) | Will subscribe to state changes and evicts | | getState(...args) | getState(...args: A extends unknwon[]): State<T, R, A> | Returns the cached state related to the given arguments | | useState(...args) | useState(...args: A extends unknwon[]): State<T, R, A> | Returns the cached state and performs subscription to state updates | | inject(fn) | inject(fn: ((...args) => T or Promise<T>)): Api | To lazily define your functions (supported with the app abstraction), you can inject the actual functions later |

So you can use this API with several React APIs. Either synchronous or async.

Here is a good example to try out!

AppProvider

The provider is a React Context Provider that you should use to share, cache and isolate your data.

It is optional in client side, but required in the server.

Provider props

| Property | type | Description | |------------|--------------------------------------------|------------------------------------------------------------| | children | React.ReactNode | Your app | | cache? | Map | The actual cache map to use, it is created if not provided | | app? | evict(...args: A extends unknwon[]): Api | The return of createApp |

Hydration

The Hydration component is used to save your promises' data from the server to the client, and boot from it there. It automatically caches the cache instance in its context, and require a unique string ID.

If you are streaming HTML and have multiple Suspense boundaries in your App, think of adding a Hydration every time you will suspend. Or use SuspendeBoundary from the library (requires id as well) that injects a Suspense and a Hydration, (you can pass the fallback).

By @incepter, with 💜