React useSWR çoklu request sorunu
Merhabalar React Route ile 2 tane sayfam var ana sayfada apiye request atıyorum ancak b sayfasına gidip tekrar a sayfasına geldiğimde request tekrarlanıyor bunun önüne nasıl geçebilirim ?
// App.jsx
return (
<Routes>
<Route path='/' element={<Home />} />
<Route path='/users' element={<Home path='users' />} />
</Routes>
)
// Home.jsx
export default function Home({ path = null }) {
const [content, setContent] = useState(null);
useEffect(() => {
switch (path) {
case 'changelog':
setContent(<ChangelogPage />);
break;
default:
setContent(<HomeIndexPage />);
}
}, [path]);
return (
<>
<Content content={content} />
</>
);
}
// HomeIndexPage.jsx
export default function HomeIndexPage() {
const [users, setUsers] = useState([]);
const [error, setError] = useState(null);
const request = useSWR('<API>');
useEffect(() => {
if (request.error) setError(request.error.message);
if (request.data) setUsers(request.data.data);
}, [request.error, request.data]);
return (
<>
{error ? (
<span>Bir hata oluştu</span>
) : users.length ? (
{lastUsers.map(user => (
<>
<span>{user}</span>
</>
))}
) : (
<span>Yükleniyor...</span>
)}
</>
);
};
HomeIndexPage fonksiyonu içinde yazdıkların, bu bileşen mount olduğunda çalışacak. Her bu sayfaya gidişinde yine useSWR() hook'unu kullanıyorsun, değişmeyen bir bileşene kadar çıkarman lazım bu isteği sonra da gelen datayı alt bileşene ulaştırman gerek. Örneğin;
// Home.jsx
export default function Home({ path = null, request }) {
const [content, setContent] = useState(null);
const request = useSWR('<API>');
useEffect(() => {
switch (path) {
case 'changelog':
setContent(<ChangelogPage />);
break;
default:
setContent(<HomeIndexPage request={request} />);
}
}, [path]);
return (
<>
<Content content={content} />
</>
);
}
// HomeIndexPage.jsx
export default function HomeIndexPage({ request }) {
const [users, setUsers] = useState([]);
const [error, setError] = useState(null);
useEffect(() => {
if (request.error) setError(request.error.message);
if (request.data) setUsers(request.data.data);
}, [request.error, request.data]);
return (
<>
{error ? (
<span>Bir hata oluştu</span>
) : users.length ? (
{lastUsers.map(user => (
<>
<span>{user}</span>
</>
))}
) : (
<span>Yükleniyor...</span>
)}
</>
);
};