5

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

Dave Stein
  • 8,653
  • 13
  • 56
  • 104
  • Not sure if this is working as intended or a bug so asking question to repo directly as well https://github.com/mpeyper/react-hooks-testing-library/issues/75 – Dave Stein May 16 '19 at 19:46

1 Answers1

3

Going to provide the answer, but if Mike Peyper posts I will mark his as the solution since he gave it to me on https://github.com/mpeyper/react-hooks-testing-library/issues/75.

To quote:

This wont work as expected as only the first argument is passed through to the hook callback. Usually you would pass an object with multiple keys and destructure it in the callback:

const { rerender } = renderHook(({ a, b, c }) => useSomeHook(a, b, c))

rerender({ a, b, c}) 

The reason for this is it's supposed to mimic the props of the wrapping component.

Dave Stein
  • 8,653
  • 13
  • 56
  • 104