error : react-hooks/exhaustive-deps
Answered
Long-horned bees posted this in #help-forum
Long-horned beesOP
hello
Answered by joulev
alright since i didn't receive a satisfactory answer i'll tell you why i asked the above question.
if the function is declared outside, it will have the same value throughout the lifecycle of the component, so just add
if the function is declared inside, every time the component rerenders the function will be declared again and hence
* in this case, the short quick but bad answer is to slap
* the longer but better answer is that you need to convert your
if the function is declared outside, it will have the same value throughout the lifecycle of the component, so just add
combineduserData to the deps array and the useEffect will only run once (because combineduserData never changes).if the function is declared inside, every time the component rerenders the function will be declared again and hence
combineduserData always changes.* in this case, the short quick but bad answer is to slap
// eslint-disable-next-line react-hooks/exhaustive-deps in the previous line to tell eslint to shut up.* the longer but better answer is that you need to convert your
combineduserData to a stable callback using useCallback and list out its dependencies. then combineduserData only changes when its dependencies change. then add combineduserData to the deps array of useEffect.10 Replies
Long-horned beesOP
useEffect(() => {
const storedUsername = localStorage.getItem('username');
if (storedUsername ) {
setstoredUsername (storedUsername );
void combineduserData(storedUsername );
}
}, [);
im getting error
80:6 Warning: React Hook useEffect has a missing dependency: 'combineduserData'. Either include it or remove the dependency array. react-hooks/exhaustive-deps
const storedUsername = localStorage.getItem('username');
if (storedUsername ) {
setstoredUsername (storedUsername );
void combineduserData(storedUsername );
}
}, [);
im getting error
80:6 Warning: React Hook useEffect has a missing dependency: 'combineduserData'. Either include it or remove the dependency array. react-hooks/exhaustive-deps
i just wanna run useeffect only once thats why i made it empty but im getting this eslint error in build
1. That’s not an error.
2. Does your combinedUserData change often?
2. Does your combinedUserData change often?
@joulev 1. That’s not an error.
2. Does your combinedUserData change often?
Long-horned beesOP
1. understood
2. its a function that receive arugments and return object
2. its a function that receive arugments and return object
@Long-horned bees 1. understood
2. its a function that receive arugments and return object
is it something like this
or something like this
function combineduserData() {...}
function Component() {
useEffect(() => ..., []);
}or something like this
function Component() {
function combineduserData() {...}
useEffect(() => ..., []);
}Long-horned beesOP
function combineduserData() {...}
useEffect(() => ..., []);is the function declared inside the component or outside
Long-horned beesOP
actually its for context api
alright since i didn't receive a satisfactory answer i'll tell you why i asked the above question.
if the function is declared outside, it will have the same value throughout the lifecycle of the component, so just add
if the function is declared inside, every time the component rerenders the function will be declared again and hence
* in this case, the short quick but bad answer is to slap
* the longer but better answer is that you need to convert your
if the function is declared outside, it will have the same value throughout the lifecycle of the component, so just add
combineduserData to the deps array and the useEffect will only run once (because combineduserData never changes).if the function is declared inside, every time the component rerenders the function will be declared again and hence
combineduserData always changes.* in this case, the short quick but bad answer is to slap
// eslint-disable-next-line react-hooks/exhaustive-deps in the previous line to tell eslint to shut up.* the longer but better answer is that you need to convert your
combineduserData to a stable callback using useCallback and list out its dependencies. then combineduserData only changes when its dependencies change. then add combineduserData to the deps array of useEffect.Answer
Long-horned beesOP
Thanks a lot! got it