SynthOS IDE
account_tree
notifications
settings
javascript
useUserData.ts
table_rows
DataTable.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { useEffect, useState } from 'react';
export const useUserData = () => {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch('/api/user/profile')
.then(res => res.json())
.then(json => {
setData(json);
setLoading(false);
});
}, []);
// AI Ghost: suggesting a mapping function for cleaner data structure
return { data, loading };
const transformedData = data.map(item => ({
id: item.uid,
displayName: `${item.first} ${item.last}`,
active: item.status === 'active'
}));
return { data: transformedData, loading };
}
export const useUserData = () => {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch('/api/user/profile')
.then(res => res.json())
.then(json => {
setData(json);
setLoading(false);
});
}, []);
// AI Ghost: suggesting a mapping function for cleaner data structure
return { data, loading };
const transformedData = data.map(item => ({
id: item.uid,
displayName: `${item.first} ${item.last}`,
active: item.status === 'active'
}));
return { data: transformedData, loading };
}
auto_awesome
SynthOS Assistant
v4.2.0
Refactor this logic to use TanStack Query.
smart_toy
Thinking...
I'll migrate your manual fetch logic to `useQuery`. This will handle caching, loading states, and error boundary integration automatically.
import { useQuery } from '@tanstack/react-query'; export const useUserData = () => { return useQuery({ queryKey: ['user-profile'], queryFn: () => fetch('/api/user/profile').then(res => res.json()) }); };