swr

Implement stale-while-revalidate caching for React data fetching with SWR.

2|Updated Mar 29, 2026
One-click install
npx skills add https://github.com/NagyVikt/codex-plugins --skill swr-nagyvikt
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: swr
Source: https://github.com/NagyVikt/codex-plugins/tree/main/plugins/vercel/skills/swr
Command: npx skills add https://github.com/NagyVikt/codex-plugins --skill swr-nagyvikt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses the complexity of managing client-side data fetching in React applications, eliminating manual state management for loading, caching, and revalidation.

Core Features & Use Cases

  • Stale-While-Revalidate: Automatically serves cached data while fetching fresh updates in the background.
  • Advanced Data Patterns: Simplifies complex requirements like infinite scrolling, paginated data, and optimistic UI updates.
  • Use Case: Use this skill to replace manual useEffect and fetch calls in your components to ensure your UI stays perfectly synced with your backend API with minimal boilerplate.

Quick Start

Use the swr skill to implement a data fetching hook that caches the response from the user profile endpoint and automatically revalidates on window focus.

Frequently Asked Questions about swr

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement stale-while-revalidate caching in React?

Stale-while-revalidate caching in React serves cached data immediately while fetching fresh updates in the background. This strategy optimizes data fetching by automatically revalidating the cache on window focus to keep your UI perfectly synced with your backend API.

What's the best way to handle infinite loading and pagination in React data fetching?

Handling infinite loading and pagination in React data fetching is simplified using the SWR strategy. It manages complex state scenarios for paginated data automatically, reducing boilerplate compared to manual useEffect and fetch calls.

Can I replace useEffect and fetch with SWR for React API data synchronization?

Yes, you can replace manual useEffect and fetch calls with the SWR hook for React API data synchronization. This eliminates manual state management for loading and caching, ensuring your UI stays synced with minimal boilerplate.

Does SWR handle error retries and request deduplication for React hooks?

SWR handles error retries and request deduplication for React hooks natively. It requires integration with the SWR library to automatically manage these features, ensuring robust client-side data fetching without manual retry logic.

How do I manage remote mutations and optimistic UI updates in React?

Managing remote mutations and optimistic UI updates in React is facilitated by the SWR strategy. It handles complex state scenarios including real-time subscriptions and automatic cache invalidation to reflect remote mutations instantly.

When do I need automatic cache invalidation for React data fetching?

You need automatic cache invalidation for React data fetching when your UI must reflect remote mutations and real-time subscriptions instantly. SWR automatically invalidates the cache to ensure your interface stays perfectly synced with backend updates.