Infinite loop when used with react-native-web View

[MoOx]

Everything is in the title. No issue with a div, as soon as I try to use RNW View, a infinite loop is started.

This is likely due to how RNW handle ref for the View (and maybe others)

https://github.com/necolas/react-native-web/blob/251cdfb220a165dc652bf118063139da2b9345f1/packages/react-native-web/src/exports/View/index.js#L104-L140

[thebuilder]

Yeah, this is because they always trigger the ref callback function. The ref callback they create should be wrapped in a useCallback - Otherwise it will be executed on every render.

https://github.com/thebuilder/react-intersection-observer#how-can-i-assign-multiple-refs-to-a-component

[thebuilder]

I might also be able to modify the ref callback, so it doesn't recreate the observer if it's the same element and options.

[wildfrontend]

i find when i use Profiler inViewRef will cause Infinite loop

i use useInView to set ref

it is a bug?

sample code ：https://codesandbox.io/s/serverless-cache-z7hdv?fontsize=14&hidenavigation=1&theme=dark

[thebuilder]

i find when i use Profiler inViewRef will cause Infinite loop

i use useInView to set ref

it is a bug?

sample code ：codesandbox.io/s/serverless-cache-z7hdv?fontsize=14&hidenavigation=1&theme=dark

It's because you are creating a new threshold Array on each render, causing it to recreate the observer.

 threshold: [0.5]

Make sure to define the array outside the render function, or memorize it.

[thebuilder]

@wildfrontend I made a new release that should prevent that issue. #404

[thebuilder]

@MoOx - In case you haven't noticed, this issue was resolved by react-native-web in necolas/react-native-web#1746