Code Diff Viewer shadcn/tailwind block

Diff

Code Changes

Review code changes with a unified diff view. Additions in green, deletions in red.

src/components/UserList.tsx

import { useState } from "react";

−import { fetchUsers } from "../api";

+import { fetchUsers } from "@/lib/api";

+import { useCache } from "@/hooks/useCache";

export function UserList() {

− const [users, setUsers] = useState([]);

+ const [users, setUsers] = useState<User[]>([]);

const [loading, setLoading] = useState(true);

− useEffect(() => {

− fetchUsers().then(setUsers);

− }, []);

+ const { data } = useCache("users", fetchUsers);

return (

src/lib/api.ts

const BASE_URL = process.env.API_URL ?? "";

−export async function fetchUsers() {

+export async function fetchUsers(): Promise<User[]> {

const res = await fetch(`${BASE_URL}/api/users`);

− return res.json();

+ if (!res.ok) throw new Error(res.statusText);

+ return res.json() as Promise<User[]>;

}

About this block

Unified code diff viewer with dark terminal background. Green additions, red deletions, and gray context lines with file headers.

PRO

devtools6

FREE

devtools3

PRO

devtools52