Performance question

[gdborton]

Hello!

Is there any documentation around how to achieve the best absolute performance out of ink?

I'm rendering an audio visualizer, which needs to update many times a second.

Things I've already done to improve performance:

• limit visualizer to 20 rows
• return a single component, managing each line as a string manually
• color output at the line level instead of character level, memoize the styler based on max lines
• Trim space character from end of lines (this was huge, should characters/lines that don't change still add to render time)

You can see the space characters that were rendered as they're in color as opposed to gray. Could I use margin or padding to remove these? Would that help render performance?

I also tried memoizing each character of the visualizer, I was hoping that the high/low values wouldn't change much and this would prevent renders, but seems to have made things worse.

I haven't measured the attempted fps, but I'm guessing it's 60+.

Here is the Spectrum component:
https://github.com/gdborton/those-cheeks/blob/master/source/Spectrum.tsx#L57

[tom-sherman]

Note that Ink has a locked refresh rate of 30fps. I've opened a separate discussion about this here: #657