Why is my SWR hook causing an infinite request loop?

Infinite requests are typically caused by unstable keys, such as objects or arrays defined inside a component's body. Always use string keys or stable arrays of primitives to ensure consistent references.

What is the difference between isLoading and isValidating in SWR?

isLoading is true only for the initial fetch when no data exists in the cache. isValidating is true whenever a request is in flight, including background refreshes where cached data is already visible.

How do I perform write operations like POST or PUT using SWR?

Use the useSWRMutation hook for write operations. Unlike useSWR, it doesn't fire on mount and provides a trigger function for explicit execution, keeping read and write concerns separate.

Can I fetch data conditionally with SWR?

Yes, use the 'null key' pattern. Pass null as the key if the conditions for fetching aren't met. This follows the Rules of Hooks by ensuring the hook is always called while preventing the actual network request.

SWR Data Fetching Patterns

Name: SWR Data Fetching Patterns
Author: agents-inc

byagents-inc

0•

API 개발

Implements efficient stale-while-revalidate data fetching patterns with advanced caching, background revalidation, and optimistic updates.

This skill provides comprehensive guidance for implementing the SWR (stale-while-revalidate) strategy in modern web applications to create fast, responsive user interfaces. It enforces best practices for typed fetchers, distinguishes between initial loading and background validation states, and provides robust patterns for write operations using useSWRMutation. By leveraging this skill, developers can easily implement advanced features like infinite scrolling, optimistic UI updates with automatic rollbacks, and complex dependent queries while avoiding common pitfalls like unstable keys and infinite re-render loops.

주요 기능

01Stale-while-revalidate caching for instant UI feedback

02Typed fetcher implementations with error handling

03Conditional and dependent query management

040 GitHub stars

05Advanced pagination and infinite scroll patterns

06Optimistic UI updates with automatic error rollback

사용 사례

01Implementing infinite scrolling news feeds or activity logs

02Building read-heavy dashboards that require background data synchronization

03Creating high-performance forms with instant local state updates

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

주요 기능

01Stale-while-revalidate caching for instant UI feedback

02Typed fetcher implementations with error handling

03Conditional and dependent query management

040 GitHub stars

05Advanced pagination and infinite scroll patterns

06Optimistic UI updates with automatic error rollback

사용 사례

01Implementing infinite scrolling news feeds or activity logs

02Building read-heavy dashboards that require background data synchronization

03Creating high-performance forms with instant local state updates

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