• Stars
    star
    363
  • Rank 117,374 (Top 3 %)
  • Language
    JavaScript
  • Created over 4 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

React Native Performance Monitor - Realtime graphing of React Native render performance

React Native Performance Monitor

This project lets you see a realtime graph of render times within your React Native app. The purpose is for you to be able to create experiments (i.e. change markup and see how it affects render times).

Installation

npm i react-native-performance-monitor --save
npx react-native-performance-monitor get

Usage

import withPerformanceMonitor from 'react-native-performance-monitor/provider';
export default withPerformanceMonitor({WrappedComponent: YourScreen, id: 'Screen Name'});

An example

Set your baseline at http://127.0.0.1:8125/ by clicking remount. Pause the recorder, and adjust your component with what you think will improve performance.

Here's a before and after with this approach

Baseline

<Text style={[this.props.style]}>
    {this.props.children}
</Text>

Improved

<Text style={this.props.style}>
    {this.props.children}
</Text>

With this before and after I observed the following within a large flat list.

Connecting to a real device

In order to connect to a real device you will need to set the IP of your computer, for example:

export default withPerformanceMonitor({ WrappedComponent: AwesomeChat, id: 'AwesomeChat', ip: '192.168.1.10'});

By default the server is listening on port 8125 for event updates and 8126 for websocket. If you need to configure the port, because you are tunneling your request or similar, and or disable the Websocket communication, you can do it like this:

export default withPerformanceMonitor({WrappedComponent: AwesomeChat, id: 'AwesomeChat', ip: '192.168.1.10', events: undefined, showLogs: undefined, port: 80, enableWS: false});

How it works

The overall implementation is quite straight forward and simply involved passing the onRenderCallback values via a websocket server to finally render them in a fancy graph.

There are 3 main components:

  • A React Native component that sends profile data to a server via REST and listens to messages (remount and forceUpdate) to trigger renders.
  • A Web socket server responsible for passing messages between the graph and the react native component
  • A Web application that receives websocket values and renders them to a graph

The following diagram is a brief explanation of the data flow:

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Useful links

Website

Documentation

More Repositories

1

flagsmith

Open Source Feature Flagging and Remote Config Service. Host on-prem or use our hosted version at https://flagsmith.com/
Python
4,775
star
2

self-hosted

Create an entire Flagsmith environment locally
115
star
3

flagsmith-frontend

Web App and Mobile App for Flagsmith
95
star
4

nextjs-redux

A heavily audited, performant starter project for nextjs with Redux
JavaScript
66
star
5

flagsmith-js-client

Javascript Client for Flagsmith. Ship features with confidence using feature flags and remote config. Host yourself or use our hosted version at https://www.flagsmith.com/
TypeScript
60
star
6

flagsmith-docs

This is the documentation repository for the Docs of Flagsmith. Ship features with confidence using feature flags and remote config. Host yourself or use our hosted version at https://www.flagsmith.com/
JavaScript
37
star
7

flagsmith-charts

Helm Charts for Flagsmith. Feature flagging and remote config service. Host yourself or use our hosted version.
Mustache
36
star
8

flagsmith-nodejs-client

Flagsmith Node JS Client. Flagsmith lets you manage features flags across web, mobile and server side applications. Get builds out faster. Control who has access to new features.
TypeScript
25
star
9

flagsmith-java-client

Java Client for Flagsmith. Ship features with confidence using feature flags and remote config. Host yourself or use our hosted version at https://www.flagsmith.com/
Java
21
star
10

flagsmith-python-client

Flagsmith Python Client. Flagsmith lets you manage features flags across web, mobile and server side applications. Get builds out faster. Control who has access to new features.
Python
20
star
11

flagsmith-rules-engine

Evaluate objects against a set of JSON rules supporting nested ALL, NONE and ANY predicates with standard operators
JavaScript
19
star
12

flagsmith-dotnet-client

.NET Standard Client for Flagsmith. Ship features with confidence using feature flags and remote config. Host yourself or use our hosted version at https://www.flagsmith.com/
C#
19
star
13

flagsmith-php-client

PHP Client for Flagsmith. Ship features with confidence using feature flags and remote config. Host yourself or use our hosted version at https://www.flagsmith.com/
PHP
17
star
14

flagsmith-ios-client

iOS Client written in Swift for Flagsmith. Ship features with confidence using feature flags and remote config. Host yourself or use our hosted version at https://www.flagsmith.com/
Swift
16
star
15

flagsmith-flutter-client

Flutter Client for Flagsmith. Ship features with confidence using feature flags and remote config. Host yourself or use our hosted version at https://www.flagsmith.com/
Dart
15
star
16

flagsmith-go-client

Flagsmith Golang Client
Go
13
star
17

react-navigation-focus-render

Wrapping components in this will ensure that they are only rendered when the screen is focused
TypeScript
12
star
18

flagsmith-ruby-client

Ruby Client for Flagsmith. Ship features with confidence using feature flags and remote config. Host yourself or use our hosted version at https://www.flagsmith.com/
Ruby
11
star
19

flagsmith-engine

This project powers the core Flagsmith API flag evaluations engine.
Python
10
star
20

flagsmith-elixir-client

Elixir Client for Flagsmith. Ship features with confidence using feature flags and remote config. Host yourself or use our hosted version at https://www.flagsmith.com/
Elixir
8
star
21

flagsmith-rust-client

Flagsmith Rust Client
Rust
6
star
22

flagsmith-website

The code for the flagsmith public site
JavaScript
6
star
23

terraform-examples

Examples for cloud-specific Flagsmith deployments using Terraform
HCL
6
star
24

terraform-provider-flagsmith

Flagsmith Terraform Provider
Go
5
star
25

flagsmith-cli

A CLI to fetch and output your Flagsmith features to a file
TypeScript
4
star
26

flagsmith-realtime-example

Flagsmith Realtime demo with SSE
JavaScript
4
star
27

flagsmith-kotlin-android-client

Kotlin based client for using Flagsmith in Android applications
Kotlin
4
star
28

edge-proxy

The Flagsmith Edge Proxy Docker Image
Python
3
star
29

flagsmith-js-examples

Examples for using the Flagsmith Javascript SDK with various frameworks
TypeScript
3
star
30

technical-tests

For hiring!
Python
2
star
31

demo-html

Shop demo
HTML
1
star
32

flagsmith-jira-integration

Jira integration for Flagsmith
TypeScript
1
star
33

flagsmith-openfeature-provider-python

Flagsmith OpenFeature provider for the python SDK
Python
1
star
34

flagsmith-tutorial

JavaScript
1
star
35

flagsmith-rust-flag-engine

Flag Engine implementation in Rust
Rust
1
star
36

issue-152-replication

Replicating https://github.com/Flagsmith/flagsmith-js-client/issues/152
TypeScript
1
star
37

flagsmith-kotlin-client

Kotlin Client for Flagsmith. Ship features with confidence using feature flags and remote config. Host yourself or use our hosted version at https://www.flagsmith.com/
Kotlin
1
star
38

flagsmith-homepage

The homepage and supplementary pages to https://www.flagsmith.com/
JavaScript
1
star