React-native-web: [performance] onLayout keeps getting changed even if nothing changes since 0.13

[RichardLindhout]

The problem
I did have some performance problems in my app. I found out that onLayout is called repeatedly even if nothing changes

How to reproduce
https://codesandbox.io/s/cool-nobel-kgc6c?file=/src/App.js:0-1694

Expected behaviour
If you run the exact same code https://snack.expo.io/ you can see on Android / iOS it's only rendered once. (also on the web but maybe an older version of react-native-web?

I think onLayout should not called if nothing has changed on the previous layout. I know we can do this in our own code but I think we should handle it the same way React Native does because some libraries will except this behaviour and it could result in performance issues.

Environment (include versions). Did this work in previous versions?

• React Native for Web (version): 0.13.5
• React (version): 16.13.1
• Browser: Chrome

It does work in version 0.12.3

[necolas]

That's because in your demo you are calling setState in the layout handler, which triggers re-ender, but your onLayout function is defined inline and gets recreated each render, which causes the layout effect to re-run, which calls onLayout, which calls setState, etc. Problem goes away if you wrap your onLayout function in a useCallback

[necolas]

Might be able to avoid needing useCallback wrapper changes if I split up the layout effect into 2 parts, with the node not being added/removed from the observer when the onLayout callback changes.

[RichardLindhout]

Ah that fixes it, but on React Native itself it is called only once with the same code so it could result in some potential issues with libraries who don't know their onLayout is being called in the background

[necolas]

This should be fixed in 0.13.8