We Keep Coding

useFetch custom hook doesn't trigger inner useEffect

I'm trying to use a useFetch custom hook on a small todolist app that I'm working on to learn React.
I don't get why my useFetch function seems to work but its inner useEffect never triggers.
I tried removing the URL from dependencies array, adding the URL as an argument of the useEffect but nothing happened: my variable [response] stays null.
Here is the code for the useFetch :
utils.js:
export function useFetch(url) {
const [response, setResponse] = useState(null);
const [error, setError] = useState(null);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
console.log(url);
if (url === undefined) return;
const fetchData = async () => {
setIsLoading(true);
try {
const result = await getRequest(url);
setResponse(result);
setIsLoading(false);
} catch (error) {
setError(error);
}
};
fetchData();
}, [url]);
return [response, setResponse, error, isLoading];
}
App.js:
import { useState, useMemo, useCallback } from 'react';
import { useFetch, postRequest, deleteRequest, getFormatedDate } from './utils';
//more imports
export default function App() {
const [response] = useFetch('/items');
const [titleValue, setTitleValue] = useState('');
const [descriptionValue, setDescriptionValue] = useState('');
const [deadlineValue, setDeadlineValue] = useState(new Date());
const [doneFilter, setDoneFilter] = useState(0);
const [selectedItem, setSelectedItem] = useState();
const [showDialog, setShowDialog] = useState(false);
const onSave = useCallback(
async () => {
if (titleValue) {
let valueToSave = {};
valueToSave.title = titleValue;
valueToSave.status = false;
if (descriptionValue) valueToSave.description = descriptionValue;
valueToSave.deadline = deadlineValue instanceof Date ? deadlineValue : new Date();
setData((prev) => [...prev, valueToSave]);
setTitleValue('');
setDescriptionValue('');
setDeadlineValue(new Date());
try {
await postRequest('add', valueToSave);
} catch (err) {
console.error(err);
throw err;
}
}
},
[descriptionValue, titleValue, deadlineValue]
);
const onDelete = useCallback(async (item) => {
setData((items) => items.filter((i) => i !== item));
try {
await deleteRequest(item._id);
} catch (err) {
console.error(err);
throw err;
}
}, []);
const onModif = useCallback(async (id, field) => {
const res = await postRequest('update/' + id, field);
if (res.ok) setShowDialog(false);
}, []);
const organizedData = useMemo(() => {
if (!response) return;
for (let d of response) d.formatedDeadline = getFormatedDate(d.deadline);
response.sort((a, b) => new Date(a.deadline) - new Date(b.deadline));
if (doneFilter === 1) return response.filter((e) => e.status);
else if (doneFilter === 2) return response.filter((e) => !e.status);
else return response;
}, [response, doneFilter]);
//more code
return (
// jsx
)}
console.logging works just above the useEffect but never inside.

I cannot easily recreate your issue but I can point out some issues with your useFetch hook -
function useFetch(url) {
const [response, setResponse] = useState(null);
const [error, setError] = useState(null);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
console.log(url);
if (url === undefined) return;
const fetchData = async () => {
setIsLoading(true);
try {
const result = await getRequest(url);
setResponse(result);
setIsLoading(false);
} catch (error) {
setError(error);
// ❌ loading == true
}
};
fetchData();
// ❌ what about effect cleanup?
}, [url]);
return [response, setResponse, error, isLoading]; // ❌ don't expose setResponse
}
Check out Fetching Data from the react docs. Here's the fixes -
function useFetch(url) {
const [response, setResponse] = useState(null);
const [error, setError] = useState(null);
const [isLoading, setIsLoading] = useState(false);
useEffect(
() => {
if (url == null) return;
let mounted = true // ✅ component is mounted
const fetchData = async () => {
try {
if (mounted) setIsLoading(true); // ✅ setState only if mounted
const response = await getRequest(url);
if (mounted) setResponse(response); // ✅ setState only if mounted
} catch (error) {
if (mounted) setError(error); // ✅ setState only if mounted
} finally {
if (mounted) setIsLoading(false); // ✅ setState only if mounted
}
};
fetchData();
return () => {
mounted = false // ✅ component unmounted
}
},
[url]
);
return { response, error, isLoading }
}
When you use it, you must check for isLoading first, then null-check the error. If neither, response is valid -
function MyComponent() {
const {response, error, isLoading} = useFetch("...")
if (isLoading) return <Loading />
if (error) return <Error error={error} />
return (
// response is valid here
)
}
See this Q&A for a more useful useAsync hook.

Write fetched data to variable from firebase realtime database react

I'm trying to save fetched data into variable, but I always get "too many rerenders" or "undefined". What I'm doing wrong
import {
child,
get,
getDatabase,
ref,
} from "firebase/database";
const db = getDatabase();
function App() {
const [data, setData] = useState();
const getData = ref(db);
useEffect(() => {
const fetch = () => {
get(child(getData, "tokens/")).then((snapshot) => {
const fetched = snapshot.val();
setData(fetched);
});
setTimeout(() => {
console.log(data);
}, 500);
};
fetch();
}, []);
}

There's no need of setTimeout(). You can print the data when the promise is resolved as shown below:
function App() {
const [data, setData] = useState();
const getData = ref(db);
useEffect(() => {
const fetchData = () => {
get(child(getData, "tokens/")).then((snapshot) => {
const fetched = snapshot.val();
console.log(fetched)
setData(fetched);
});
};
fetchData();
}, []);
}
Also I've renamed the fetch function to avoid any confusion with Fetch API

How do I make useState hook work with my function?

I am trying to execute a function to update a setState but it as well needs other state to load first.
const [chatsIds, setChatsIds] = useState([]);
const [chats, setChats] = useState([]);
useEffect(() => {
getChatsIds();
}, []);
useEffect(() => {
getChats();
}, [chats]);
the "getChats" needs the value from "chatsIds" but when the screen is loaded the value isn't , only when i reload the app again it gets the value.
Here are the functions :
const getChatsIds = async () => {
const ids = await getDoc(userRef, "chats");
setChatsIds(ids);
}
const getChats = async () => {
const chatsArr = [];
chatsIds.forEach(async (id) => {
const chat = await getDoc(doc(db, "Chats", id));
chatsArr.push(chat);
console.log(chatsArr);
});
setChats(chatsArr);
}
I've tried with the useEffect and useLayoutEffect hooks, with promises and async functions, but i haven't found what i'm doing wrong :(

The problem is in your useEffect hook dependency. It should depends on chatsIds not chats.
useEffect(() => {
getChats();
}, [chatsIds]);
Which mean fetching chatsIds should depend on first mount and fetching chats should depend on if chatsIds is chnaged.

You simply change the useEffect hook to like below.
useEffect(() => {
getChatsIds();
}, [chatsIds]);

I Think getChat() is depend on chatIds...
so you use useEffect with chatIds on dependency
const [chatsIds, setChatsIds] = useState([]);
const [chats, setChats] = useState([]);
useEffect(() => {
getChatsIds();
}, []);
useEffect(() => {
getChats(chatsIds);
}, [chatsIds]);
const getChatsIds = async () => {
const ids = await getDoc(userRef, "chats");
setChatsIds(ids);
}
const getChats = async (chatsIds) => {
const chatsArr = [];
chatsIds.forEach(async (id) => {
const chat = await getDoc(doc(db, "Chats", id));
chatsArr.push(chat);
console.log(chatsArr);
});
setChats(chatsArr);
}

How to change a snippets of code from Class Component to Functional Component

Here is the code of the snippet I want to change to a Functional component, I write almost my code here now please check.
import _ from 'lodash';
import { ListItem, SearchBar, Avatar } from 'react-native-elements';
import { getUsers, contains } from './api/index';
function App(props) {
const [loading, setLoading] = useState(false);
const [data, setData] = useState([]);
const [error, setError] = useState(null);
const [fullData, setFullData] = useState([]);
const [query, setQuery] = useState();
useEffect(() => {
makeRemoteRequest();
},[query]);
const makeRemoteRequest = _.debounce(() => {
setLoading(true);
getUsers(20, query)
.then((users) => {
setLoading(false);
setData(users);
setFullData(users);
})
.catch((error) => {
setLoading(false);
});
}, 250);
const handleSearch = (text) => {
const formattedQuery = text.toLowerCase();
const data = _.filter(fullData, (user) => {
return contains(user, formattedQuery);
});
// I want to change the below code to work on Functioanl component
// this.setState({ data, query: text }, () => //this.makeRemoteRequest());
// New code here.....
};
I implemented it in a different way but not work.

You can have something like the following.
const [query, setQuery] = useState();
const [data, setData] = useState();
useEffect(() => {
makeRemoteRequest();
}, [query])
Read more about useEffect here

You're trying to make a set of data and text, then call a callback after the set.
There are several ways to obtain this behaviour.
What I would suggest you is to have a state (useState) which include data and text and then listen for the changes of this stage through a useEffect.
export default function App() {
const [request, setRequest] = useState({data: {}, text: ''});
const makeRemoteRequest = useCallback(() => console.log({request}),[request]);
useEffect(() => {
//on mount
setRequest({data: {obj:'with data'}, text: 'text'})
},[])
useEffect(() => {
makeRemoteRequest()
},[request,makeRemoteRequest])
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
What you can see here, it's a functional component which is:
setting a state on mount (read comment)
define a function makeRemoteRequest every time the state request changes through the useCallback hook
call the function makeRemoteRequest every time the state request or the callback makeRemoteRequest changes through the useEffect hook
EDIT:
import _ from 'lodash';
import { ListItem, SearchBar, Avatar } from 'react-native-elements';
import { getUsers, contains } from './api/index';
function App(props) {
const [loading, setLoading] = useState(false);
const [data, setData] = useState([]);
const [error, setError] = useState(null);
const [fullData, setFullData] = useState([]);
const [query, setQuery] = useState();
useEffect(() => {
makeRemoteRequest();
},[query]);
const makeRemoteRequest = _.debounce(() => {
setLoading(true);
getUsers(20, query)
.then((users) => {
setLoading(false);
setData(users);
setFullData(users);
})
.catch((error) => {
setLoading(false);
});
}, 250);
const handleSearch = (text) => {
const formattedQuery = text.toLowerCase();
const data = _.filter(fullData, (user) => {
return contains(user, formattedQuery);
});
setData(data);
setQuery(text);
}
};
Actually what you want is to trigger the function makeRemoteRequest, right now that you have to do in order to get it is to make the proper set (which means setQuery), which is going to trigger the useEffect

Error using custom hook inside a useEffect

let { photos, isQuering, empty, error } = useFetch(brand, isOld);
useEffect(() => {
if (isOld) {
const { photos: photosTest } = useFetch(brand, isOld);
photos = photosTest;
}
}, [isOld]);
useFetch is a custom hook that I have and I want to bring the old photos when the isOld state is true, the code above useEffect is called normally and the photos load, but I run into the error that useFetch is not being called inside the body a function component, the following error appears "Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:", that is, I am doing something very wrong that I cannot to see! If you can help me, I would appreciate it very much!
Editing because of Danko! The Hook!
import { useEffect, useState, useContext } from 'react';
import { useScrollPagination } from './flow-manager';
import { db } from '../../Firebase';
import { userContext } from '../appContext';
export default function fetch(brand, isOld) {
const {
userData: { uid },
} = useContext(userContext);
const [photos, setPhotos] = useState([]);
const [lastDoc, setLastDoc] = useState(undefined);
const [isQuering, setIsQuering] = useState(false);
const [empty, setEmpty] = useState(false);
const [error, setError] = useState();
const [finished, setFinished] = useState(false);
const shouldFetchMore = useScrollPagination();
const [shouldKeepFecthing, setShouldKeepFetching] = useState(false);
useEffect(() => {
if (isQuering || finished) return;
if (!lastDoc || shouldFetchMore || shouldKeepFecthing) {
setIsQuering(true);
let query = !isOld
? db
.collection('catalog-images')
.where('brandName', '==', brand)
.orderBy('timestamp', 'desc')
.endBefore(new Date().setDate(new Date().getDate() - 40))
.limit(20)
: db
.collection('catalog-images')
.where('brandName', '==', brand)
.where('photoPeriod', '==', 'Antiga')
.limit(20);
if (lastDoc) query = query.startAfter(lastDoc);
query
.get()
.then(snap => {
const newPhotos = [];
let valid = 0;
snap.forEach(doc => {
const { url, pricetag, timestamp } = doc.data();
if (!uid && pricetag === 'Sim') return;
brand && newPhotos.push({ url, timestamp });
valid += 1;
});
setPhotos(oldPhotos => [...oldPhotos, ...newPhotos]);
setShouldKeepFetching(valid < 10);
setEmpty(snap.empty);
setLastDoc(snap.docs[snap.docs.length - 1]);
setFinished(snap.docs.length < 20);
setIsQuering(false);
})
.catch(setError);
}
}, [!!lastDoc, shouldFetchMore, shouldKeepFecthing, isQuering]);
return { photos, isQuering, empty, error, fetch };
}
Last Update:
Here, where I am calling the hook:
let {
photos,
isQuering,
empty,
error,
useFetch: refetch,
} = useFetch(brand, isOld);
useEffect(() => {
if (isOld) {
let { photos: photosTest } = refetch(brand, isOld);
photos = photosTest;
setIsOld(false);
}
}, [isOld]);
Aaaand, the hook:
import { useEffect, useState, useContext } from 'react';
import { useScrollPagination } from './flow-manager';
import { db } from '../../Firebase';
import { userContext } from '../appContext';
export default function useFetch(brand, isOld) {
const {
userData: { uid },
} = useContext(userContext);
const [photos, setPhotos] = useState([]);
const [lastDoc, setLastDoc] = useState(undefined);
const [isQuering, setIsQuering] = useState(false);
const [empty, setEmpty] = useState(false);
const [error, setError] = useState();
const [finished, setFinished] = useState(false);
const shouldFetchMore = useScrollPagination();
const [shouldKeepFecthing, setShouldKeepFetching] = useState(false);
useEffect(() => {
if (isQuering || finished) return;
if (!lastDoc || shouldFetchMore || shouldKeepFecthing) {
setIsQuering(true);
let query = !isOld
? db
.collection('catalog-images')
.where('brandName', '==', brand)
.orderBy('timestamp', 'desc')
.endBefore(new Date().setDate(new Date().getDate() - 40))
.limit(20)
: db
.collection('catalog-images')
.where('brandName', '==', brand)
.where('photoPeriod', '==', 'Antiga')
.limit(20);
if (lastDoc) query = query.startAfter(lastDoc);
query
.get()
.then(snap => {
const newPhotos = [];
let valid = 0;
snap.forEach(doc => {
const { url, pricetag, timestamp } = doc.data();
if (!uid && pricetag === 'Sim') return;
brand && newPhotos.push({ url, timestamp });
valid += 1;
});
setPhotos(oldPhotos => [...oldPhotos, ...newPhotos]);
setShouldKeepFetching(valid < 10);
setEmpty(snap.empty);
setLastDoc(snap.docs[snap.docs.length - 1]);
setFinished(snap.docs.length < 20);
setIsQuering(false);
})
.catch(setError);
}
}, [!!lastDoc, shouldFetchMore, shouldKeepFecthing, isQuering]);
return { photos, isQuering, empty, error, useFetch };
}

I'd suggest something else:
update your useFetch so it will have refetch function end add it to returned object.
now, your updated hook can be destructured like this: const { photos, isQuering, empty, error, refetch } = useFetch(brand);
your useEfect can be used like this:
useEffect(() => {
if(isOld) {
refetch();
setIsOld(false)
}
}, [isOld]);
Update:
You must rename your custon hook to start with use. Otherwise there is no way for react to differ it from other functions. So, instead of naming it fetch rename it to useFetch.

The thing is, you can't call a hook from another hooks. Hooks are only called from component body (top-level). Your code makes no sense on a few levels:
let { photos, isQuering, empty, error } = useFetch(brand, isOld);
useEffect(() => {
if (isOld) {
const { photos: photosTest } = useFetch(brand, isOld); // can't call a hook here
photos = photosTest; // can't mutate component-level variables
}
}, [isOld]);