🐌 Performance troubleshooting

[mrousavy]

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 👍

[angadp]

Try React.memo Worked for me.

[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.

[bigmistqke]

@mrousavy did u figure out a solution for spawning svg's in react-native?

[karims10]

@mrousavy any update on this ?

[mrousavy]

I just did most of it natively.

[adamgins]

I just did most of it natively.

are you saying you stopped using the package and did your own thing?