The performance of styled React components

Performance tests of some styling packages for React.

You can read about the perofrmance tests at http://blog.primehammer.com/2017/09/27/the-performance-of-styled-react-components/.

The following libraries were tested: styled-components, glamorous, radium and css, sass and inline styles.

Awailable scripts

In the main directory you can run following scripts. Make sure you run npm install after cloning this repository.

npm run build

To create a production builds for app testing packages.

npm run test:paint -- --library=*library_name*

To test the First meaningful paint with chrome and lighthouse.

Instead of *library_name* you can write any of: css, sass, inline, styled-components, glamorous and radium to start the test.

You can also use an option --repeat-times=50 to run the tests 50 times. By default the test will run 100 times and it may take a long time.

If you are receiving error ERR_FILE_NOT_FOUND make sure you have created your builds and not misspeled the library name.

When the test finishes you can see the results in the directory ./results.

React scripting time test

• Measures the time between componentWillMount and componentDidMount

To run this test you need to create the build, npm run build and open index.html file from the ./src/*package* directory. Add "?measure_render_time" into the url to start the test.

A copy button will appear after the test finishes.

You can also use parameter table_size and repeat_times.

Example: ?table_size=5&repeat_times=5&measure_render_time