https://github.com/mfrachet/rn-render-perfs

:zap: :cyclone: Measure React rendering lifecycles using controls
https://github.com/mfrachet/rn-render-perfs

Last synced: 4 months ago
JSON representation

:zap: :cyclone: Measure React rendering lifecycles using controls

• Host: GitHub
• URL: https://github.com/mfrachet/rn-render-perfs
• Owner: mfrachet
• Archived: true
• Created: 2017-11-03T06:38:37.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2017-11-10T17:13:34.000Z (about 8 years ago)
• Last Synced: 2024-08-15T00:20:08.155Z (over 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 99.6 KB
• Stars: 42
• Watchers: 2
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-react-native - rn-render-perfs ★40 - Measure React rendering lifecycles using UI controls (Components / UI)
• awesome-reactnative-ui - rn-render-perfs
• awesome-react-native - rn-render-perfs ★40 - Measure React rendering lifecycles using UI controls (Components / UI)
• awesome-react-native - rn-render-perfs ★40 - Measure React rendering lifecycles using UI controls (Components / UI)
• awesome-react-native - rn-render-perfs ★40 - Measure React rendering lifecycles using UI controls (Components / UI)
• awesome-reactnative-ui - rn-render-perfs
• fucking-awesome-react-native - rn-render-perfs ★40 - Measure React rendering lifecycles using UI controls (Components / UI)

README

          
[![Build Status](https://travis-ci.org/mfrachet/rn-render-perfs.svg?branch=master)](https://travis-ci.org/mfrachet/rn-render-perfs)

[![Coverage Status](https://coveralls.io/repos/github/mfrachet/rn-render-perfs/badge.svg?branch=master)](https://coveralls.io/github/mfrachet/rn-render-perfs?branch=master)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

Measure React rendering lifecycles using controls using a simple component

---



---

### Installation

```

$ yarn add -D rn-render-perfs

```

### In your code

```javascript

import RnRenderPerfs from 'rn-render-perfs';

import Perf from 'ReactPerf';

export default function App() {

  return (

      

        

        

      

  );

};

```

You can pass any kind of `Perf` module inside `monitor` props that implements :

- `start`: Function

- `stop`: Function

- `printWasted`: Function

- `printInclusive`: Function

- `printExclusive`: Function

- `printOperations`: Function

### What can I expect from this module ?

This module is a simple wrapper allowing to call `Perf` modules using the same API as the `react-addons-perfs` one.

With the previous code example, you can access to these information (from [react-addons-perfs doc](https://reactjs.org/docs/perf.html)) :

- `Print wasted`: “Wasted” time is spent on components that didn’t actually render anything

- `Print Inclusive`: Print the overall time taken by React

- `Print Exclusive`: “Exclusive” times don’t include the times taken to mount the components: processing props, calling componentWillMount and componentDidMount, etc.

- `Print operations`: Prints the underlying manipulations

--- 

*With the help of [@flepretre](https://github.com/flepretre) & [@kennydee](https://github.com/kennydee)*