{"id":16260,"library":"use-sse","title":"useSSE React Hook","description":"useSSE is a React hook designed to facilitate Server-Side Rendering (SSR) by allowing data to be fetched on the server and then rehydrated on the client without an additional network request. This approach optimizes the initial page load performance of React applications by ensuring the first render already includes necessary data. The current stable version is 2.0.1, with an active beta branch (3.0.0-beta.0) introducing support for React 18. The library has seen periodic updates, including security fixes and adjustments to its API for improved usability and error handling. Its primary differentiator is simplifying the integration of server-side data fetching into React components, avoiding the common pitfall of client-side re-fetches for initial render data.","status":"active","version":"2.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/kmoskwiak/useSSE","tags":["javascript","useEffect","SSR","server","side","hook"],"install":[{"cmd":"npm install use-sse","lang":"bash","label":"npm"},{"cmd":"yarn add use-sse","lang":"bash","label":"yarn"},{"cmd":"pnpm add use-sse","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React applications, required for all React hooks.","package":"react","optional":false}],"imports":[{"note":"The library is primarily designed for modern React environments and ES Modules. CommonJS `require` is not the intended or officially supported import method, especially with TypeScript.","wrong":"const useSSE = require('use-sse');","symbol":"useSSE","correct":"import { useSSE } from 'use-sse';"},{"note":"Importing types for use with TypeScript. The `useSSE` hook itself is typed, but explicit type imports can be useful for extending or documenting its usage.","symbol":"UseSSEHook","correct":"import type { UseSSEHook } from 'use-sse';"}],"quickstart":{"code":"import React from 'react';\nimport { useSSE } from 'use-sse';\n\n// This function simulates an asynchronous data fetch that would typically happen on the server.\n// In a real SSR setup, the return value would be serialized into the HTML and picked up by useSSE.\nasync function fetchData(itemId: string) {\n return new Promise<{ id: string; name: string }>(resolve => {\n setTimeout(() => {\n resolve({ id: itemId, name: `Item Data for ${itemId}` });\n }, 100); // Simulate network latency\n });\n}\n\ninterface MyComponentProps {\n initialItemId: string;\n}\n\nfunction MyComponent({ initialItemId }: MyComponentProps) {\n // useSSE takes a data fetching function and a dependency array.\n // If running on the server, it executes `fetchData` and serializes the result.\n // On the client, it checks for serialized data before potentially re-running `fetchData`.\n const [data, error] = useSSE(() => fetchData(initialItemId), [initialItemId]);\n\n if (error) {\n return
Error loading data: {error.message}
;\n }\n\n if (!data) {\n // This will typically show on the client while hydrating if data isn't immediately available\n // or during initial client-side rendering if no SSR occurred.\n return
Loading...
;\n }\n\n return (\n
\n
useSSE Example
\n
Data loaded:
\n
{JSON.stringify(data, null, 2)}
\n
This data was likely pre-fetched during server-side rendering, reducing client-side load time.
\n
\n );\n}\n\n// Example usage within a React application\nconst App = () => ;\n\nexport default App;\n","lang":"typescript","description":"This quickstart demonstrates how to use the `useSSE` hook to fetch data asynchronously, suitable for SSR scenarios. It shows how to pass a data-fetching function and a dependency array, and how to handle loading and error states."},"warnings":[{"fix":"Remove the `key` parameter from `useSSE` calls. The hook now infers keys or uses internal mechanisms for identification.","message":"The `key` parameter for the `useSSE` hook was removed. Previously, it was the second argument. Calls to `useSSE` with a key will now fail or behave unexpectedly.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Remove the initial state object from the `useSSE` call. For example, change `useSSE({ data: 'initial' }, () => ...)` to `useSSE(() => ...)`.","message":"The `useSSE` hook no longer accepts an initial state object as its first argument. The initial data state is now always `null` by default.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Adjust destructuring to `const [data, error] = useSSE(...)` and check the `error` variable directly for error details.","message":"Errors are now returned separately from the data as the second element in the tuple `[data, error]`. Previously, errors might have been embedded within the `data` object (e.g., `data.isError`).","severity":"breaking","affected_versions":">=1.2.0"},{"fix":"Review your application's `useSSE` usage when upgrading to React 18. Ensure React 18's concurrent features do not interfere with expected data fetching and rehydration. Consult official React 18 migration guides.","message":"Version 3.0.0-beta.0 introduces React 18 support. While it should be mostly compatible, users upgrading to React 18 should test thoroughly for any subtle behavioral changes or deprecated APIs, especially if relying on specific React lifecycle behaviors.","severity":"gotcha","affected_versions":">=3.0.0-beta.0"},{"fix":"Always keep `use-sse` and its dependencies updated to the latest stable versions to benefit from security patches. Regularly run `npm audit` or `yarn audit`.","message":"Security dependencies, including `lodash` and `elliptic`, have been updated across several versions (v2.0.1, v3.0.0-beta.0). While these are usually internal, it's a reminder to keep dependencies updated to avoid potential transitive vulnerabilities.","severity":"gotcha","affected_versions":">=2.0.1"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Update your code to destructure the error object explicitly: `const [data, error] = useSSE(...);` and check `error` for details.","cause":"Attempting to access `data.isError` or similar properties on the returned data object when errors are now returned separately.","error":"TypeError: Cannot destructure property 'data' of 'undefined' as it is undefined."},{"fix":"Remove the initial state object. `useSSE` no longer accepts it: `useSSE(() => fetchData(), []);`","cause":"Passing an initial state object as the first argument to `useSSE` in versions 2.0.0 or higher.","error":"Argument of type '{ data: string; }' is not assignable to parameter of type '() => Promise'."},{"fix":"Remove the `key` parameter. The `useSSE` hook no longer requires it: `useSSE(() => fetchData(), []);`","cause":"Passing the `key` string as the second argument to `useSSE` in versions 1.0.0 or higher.","error":"Argument of type 'string' is not assignable to parameter of type '() => Promise'."}],"ecosystem":"npm"}