Render Performance Benchmark

styled-componentsyak

This benchmark renders 2500 Kanji characters with different components. The code is the same except for the import statement.

In addition there are buttons which allow triggering different rendering scenarios:

  1. Change the css variable on the wrapper
  2. Change the color to 1 of 3 predefined values
  3. Change the color to 1 of 3 predefined values inside a @media query
  4. Change the rotation to a custom value
  5. Change the rotation to a custom value inside a @media query
  6. Change the class name on the wrapper