{"id":15369,"library":"react-lazy-hydration","title":"React Lazy Hydration","description":"React Lazy Hydration is a library designed to optimize the initial load performance of Server-Rendered React applications by deferring the hydration of components until they are actually needed. This package, currently at version 0.1.0, offers several strategies for lazy hydration, including hydrating only on the server (`ssrOnly`), when a component becomes visible in the viewport (`whenVisible`), when the browser is idle (`whenIdle`), or upon specific user events like clicks or mouse enters (`on` event). It aims to reduce the JavaScript payload executed during initial page load, improving Time To Interactive (TTI). The library is inspired by discussions within the React community regarding selective hydration and similar patterns seen in Vue SSR. Its release cadence is currently irregular as it's in its early development stages. A key differentiator is its flexible approach, allowing developers to choose the most suitable hydration strategy on a per-component basis, rather than a global setting. It depends on React version 16.8.0 or greater for its hooks-based implementation.","status":"active","version":"0.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/hadeeb/react-lazy-hydration","tags":["javascript","react","ssr","lazy hydration","hydration","typescript"],"install":[{"cmd":"npm install react-lazy-hydration","lang":"bash","label":"npm"},{"cmd":"yarn add react-lazy-hydration","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-lazy-hydration","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime peer dependency for React component hooks.","package":"react","optional":false}],"imports":[{"note":"The primary component is exported as a default export.","wrong":"import { LazyHydrate } from 'react-lazy-hydration';","symbol":"LazyHydrate","correct":"import LazyHydrate from 'react-lazy-hydration';"},{"note":"Type definition for the component's props, useful for TypeScript projects.","symbol":"LazyHydrateProps","correct":"import type { LazyHydrateProps } from 'react-lazy-hydration';"}],"quickstart":{"code":"import React from 'react';\nimport LazyHydrate from 'react-lazy-hydration';\n\nfunction MyHeader() {\n return
\n {/* This component will only be rendered on the server and never hydrated on the client. */}\n \n \n \n\n {/* This component will hydrate only when it becomes visible in the viewport. */}\n \n \n \n\n {/* This component will hydrate when the browser is idle. */}\n \n
This will hydrate during browser idle time.
\n \n \n\n {/* This component will hydrate on specific user events (click, mouseenter). */}\n \n
Click or hover to hydrate this section.
\n \n
\n );\n}\n\nexport default App;","lang":"typescript","description":"This example demonstrates various lazy hydration strategies: `ssrOnly` for server-only rendering, `whenVisible` for viewport-based hydration (with custom IntersectionObserver options), `whenIdle` for hydration during browser idle time, and `on` for event-triggered hydration."},"warnings":[{"fix":"Install and import a polyfill like `intersection-observer` (e.g., `import 'intersection-observer';`).","message":"The `whenVisible` strategy relies on `IntersectionObserver`. If targeting environments that do not natively support it (e.g., older browsers), a polyfill must be included manually.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Install and import a polyfill for `requestIdleCallback` (e.g., `import 'requestidlecallback';`).","message":"The `whenIdle` strategy relies on `requestIdleCallback`. For environments lacking native support (e.g., older browsers), a polyfill is required.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Consider optimizing component structure or using a different hydration strategy for large lists of identical components. Monitor performance in such scenarios.","message":"As of v0.1.0, an `IntersectionObserver` instance is created per `LazyHydrate` component using the `whenVisible` prop. For applications with a very large number of such components, this might lead to increased resource usage.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Add a polyfill for IntersectionObserver, such as `import 'intersection-observer';` at the entry point of your application.","cause":"The browser environment does not natively support `IntersectionObserver`, and no polyfill has been provided.","error":"ReferenceError: IntersectionObserver is not defined"},{"fix":"Add a polyfill for requestIdleCallback, such as `import 'requestidlecallback';` at the entry point of your application.","cause":"The browser environment does not natively support `requestIdleCallback`, and no polyfill has been provided.","error":"ReferenceError: requestIdleCallback is not defined"},{"fix":"Ensure `react` is installed as a peer dependency (`npm install react@^16.8.0` or higher) and check for duplicate React installations using `npm ls react` or `yarn why react`.","cause":"`react` is not correctly installed or a compatible version (>=16.8.0) is not available, or multiple instances of React are being loaded.","error":"TypeError: Cannot read properties of undefined (reading 'useState') or similar hooks-related errors"}],"ecosystem":"npm"}