{"id":17869521,"url":"https://github.com/amsul/react-performance","last_synced_at":"2025-04-06T12:09:23.257Z","repository":{"id":57342402,"uuid":"113941768","full_name":"amsul/react-performance","owner":"amsul","description":"Helpers to debug and record component render performance 🚀","archived":false,"fork":false,"pushed_at":"2018-08-23T16:40:45.000Z","size":754,"stargazers_count":267,"open_issues_count":5,"forks_count":12,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-30T10:07:58.902Z","etag":null,"topics":["perf","performance","react","react-native","redux"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/amsul.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-12-12T04:07:09.000Z","updated_at":"2024-05-27T16:17:54.000Z","dependencies_parsed_at":"2022-09-16T02:50:15.041Z","dependency_job_id":null,"html_url":"https://github.com/amsul/react-performance","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amsul%2Freact-performance","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amsul%2Freact-performance/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amsul%2Freact-performance/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amsul%2Freact-performance/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/amsul","download_url":"https://codeload.github.com/amsul/react-performance/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247478323,"owners_count":20945266,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["perf","performance","react","react-native","redux"],"created_at":"2024-10-28T10:06:15.500Z","updated_at":"2025-04-06T12:09:23.229Z","avatar_url":"https://github.com/amsul.png","language":"JavaScript","readme":"# React Performance 🚀\n\nHelpers to debug and record component render performance\n\nWith the release of React Fiber in v16, `react-addons-perf` has officially become obsolete. This project aims to be a \"close enough\" alternate solution.\n\n#### Logs\n\n![](docs/renders.png)\n\n#### Reports\n\n![](docs/report.png)\n\n#### Timing\n\n![](docs/timing.png)\n\n\u003cbr /\u003e\n\n## Installation\n\n- [Yarn](https://yarnpkg.com): `yarn add react-performance`\n- [npm](https://www.npmjs.com): `npm install react-performance`\n\n\u003cbr /\u003e\n\n## Usage\n\n```js\nimport ReactPerformance from 'react-performance'\n```\n\nYou can also choose to import selectively:\n\n```js\nimport { measure, startRecording, printRecording } from 'react-performance'\n```\n\nNOTE: In a production environment, `ReactPerformance` disables itself.\n\n### Measure\n\nTo measure the rendering of a component, wrap it with the `measure` HOC:\n\n```js\nclass MyComponent extends React.Component {/* ... */}\n\nexport default ReactPerformance.measure({\n  getId: 'some_recognizable_identifier',\n  Component: MyComponent,\n  isCollapsed: false,\n})\n```\n\nThat's it. Now logs will print every time the component renders.\n\nIf you use Redux, read the section below on how to [Use with Redux](#use-with-redux).\n\n##### Options:\n\n- `getId` is a string or function that helps you uniquely identify each component being rendered in the logs.\n  - As a string, if it is a key of the component's `props`, the key and value are both used. Otherwise it is used as a static value.\n  - As a function, it receives `props` and returns a string.\n- `isCollapsed` is `true` by default.\n  - This collapses the duration \u0026 diff logs when a component renders.\n\n### Record\n\nTo generate reports, start recording data by running:\n\n```js\nReactPerformance.startRecording()\n```\n\nAnd then print out the report by running:\n\n```js\nReactPerformance.printRecording()\n```\n\nThis prints out a report on all the components being measured.\n\n### Use with Redux\n\n#### `connect`\n\nOnly \"smart\" components should be measured since those are typically the components that respond to state changes (and usually the only components that significantly impact performance).\n\nWith the assumption that any data passed down to components is encapsulated in a top-level state, the most appropriate way to use this with Redux is to use `ReactPerformance.connect`:\n\n```js\nclass MyComponent extends React.Component {/* ... */}\n\nexport default ReactPerformance.connect({\n  mapStateToProps,\n  mapDispatchToProps,\n  getId: 'some_recognizable_identifier',\n  Component: MyComponent,\n})\n```\n\nThis is equivalent to `ReactPerformance.measure` - except it also connects the component to the Redux store.\n\n#### `createStore`\n\nTo get measurements on the full duration across all component renders triggered by dispatching actions, a middleware is provided to create the store:\n\n```js\nconst enhancer = redux.compose(\n  // ...All other middleware first\n  // This must be the last one!\n  ReactPerformance.createNotifier(),\n)\nconst store = redux.createStore(rootReducer, enhancer)\n```\n\nThis will log measurements in batches of rerenders caused by updates to the store:\n\n![](docs/notifying.png)\n\n\u003cbr /\u003e\n\n---\n\n## Contributing \u0026 Testing\n\nPRs to improve this library are always welcome, but please make sure to test your changes locally before submitting, and to be consistent with the coding style.\n\nTo test your changes you have to do the following:\n\n1. run `yarn develop` in the root directory, to start a watch process that compiles `lib` to `dist`\n1. `cd` into the `examples` folder and run `yarn \u0026\u0026 yarn start` to start the `react-create-app` server\n\nNow you can test your changes at `http://localhost:3000/`\n\n---\n\n© 2017 [Amsul](http://twitter.com/amsul_)\n\nLicensed under [MIT](http://amsul.ca/MIT)\n","funding_links":[],"categories":["📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famsul%2Freact-performance","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famsul%2Freact-performance","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famsul%2Freact-performance/lists"}