{"id":11830,"library":"react-promise-suspense","title":"React Promise Suspense Hook","description":"react-promise-suspense provides a single React hook, `usePromise`, designed to integrate any Promise-based asynchronous operation with React Suspense. It allows components to 'suspend' rendering while awaiting data, leveraging React's built-in loading states via `React.Suspense` boundaries. The library reached its current stable version, 0.3.4, in March 2020, and has not received updates since, indicating it is no longer actively maintained. While it functions similarly to libraries like `fetch-suspense`, `react-promise-suspense` is generic and works with any JavaScript Promise, not just `fetch`. Due to its last update being over six years ago, compatibility with newer React versions (beyond React 16/17) and modern Suspense features like `use` hook or SuspenseList might be limited or require careful testing.","status":"abandoned","version":"0.3.4","language":"javascript","source_language":"en","source_url":"https://github.com/vigzmv/react-promise-suspense","tags":["javascript","react","fetch","suspense","promise","hooks","typescript"],"install":[{"cmd":"npm install react-promise-suspense","lang":"bash","label":"npm"},{"cmd":"yarn add react-promise-suspense","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-promise-suspense","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React hooks. Requires React 16.6+ for Suspense support.","package":"react","optional":false},{"reason":"Peer dependency for rendering React applications, especially with Suspense.","package":"react-dom","optional":false}],"imports":[{"note":"The `usePromise` hook is exported as the default export of the package.","wrong":"import { usePromise } from 'react-promise-suspense';","symbol":"usePromise","correct":"import usePromise from 'react-promise-suspense';"},{"note":"Required to wrap components that use `usePromise` for fallback UI.","symbol":"Suspense","correct":"import { Suspense } from 'react';"},{"note":"Imports the type definition for `usePromise` for type checking purposes.","wrong":"import { usePromise } from 'react-promise-suspense';","symbol":"usePromise (TypeScript Type)","correct":"import type usePromise from 'react-promise-suspense';"}],"quickstart":{"code":"import React, { Suspense } from 'react';\nimport usePromise from 'react-promise-suspense';\n\nconst fetchData = async (id) => {\n const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}/`);\n if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);\n return response.json();\n};\n\nconst PokemonDisplay = ({ pokemonId }) => {\n const data = usePromise(fetchData, [pokemonId]);\n return (\n
\n
{data.name}
\n \n
Height: {data.height}
\n
Weight: {data.weight}
\n
\n );\n};\n\nconst App = () => {\n return (\n
\n
Pokemon Viewer
\n Loading Pokemon...
}>\n \n \n \n \n \n \n );\n};\n\nexport default App;","lang":"typescript","description":"This quickstart demonstrates fetching data for multiple Pokemon concurrently using `usePromise` within `Suspense` boundaries, showcasing loading states."},"warnings":[{"fix":"Thoroughly test the library's behavior with your target React version. Consider alternative, actively maintained solutions for Suspense data fetching if issues arise.","message":"The `react-promise-suspense` library has not been updated since March 2020. Its compatibility with newer React versions (e.g., React 18 and above) or contemporary Suspense features may be limited or lead to unexpected behavior. Use with caution in modern React projects.","severity":"gotcha","affected_versions":">=0.3.4"},{"fix":"Always pin exact versions (`\"react-promise-suspense\": \"0.3.4\"`) to avoid unexpected changes if any hypothetical future updates were to occur (unlikely given its abandoned status).","message":"As a 0.x.x version package, the API of `react-promise-suspense` was never officially considered stable. Although no explicit breaking changes are documented in its sparse release history, future compatibility or expected behavior cannot be guaranteed.","severity":"gotcha","affected_versions":"<1.0.0"},{"fix":"Wrap any component that uses `usePromise` (or any other Suspense-enabled data fetching) with ``.","message":"When using `usePromise`, ensure that the component calling it is wrapped in a `React.Suspense` boundary. Failing to do so will result in a runtime error when the promise resolves.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure the component that calls `usePromise` (or an ancestor component) is rendered within a `` component.","cause":"A component using `usePromise` rendered before its data was available, but it was not wrapped by a `Suspense` boundary.","error":"Error: A component suspended while rendering, but no fallback UI was specified."},{"fix":"Use the correct import syntax: `import usePromise from 'react-promise-suspense';`. Verify your bundler (Webpack, Rollup) is configured to correctly handle ESM default exports.","cause":"Incorrect import statement for `usePromise`, or bundler misconfiguration handling default exports.","error":"TypeError: (0 , react_promise_suspense__WEBPACK_IMPORTED_MODULE_0__.default) is not a function"},{"fix":"Ensure `usePromise` is only invoked directly within the top level of a React function component or another custom hook function.","cause":"The `usePromise` hook was called outside of a React function component or a custom hook.","error":"Error: Invalid hook call. Hooks can only be called inside of the body of a function component."}],"ecosystem":"npm"}