// In-app developer menu
// Shake device or press Cmd+D (iOS) / Cmd+M (Android)
// Select "Show Performance Monitor"

npm install -g react-devtools

import React, { Profiler } from 'react';

function onRenderCallback(
  id, // the "id" prop of the Profiler tree that has just committed
  phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered)
  actualDuration, // time spent rendering the committed update
  baseDuration, // estimated time to render the entire subtree without memoization
  startTime, // when React began rendering this update
  commitTime, // when React committed this update
  interactions // the Set of interactions belonging to this update
) {
  console.log(`${id} (${phase}) took ${actualDuration}ms`);
  
  if (actualDuration > 16) {
    console.warn(`${id} exceeded 16ms frame budget!`);
  }
}

const App = () => (
  <Profiler id="App" onRender={onRenderCallback}>
    <NavigationContainer>
      <MainNavigator />
    </NavigationContainer>
  </Profiler>
);

import { performance } from 'react-native';

// Mark points in time
performance.mark('fetch-start');
await fetchData();
performance.mark('fetch-end');

// Measure duration between marks
performance.measure('data-fetch', 'fetch-start', 'fetch-end');

// Get measurements
const measures = performance.getEntriesByType('measure');
measures.forEach(measure => {
  console.log(`${measure.name}: ${measure.duration}ms`);
});

import { PerformanceObserver } from 'react-native';

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(`${entry.name}: ${entry.duration}ms`);
    
    // Log slow operations
    if (entry.duration > 100) {
      console.warn('Slow operation detected:', entry);
    }
  });
});

// Observe all measure entries
observer.observe({ entryTypes: ['measure'] });

// Cleanup
observer.disconnect();

// Enable Hermes profiling
const Hermes = require('hermes-engine');

// Start profiling
Hermes.samplingProfiler.enable();

// Your code here
expensiveOperation();

// Stop profiling and get profile
const profile = Hermes.samplingProfiler.stop();

// Convert to Chrome format
const chromeProfile = Hermes.samplingProfiler.dumpSampledTraceToFile();
console.log('Profile saved:', chromeProfile);

npx react-native profile-hermes [profile-file]

# Record 5-second trace
python $ANDROID_HOME/platform-tools/systrace/systrace.py \
  --time=5 \
  -o trace.html \
  sched gfx view wm am dalvik input

// Add to Android code
import android.os.Debug

Debug.startMethodTracing("MyApp")
// Code to profile
Debug.stopMethodTracing()

// Pull trace file
// adb pull /sdcard/Android/data/com.yourapp/files/MyApp.trace

// Add to iOS code for manual instrumentation
#import <os/signpost.h>

os_log_t log = os_log_create("com.yourapp", "Performance");
os_signpost_id_t spid = os_signpost_id_generate(log);

os_signpost_interval_begin(log, spid, "ExpensiveOperation");
// Code to profile
os_signpost_interval_end(log, spid, "ExpensiveOperation");

npm install @welldone-software/why-did-you-render

// wdyr.js
import React from 'react';

if (__DEV__) {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React, {
    trackAllPureComponents: true,
    trackHooks: true,
    logOwnerReasons: true,
  });
}

// index.js
import './wdyr'; // Must be first
import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('MyApp', () => App);

import React, { memo } from 'react';

const MyComponent = memo(
  ({ data }) => {
    console.log('MyComponent rendered');
    return <View>{data}</View>;
  },
  (prevProps, nextProps) => {
    // Return true if props are equal (skip render)
    const areEqual = prevProps.data === nextProps.data;
    if (!areEqual) {
      console.log('Re-rendering due to data change');
    }
    return areEqual;
  }
);

import { InteractionManager } from 'react-native';

class FrameMonitor {
  constructor() {
    this.frameCount = 0;
    this.lastTime = Date.now();
    this.requestAnimationFrame = this.requestAnimationFrame.bind(this);
  }
  
  start() {
    this.handle = requestAnimationFrame(this.requestAnimationFrame);
  }
  
  requestAnimationFrame() {
    this.frameCount++;
    const now = Date.now();
    const elapsed = now - this.lastTime;
    
    if (elapsed >= 1000) {
      const fps = (this.frameCount / elapsed) * 1000;
      console.log(`FPS: ${fps.toFixed(2)}`);
      
      if (fps < 55) {
        console.warn('Frame rate dropped below 55 FPS!');
      }
      
      this.frameCount = 0;
      this.lastTime = now;
    }
    
    this.handle = requestAnimationFrame(this.requestAnimationFrame);
  }
  
  stop() {
    cancelAnimationFrame(this.handle);
  }
}

const monitor = new FrameMonitor();
monitor.start();

import { NativeModules } from 'react-native';

const getMemoryInfo = () => {
  if (__DEV__) {
    const { performance } = require('react-native');
    if (performance.memory) {
      return {
        usedJSHeapSize: performance.memory.usedJSHeapSize,
        totalJSHeapSize: performance.memory.totalJSHeapSize,
        jsHeapSizeLimit: performance.memory.jsHeapSizeLimit,
      };
    }
  }
  return null;
};

// Log memory periodically
setInterval(() => {
  const memory = getMemoryInfo();
  if (memory) {
    const usedMB = (memory.usedJSHeapSize / 1024 / 1024).toFixed(2);
    const totalMB = (memory.totalJSHeapSize / 1024 / 1024).toFixed(2);
    console.log(`Memory: ${usedMB}MB / ${totalMB}MB`);
  }
}, 5000);

import React, { useEffect, useRef } from 'react';

const MyComponent = () => {
  const intervalRef = useRef(null);
  
  useEffect(() => {
    // Good: cleanup on unmount
    intervalRef.current = setInterval(() => {
      console.log('Interval running');
    }, 1000);
    
    return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
      }
    };
  }, []);
  
  return <View />;
};

import { XMLHttpRequest } from 'react-native';

const originalOpen = XMLHttpRequest.prototype.open;
const originalSend = XMLHttpRequest.prototype.send;

XMLHttpRequest.prototype.open = function(method, url) {
  this._startTime = Date.now();
  this._url = url;
  this._method = method;
  return originalOpen.apply(this, arguments);
};

XMLHttpRequest.prototype.send = function() {
  this.addEventListener('load', function() {
    const duration = Date.now() - this._startTime;
    console.log(`${this._method} ${this._url}: ${duration}ms`);
  });
  return originalSend.apply(this, arguments);
};