lazy-prefetch-pattern

Community

Preload React Query data for faster UI.

AuthorFranciscoMoretti
Version1.0.0
Installs0

System Documentation

What problem does it solve?

React Query v5 lazy prefetch (dehydrate pending queries) helps ensure TSX components render with data already available, reducing initial load time and UI jank.

Core Features & Use Cases

  • Lazy Prefetching: Prefetch data for pending queries in TSX files using React Query v5.
  • Dehydration: Dehydrate the query cache for fast hydration on client render.
  • Use Case: When navigating to a route that renders a TSX component, prefetch the needed data so the UI appears instantly.

Quick Start

Enable lazy prefetching for all *.tsx files and dehydrate pending queries in the project.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: lazy-prefetch-pattern
Download link: https://github.com/FranciscoMoretti/sparka/archive/main.zip#lazy-prefetch-pattern

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository