Best Practices

[Bayramito]

I have some questions related the @william-candillon's YT videos.

-What is the correct component for shadowing for a screen with multiple usages ? BoxShadow or Shadow?
-Is it a good practice at all rendering multiple canvas component in the same screen? OR making a shared component and using it multiple times, like in a list view ?
-What about memoization ? Let's say I created a component with some complex drawings in it and it is reusable, if I memoize it with memo while exporting, will this affect my performans or totally a bad idea ?

[chrfalch]

I think the BoxShadow is a fast way to render rects or rounded rects with shadows, while the Shadow component gives more control over the shadows. (correct me if I'm wrong, @wcandillon :) )

Regarding best practices for canvases and memoization, the Canvas renders using a native implementation in C++ which means that as long as your drawing changes comes from Skia animations and not from changes in React props / state it should be all the same. The React renderer doesn't even do anything after it has passed the DOM tree down to the native renderer. Using memo here will simply not make any difference. Using React props / state to update the drawing should be done carefully and you should always consider if Skia values can be used since they will be faster.

Remember that changing a Skia value that is used in a Canvas based component will redraw and update the drawing directly from the native side.

[wcandillon]

About the BoxShadow it is much faster for inner shadows, for drop shadows we think that the performance is equivalent.
Inner shadows on any shape (text, path, etc) is quite "slow" (if used intensively).