livedash-node/.github/skills/vercel-react-best-practices/rules/client-swr-dedup.md at cd05fc8648e4d7f303df96e09719173f92902738

mirror of https://github.com/kjanat/livedash-node.git synced 2026-02-13 10:29:31 +01:00

Files

fix: resolve Prettier markdown code block parsing errors

- Fix syntax errors in skills markdown files (.github/skills, .opencode/skills)
- Change typescript to tsx for code blocks with JSX
- Replace ellipsis (...) in array examples with valid syntax
- Separate CSS from TypeScript into distinct code blocks
- Convert JavaScript object examples to valid JSON in docs
- Fix enum definitions with proper comma separation

2026-01-20 21:09:29 +01:00

1.1 KiB

Raw Blame History

title, impact, impactDescription, tags

title	impact	impactDescription	tags
Use SWR for Automatic Deduplication	MEDIUM-HIGH	automatic deduplication	client, swr, deduplication, data-fetching

Use SWR for Automatic Deduplication

SWR enables request deduplication, caching, and revalidation across component instances.

Incorrect (no deduplication, each instance fetches):

function UserList() {
  const [users, setUsers] = useState([]);
  useEffect(() => {
    fetch("/api/users")
      .then((r) => r.json())
      .then(setUsers);
  }, []);
}

Correct (multiple instances share one request):

import useSWR from "swr";

function UserList() {
  const { data: users } = useSWR("/api/users", fetcher);
}

For immutable data:

import { useImmutableSWR } from "@/lib/swr";

function StaticContent() {
  const { data } = useImmutableSWR("/api/config", fetcher);
}

For mutations:

import { useSWRMutation } from "swr/mutation";

function UpdateButton() {
  const { trigger } = useSWRMutation("/api/user", updateUser);
  return <button onClick={() => trigger()}>Update</button>;
}

Reference: https://swr.vercel.app

1.1 KiB Raw Blame History

Use SWR for Automatic Deduplication

1.1 KiB

Raw Blame History