Need help with react-perf-tool?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

RamonGebben
421 Stars 19 Forks ISC License 39 Commits 0 Opened issues

Description

[Deprecated] Debug performance of your React application

Services available

!
?

Need anything else?

Contributors list

# 310,181
HTML
React
CSS
sms
6 commits
# 29,453
Electro...
bash-pr...
bash-ha...
Bash
2 commits
# 5,460
yml
lisp-in...
imagema...
curry
1 commit
# 6,770
React
libgit2
js
Electro...
1 commit
# 621,496
JavaScr...
CSS
1 commit
# 69,893
React
React N...
TypeScr...
webpack...
1 commit

Deprecated 😞

As of React 16, react-addons-perf is not supported. Please use your browser’s profiling tools to get insight into which components re-render.

For examples on how to use browsers profiler for performance testing check the React Docs

ReactPerfTool

Package Quality Build Status Gitter npm version license

ReactPerfTool tries to give you a more visual way of debugging performance of your React application. It does this by using the addons delivered by the React team and community to get measurements and visualize this using graphs. This makes it easier to spot bottlenecks.

screenshot

Usage

npm i react-perf-tool react-addons-perf -D
import ReactPerfTool from 'react-perf-tool';
import Perf from 'react-addons-perf';

// Import styles if they don't get loaded already import 'react-perf-tool/lib/styles.css';

export default function YourApp(props) { return (

{/*...yourApp */}
); }

Contributing

If you want to contribute just fork the project and start working on one of the open issues or on your own ideas. When you are done you can open a pull request.

Code style

The project uses a trimmed down version of the Airbnb Javascript styleguide, and can be checked by running:

npm run lint

Testing

For testing the project uses Mocha and Chai. For testing of components the project uses Enzyme.

TL;DR

  • npm run build
    - produces production build
  • npm run dev
    - start webpack watch
  • npm run test
    - runs the tests and lints
    • npm run lint
      - lints all the code
    • npm run test:unit
      - run only the unit tests
    • npm run test:component
      - run only the component tests

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.