When using hooks adding parameters causes infinite rendering loop

[scottc5]

I am using v1.2.1 and get the same response on IOS and Android. When using hooks like useRewardedAd, if I include parameters (doesnt seem to matter which ones, though my goal was to use requestNonPersonalizedAdsOnly) then the app goes into an infinite rendering loop. Below is an example setting almost all of the parameters, but I also just tried the requestNonPersonalizedAdsOnly one and got the same result.
const op = { loadOnMounted: true, showOnLoaded: false, loadOnDismissed:true, requestOptions: { requestNonPersonalizedAdsOnly: true}}; const { adLoadError, adLoaded, show, load, reward, adPresented, adDismissed } = useRewardedAd(TestIds.REWARDED, op);

Or this code:
const requestOptions = { requestNonPersonalizedAdsOnly: true, }; const { adLoadError, adLoaded, show, load, reward, adPresented, adDismissed } = useRewardedAd(TestIds.REWARDED, requestOptions);

[Jay Kim]

requestOptions is property of option object. Second parameter of the hook should be option object, that means you should wrap requestOptions with curly braces, so the code should be like:

const {} = useRewardedAd(UNITID, {
  requestOptions
});

[Shivam]

@wjaykim you missed on his first example.

const {} = useRewardedAd(UNITID, {
  loadOnMounted: false,
});

This puts the app in loop is there anything else to be noted ?

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

[Jay Kim]

Currently I am investigating why this happens. Meanwhile, there is temporary solution for this. Declare your options outside of react component, or memoize your options like

const hookOptions: FullScreenAdOptions = useMemo(
    () => ({
      loadOnDismissed: true,
      requestOptions: {
        requestNonPersonalizedAdsOnly: true,
      },
    }),
    []
  );

then infinite loop will not happen.

[Shivam]

@wjaykim how about we put the memo in the library where we are loading the config itself so it doesn't go in render loop ?

[Jay Kim]

@ShivamJoker Yes, I'll try that.

[Jay Kim]

Found that this issue comes from comparing options object with useEffect hook: https://stackoverflow.com/questions/54095994/react-useeffect-comparing-objects

Ended up using https://github.com/kentcdodds/use-deep-compare-effect internally. Changes will available in next version.

[Shivam]

Interesting findings :) Glad that you figured it