Dev Standards
  • Untitled
  • project-standards
    • project-success
      • index
      • production.s
    • taking-over-project
      • index
      • migrate-to-new-ios-certificates.mo
    • technical-agility
      • react-native-test.s
      • code-vocabulary-identical-business-vocabulary.s
      • under-15-minutes-project-installation.s
      • index
      • up-to-date-dependencies.s
  • react-native
    • react
      • get-element-size-or-position-with-onLayout.mo
      • binding-functions-in-react-component.s
      • enable-overflow-android.mo
    • setup
      • setup-code-push.mo
      • setup-facebook-login.mo
      • setup-and-deploy-new-project-to-staging.mo
      • add-cocoapods.mo
      • deploy-script.mo
      • setup-and-deploy-new-project-to-staging-with-hockeyapp.mo
      • add-native-module.mo
      • setup_firebase_multiple_envs.mo
      • remove-unnecessary-android-permissions.mo
      • deploy-to-production-android.mo
      • deploy-project-to-production
      • overriding-existing-app.s
      • patch-react-native-android.mo
      • setup-stripe-dev-standard.mo
    • features
      • icomoon.mo
      • lock-device-orientation.mo
      • clean-logout.s
      • deep-linking
      • offline-redux.mo
      • asyncstorage.mo
      • offline-mobx.mo
    • debugging
      • analyse-bug.mo
      • debug-network-calls.mo
      • debug-javascript-ios-device.mo
      • get-ios-logs.mo
      • debug-javascript.mo
      • handle-gradle-dependencies-clash.mo
      • debug-native-ios.mo
      • debug-two-ios-apps-simultaneously.mo
      • debug-native-android.mo
      • debug-webviews.mo
    • firebase
      • debug-events.mo
    • architecture
      • project-architecture.s
      • default-stack.s
      • file-naming.s
    • update
      • upgrade-react-native.mo
    • tests
      • setup-detox-jest.mo
    • use_http_links_in_react_native.mo
    • react-navigation
      • unmount-compoenent-on-page-change.mo
    • package-dependencies
      • handle-dependencies-with-yarn-override.mo
    • animations
      • react-native-animations.s
  • successful-sprint
    • coding
      • plan-your-ticket-to-improve-efficency.s
  • code-quality
    • components-state-testing.mo
    • mock-with-jest.mo
    • pull-request-template.s
    • pull_request_template
    • test-files-indentation.s
  • security
    • import_certificates_match.mo
    • 2FA.mo
  • contributing
    • contributing.mo
    • mo.s
    • standard.s
  • backend
    • graphql-js
      • getting-started-with-apollo-server-dataloader-knex.mo
    • node-js
      • handle-errors-and-exceptions-in-javascript.s
      • add-multiple-environments-configuration-on-loopback.s
    • django
      • deploy-to-aws.mo
      • create-user-model.mo
      • getting-started.mo
      • create-model-and-api.mo
  • performance
    • backend
      • cache-routes-using-varnish.mo
      • serve-images-as-static-files.mo
      • minimize-number-sql-queries.mo
      • python-investigation-tools.mo
      • how-to-investigate-performance.mo
      • output-sql-alchemy-orm-query.mo
    • front
      • how-to-investigate-performance.mo
      • table-and-chart-with-good-performance.mo
      • react-native-performance.s
      • simulate-network-iphone.mo
    • performance-decision-flow.s
  • git
    • merge-or-rebase-a-branch
  • editors
    • vscode
      • setup-vscode.mo
  • ops
    • docker
      • deploy-with-https.mo
  • templates
    • mo
  • react
    • redux
      • custom-redux-form-field.mo
      • pass-props-to-container.mo
    • component.s
    • lifecycle
      • trigger-action-on-props-update.mo
  • flowtype
    • flowtype.s
  • LICENCE
  • README
  • scrum
    • timebox.s
  • SUMMARY
Powered by GitBook
On this page
  • Owner: Louis Lagrange
  • Why
  • Steps
  • Profile
  • Useful links
  1. performance
  2. front

how-to-investigate-performance.mo

PreviousfrontNexttable-and-chart-with-good-performance.mo

Last updated 6 years ago

Owner:

Why

Sometimes, standards are not enough, or you're not applying them, resulting in performance bottlenecks.

Steps

Proceed by dichotomy: cut your app in multiple pieces in order to find out where the problem comes from. For example, literally remove some components or pages!

Profile

Measure the performance with the following tools. They're ordered by simplicity * perspectives of learnings.

  • Put some console.count('my component') in your components' render methods in order to measure the number of renders

  • In app Performance monitor (CMD+D on iOS, CTRL+M on Android; and select Performance monitor)

  • Network profiler => if some calls are too long, investigate backend performance (TODO link to backend performance standard)

  • Close React Native Debugger and open the Chrome debugger. Click on the performance tab and hit record to start profiling the performance of your application. See to learn how to read the output.

  • Native tools (Android Studio, XCode)

  • Inspect the JS<->native bridge with

Useful links

React Native doc:

Example commit:

Louis Lagrange
React.unstable_Profiler
this article
https://facebook.github.io/react-native/docs/performance.html#profiling
RN-Snoopy
https://facebook.github.io/react-native/docs/performance.html
https://github.com/Minishlink/DailyScrum/commit/3c6d5f70a638a146f1a2158b94292010eb12186a