Why should I use useSWRMutation instead of useSWR for POST requests?

useSWR is intended for data fetching and triggers automatically on component mount. useSWRMutation is designed for write operations (POST/PUT/DELETE) and provides a trigger function to execute the mutation on demand.

What is the difference between isLoading and isValidating in SWR?

isLoading is true only during the initial fetch when no data is in the cache. isValidating is true whenever any request is in flight, including background refreshes that happen while stale data is being displayed.

Does this skill support infinite scrolling?

Yes, it includes patterns for useSWRInfinite, which handles page indexing, cursor-based pagination, and flattens paginated data for easier rendering in list components.

How do I prevent infinite re-rendering loops with SWR keys?

You must use stable keys. Avoid passing objects or arrays created directly in the render body as keys; instead, use strings or stable arrays of primitives to ensure the key reference remains consistent.

SWR Web Data Fetching

Name: SWR Web Data Fetching
Author: agents-inc

byagents-inc

0•

API 개발

Implements optimized stale-while-revalidate data fetching patterns using the SWR library for high-performance React applications.

This skill provides a comprehensive framework for implementing SWR (stale-while-revalidate) patterns within Claude Code. It enables the creation of fast, responsive user interfaces by prioritizing cached data while handling background revalidation, complex loading states, and mutations. By enforcing best practices such as stable key management, typed fetchers, and optimistic UI updates, this skill helps developers build robust data-fetching layers that minimize network overhead and maximize application snappiness.

주요 기능

01Global configuration and SSR hydration setup via SWRConfig

02Conditional and dependent query patterns using the null key strategy

03Advanced mutation patterns with useSWRMutation and optimistic UI rollbacks

04Pagination strategies including infinite scroll and cursor-based loading

050 GitHub stars

06Stale-while-revalidate caching with background data synchronization

사용 사례

01Developing data-driven forms that require immediate UI updates and server synchronization

02Building read-heavy dashboards that require instant UI feedback and background refreshes

03Implementing complex social feeds or activity logs with infinite scroll pagination

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add agents-inc/skills web-data-fetching-swr

For use in Claude.ai and ChatGPT

Download Skill