Performance: memoization

[andreialecu]

Hi again.

While fixing the other issue yesterday, it got me thinking that trying to determine which font to use in each render might not be super efficient.

I decided to take a look at it from a performance perspective, here are my findings.

It appears that on an Oppo A72 Android device, it takes about 1ms to execute the logic in the overridden render function. Now, if there are 16 Text nodes on the screen, that's already 16 ms, so a dropped frame.

If however I add some memoization, it drops to 0.1ms most of the time, which is a 10x improvement:

I'll open a PR shortly with this for your consideration

[andreialecu]

Actually my second screenshot is wrong, it's fast because the useMemo is missing a dependency on element.

But I have further narrowed down the timing, and it's actually generateOverrideStyle that takes 1+ms each time.

Since it only works with fontFamily, fontWeight, and fontStyle and those will be fairly static, it should be possible to cache the result.

[mthines]

Just FYI: @andreialecu I also experienced bad performance using this library, thought it was waay to big for the task, so I've created my own library.

https://www.npmjs.com/package/@mthines/react-native-font-face
https://github.com/mthines/react-native-font-face

[kylerjensen]

@andreialecu Thanks for doing the research on this. I don't have the bandwidth to look into this right now, but I'm happy to accept a PR.