I have a hook with useEffect
. I noticed that useEffect
is not being run more than twice because after one rerender
call with different data, subsequent calls do not get the updated data.
export default function(lookForUsername) {
const [dashboardHref, setDashboardHref] = useState(`https://www.example.com/`);
useEffect(() => {
// this is where I have code that i want to
// run on re-render, but it won't because it stops getting updated
}, [lookForUsername]);
return [dashboardHref];
}
My test has this happening
// this will log false, false on first run
const { rerender, waitForNextUpdate } = renderHook((lookForUsername=false, otherOption=false) => {
console.log(lookForUsername, otherOption);
return useMyHook(lookForUsername);
});
console.log('first re-render');
// this will make the console say true, false
rerender(true, true);
console.log('second re-render');
// console will still say true, false
rerender(false, false);
console.log('third re-render');
// console will stay true, false (so it's not just one behind)
rerender(true, true);
I do not understand why doing re-render with a different value updates the props in renderHook the first time, but not the subsequent times.
NOTE I have updated the title & question wording to better reflect issue after more debugging
UPDATE I over-simplified my example. I was originally only passing one argument in this post, but the issue was when I was passing multiple arguments