Next.js Discord

Discord Forum

useEffect Dependencies

Answered
tachtme posted this in #help-forum
Open in Discord
tachtmeOP
I have this situation where for example I have a search query and a list of genres. and both of them react state
const [searchQuery, setSearchQuery] = useState("");
const [genres,setGenres] = useState([]);

// I only want to do this whenever the search query updates and not genres but the useEffect is demanding me to include genres as a dependecies. What can you say about this? is it a bad practice or there is another way around to achieve this?

useEffect(() => {
  const fetch = async () => {
    // fetchData(searchQuery, genres);
    }
  fetch();
}
,[searchQuery])
Answered by B33fb0n3
it's telling you that, because you work with the state of anotherState in it. But when the function inside the useEffect won't be updated, when anotherState get's updated, you will have stale data inside your function (in this case anotherState can be stale)

If you are working with prev values like setAnotherState((prev) => doSomethingWith(prev)), then you still should be good to go
View full answer

23 Replies

tachtmeOP
It's not really a serious issue but its giving me warnings
Like do I really need to include everything on useEffect dependecy array?
even tho I only want the useEffect to be called when a single state is updated
@tachtme even tho I only want the useEffect to be called when a single state is updated
B33fb0n3
which dependencies you are using is your choice. Of course it not good to try fetching stuff with useEffect. In every case you want to use clientside fetching libraries to control your clientside data. Clientside fetching libraries are for example [swr](https://swr.vercel.app/) or [react query](https://tanstack.com/query/latest/docs/framework/react/overview)
tachtmeOP
like axios ?
@tachtme like axios ?
B33fb0n3
no like
swr or react query
tachtmeOP
ohh ok ok
I will do some research from it
@tachtme ohh ok ok
B33fb0n3
is your initial issue solved like that?
tachtmeOP
wait let me reconstruct my question
const [someState, setSomeState] = useState();
const [anotherState, setAnotherState] = useState();

useEffect(() => {
  // do some things using "someState" and "anotherState"
}
,[someState]);

Like this I have two states and a useEffect. Inside useEffect I will use both states to do some things. Now I only want the useEffect to be called when ever "someState" changes but the useEffect is telling me to include both of them but I don't want useEffect to be called when anotherState changes
@tachtme const [someState, setSomeState] = useState(); const [anotherState, setAnotherState] = useState(); useEffect(() => { // do some things using "someState" and "anotherState" } ,[someState]); Like this I have two states and a useEffect. Inside useEffect I will use both states to do some things. Now I only want the useEffect to be called when ever "someState" changes but the useEffect is telling me to include both of them but I don't want useEffect to be called when anotherState changes
B33fb0n3
it's telling you that, because you work with the state of anotherState in it. But when the function inside the useEffect won't be updated, when anotherState get's updated, you will have stale data inside your function (in this case anotherState can be stale)

If you are working with prev values like setAnotherState((prev) => doSomethingWith(prev)), then you still should be good to go
Answer
tachtmeOP
Ohh I got an idea with your answer
const [someState, setSomeState] = useState();
const [anotherState, setAnotherState] = useState();

const doSomethings = useCallBack((someState) => {
   // do some things using "someState" and "anotherState"
},[anotherState]);

useEffect(() => {
  doSomethings(someState)
}
,[someState]);
I seperate the function and surround it with useCallback so the "anotherState" data inside of it will not be stale. and the function from useEffect will only call when "someState" changes.
Thank you @B33fb0n3 I got it now
@tachtme Thank you <@301376057326567425> I got it now
B33fb0n3
yea, you can do it like that too. Which message solved your initial issue?
B33fb0n3
happy to help
tachtmeOP
Ohh it's the same issue from the above I just reconstruct the question so the fetching matter won't involve
@tachtme Ohh it's the same issue from the above I just reconstruct the question so the fetching matter won't involve
B33fb0n3
[as said](https://nextjs-forum.com/post/1278064070540525640#message-1278095015779766272): use a clientside fetching library for clientside data fetching. Else you will end up like many others in #help-forum , because they decided to not use one
tachtmeOP
It's the first time I've heard that client side data fetching is possibly an issue but thanks I will keep that in mind