Skip to content

TheGnarCo/compare-components

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

51 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

This project was bootstrapped with Create React App.

This was to test the general performance structure of React.Component, React.PureComponent, Functional Stateless Components (FSCs) and React.memoized FSCs.

Users can toggle various settings in a terribly built UI to compare rendering times in a way that possibly reflects regular production environments:

  • Toggle the number of props: More props mean pure/memoized components take more time to do shallow comparisons
  • Toggle the number of components rendered
  • Toggle the complexity of components: in an arbitrary way to see when the benefit of avoiding render complexity overcomes the time taken to shallow compare props
  • Toggle the purity and functional-ness of components
  • Toggle whether components receive the same props on successive renders or if a passed prop is mutated to trigger re-renders in pure/memoized components

Just clone, install with yarn or npm, and run yarn start or npm start to mess around. If you want more reliable data, do yarn build or npm build and then host the result using https://www.npmjs.com/package/serve or python simple HTTP server or whatever you'd like.

TODO

Comments Breaking components into separate files

About

For comparing functional and pure components

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •