🐌 Performance troubleshooting

Question

Hi! I’m currently using a library called react-native-bigheads that uses react-native-svg for rendering. The library renders some complex vectors, but it shouldn’t be too much to handle.

My problem is, that the library renders really slow. I’m talking about noticeable delay in initial rendering (mounting) (see this demo), and generally really slow renders on re-rendering when a prop changes (see this demo).

I am trying to debug why this renders so slow, as normally vector rendering should be really fast. Now to my actual question(s):

1. What could possibly be the cause of those incredibly slow renders?
2. How can I debug/perf-measure this?
3. What do I generally have to look out for when using vectors? Stuff like “don’t use a lot of clipping, that’s really slow”

More info

• The main component that renders all other child SVG components is Base.tsx
• All other components are in this folder
• Component renderers are stored as variables in maps (like a table lookup)

All kinds of help appreciated 👍

[mrousavy]

@angadp I’m not having re-render issues. React.memo only prevents unnecessary re-renders, but in my case the actual render times are slow.

[mrousavy]

I just did most of it natively.