Fix loop in useFetch
Oops, my recent change made it so `useFetch` started re-requesting stuff in an infinite loop 😅 right, this is how effects work, lol!
This commit is contained in:
parent
0fe83419f7
commit
2f7b6571f2
1 changed files with 7 additions and 2 deletions
|
@ -238,10 +238,15 @@ export function useFetch(url, { responseType, ...fetchOptions }) {
|
||||||
const [error, setError] = React.useState(null);
|
const [error, setError] = React.useState(null);
|
||||||
const [data, setData] = React.useState(null);
|
const [data, setData] = React.useState(null);
|
||||||
|
|
||||||
|
// We expect this to be a simple object, so this helps us only re-send the
|
||||||
|
// fetch when the options have actually changed, rather than e.g. a new copy
|
||||||
|
// of an identical object!
|
||||||
|
const fetchOptionsAsJson = JSON.stringify(fetchOptions);
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
let canceled = false;
|
let canceled = false;
|
||||||
|
|
||||||
fetch(url, fetchOptions)
|
fetch(url, JSON.parse(fetchOptionsAsJson))
|
||||||
.then(async (res) => {
|
.then(async (res) => {
|
||||||
if (canceled) {
|
if (canceled) {
|
||||||
return;
|
return;
|
||||||
|
@ -265,7 +270,7 @@ export function useFetch(url, { responseType, ...fetchOptions }) {
|
||||||
return () => {
|
return () => {
|
||||||
canceled = true;
|
canceled = true;
|
||||||
};
|
};
|
||||||
}, [url, fetchOptions]);
|
}, [url, fetchOptionsAsJson]);
|
||||||
|
|
||||||
return { loading, error, data };
|
return { loading, error, data };
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue