Error when dispatching on load

[PezCoder]

What ?

This is the recent issue I faced & ended up spending a good amount of time trying to debug this. I did found the solution, sharing here so that anybody else facing a similar issue can get help.

Scenario: I have to implement an infinite loader for a list of cards & load the data as soon as the loader is in view, which will be the last card.

Since initially, the list will be empty, the loader will show up right away & the visibility sensor will trigger on change & the function handling this internally dispatches an action that fetches some data from the server & renders it on the screen.

Here's the sample JSX code:

  function onVisibleChange(isVisible) {
    if (isVisible && !isLoading) {
       dispatch(fetchSomeMoreData());
    }
  }

<VisibilitySensor
  onChange={onVisibleChange}
  containment={ref.current}
>
  {loader}
</VisibilitySensor>

Which gave me this error:

Uncaught RangeError: Maximum call stack size exceeded
    at Array.sort (<anonymous>)
    at objEquiv (index.js:80)
    at push../node_modules/deep-equal/index.js.module.exports (index.js:26)
    at objEquiv (index.js:91)
    at push../node_modules/deep-equal/index.js.module.exports (index.js:26)

After some debugging I realized, this was being called, even before my parent components which passed in that function was being mounted.

So adding a delayedCall={true}, fixed it for me.